@canvas-components/react-components 0.2.1 → 0.3.1

package/dist/index.cjs

@@ -1128,16 +1128,31 @@ var operators = [
 ];
 function ReactFilterPanel(props) {
   const { request } = props;
-  const [draft, setDraft] = React.useState(request?.value ?? null);
+  const [draft, setDraft] = React.useState(() => createDraft(request?.value));
   const [tab, setTab] = React.useState(resolveTab(request?.value));
   const [options, setOptions] = React.useState(request?.options ?? []);
   const [loading, setLoading] = React.useState(Boolean(request?.loadOptions));
+  const conditionListRef = React.useRef(null);
+  const [conditionListOverflowing, setConditionListOverflowing] = React.useState(false);
   React.useEffect(() => {
-    setDraft(request?.value ?? null);
+    setDraft(createDraft(request?.value));
     setTab(resolveTab(request?.value));
     setOptions(request?.options ?? []);
     setLoading(Boolean(request?.loadOptions));
   }, [request]);
+  React.useLayoutEffect(() => {
+    const element = conditionListRef.current;
+    if (!element || tab !== "condition") {
+      setConditionListOverflowing(false);
+      return;
+    }
+    const measure = () => setConditionListOverflowing(element.scrollHeight > element.clientHeight + 1);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [draft?.conditions, tab]);
   React.useEffect(() => {
     if (!request?.loadOptions) return;
     const controller = new AbortController();
@@ -1172,6 +1187,20 @@ function ReactFilterPanel(props) {
   const allChecked = visibleKeys.length > 0 && selectedCount === visibleKeys.length;
   const allCount = request.options.find((item) => item.kind === "all")?.count ?? visibleOptions.filter((item) => item.kind === "value").reduce((sum, item) => sum + item.count, 0);
   const update = (patch) => setDraft((current) => ({ ...current ?? request.value, ...patch }));
+  const updateConditions = (conditions) => {
+    const first = conditions[0] ?? createEmptyCondition();
+    const second = conditions[1] ?? createEmptyCondition();
+    update({
+      conditions,
+      filterType: "condition",
+      conditionOperator: first.operator,
+      conditionValue: first.value ?? "",
+      conditionSecondValue: first.secondValue ?? "",
+      secondConditionOperator: second.operator,
+      secondConditionValue: second.value ?? "",
+      secondConditionSecondValue: second.secondValue ?? ""
+    });
+  };
   const toggle = (keys, checked) => {
     const next = new Set(draft.selectedKeys ?? []);
     keys.forEach((key) => checked ? next.add(key) : next.delete(key));
@@ -1278,97 +1307,138 @@ function ReactFilterPanel(props) {
               )
             }
           ) })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 12, display: "grid", gap: 12, minHeight: 290, alignContent: "start", flex: "1 1 auto" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ConditionEditor,
-            {
-              label: request.texts.firstConditionLabel,
-              operator: draft.conditionOperator ?? "none",
-              value: draft.conditionValue ?? "",
-              secondValue: draft.conditionSecondValue ?? "",
-              texts: request.texts,
-              onChange: (patch) => update(patch),
-              onSubmit: apply
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { style: fieldLabelStyle, children: request.texts.relationLabel }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ReactSelect,
-              {
-                value: draft.conditionRelation === "or" ? "or" : "and",
-                allowClear: false,
-                options: [{ label: request.texts.relationAndLabel, value: "and" }, { label: request.texts.relationOrLabel, value: "or" }],
-                onChange: (value) => update({ conditionRelation: value, filterType: "condition" }),
-                style: { width: "100%" }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ConditionEditor,
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 12, display: "flex", flexDirection: "column", gap: 10, minHeight: 0, flex: "1 1 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: conditionListRef,
+            className: "react-filter-panel-condition-list",
+            style: { ...conditionListStyle, overflowY: conditionListOverflowing ? "auto" : "hidden" },
+            children: (draft.conditions ?? []).map((condition, index, conditions) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+              index > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-filter-panel-condition-relation", style: conditionRowStyle, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: inlineLabelStyle, children: request.texts.relationLabel }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ReactSelect,
+                  {
+                    value: draft.conditionRelation === "or" ? "or" : "and",
+                    allowClear: false,
+                    options: [{ label: request.texts.relationAndLabel, value: "and" }, { label: request.texts.relationOrLabel, value: "or" }],
+                    onChange: (value) => update({ conditionRelation: value, filterType: "condition" }),
+                    style: { width: "100%" }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", {})
+              ] }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ConditionEditor,
+                {
+                  label: resolveConditionLabel(request.texts, index),
+                  condition,
+                  texts: request.texts,
+                  canDelete: conditions.length > 1,
+                  onDelete: () => updateConditions(conditions.filter((_item, itemIndex) => itemIndex !== index)),
+                  onChange: (nextCondition) => updateConditions(conditions.map((item, itemIndex) => itemIndex === index ? nextCondition : item)),
+                  onSubmit: apply
+                }
+              )
+            ] }, index))
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-filter-panel-footer", style: footerStyle, children: [
+          tab === "condition" ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
             {
-              second: true,
-              label: request.texts.secondConditionLabel,
-              operator: draft.secondConditionOperator ?? "none",
-              value: draft.secondConditionValue ?? "",
-              secondValue: draft.secondConditionSecondValue ?? "",
-              texts: request.texts,
-              onChange: (patch) => update(patch),
-              onSubmit: apply
+              type: "button",
+              style: addConditionStyle,
+              onClick: () => updateConditions([...draft.conditions ?? [], createEmptyCondition()]),
+              children: [
+                "+ ",
+                request.texts.addConditionAction ?? "\u65B0\u589E\u6761\u4EF6"
+              ]
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: actionStyle(false), onClick: () => {
-            request.onReset();
-            request.onClose();
-          }, children: request.texts.resetAction }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: actionStyle(true), onClick: apply, children: request.texts.applyAction })
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-filter-panel-footer-actions", style: footerActionsStyle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: actionStyle(false), onClick: () => {
+              request.onReset();
+              request.onClose();
+            }, children: request.texts.resetAction }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: actionStyle(true), onClick: apply, children: request.texts.applyAction })
+          ] })
         ] })
       ] })
     }
   );
 }
 function ConditionEditor(props) {
-  const prefix = props.second ? "secondCondition" : "condition";
-  const hidesValue = ["none", "blank", "notBlank"].includes(props.operator);
-  const needsSecond = ["between", "notBetween"].includes(props.operator);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: fieldLabelStyle, children: props.label }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ReactSelect,
-      {
-        value: props.operator,
-        options: operators,
-        allowClear: false,
-        onChange: (value) => props.onChange({ [`${prefix}Operator`]: value, filterType: "condition" }),
-        style: { width: "100%" }
-      }
-    ),
-    hidesValue ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gap: 8, marginTop: 8 }, children: [
+  const hidesValue = ["none", "blank", "notBlank"].includes(props.condition.operator);
+  const needsSecond = ["between", "notBetween"].includes(props.condition.operator);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: conditionEditorStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-filter-panel-condition-row", style: conditionRowStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: inlineLabelStyle, children: props.label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ReactSelect,
+        {
+          value: props.condition.operator,
+          options: operators,
+          allowClear: false,
+          onChange: (value) => props.onChange({ ...props.condition, operator: value }),
+          style: { width: "100%" }
+        }
+      ),
+      props.canDelete ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          title: `${props.texts.deleteConditionAction ?? "\u5220\u9664\u6761\u4EF6"} ${props.label}`,
+          "aria-label": `${props.texts.deleteConditionAction ?? "\u5220\u9664\u6761\u4EF6"} ${props.label}`,
+          style: deleteConditionStyle,
+          onClick: props.onDelete,
+          children: "\xD7"
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", {})
+    ] }),
+    hidesValue ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: conditionValueStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         ReactInput,
         {
-          value: props.value,
+          value: props.condition.value ?? "",
           placeholder: props.texts.firstValuePlaceholder,
           onPressEnter: props.onSubmit,
-          onChange: (event) => props.onChange({ [`${prefix}Value`]: event.target.value, filterType: "condition" }),
+          onChange: (event) => props.onChange({ ...props.condition, value: event.target.value }),
           style: { width: "100%" }
         }
       ),
       needsSecond ? /* @__PURE__ */ jsxRuntime.jsx(
         ReactInput,
         {
-          value: props.secondValue,
+          value: props.condition.secondValue ?? "",
           placeholder: props.texts.secondValuePlaceholder,
           onPressEnter: props.onSubmit,
-          onChange: (event) => props.onChange({ [`${prefix}SecondValue`]: event.target.value, filterType: "condition" }),
+          onChange: (event) => props.onChange({ ...props.condition, secondValue: event.target.value }),
           style: { width: "100%" }
         }
       ) : null
     ] })
   ] });
 }
