@nocobase/flow-engine 2.0.0-alpha.7 → 2.0.0-alpha.71

package/lib/components/dnd/gridDragPlanner.js

@@ -59,6 +59,43 @@ const COLUMN_EDGE_MAX_WIDTH = 28;
 const COLUMN_EDGE_WIDTH_RATIO = 0.2;
 const COLUMN_INSERT_THICKNESS_RATIO = 0.5;
 const ROW_GAP_HEIGHT_RATIO = 0.33;
+const deriveRowOrder = /* @__PURE__ */ __name((rows, provided) => {
+  const order = [];
+  const used = /* @__PURE__ */ new Set();
+  (provided || Object.keys(rows)).forEach((rowId) => {
+    if (rows[rowId] && !used.has(rowId)) {
+      order.push(rowId);
+      used.add(rowId);
+    }
+  });
+  Object.keys(rows).forEach((rowId) => {
+    if (!used.has(rowId)) {
+      order.push(rowId);
+      used.add(rowId);
+    }
+  });
+  return order;
+}, "deriveRowOrder");
+const normalizeRowsWithOrder = /* @__PURE__ */ __name((rows, order) => {
+  const next = {};
+  order.forEach((rowId) => {
+    if (rows[rowId]) {
+      next[rowId] = rows[rowId];
+    }
+  });
+  Object.keys(rows).forEach((rowId) => {
+    if (!next[rowId]) {
+      next[rowId] = rows[rowId];
+    }
+  });
+  return next;
+}, "normalizeRowsWithOrder");
+const ensureRowOrder = /* @__PURE__ */ __name((layout) => {
+  const order = deriveRowOrder(layout.rows, layout.rowOrder);
+  layout.rowOrder = order;
+  layout.rows = normalizeRowsWithOrder(layout.rows, order);
+  return order;
+}, "ensureRowOrder");
 const toRect = /* @__PURE__ */ __name((domRect) => ({
   top: domRect.top,
   left: domRect.left,
@@ -330,9 +367,11 @@ const removeItemFromLayout = /* @__PURE__ */ __name((layout, uidValue) => {
   if (columns.length === 0) {
     delete layout.rows[rowId];
     delete layout.sizes[rowId];
+    ensureRowOrder(layout);
     return;
   }
   normalizeRowSizes(rowId, layout);
+  ensureRowOrder(layout);
 }, "removeItemFromLayout");
 const toIntSizes = /* @__PURE__ */ __name((weights, count) => {
   if (count === 0) {
@@ -420,8 +459,10 @@ const simulateLayoutForSlot = /* @__PURE__ */ __name(({
 }) => {
   const cloned = {
     rows: import_lodash.default.cloneDeep(layout.rows),
-    sizes: import_lodash.default.cloneDeep(layout.sizes)
+    sizes: import_lodash.default.cloneDeep(layout.sizes),
+    rowOrder: layout.rowOrder ? [...layout.rowOrder] : void 0
   };
+  ensureRowOrder(cloned);
   removeItemFromLayout(cloned, sourceUid);
   const createRowId = generateRowId ?? import_shared.uid;
   switch (slot.type) {
@@ -464,8 +505,15 @@ const simulateLayoutForSlot = /* @__PURE__ */ __name(({
     case "row-gap": {
       const newRowId = createRowId();
       const rowPosition = slot.position === "above" ? "before" : "after";
+      const currentOrder = deriveRowOrder(cloned.rows, cloned.rowOrder);
       cloned.rows = insertRow(cloned.rows, slot.targetRowId, newRowId, rowPosition, [[sourceUid]]);
       cloned.sizes[newRowId] = [DEFAULT_GRID_COLUMNS];
+      const targetIndex = currentOrder.indexOf(slot.targetRowId);
+      const insertIndex = targetIndex === -1 ? currentOrder.length : rowPosition === "before" ? targetIndex : targetIndex + 1;
+      const nextOrder = [...currentOrder];
+      nextOrder.splice(insertIndex, 0, newRowId);
+      cloned.rowOrder = nextOrder;
+      cloned.rows = normalizeRowsWithOrder(cloned.rows, nextOrder);
       break;
     }
     case "empty-row": {
@@ -475,11 +523,15 @@ const simulateLayoutForSlot = /* @__PURE__ */ __name(({
         [newRowId]: [[sourceUid]]
       };
       cloned.sizes[newRowId] = [DEFAULT_GRID_COLUMNS];
+      const currentOrder = deriveRowOrder(cloned.rows, cloned.rowOrder);
+      cloned.rowOrder = [...currentOrder.filter((id) => id !== newRowId), newRowId];
+      cloned.rows = normalizeRowsWithOrder(cloned.rows, cloned.rowOrder);
       break;
     }
     default:
       break;
   }
+  ensureRowOrder(cloned);
   return cloned;
 }, "simulateLayoutForSlot");
 // Annotate the CommonJS export names for ESM import in node:

package/lib/components/index.d.ts

@@ -16,3 +16,4 @@ export * from './FormItem';
 export * from './settings';
 export * from './subModel';
 export * from './variables';
+export * from './MobilePopup';

package/lib/components/index.js

@@ -33,6 +33,7 @@ __reExport(components_exports, require("./FormItem"), module.exports);
 __reExport(components_exports, require("./settings"), module.exports);
 __reExport(components_exports, require("./subModel"), module.exports);
 __reExport(components_exports, require("./variables"), module.exports);
+__reExport(components_exports, require("./MobilePopup"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ...require("./common/FlowSettingsButton"),
@@ -44,5 +45,6 @@ __reExport(components_exports, require("./variables"), module.exports);
   ...require("./FormItem"),
   ...require("./settings"),
   ...require("./subModel"),
-  ...require("./variables")
+  ...require("./variables"),
+  ...require("./MobilePopup")
 });

package/lib/components/settings/independents/dropdown/FlowsDropdownButton.js

@@ -41,27 +41,28 @@ __export(FlowsDropdownButton_exports, {
 });
 module.exports = __toCommonJS(FlowsDropdownButton_exports);
 var import_icons = require("@ant-design/icons");
-var import_react = require("@formily/react");
 var import_antd = require("antd");
-var import_react2 = __toESM(require("react"));
+var import_react = __toESM(require("react"));
 var import_hooks = require("../../../../hooks");
+var import_utils = require("../../../../utils");
+var import_reactive = require("../../../../reactive");
 const isModelByIdProps = /* @__PURE__ */ __name((props) => {
   return "uid" in props && "modelClassName" in props && Boolean(props.uid) && Boolean(props.modelClassName);
 }, "isModelByIdProps");
 const FlowsDropdownButton = /* @__PURE__ */ __name((props) => {
   if (isModelByIdProps(props)) {
     const { uid, modelClassName, ...restProps } = props;
-    return /* @__PURE__ */ import_react2.default.createElement(FlowsDropdownButtonWithModelById, { uid, modelClassName, ...restProps });
+    return /* @__PURE__ */ import_react.default.createElement(FlowsDropdownButtonWithModelById, { uid, modelClassName, ...restProps });
   } else {
     const { model, ...restProps } = props;
-    return /* @__PURE__ */ import_react2.default.createElement(FlowsDropdownButtonWithModel, { model, ...restProps });
+    return /* @__PURE__ */ import_react.default.createElement(FlowsDropdownButtonWithModel, { model, ...restProps });
   }
 }, "FlowsDropdownButton");
-const FlowsDropdownButtonWithModel = (0, import_react.observer)(
+const FlowsDropdownButtonWithModel = (0, import_reactive.observer)(
   ({
     model,
     text = "\u6D41\u7A0B\u914D\u7F6E",
-    icon = /* @__PURE__ */ import_react2.default.createElement(import_icons.SettingOutlined, null),
+    icon = /* @__PURE__ */ import_react.default.createElement(import_icons.SettingOutlined, null),
     size = "middle",
     type = "default",
     disabled = false,
@@ -73,7 +74,7 @@ const FlowsDropdownButtonWithModel = (0, import_react.observer)(
     const handleClick = /* @__PURE__ */ __name(() => {
       onClick == null ? void 0 : onClick();
     }, "handleClick");
-    const handleMenuClick = (0, import_react2.useCallback)(
+    const handleMenuClick = (0, import_react.useCallback)(
       ({ key }) => {
         const [flowKey, stepKey] = key.split(":");
         try {
@@ -88,53 +89,70 @@ const FlowsDropdownButtonWithModel = (0, import_react.observer)(
       [model]
     );
     if (!model) {
-      return /* @__PURE__ */ import_react2.default.createElement(import_antd.Alert, { message: "\u63D0\u4F9B\u7684\u6A21\u578B\u65E0\u6548", type: "error" });
+      return /* @__PURE__ */ import_react.default.createElement(import_antd.Alert, { message: "\u63D0\u4F9B\u7684\u6A21\u578B\u65E0\u6548", type: "error" });
     }
-    const getConfigurableFlowsAndSteps = (0, import_react2.useCallback)(() => {
+    const getConfigurableFlowsAndSteps = (0, import_react.useCallback)(async () => {
       try {
         const flows = model.getFlows();
         const flowsArray = Array.from(flows.values());
-        return flowsArray.map((flow) => {
-          const configurableSteps = Object.entries(flow.steps).map(([stepKey, stepDefinition]) => {
-            var _a, _b;
-            const actionStep = stepDefinition;
-            if (actionStep.hideInSettings) {
-              return null;
-            }
-            const stepUiSchema = actionStep.uiSchema || {};
-            let actionUiSchema = {};
-            if (actionStep.use) {
-              const action = (_b = (_a = model.flowEngine) == null ? void 0 : _a.getAction) == null ? void 0 : _b.call(_a, actionStep.use);
-              if (action && action.uiSchema) {
-                actionUiSchema = action.uiSchema;
-              }
-            }
-            const mergedUiSchema = { ...actionUiSchema };
-            Object.entries(stepUiSchema).forEach(([fieldKey, schema]) => {
-              if (mergedUiSchema[fieldKey]) {
-                mergedUiSchema[fieldKey] = { ...mergedUiSchema[fieldKey], ...schema };
-              } else {
-                mergedUiSchema[fieldKey] = schema;
-              }
-            });
-            if (Object.keys(mergedUiSchema).length === 0) {
-              return null;
-            }
-            return {
-              stepKey,
-              step: actionStep,
-              uiSchema: mergedUiSchema,
-              title: actionStep.title || stepKey
-            };
-          }).filter(Boolean);
-          return configurableSteps.length > 0 ? { flow, steps: configurableSteps } : null;
-        }).filter(Boolean);
+        const result = await Promise.all(
+          flowsArray.map(async (flow) => {
+            const configurableSteps = await Promise.all(
+              Object.entries(flow.steps).map(async ([stepKey, stepDefinition]) => {
+                var _a;
+                const actionStep = stepDefinition;
+                if (await (0, import_utils.shouldHideStepInSettings)(model, flow, actionStep)) {
+                  return null;
+                }
+                const stepUiSchema = actionStep.uiSchema || {};
+                let actionUiSchema = {};
+                if (actionStep.use) {
+                  const action = (_a = model.getAction) == null ? void 0 : _a.call(model, actionStep.use);
+                  if (action && action.uiSchema) {
+                    actionUiSchema = action.uiSchema;
+                  }
+                }
+                const mergedUiSchema = { ...actionUiSchema };
+                Object.entries(stepUiSchema).forEach(([fieldKey, schema]) => {
+                  if (mergedUiSchema[fieldKey]) {
+                    mergedUiSchema[fieldKey] = { ...mergedUiSchema[fieldKey], ...schema };
+                  } else {
+                    mergedUiSchema[fieldKey] = schema;
+                  }
+                });
+                if (Object.keys(mergedUiSchema).length === 0) {
+                  return null;
+                }
+                return {
+                  stepKey,
+                  step: actionStep,
+                  uiSchema: mergedUiSchema,
+                  title: actionStep.title || stepKey
+                };
+              })
+            ).then((steps) => steps.filter(Boolean));
+            return configurableSteps.length > 0 ? { flow, steps: configurableSteps } : null;
+          })
+        );
+        return result.filter(Boolean);
       } catch (error) {
         console.warn("[FlowsDropdownButton] \u83B7\u53D6\u53EF\u914D\u7F6Eflows\u5931\u8D25:", error);
         return [];
       }
     }, [model]);
-    const configurableFlowsAndSteps = getConfigurableFlowsAndSteps();
+    const [configurableFlowsAndSteps, setConfigurableFlowsAndSteps] = (0, import_react.useState)([]);
+    (0, import_react.useEffect)(() => {
+      let mounted = true;
+      (async () => {
+        const flows = await getConfigurableFlowsAndSteps();
+        if (mounted) {
+          setConfigurableFlowsAndSteps(flows);
+        }
+      })();
+      return () => {
+        mounted = false;
+      };
+    }, [getConfigurableFlowsAndSteps]);
     const buildMenuItems = /* @__PURE__ */ __name(() => {
       const items = [];
       configurableFlowsAndSteps.forEach(({ flow, steps }) => {
@@ -146,7 +164,7 @@ const FlowsDropdownButtonWithModel = (0, import_react.observer)(
         steps.forEach((stepInfo) => {
           items.push({
             key: `${flow.key}:${stepInfo.stepKey}`,
-            icon: /* @__PURE__ */ import_react2.default.createElement(import_icons.SettingOutlined, null),
+            icon: /* @__PURE__ */ import_react.default.createElement(import_icons.SettingOutlined, null),
             label: stepInfo.title
           });
         });
@@ -154,7 +172,7 @@ const FlowsDropdownButtonWithModel = (0, import_react.observer)(
       return items;
     }, "buildMenuItems");
     const menuItems = buildMenuItems();
-    const button = /* @__PURE__ */ import_react2.default.createElement(
+    const button = /* @__PURE__ */ import_react.default.createElement(
       import_antd.Button,
       {
         type,
@@ -165,12 +183,12 @@ const FlowsDropdownButtonWithModel = (0, import_react.observer)(
         style,
         className
       },
-      /* @__PURE__ */ import_react2.default.createElement(import_antd.Space, null, text, showDropdownIcon && /* @__PURE__ */ import_react2.default.createElement(import_icons.DownOutlined, null))
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, text, showDropdownIcon && /* @__PURE__ */ import_react.default.createElement(import_icons.DownOutlined, null))
     );
     if (configurableFlowsAndSteps.length === 0) {
       return button;
     }
-    return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
       import_antd.Dropdown,
       {
         menu: {
@@ -184,12 +202,12 @@ const FlowsDropdownButtonWithModel = (0, import_react.observer)(
     ));
   }
 );
-const FlowsDropdownButtonWithModelById = (0, import_react.observer)(
+const FlowsDropdownButtonWithModelById = (0, import_reactive.observer)(
   ({
     uid,
     modelClassName,
     text = "\u6D41\u7A0B\u914D\u7F6E",
-    icon = /* @__PURE__ */ import_react2.default.createElement(import_icons.SettingOutlined, null),
+    icon = /* @__PURE__ */ import_react.default.createElement(import_icons.SettingOutlined, null),
     size = "middle",
     type = "default",
     disabled = false,
@@ -200,9 +218,9 @@ const FlowsDropdownButtonWithModelById = (0, import_react.observer)(
   }) => {
     const model = (0, import_hooks.useFlowModelById)(uid, modelClassName);
     if (!model) {
-      return /* @__PURE__ */ import_react2.default.createElement(import_antd.Alert, { message: `\u672A\u627E\u5230ID\u4E3A ${uid} \u7684\u6A21\u578B`, type: "error" });
+      return /* @__PURE__ */ import_react.default.createElement(import_antd.Alert, { message: `\u672A\u627E\u5230ID\u4E3A ${uid} \u7684\u6A21\u578B`, type: "error" });
     }
-    return /* @__PURE__ */ import_react2.default.createElement(
+    return /* @__PURE__ */ import_react.default.createElement(
       FlowsDropdownButtonWithModel,
       {
         model,

package/lib/components/settings/wrappers/component/SelectWithTitle.d.ts

@@ -0,0 +1,19 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import React from 'react';
+export interface SelectWithTitleProps {
+    title?: any;
+    getDefaultValue?: any;
+    options?: any;
+    fieldNames?: any;
+    itemKey?: string;
+    onChange?: (...args: any[]) => void;
+    dropdownRender?: any;
+}
+export declare function SelectWithTitle({ title, getDefaultValue, onChange, options, fieldNames, itemKey, ...others }: SelectWithTitleProps): React.JSX.Element;

package/lib/components/settings/wrappers/component/SelectWithTitle.js

@@ -0,0 +1,136 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SelectWithTitle_exports = {};
+__export(SelectWithTitle_exports, {
+  SelectWithTitle: () => SelectWithTitle
+});
+module.exports = __toCommonJS(SelectWithTitle_exports);
+var import_antd = require("antd");
+var import_react = __toESM(require("react"));
+var import_provider = require("../../../../provider");
+function SelectWithTitle({
+  title,
+  getDefaultValue,
+  onChange,
+  options,
+  fieldNames,
+  itemKey,
+  ...others
+}) {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [value, setValue] = (0, import_react.useState)("");
+  const ctx = (0, import_provider.useFlowEngineContext)();
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    const run = /* @__PURE__ */ __name(async () => {
+      if (!getDefaultValue) return;
+      try {
+        const val = await getDefaultValue();
+        if (cancelled || !val) return;
+        const entries = Object.entries(val);
+        if (!entries.length) return;
+        const [key, result] = entries[0];
+        setValue(result);
+      } catch (e) {
+        console.error(e);
+      }
+    }, "run");
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, [getDefaultValue]);
+  const timerRef = (0, import_react.useRef)(null);
+  const handleChange = /* @__PURE__ */ __name((val) => {
+    setValue(val);
+    onChange == null ? void 0 : onChange({ [itemKey]: val });
+  }, "handleChange");
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: { alignItems: "center", display: "flex", justifyContent: "space-between" },
+      onClick: (e) => {
+        e.stopPropagation();
+        setOpen((v) => !v);
+      },
+      onMouseLeave: () => {
+        timerRef.current = setTimeout(() => {
+          setOpen(false);
+        }, 200);
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        style: {
+          whiteSpace: "nowrap",
+          // 不换行
+          flexShrink: 0
+          // 不被挤压
+        }
+      },
+      title
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Select,
+      {
+        ...others,
+        open,
+        popupMatchSelectWidth: false,
+        bordered: false,
+        value,
+        onChange: handleChange,
+        popupClassName: `select-popup-${title.replaceAll(" ", "-")}`,
+        fieldNames,
+        options,
+        labelRender: (props) => ctx.t(props.label),
+        optionRender: (o) => ctx.t(o.label),
+        style: { textAlign: "right", minWidth: 100 },
+        onMouseEnter: () => {
+          clearTimeout(timerRef.current);
+        },
+        dropdownRender: (menu) => others.dropdownRender ? others.dropdownRender(menu, setOpen, handleChange) : menu
+      }
+    )
+  );
+}
+__name(SelectWithTitle, "SelectWithTitle");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SelectWithTitle
+});

package/lib/components/settings/wrappers/component/SwitchWithTitle.d.ts

@@ -0,0 +1,10 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import { FC } from 'react';
+export declare const SwitchWithTitle: FC;

package/lib/components/settings/wrappers/component/SwitchWithTitle.js

@@ -0,0 +1,111 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SwitchWithTitle_exports = {};
+__export(SwitchWithTitle_exports, {
+  SwitchWithTitle: () => SwitchWithTitle
+});
+module.exports = __toCommonJS(SwitchWithTitle_exports);
+var import_antd = require("antd");
+var import_react = __toESM(require("react"));
+var import_provider = require("../../../../provider");
+var import_reactive = require("../../../../reactive");
+const ml32 = { marginLeft: 32 };
+const SwitchWithTitle = (0, import_reactive.observer)(
+  ({ title, onChange, getDefaultValue, disabled, itemKey, ...others }) => {
+    const [checked, setChecked] = (0, import_react.useState)(false);
+    const ctx = (0, import_provider.useFlowEngineContext)();
+    (0, import_react.useEffect)(() => {
+      let cancelled = false;
+      const run = /* @__PURE__ */ __name(async () => {
+        if (!getDefaultValue) return;
+        try {
+          const val = await getDefaultValue();
+          if (cancelled || !val) return;
+          const entries = Object.entries(val);
+          if (!entries.length) return;
+          const [key, value] = entries[0];
+          setChecked(!!value);
+        } catch (e) {
+          console.error(e);
+        }
+      }, "run");
+      run();
+      return () => {
+        cancelled = true;
+      };
+    }, [getDefaultValue]);
+    const handleChange = /* @__PURE__ */ __name((val) => {
+      setChecked(val);
+      onChange == null ? void 0 : onChange({ [itemKey]: val });
+    }, "handleChange");
+    const handleWrapperClick = /* @__PURE__ */ __name((e) => {
+      e.stopPropagation();
+      if (disabled) return;
+      handleChange(!checked);
+    }, "handleWrapperClick");
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          alignItems: "center",
+          display: "flex",
+          justifyContent: "space-between",
+          cursor: disabled ? "not-allowed" : "pointer"
+        },
+        onClick: handleWrapperClick
+      },
+      title,
+      /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Switch,
+        {
+          size: "small",
+          ...others,
+          checkedChildren: others.checkedChildren ? ctx.t(others.checkedChildren) : void 0,
+          unCheckedChildren: others.unCheckedChildren ? ctx.t(others.unCheckedChildren) : void 0,
+          checked,
+          style: ml32,
+          disabled
+        }
+      )
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SwitchWithTitle
+});