@nocobase/flow-engine 2.0.0-alpha.2

package/lib/components/subModel/AddSubModelButton.js

@@ -0,0 +1,415 @@
+/**
+ * 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 AddSubModelButton_exports = {};
+__export(AddSubModelButton_exports, {
+  AddSubModelButton: () => AddSubModelButton2,
+  mergeSubModelItems: () => mergeSubModelItems,
+  transformItems: () => transformItems
+});
+module.exports = __toCommonJS(AddSubModelButton_exports);
+var import_antd = require("antd");
+var import_lodash = __toESM(require("lodash"));
+var import_react = __toESM(require("react"));
+var import_withFlowDesignMode = require("../common/withFlowDesignMode");
+var import_LazyDropdown = __toESM(require("./LazyDropdown"));
+var import_utils = require("./utils");
+const SWITCH_CONTAINER_STYLE = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  width: "100%",
+  padding: "0"
+};
+const SWITCH_STYLE = {
+  marginLeft: 8,
+  pointerEvents: "none"
+};
+const validateCreateModelOptions = /* @__PURE__ */ __name((createOpts) => {
+  if (!createOpts) {
+    console.warn("No createModelOptions found for item");
+    return false;
+  }
+  if (!createOpts.use) {
+    console.warn('createModelOptions must specify "use" property:', createOpts);
+    return false;
+  }
+  return true;
+}, "validateCreateModelOptions");
+const handleModelCreationError = /* @__PURE__ */ __name(async (error, addedModel) => {
+  console.error("Failed to add sub model:", error);
+  if (addedModel && typeof addedModel.destroy === "function") {
+    try {
+      await addedModel.destroy();
+    } catch (destroyError) {
+      console.error("Failed to destroy model after creation error:", destroyError);
+    }
+  }
+}, "handleModelCreationError");
+const getCreateModelOptions = /* @__PURE__ */ __name(async (item, ctx) => {
+  let createOpts = item.createModelOptions;
+  if (typeof createOpts === "function") {
+    createOpts = await createOpts(ctx);
+  }
+  return {
+    use: item.useModel,
+    ...createOpts
+  };
+}, "getCreateModelOptions");
+function mergeSubModelItems(sources, options = {}) {
+  const { addDividers = false } = options;
+  const validSources = sources.filter((source) => source !== void 0 && source !== null);
+  if (validSources.length === 0) return [];
+  if (validSources.length === 1) return validSources[0];
+  return async (ctx) => {
+    const result = [];
+    for (let i = 0; i < validSources.length; i++) {
+      const source = validSources[i];
+      const items = Array.isArray(source) ? source : await source(ctx);
+      if (i > 0 && addDividers && items.length > 0) {
+        result.push({ key: `divider-${i}`, type: "divider" });
+      }
+      result.push(...items);
+    }
+    return result;
+  };
+}
+__name(mergeSubModelItems, "mergeSubModelItems");
+const createSwitchLabel = /* @__PURE__ */ __name((originalLabel, isToggled) => /* @__PURE__ */ import_react.default.createElement("div", { style: SWITCH_CONTAINER_STYLE }, /* @__PURE__ */ import_react.default.createElement("span", null, originalLabel), /* @__PURE__ */ import_react.default.createElement(import_antd.Switch, { size: "small", checked: isToggled, style: SWITCH_STYLE })), "createSwitchLabel");
+const hasToggleItems = /* @__PURE__ */ __name((items) => {
+  const walk = /* @__PURE__ */ __name((nodes) => {
+    for (const node of nodes) {
+      if (!node) continue;
+      if (!node.children && (node.toggleDetector || node.toggleable)) return true;
+      if (Array.isArray(node.children)) {
+        if (walk(node.children)) return true;
+      } else if (typeof node.children === "function") {
+        return true;
+      }
+    }
+    return false;
+  }, "walk");
+  return walk(items);
+}, "hasToggleItems");
+const transformSubModelItems = /* @__PURE__ */ __name(async (items, model, subModelKey, subModelType) => {
+  if (items.length === 0) return [];
+  const toggleItems = [];
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (item.toggleable && item.useModel) {
+      item.toggleDetector = (ctx) => {
+        const C = ctx.engine.getModelClass(item.useModel);
+        const r = ctx.model.findSubModel(subModelKey, (m) => {
+          if (item.toggleable === true) {
+            return m.constructor === C;
+          } else if (typeof item.toggleable === "function") {
+            return item.toggleable(m);
+          }
+        });
+        return !!r;
+      };
+      item.customRemove = async (ctx, item2) => {
+        const C = ctx.engine.getModelClass(item2.useModel);
+        const r = ctx.model.findSubModel(subModelKey, (m) => {
+          if (item2.toggleable === true) {
+            return m.constructor === C;
+          } else if (typeof item2.toggleable === "function") {
+            return item2.toggleable(m);
+          }
+        });
+        if (r) {
+          await r.destroy();
+        }
+      };
+    }
+    if (item.toggleDetector && !item.children) {
+      toggleItems.push({ item, index: i });
+    }
+  }
+  const toggleResults = await Promise.allSettled(
+    toggleItems.map(({ item }) => item.toggleDetector ? item.toggleDetector(model.context) : Promise.resolve(false))
+  );
+  const toggleMap = /* @__PURE__ */ new Map();
+  toggleItems.forEach(({ index }, i) => {
+    const result = toggleResults[i];
+    toggleMap.set(index, result.status === "fulfilled" ? result.value : false);
+  });
+  const transformPromises = items.map(async (item, index) => {
+    const transformedItem = {
+      key: item.key,
+      label: item.label,
+      type: item.type,
+      disabled: item.disabled,
+      icon: item.icon,
+      searchable: item.searchable,
+      searchPlaceholder: item.searchPlaceholder,
+      keepDropdownOpen: item.keepDropdownOpen,
+      originalItem: item
+    };
+    if (item.children) {
+      if (typeof item.children === "function") {
+        transformedItem.children = async () => {
+          const childrenFn = item.children;
+          const childrenResult = await childrenFn(model.context);
+          return transformSubModelItems(childrenResult, model, subModelKey, subModelType);
+        };
+      } else {
+        const staticChildren = item.children;
+        const childHasToggle = hasToggleItems(staticChildren);
+        if (childHasToggle) {
+          transformedItem.children = async () => transformSubModelItems(staticChildren, model, subModelKey, subModelType);
+        } else {
+          transformedItem.children = await transformSubModelItems(staticChildren, model, subModelKey, subModelType);
+        }
+      }
+    }
+    if (item.toggleDetector && !item.children) {
+      const isToggled = toggleMap.get(index) || false;
+      const originalLabel = model.translate(item.label) || "";
+      transformedItem.label = createSwitchLabel(originalLabel, isToggled);
+      transformedItem.isToggled = isToggled;
+      transformedItem.keepDropdownOpen = item.keepDropdownOpen ?? true;
+    }
+    return transformedItem;
+  });
+  return Promise.all(transformPromises);
+}, "transformSubModelItems");
+const transformItems = /* @__PURE__ */ __name((items, model, subModelKey, subModelType) => {
+  if (typeof items === "function") {
+    return async () => {
+      const result = await items(model.context);
+      return transformSubModelItems(result, model, subModelKey, subModelType);
+    };
+  }
+  const hasToggle = hasToggleItems(items);
+  if (hasToggle) {
+    return () => transformSubModelItems(items, model, subModelKey, subModelType);
+  } else {
+    let cachedResult = null;
+    return async () => {
+      if (!cachedResult) {
+        cachedResult = await transformSubModelItems(items, model, subModelKey, subModelType);
+      }
+      return cachedResult;
+    };
+  }
+}, "transformItems");
+const createDefaultRemoveHandler = /* @__PURE__ */ __name((config) => {
+  return async (item, parentModel) => {
+    const { model, subModelKey, subModelType } = config;
+    if (subModelType === "array") {
+      const subModels = model.subModels[subModelKey];
+      if (Array.isArray(subModels)) {
+        const createOpts = await getCreateModelOptions(item, parentModel.context);
+        const targetModel = subModels.find((subModel) => {
+          if (createOpts == null ? void 0 : createOpts.use) {
+            try {
+              const modelClass = config.model.flowEngine.getModelClass(createOpts.use);
+              if (modelClass && subModel instanceof modelClass) {
+                return true;
+              }
+            } catch (error) {
+            }
+            return subModel.uid.includes(createOpts.use);
+          }
+          return false;
+        });
+        if (targetModel) {
+          await targetModel.destroy();
+          const index = subModels.indexOf(targetModel);
+          if (index > -1) subModels.splice(index, 1);
+          return targetModel;
+        }
+      }
+    } else {
+      const subModel = model.subModels[subModelKey];
+      if (subModel) {
+        await subModel.destroy();
+        model.subModels[subModelKey] = void 0;
+        return subModel;
+      }
+    }
+    return null;
+  };
+}, "createDefaultRemoveHandler");
+const AddSubModelButtonCore = /* @__PURE__ */ __name(function AddSubModelButton({
+  model,
+  items,
+  subModelBaseClass,
+  subModelBaseClasses,
+  subModelType = "array",
+  subModelKey,
+  afterSubModelInit,
+  afterSubModelAdd,
+  afterSubModelRemove,
+  children = "Add",
+  keepDropdownOpen = false
+}) {
+  const persistKey = (0, import_react.useMemo)(() => {
+    try {
+      const id = model && model.uid || "unknown-model";
+      return `asmb:${id}:${subModelKey}:${subModelType}`;
+    } catch (e) {
+      return `asmb:unknown:${subModelKey}:${subModelType}`;
+    }
+  }, [model, subModelKey, subModelType]);
+  const [refreshTick, setRefreshTick] = import_react.default.useState(0);
+  const [refreshKeys, setRefreshKeys] = import_react.default.useState(void 0);
+  const finalItems = (0, import_react.useMemo)(() => {
+    const sources = [];
+    if (items) sources.push(items);
+    if (subModelBaseClass) sources.push((0, import_utils.buildItems)(subModelBaseClass));
+    if (subModelBaseClasses && subModelBaseClasses.length > 0) {
+      sources.push((0, import_utils.buildSubModelGroups)(subModelBaseClasses));
+    }
+    return mergeSubModelItems(sources, { addDividers: true });
+  }, [items, subModelBaseClass, subModelBaseClasses]);
+  const removeHandler = (0, import_react.useMemo)(
+    () => createDefaultRemoveHandler({
+      model,
+      subModelKey,
+      subModelType
+    }),
+    [model, subModelKey, subModelType]
+  );
+  const onClick = /* @__PURE__ */ __name(async (info) => {
+    const clickedItem = info.originalItem || info;
+    const item = clickedItem.originalItem || clickedItem;
+    const isToggled = clickedItem.isToggled;
+    const clickedKey = info == null ? void 0 : info.key;
+    if (clickedKey) {
+      const extras = (item == null ? void 0 : item.refreshTargets) || [];
+      setRefreshKeys([clickedKey, ...extras]);
+    }
+    if (item.toggleDetector && isToggled) {
+      try {
+        let removedModel = null;
+        try {
+          const C = model.flowEngine.getModelClass(item.useModel);
+          if (C) {
+            removedModel = model.findSubModel(subModelKey, (m) => m.constructor === C);
+          }
+        } catch (e) {
+        }
+        if (item.customRemove) {
+          await item.customRemove(model.context, item);
+        } else {
+          removedModel = await removeHandler(item, model) || removedModel;
+        }
+        if (afterSubModelRemove && removedModel) {
+          await afterSubModelRemove(removedModel);
+        }
+        setRefreshTick((x) => x + 1);
+      } catch (error) {
+        console.error("Failed to remove sub model:", error);
+      }
+      return;
+    }
+    const createOpts = await getCreateModelOptions(item, model.context);
+    if (!validateCreateModelOptions(createOpts)) {
+      return;
+    }
+    let addedModel;
+    try {
+      addedModel = model.flowEngine.createModel({
+        ...import_lodash.default.cloneDeep(createOpts),
+        parentId: model.uid,
+        subKey: subModelKey,
+        subType: subModelType
+      });
+      addedModel.isNew = true;
+      addedModel.setParent(model);
+      const toAdd = /* @__PURE__ */ __name(async () => {
+        try {
+          if (afterSubModelInit) {
+            await afterSubModelInit(addedModel);
+          }
+          if (subModelType === "array") {
+            model.addSubModel(subModelKey, addedModel);
+          } else {
+            model.setSubModel(subModelKey, addedModel);
+          }
+          if (afterSubModelAdd) {
+            await afterSubModelAdd(addedModel);
+          }
+          await addedModel.afterAddAsSubModel();
+          await addedModel.save();
+          addedModel.isNew = false;
+          setRefreshTick((x) => x + 1);
+        } catch (error) {
+          await handleModelCreationError(error, addedModel);
+        }
+      }, "toAdd");
+      const opened = await addedModel.openFlowSettings({
+        preset: true,
+        onSaved: /* @__PURE__ */ __name(async () => {
+          await toAdd();
+        }, "onSaved")
+      });
+      if (!opened) {
+        await toAdd();
+      }
+    } catch (error) {
+      await handleModelCreationError(error, addedModel);
+    }
+  }, "onClick");
+  const itemsFactory = (0, import_react.useMemo)(
+    () => transformItems(finalItems, model, subModelKey, subModelType),
+    [finalItems, model, subModelKey, subModelType]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_LazyDropdown.default,
+    {
+      menu: {
+        items: itemsFactory,
+        onClick,
+        keepDropdownOpen,
+        persistKey,
+        stateVersion: refreshTick,
+        refreshKeys
+      }
+    },
+    children
+  );
+}, "AddSubModelButton");
+const AddSubModelButton2 = (0, import_withFlowDesignMode.withFlowDesignMode)(AddSubModelButtonCore);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AddSubModelButton,
+  mergeSubModelItems,
+  transformItems
+});