+function createDraft(value) {
+  if (!value) return null;
+  return { ...value, conditions: resolveDraftConditions(value) };
+}
+function resolveDraftConditions(value) {
+  if (value.conditions?.length) return value.conditions.map((condition) => ({ ...condition }));
+  return [
+    { operator: value.conditionOperator ?? "none", value: value.conditionValue ?? "", secondValue: value.conditionSecondValue ?? "" },
+    { operator: value.secondConditionOperator ?? "none", value: value.secondConditionValue ?? "", secondValue: value.secondConditionSecondValue ?? "" }
+  ];
+}
+function createEmptyCondition() {
+  return { operator: "none", value: "", secondValue: "" };
+}
+function resolveConditionLabel(texts, index) {
+  if (index === 0) return texts.firstConditionLabel;
+  if (index === 1) return texts.secondConditionLabel;
+  return `${texts.conditionLabel ?? "\u6761\u4EF6"} ${index + 1}`;
+}
 function resolveTab(value) {
   return value?.filterType === "condition" || value?.conditionOperator && value.conditionOperator !== "none" ? "condition" : "value";
 }
@@ -1380,7 +1450,15 @@ function optionLabel(item, texts) {
 var checkLabelStyle = { display: "inline-flex", alignItems: "center", gap: 8, color: "#374151", fontSize: 14 };
 var optionStyle = { display: "flex", alignItems: "center", gap: 8, minHeight: 40, padding: "4px 8px", borderRadius: 6, color: "#374151", fontSize: 14, cursor: "pointer", boxSizing: "border-box" };
 var optionTextStyle = { display: "block", flex: "1 1 0", width: 0, minWidth: 0, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" };
-var fieldLabelStyle = { marginBottom: 6, fontSize: 12, color: "#6b7280" };
+var conditionListStyle = { display: "grid", gap: 8, minHeight: 0, flex: "1 1 auto", alignContent: "start", paddingRight: 3 };
+var conditionEditorStyle = { display: "grid", gap: 8 };
+var conditionRowStyle = { display: "grid", gridTemplateColumns: "56px minmax(0, 1fr) 22px", alignItems: "center", gap: 8 };
+var inlineLabelStyle = { color: "#6b7280", fontSize: 12, whiteSpace: "nowrap" };
+var conditionValueStyle = { display: "grid", gap: 8, marginLeft: 64, marginRight: 30 };
+var addConditionStyle = { height: 32, padding: "0 10px", border: "1px solid #91caff", borderRadius: 6, background: "#f0f7ff", color: "#1677ff", cursor: "pointer", whiteSpace: "nowrap" };
+var deleteConditionStyle = { width: 22, height: 22, padding: 0, border: 0, borderRadius: 4, background: "transparent", color: "#9ca3af", fontSize: 18, lineHeight: "20px", cursor: "pointer" };
+var footerStyle = { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 };
+var footerActionsStyle = { display: "flex", gap: 8, marginLeft: "auto" };
 function tabStyle(active) {
   return { flex: 1, height: 32, border: active ? "1px solid #1677ff" : "1px solid #d9d9d9", borderRadius: 6, background: active ? "#e6f4ff" : "#fff", color: active ? "#1677ff" : "#374151", cursor: "pointer" };
 }