@arronqzy/react-view 1.0.3 → 1.0.7

package/src/panel/components/table/ConditionEditor.tsx

@@ -0,0 +1,205 @@
+import type { Condition, ConditionLeaf, ConditionOp } from "@arronqzy/view-table";
+import {
+  addConditionItem,
+  getConditionLogic,
+  isConditionLeaf,
+  listConditionItems,
+  removeConditionItem,
+  setConditionLogic,
+  updateConditionLeaf,
+  type ConditionLogic,
+} from "@arronqzy/view-table";
+import { useI18n } from "@arronqzy/i18n/react";
+import {
+  Button,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@arronqzy/ui";
+import React from "react";
+
+const CONDITION_OPS: ConditionOp[] = [
+  "eq",
+  "neq",
+  "gt",
+  "gte",
+  "lt",
+  "lte",
+  "contains",
+  "startsWith",
+  "endsWith",
+  "in",
+  "empty",
+  "notEmpty",
+  "regex",
+  "truthy",
+  "falsy",
+];
+
+function leafValueText(value: unknown): string {
+  if (value == null) return "";
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return "";
+  }
+}
+
+function parseLeafValue(text: string): unknown {
+  const trimmed = text.trim();
+  if (trimmed === "") return "";
+  if (trimmed === "true") return true;
+  if (trimmed === "false") return false;
+  if (/^-?\d+(\.\d+)?$/.test(trimmed)) return Number(trimmed);
+  return text;
+}
+
+export function ConditionEditor({
+  value,
+  onChange,
+  showField = false,
+  fieldClass = "space-y-1",
+  inputClass = "h-8 text-[11px]",
+}: {
+  value: Condition | undefined;
+  onChange: (next: Condition) => void;
+  showField?: boolean;
+  fieldClass?: string;
+  inputClass?: string;
+}) {
+  const { t } = useI18n();
+  const logic = getConditionLogic(value);
+  const items = listConditionItems(value);
+
+  const opLabel = (op: ConditionOp) => t(`panel.config.tableOp.${op}`);
+
+  const logicLabel =
+    logic === "or"
+      ? t("panel.config.tableConditionLogicOr")
+      : logic === "not"
+        ? t("panel.config.tableConditionLogicNot")
+        : t("panel.config.tableConditionLogicAnd");
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between gap-2">
+        <label className={`${fieldClass} min-w-0 flex-1`}>
+          <div className="text-[11px] text-muted-foreground">{t("panel.config.tableConditionLogic")}</div>
+          <Select
+            value={logic}
+            onValueChange={(next) => onChange(setConditionLogic(value, next as ConditionLogic))}
+          >
+            <SelectTrigger className={inputClass}>
+              <SelectValue>{logicLabel}</SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="and">{t("panel.config.tableConditionLogicAnd")}</SelectItem>
+              <SelectItem value="or">{t("panel.config.tableConditionLogicOr")}</SelectItem>
+              <SelectItem value="not">{t("panel.config.tableConditionLogicNot")}</SelectItem>
+            </SelectContent>
+          </Select>
+        </label>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="mt-4 h-7 shrink-0 px-2 text-[11px]"
+          onClick={() => onChange(addConditionItem(value))}
+        >
+          {t("panel.config.tableConditionAddItem")}
+        </Button>
+      </div>
+      <div className="text-[10px] text-muted-foreground">{t("panel.config.tableConditionLogicHint")}</div>
+      {items.map((item, index) => {
+        const leaf: ConditionLeaf = isConditionLeaf(item)
+          ? item
+          : { op: "eq", value: "" };
+        const needsValue = !["empty", "notEmpty", "truthy", "falsy"].includes(leaf.op);
+        return (
+          <div
+            key={`cond-${index}`}
+            className="space-y-1.5 rounded-md border border-border/50 bg-background/70 p-2"
+          >
+            <div className="flex items-center justify-between gap-2">
+              <div className="text-[10px] font-medium text-muted-foreground">
+                {t("panel.config.tableConditionItem", { n: index + 1 })}
+              </div>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-6 px-1.5 text-[11px] text-destructive"
+                disabled={items.length <= 1}
+                onClick={() => onChange(removeConditionItem(value, index))}
+              >
+                ×
+              </Button>
+            </div>
+            <div className={`grid grid-cols-1 gap-1.5 ${showField ? "sm:grid-cols-3" : "sm:grid-cols-2"}`}>
+              <label className={fieldClass}>
+                <div className="text-[11px] text-muted-foreground">{t("panel.config.tableConditionOp")}</div>
+                <Select
+                  value={leaf.op}
+                  onValueChange={(next) =>
+                    onChange(updateConditionLeaf(value, index, { op: next as ConditionOp }))
+                  }
+                >
+                  <SelectTrigger className={inputClass}>
+                    <SelectValue>{opLabel(leaf.op)}</SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CONDITION_OPS.map((op) => (
+                      <SelectItem key={op} value={op}>
+                        {opLabel(op)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </label>
+              {showField ? (
+                <label className={fieldClass}>
+                  <div className="text-[11px] text-muted-foreground">{t("panel.config.tableConditionField")}</div>
+                  <Input
+                    value={leaf.field ?? ""}
+                    onChange={(e) =>
+                      onChange(
+                        updateConditionLeaf(value, index, {
+                          field: e.target.value || undefined,
+                        })
+                      )
+                    }
+                    className={inputClass}
+                    placeholder={t("panel.config.tableConditionFieldPlaceholder")}
+                  />
+                </label>
+              ) : null}
+              {needsValue ? (
+                <label className={fieldClass}>
+                  <div className="text-[11px] text-muted-foreground">{t("panel.config.tableConditionValue")}</div>
+                  <Input
+                    value={leafValueText(leaf.value)}
+                    onChange={(e) =>
+                      onChange(
+                        updateConditionLeaf(value, index, {
+                          value: parseLeafValue(e.target.value),
+                        })
+                      )
+                    }
+                    className={inputClass}
+                    placeholder={t("panel.config.tableConditionValuePlaceholder")}
+                  />
+                </label>
+              ) : null}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/panel/components/table/JsonCodeEditor.tsx

@@ -0,0 +1,115 @@
+import React, { useMemo } from "react";
+import { Button } from "@arronqzy/ui";
+import { useI18n } from "@arronqzy/i18n/react";
+import CodeMirror from "@uiw/react-codemirror";
+import { json } from "@codemirror/lang-json";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { EditorView } from "@codemirror/view";
+
+export function JsonCodeEditor({
+  value,
+  onChange,
+  className,
+}: {
+  value: string;
+  onChange: (next: string) => void;
+  className?: string;
+}) {
+  const { t } = useI18n();
+  const extensions = useMemo(
+    () => [
+      json(),
+      EditorView.lineWrapping,
+      EditorView.theme({
+        "&": {
+          height: "100%",
+          maxHeight: "100%",
+          fontSize: "13px",
+          backgroundColor: "transparent",
+        },
+        "&.cm-editor": {
+          height: "100%",
+          maxHeight: "100%",
+          backgroundColor: "transparent",
+        },
+        ".cm-scroller": {
+          overflow: "auto",
+          fontFamily:
+            "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+          lineHeight: "1.55",
+        },
+        ".cm-content": { padding: "8px 0", caretColor: "#e2e8f0" },
+        ".cm-gutters": {
+          backgroundColor: "transparent",
+          borderRight: "1px solid rgba(148,163,184,0.12)",
+          color: "#64748b",
+        },
+        ".cm-activeLineGutter": { backgroundColor: "rgba(148,163,184,0.08)" },
+        ".cm-activeLine": { backgroundColor: "rgba(148,163,184,0.06)" },
+      }),
+    ],
+    []
+  );
+
+  const formatJson = () => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    try {
+      onChange(JSON.stringify(JSON.parse(trimmed), null, 2));
+    } catch {
+      // keep as-is; parent validates on save
+    }
+  };
+
+  return (
+    <div
+      className={[
+        "flex h-full min-h-0 max-h-full flex-col overflow-hidden rounded-xl border border-slate-700/60 bg-[#0c1220] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <div className="flex shrink-0 items-center justify-between gap-2 border-b border-white/5 px-2.5 py-1.5">
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="rounded-md bg-sky-500/15 px-1.5 py-0.5 font-mono text-[10px] font-medium tracking-wide text-sky-300">
+            JSON
+          </span>
+          <span className="truncate text-[11px] text-slate-400">
+            {t("panel.config.tableRowsEditEditorHint")}
+          </span>
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-6 shrink-0 rounded-md px-2 text-[11px] text-slate-300 hover:bg-white/10 hover:text-white"
+          onClick={formatJson}
+        >
+          {t("panel.config.tableRowsEditFormat")}
+        </Button>
+      </div>
+      <div className="relative min-h-0 flex-1 overflow-hidden">
+        <div className="absolute inset-0 overflow-hidden">
+          <CodeMirror
+            value={value}
+            height="100%"
+            maxHeight="100%"
+            theme={oneDark}
+            extensions={extensions}
+            basicSetup={{
+              lineNumbers: true,
+              foldGutter: true,
+              highlightActiveLine: true,
+              bracketMatching: true,
+              autocompletion: true,
+            }}
+            onChange={(next) => onChange(next)}
+            className="h-full max-h-full [&_.cm-editor]:h-full [&_.cm-editor]:max-h-full [&_.cm-editor]:outline-none"
+            aria-label={t("panel.config.tableRowsEditTitle")}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}