package/lib/components/subModel/LazyDropdown.d.ts

@@ -0,0 +1,55 @@
+/**
+ * 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 { DropdownProps } from 'antd';
+import React from 'react';
+export type Item = {
+    key?: string;
+    type?: 'group' | 'divider';
+    label?: React.ReactNode;
+    children?: Item[] | (() => Item[] | Promise<Item[]>);
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    keepDropdownOpen?: boolean;
+    /**
+     * 开关状态标记（内部使用）
+     */
+    isToggled?: boolean;
+    /**
+     * 原始菜单项数据（内部使用）
+     */
+    originalItem?: any;
+    /**
+     * 是否为唯一项标记（内部使用）
+     */
+    unique?: boolean;
+    [key: string]: any;
+};
+export type ItemsType = Item[] | (() => Item[] | Promise<Item[]>);
+interface LazyDropdownMenuProps extends Omit<DropdownProps['menu'], 'items'> {
+    items: ItemsType;
+    keepDropdownOpen?: boolean;
+    /**
+     * 在父节点短暂重建（卸载/重挂载）时用于恢复打开状态的持久键。
+     * 不需要手动传入，调用方（如 AddSubModelButton）会自动生成。
+     */
+    persistKey?: string;
+    /**
+     * 仅用于“状态刷新”的版本号。变化时会重新计算根 items，
+     * 但不会清空已加载的 children，避免 UI 闪烁。
+     */
+    stateVersion?: number;
+    /**
+     * 额外刷新目标（多路径）：每条路径的祖先都会被刷新
+     */
+    refreshKeys?: string[];
+}
+declare const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & {
+    menu: LazyDropdownMenuProps;
+}>;
+export default LazyDropdown;