feat(ee): bases

Table and kanban UI, formula engine package, and the base-embed editor extension
2026-08-31 02:46:27 +08:00 · 2026-06-14 01:29:06 +01:00
parent d86d51c27e
commit 4e5bff6d55
233 changed files with 22278 additions and 141 deletions
@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { IBaseProperty, IBaseRow } from "@/ee/base/types/base.types";
+import { timeAgo } from "@/lib/time.ts";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+type RowDetailTitleProps = {
+  row: IBaseRow;
+  primaryProperty: IBaseProperty | undefined;
+  canEdit: boolean;
+  onCommit: (value: string) => void;
+};
+
+export function RowDetailTitle({
+  row,
+  primaryProperty,
+  canEdit,
+  onCommit,
+}: RowDetailTitleProps) {
+  const { t } = useTranslation();
+  const initial = primaryProperty
+    ? (((row.cells ?? {})[primaryProperty.id] as string) ?? "")
+    : "";
+  const [value, setValue] = useState(initial);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const didAutofocusRef = useRef(false);
+
+  // Re-sync when the row changes underneath us (navigation or remote edit).
+  useEffect(() => {
+    setValue(initial);
+  }, [initial]);
+
+  useEffect(() => {
+    if (didAutofocusRef.current || !canEdit || initial) return;
+    didAutofocusRef.current = true;
+    inputRef.current?.focus();
+  }, [canEdit, initial]);
+
+  const updatedAgo = row.updatedAt ? timeAgo(new Date(row.updatedAt)) : "";
+
+  return (
+    <header className={classes.header}>
+      {canEdit ? (
+        <input
+          ref={inputRef}
+          type="text"
+          className={classes.titleInput}
+          placeholder={t("Untitled")}
+          aria-label={primaryProperty?.name ?? t("Untitled")}
+          value={value}
+          maxLength={1000}
+          onChange={(e) => setValue(e.currentTarget.value)}
+          onBlur={() => {
+            if (value !== initial) onCommit(value);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              (e.currentTarget as HTMLInputElement).blur();
+            }
+          }}
+        />
+      ) : (
+        <h1 className={classes.titleStatic}>{value || t("Untitled")}</h1>
+      )}
+      {updatedAgo && (
+        <div className={classes.metaRow}>
+          <span>{t("Updated {{when}}", { when: updatedAgo })}</span>
+        </div>
+      )}
+    </header>
+  );
+}