@nocobase/flow-engine 2.0.0-alpha.9 → 2.0.0-beta.2

package/lib/components/FlowModelRenderer.js

@@ -41,8 +41,6 @@ __export(FlowModelRenderer_exports, {
   MemoFlowModelRenderer: () => MemoFlowModelRenderer
 });
 module.exports = __toCommonJS(FlowModelRenderer_exports);
-var import_reactive_react = require("@formily/reactive-react");
-var import_antd = require("antd");
 var import_lodash = __toESM(require("lodash"));
 var import_react = __toESM(require("react"));
 var import_react_error_boundary = require("react-error-boundary");
@@ -51,7 +49,8 @@ var import_utils = require("../utils");
 var import_FlowErrorFallback = require("./FlowErrorFallback");
 var import_FlowsContextMenu = require("./settings/wrappers/contextual/FlowsContextMenu");
 var import_FlowsFloatContextMenu = require("./settings/wrappers/contextual/FlowsFloatContextMenu");
-const FlowModelRendererWithAutoFlows = (0, import_reactive_react.observer)(
+var import_reactive = require("../reactive");
+const FlowModelRendererWithAutoFlows = (0, import_reactive.observer)(
   ({
     model,
     showFlowSettings,
@@ -64,7 +63,10 @@ const FlowModelRendererWithAutoFlows = (0, import_reactive_react.observer)(
     extraToolbarItems,
     fallback
   }) => {
-    const { loading: pending, error: autoFlowsError } = (0, import_hooks.useApplyAutoFlows)(model, inputArgs, { throwOnError: false });
+    const { loading: pending, error: autoFlowsError } = (0, import_hooks.useApplyAutoFlows)(model, inputArgs, {
+      throwOnError: false,
+      useCache: model.context.useCache
+    });
     (0, import_utils.setAutoFlowError)(model, autoFlowsError || null);
     if (pending) {
       return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, fallback);
@@ -84,7 +86,7 @@ const FlowModelRendererWithAutoFlows = (0, import_reactive_react.observer)(
     ));
   }
 );
-const FlowModelRendererCore = (0, import_reactive_react.observer)(
+const FlowModelRendererCore = (0, import_reactive.observer)(
   ({
     model,
     showFlowSettings,
@@ -95,6 +97,7 @@ const FlowModelRendererCore = (0, import_reactive_react.observer)(
     settingsMenuLevel,
     extraToolbarItems
   }) => {
+    var _a;
     const wrapWithErrorBoundary = /* @__PURE__ */ __name((children) => {
       if (showErrorFallback) {
         return /* @__PURE__ */ import_react.default.createElement(import_react_error_boundary.ErrorBoundary, { FallbackComponent: import_FlowErrorFallback.FlowErrorFallback }, children);
@@ -112,8 +115,13 @@ const FlowModelRendererCore = (0, import_reactive_react.observer)(
       }
       return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, rendered);
     }, "ContentOrError");
+    const rawUse = model == null ? void 0 : model.use;
+    const resolvedName = ((_a = model == null ? void 0 : model.constructor) == null ? void 0 : _a.name) || model.uid;
+    const contentKey = typeof rawUse === "string" ? `${rawUse}:${model.uid}` : `${resolvedName}:${model.uid}`;
     if (!showFlowSettings) {
-      return wrapWithErrorBoundary(/* @__PURE__ */ import_react.default.createElement(ContentOrError, null));
+      return wrapWithErrorBoundary(
+        /* @__PURE__ */ import_react.default.createElement("div", { key: contentKey }, /* @__PURE__ */ import_react.default.createElement(ContentOrError, null))
+      );
     }
     switch (flowSettingsVariant) {
       case "dropdown":
@@ -131,10 +139,14 @@ const FlowModelRendererCore = (0, import_reactive_react.observer)(
             toolbarStyle: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.style : void 0,
             toolbarPosition: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.toolbarPosition : void 0
           },
-          wrapWithErrorBoundary(/* @__PURE__ */ import_react.default.createElement(ContentOrError, null))
+          wrapWithErrorBoundary(
+            /* @__PURE__ */ import_react.default.createElement("div", { key: contentKey }, /* @__PURE__ */ import_react.default.createElement(ContentOrError, null))
+          )
         );
       case "contextMenu":
-        return /* @__PURE__ */ import_react.default.createElement(import_FlowsContextMenu.FlowsContextMenu, { model, showDeleteButton: !hideRemoveInSettings }, wrapWithErrorBoundary(/* @__PURE__ */ import_react.default.createElement(ContentOrError, null)));
+        return /* @__PURE__ */ import_react.default.createElement(import_FlowsContextMenu.FlowsContextMenu, { model, showDeleteButton: !hideRemoveInSettings }, wrapWithErrorBoundary(
+          /* @__PURE__ */ import_react.default.createElement("div", { key: contentKey }, /* @__PURE__ */ import_react.default.createElement(ContentOrError, null))
+        ));
       case "modal":
         console.warn("FlowModelRenderer: modal variant is not implemented yet");
         return wrapWithErrorBoundary(/* @__PURE__ */ import_react.default.createElement(ContentOrError, null));
@@ -159,7 +171,9 @@ const FlowModelRendererCore = (0, import_reactive_react.observer)(
             toolbarStyle: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.style : void 0,
             toolbarPosition: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.toolbarPosition : void 0
           },
-          wrapWithErrorBoundary(/* @__PURE__ */ import_react.default.createElement(ContentOrError, null))
+          wrapWithErrorBoundary(
+            /* @__PURE__ */ import_react.default.createElement("div", { key: contentKey }, /* @__PURE__ */ import_react.default.createElement(ContentOrError, null))
+          )
         );
     }
   },
@@ -167,10 +181,10 @@ const FlowModelRendererCore = (0, import_reactive_react.observer)(
     displayName: "FlowModelRendererCore"
   }
 );
-const FlowModelRenderer = (0, import_reactive_react.observer)(
+const FlowModelRenderer = (0, import_reactive.observer)(
   ({
     model,
-    fallback = /* @__PURE__ */ import_react.default.createElement(import_antd.Skeleton.Button, { size: "small" }),
+    fallback = null,
     showFlowSettings = false,
     flowSettingsVariant = "dropdown",
     hideRemoveInSettings = false,
@@ -178,8 +192,16 @@ const FlowModelRenderer = (0, import_reactive_react.observer)(
     inputArgs,
     showErrorFallback = true,
     settingsMenuLevel,
-    extraToolbarItems
+    extraToolbarItems,
+    useCache
   }) => {
+    (0, import_react.useEffect)(() => {
+      if (model == null ? void 0 : model.context) {
+        model.context.defineProperty("useCache", {
+          value: typeof useCache === "boolean" ? useCache : model.context.useCache
+        });
+      }
+    }, [model == null ? void 0 : model.context, useCache]);
     if (!model || typeof model.render !== "function") {
       console.warn("FlowModelRenderer: Invalid model or render method not found.", model);
       return null;

package/lib/components/FormItem.js

@@ -136,7 +136,11 @@ const FormItem = /* @__PURE__ */ __name(({
       layout,
       label: renderLabel(),
       colon: false,
-      extra: rest.extra && /* @__PURE__ */ import_react.default.createElement("span", { style: { whiteSpace: "pre-wrap" } }, rest.extra)
+      extra: rest.extra && /* @__PURE__ */ import_react.default.createElement("span", { style: { whiteSpace: "pre-wrap" } }, rest.extra),
+      tooltip: rest.tooltip && {
+        title: rest.tooltip,
+        overlayInnerStyle: { whiteSpace: "pre-line" }
+      }
     },
     processedChildren
   );

package/lib/components/MobilePopup.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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, ReactNode } from 'react';
+interface MobilePopupProps {
+    title?: string;
+    visible: boolean;
+    minHeight?: number | string;
+    onClose: () => void;
+    children: ReactNode;
+    className?: string;
+    footer?: ReactNode;
+}
+export declare const MobilePopup: FC<MobilePopupProps>;
+export {};

package/lib/components/MobilePopup.js

@@ -0,0 +1,102 @@
+/**
+ * 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 MobilePopup_exports = {};
+__export(MobilePopup_exports, {
+  MobilePopup: () => MobilePopup
+});
+module.exports = __toCommonJS(MobilePopup_exports);
+var import_antd = require("antd");
+var import_antd_mobile = require("antd-mobile");
+var import_react = __toESM(require("react"));
+var import_antd_mobile_icons = require("antd-mobile-icons");
+var import_MobilePopup = require("./MobilePopup.style");
+var import_react_i18next = require("react-i18next");
+const MobilePopup = /* @__PURE__ */ __name((props) => {
+  const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
+  const { t } = (0, import_react_i18next.useTranslation)();
+  const { componentCls, hashId } = (0, import_MobilePopup.useMobileActionDrawerStyle)();
+  const style = (0, import_react.useMemo)(() => {
+    return {
+      minHeight
+    };
+  }, [minHeight]);
+  const theme = (0, import_react.useMemo)(() => {
+    return {
+      token: {
+        paddingPageHorizontal: 8,
+        paddingPageVertical: 8,
+        marginBlock: 12,
+        borderRadiusBlock: 8,
+        fontSize: 14
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.ConfigProvider, { theme }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd_mobile.Popup,
+    {
+      className: `${componentCls} ${hashId} ${className || ""}`,
+      visible,
+      onClose: closePopup,
+      onMaskClick: closePopup,
+      bodyClassName: "nb-mobile-action-drawer-body",
+      bodyStyle: {
+        padding: 0
+      },
+      maskStyle: style,
+      style,
+      destroyOnClose: true
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-placeholder" }, /* @__PURE__ */ import_react.default.createElement(import_antd_mobile_icons.CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", null, title), /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: "nb-mobile-action-drawer-close-icon",
+        onClick: closePopup,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": t("Close")
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd_mobile_icons.CloseOutline, null)
+    )),
+    children,
+    footer && /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-footer" }, footer)
+  ));
+}, "MobilePopup");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MobilePopup
+});

package/lib/components/MobilePopup.style.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 { useStyleRegister } from '@ant-design/cssinjs';
+type UseComponentStyleResult = {
+    wrapSSR: ReturnType<typeof useStyleRegister>;
+    hashId: string;
+    componentCls: string;
+    rootPrefixCls: string;
+};
+export declare const useMobileActionDrawerStyle: (props?: any) => UseComponentStyleResult;
+export {};

package/lib/components/MobilePopup.style.js

@@ -0,0 +1,186 @@
+/**
+ * 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 __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MobilePopup_style_exports = {};
+__export(MobilePopup_style_exports, {
+  useMobileActionDrawerStyle: () => useMobileActionDrawerStyle
+});
+module.exports = __toCommonJS(MobilePopup_style_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
+var import_shared = require("@formily/shared");
+var import_react = require("react");
+var import_antd = require("antd");
+const usePrefixCls = /* @__PURE__ */ __name((tag, props) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext) || {};
+  if ("ConfigContext" in import_antd.ConfigProvider) {
+    return (getPrefixCls == null ? void 0 : getPrefixCls(tag, props == null ? void 0 : props.prefixCls)) || "";
+  } else {
+    const prefix = (props == null ? void 0 : props.prefixCls) ?? "ant-";
+    return `${prefix}${tag ?? ""}`;
+  }
+}, "usePrefixCls");
+const { ConfigContext } = import_antd.ConfigProvider;
+const useConfig = /* @__PURE__ */ __name(() => (0, import_react.useContext)(ConfigContext), "useConfig");
+const useToken = import_antd.theme.useToken;
+const genCommonStyle = /* @__PURE__ */ __name((token, componentPrefixCls) => {
+  const { fontFamily, fontSize } = token;
+  const rootPrefixSelector = `[class^="${componentPrefixCls}"], [class*=" ${componentPrefixCls}"]`;
+  return {
+    [rootPrefixSelector]: {
+      fontFamily,
+      fontSize,
+      boxSizing: "border-box",
+      "&::before, &::after": {
+        boxSizing: "border-box"
+      },
+      [rootPrefixSelector]: {
+        boxSizing: "border-box",
+        "&::before, &::after": {
+          boxSizing: "border-box"
+        }
+      }
+    }
+  };
+}, "genCommonStyle");
+const genStyleHook = /* @__PURE__ */ __name((component, styleFn) => {
+  return (props) => {
+    const { theme: theme2, token, hashId } = useToken();
+    const { getPrefixCls, iconPrefixCls } = useConfig();
+    const prefixCls = usePrefixCls(component);
+    const rootPrefixCls = getPrefixCls();
+    const wrapSSR = (0, import_cssinjs.useStyleRegister)(
+      {
+        theme: theme2,
+        token,
+        hashId,
+        path: ["formily-antd", component, prefixCls, iconPrefixCls]
+      },
+      () => {
+        const componentCls = `.${prefixCls}`;
+        const mergedToken = (0, import_shared.merge)(token, {
+          componentCls,
+          prefixCls,
+          iconCls: `.${iconPrefixCls}`,
+          antCls: `.${rootPrefixCls}`
+        });
+        const styleInterpolation = styleFn(mergedToken, props, {
+          hashId,
+          prefixCls,
+          rootPrefixCls,
+          iconPrefixCls
+        });
+        return [genCommonStyle(token, prefixCls), styleInterpolation];
+      }
+    );
+    const memoizedWrapSSR = (0, import_react.useMemo)(() => {
+      return wrapSSR;
+    }, [theme2, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props]);
+    return {
+      wrapSSR: memoizedWrapSSR,
+      hashId,
+      componentCls: prefixCls,
+      rootPrefixCls
+    };
+  };
+}, "genStyleHook");
+const useMobileActionDrawerStyle = genStyleHook("nb-mobile-action-drawer", (token) => {
+  const { componentCls } = token;
+  return {
+    [componentCls]: {
+      ".nb-mobile-action-drawer-header": {
+        height: "var(--nb-mobile-page-header-height)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderBottom: `1px solid ${token.colorSplit}`,
+        position: "sticky",
+        top: 0,
+        backgroundColor: "white",
+        zIndex: 1e3,
+        // to match the button named 'Add block'
+        "& + .nb-grid-container > .nb-grid > .nb-grid-warp > .ant-btn": {
+          margin: 12
+        }
+      },
+      ".nb-mobile-action-drawer-placeholder": {
+        display: "inline-block",
+        padding: 12,
+        visibility: "hidden"
+      },
+      ".nb-mobile-action-drawer-close-icon": {
+        display: "inline-block",
+        padding: 12,
+        cursor: "pointer"
+      },
+      ".nb-mobile-action-drawer-body": {
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        maxHeight: "calc(100% - var(--nb-mobile-page-header-height))",
+        overflowY: "auto",
+        overflowX: "hidden",
+        backgroundColor: token.colorBgLayout,
+        // 不带 tab 页的半窗
+        "& > .nb-grid-container": {
+          padding: `${token.paddingPageVertical}px ${token.paddingPageHorizontal}px`
+        },
+        // 带有 tab 页的半窗
+        ".ant-tabs-nav": {
+          marginBottom: "0px !important",
+          padding: `0 ${token.paddingPageHorizontal + token.borderRadiusBlock / 2}px`,
+          backgroundColor: token.colorBgContainer
+        },
+        // clear the margin-bottom of the last block
+        "& > .nb-grid-container > .nb-grid > .nb-grid-warp > .nb-grid-row:nth-last-child(2) .noco-card-item": {
+          marginBottom: 0,
+          "& > .ant-card": {
+            marginBottom: "0 !important"
+          }
+        }
+      },
+      ".nb-mobile-action-drawer-footer": {
+        padding: "8px var(--nb-mobile-page-tabs-content-padding)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        position: "sticky",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 1e3,
+        borderTop: `1px solid ${token.colorSplit}`,
+        backgroundColor: token.colorBgLayout,
+        ".ant-btn": {
+          marginLeft: 8
+        }
+      }
+    }
+  };
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useMobileActionDrawerStyle
+});

package/lib/components/common/withFlowDesignMode.d.ts

@@ -11,7 +11,7 @@ import React from 'react';
  * 高阶组件：仅在设计模式启用时渲染子组件
  *
  * @param WrappedComponent 要包装的组件
- * @returns 包装后的组件，只在 flowSettings.enabled 为 true 时渲染
+ * @returns 包装后的组件，只在 flowSettingsEnabled 为 true 时渲染
  *
  * @example
  * ```tsx

package/lib/components/common/withFlowDesignMode.js

@@ -41,12 +41,12 @@ __export(withFlowDesignMode_exports, {
 });
 module.exports = __toCommonJS(withFlowDesignMode_exports);
 var import_react = __toESM(require("react"));
-var import_reactive_react = require("@formily/reactive-react");
-var import_provider = require("../../provider");
+var import_FlowContextProvider = require("../../FlowContextProvider");
+var import__ = require("../..");
 function withFlowDesignMode(WrappedComponent) {
-  const WithFlowDesignModeComponent = (0, import_reactive_react.observer)((props) => {
-    const flowEngine = (0, import_provider.useFlowEngine)();
-    if (!flowEngine.flowSettings.enabled) {
+  const WithFlowDesignModeComponent = (0, import__.observer)((props) => {
+    const ctx = (0, import_FlowContextProvider.useFlowContext)();
+    if (!ctx.flowSettingsEnabled) {
       return null;
     }
     return /* @__PURE__ */ import_react.default.createElement(WrappedComponent, { ...props });

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")
 });