@nocobase/flow-engine 2.0.0-alpha.2

package/src/views/useDrawer.tsx

@@ -0,0 +1,205 @@
+/**
+ * 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 * as React from 'react';
+import DOMPurify from 'dompurify';
+import { observer } from '..';
+import { FlowContext, FlowEngineContext } from '../flowContext';
+import { FlowViewContextProvider } from '../FlowContextProvider';
+import { createViewMeta } from './createViewMeta';
+import DrawerComponent from './DrawerComponent';
+import usePatchElement from './usePatchElement';
+import { FlowEngineProvider } from '../provider';
+import { createViewScopedEngine } from '../ViewScopedFlowEngine';
+
+let uuid = 0;
+
+export function useDrawer() {
+  const holderRef = React.useRef(null);
+
+  const open = (config, flowContext: FlowEngineContext) => {
+    uuid += 1;
+    const drawerRef = React.createRef<{
+      destroy: () => void;
+      update: (config: any) => void;
+      setFooter: (footer: React.ReactNode) => void;
+      setHeader: (header: { title?: React.ReactNode; extra?: React.ReactNode }) => void;
+    }>();
+
+    // eslint-disable-next-line prefer-const
+    let closeFunc: (() => void) | undefined;
+    let resolvePromise: (value?: any) => void;
+    const promise = new Promise((resolve) => {
+      resolvePromise = resolve;
+    });
+
+    // 使用普通变量来存储状态
+    let currentFooter: React.ReactNode = null;
+    let currentHeader: any = null;
+
+    // Footer 组件实现
+    const FooterComponent = ({ children, ...props }) => {
+      React.useEffect(() => {
+        currentFooter = children;
+        drawerRef.current?.setFooter(children);
+
+        return () => {
+          currentFooter = null;
+          drawerRef.current?.setFooter(null);
+        };
+      }, [children]);
+
+      return null; // Footer 组件本身不渲染内容
+    };
+
+    // Header 组件实现
+    const HeaderComponent = ({ ...props }) => {
+      React.useEffect(() => {
+        currentHeader = props;
+        drawerRef.current?.setHeader(props as any);
+
+        return () => {
+          currentHeader = null;
+          drawerRef.current?.setHeader(null);
+        };
+      }, [props]);
+
+      return null; // Header 组件本身不渲染内容
+    };
+
+    // 构造 currentDrawer 实例
+    const currentDrawer = {
+      type: 'drawer',
+      inputArgs: config.inputArgs || {},
+      preventClose: !!config.preventClose,
+      destroy: () => drawerRef.current?.destroy(),
+      update: (newConfig) => drawerRef.current?.update(newConfig),
+      close: (result?: any, force?: boolean) => {
+        if (config.preventClose && !force) {
+          return;
+        }
+        drawerRef.current?.destroy();
+        closeFunc?.();
+        resolvePromise?.(result);
+      },
+      Footer: FooterComponent,
+      Header: HeaderComponent,
+      setFooter: (footer: React.ReactNode) => {
+        currentFooter = footer;
+        drawerRef.current?.setFooter(footer);
+      },
+      setHeader: (header: { title?: React.ReactNode; extra?: React.ReactNode }) => {
+        currentHeader = header;
+        drawerRef.current?.setHeader(header);
+      },
+      navigation: config.inputArgs?.navigation,
+    };
+
+    const ctx = new FlowContext();
+    ctx.defineProperty('view', {
+      get: () => currentDrawer,
+      meta: createViewMeta(ctx, () => currentDrawer),
+      resolveOnServer: (p: string) => p === 'record' || p.startsWith('record.'),
+    });
+    // 为当前视图创建作用域引擎（隔离实例与缓存）
+    const scopedEngine = createViewScopedEngine(flowContext.engine);
+    // 先将引擎暴露给视图上下文，再按需继承父上下文
+    ctx.defineProperty('engine', { value: scopedEngine });
+    ctx.addDelegate(scopedEngine.context);
+    if (config.inheritContext !== false) {
+      ctx.addDelegate(flowContext);
+    } else {
+      ctx.addDelegate(flowContext.engine.context);
+    }
+
+    // 内部组件，在 Provider 内部计算 content
+    const DrawerWithContext: React.FC = observer(
+      (props) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const mountedRef = React.useRef(false);
+        const rawContent = typeof config.content === 'function' ? config.content(currentDrawer, ctx) : config.content;
+        const content =
+          typeof rawContent === 'string' ? (
+            <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(rawContent) }} />
+          ) : (
+            rawContent
+          );
+
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        React.useEffect(() => {
+          config.onOpen?.(currentDrawer, ctx);
+        }, []);
+
+        if (config.inputArgs?.hidden?.value && !mountedRef.current) {
+          return <>{props.children}</>;
+        }
+
+        mountedRef.current = true;
+
+        return (
+          <DrawerComponent
+            ref={drawerRef}
+            {...config}
+            footer={currentFooter}
+            header={currentHeader}
+            hidden={config.inputArgs?.hidden?.value}
+            afterClose={() => {
+              closeFunc?.();
+              config.onClose?.();
+              resolvePromise?.(config.result);
+              // 关闭时修正 previous/next 指针
+              scopedEngine.unlinkFromStack();
+            }}
+          >
+            {content}
+            {props.children}
+          </DrawerComponent>
+        );
+      },
+      {
+        displayName: 'DrawerWithContext',
+      },
+    );
+
+    const renderDrawer = (children: React.ReactNode) => (
+      <FlowEngineProvider engine={scopedEngine}>
+        <FlowViewContextProvider context={ctx}>
+          <DrawerWithContext>{children}</DrawerWithContext>
+        </FlowViewContextProvider>
+      </FlowEngineProvider>
+    );
+
+    closeFunc = holderRef.current?.patchElement(renderDrawer);
+    return Object.assign(promise, currentDrawer);
+  };
+
+  const api = React.useMemo(() => ({ open }), []);
+  const ElementsHolder = React.memo(
+    React.forwardRef((props, ref) => {
+      const [elements, patchElement] = usePatchElement<(children: React.ReactNode) => React.ReactElement>();
+      React.useImperativeHandle(ref, () => ({ patchElement }), [patchElement]);
+
+      // 嵌套渲染：后面的元素是前一个元素的子元素
+      const renderNestedElements = () => {
+        if (elements.length === 0) {
+          return null;
+        }
+
+        // 从最后一个元素开始，向前递归渲染
+        return elements.reduceRight((children: React.ReactNode, renderElement) => {
+          return renderElement(children);
+        }, null as React.ReactNode);
+      };
+
+      return <>{renderNestedElements()}</>;
+    }),
+  );
+
+  return [api, <ElementsHolder key="drawer-holder" ref={holderRef} />];
+}

package/src/views/usePage.tsx

@@ -0,0 +1,182 @@
+/**
+ * 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';
+import ReactDOM from 'react-dom';
+import { observer } from '..';
+import { FlowContext } from '../flowContext';
+import { FlowViewContextProvider } from '../FlowContextProvider';
+import { createViewMeta } from './createViewMeta';
+import { PageComponent } from './PageComponent';
+import usePatchElement from './usePatchElement';
+import { FlowEngineProvider } from '../provider';
+import { createViewScopedEngine } from '../ViewScopedFlowEngine';
+
+let uuid = 0;
+
+// 稳定的 Holder 组件，避免在父组件重渲染时更换组件类型导致卸载， 否则切换主题时会丢失所有页面内容
+const PageElementsHolder = React.memo(
+  React.forwardRef((props: any, ref: any) => {
+    const [elements, patchElement] = usePatchElement();
+    React.useImperativeHandle(ref, () => ({ patchElement }), [patchElement]);
+    return <>{elements}</>;
+  }),
+);
+
+export function usePage() {
+  const holderRef = React.useRef(null);
+
+  const open = (config, flowContext) => {
+    uuid += 1;
+    const pageRef = React.createRef<{
+      destroy: () => void;
+      update: (config: any) => void;
+      setFooter: (footer: React.ReactNode) => void;
+      setHeader: (header: { title?: React.ReactNode; extra?: React.ReactNode }) => void;
+    }>();
+
+    let closeFunc: (() => void) | undefined;
+    let resolvePromise: (value?: any) => void;
+    const promise = new Promise((resolve) => {
+      resolvePromise = resolve;
+    });
+
+    // Footer 组件实现
+    const FooterComponent = ({ children, ...props }) => {
+      React.useEffect(() => {
+        pageRef.current?.setFooter(children);
+
+        return () => {
+          pageRef.current?.setFooter(null);
+        };
+      }, [children]);
+
+      return null; // Footer 组件本身不渲染内容
+    };
+
+    // Header 组件实现
+    const HeaderComponent = ({ ...props }) => {
+      React.useEffect(() => {
+        pageRef.current?.setHeader(props as any);
+
+        return () => {
+          pageRef.current?.setHeader(null);
+        };
+      }, [props]);
+
+      return null; // Header 组件本身不渲染内容
+    };
+
+    const { target, content, preventClose, inheritContext = true, ...restConfig } = config;
+
+    // 构造 currentPage 实例
+    const currentPage = {
+      type: 'embed',
+      inputArgs: config.inputArgs || {},
+      preventClose: !!config.preventClose,
+      destroy: () => pageRef.current?.destroy(),
+      update: (newConfig) => pageRef.current?.update(newConfig),
+      close: (result?: any, force?: boolean) => {
+        if (preventClose && !force) {
+          return;
+        }
+        resolvePromise?.(result);
+        pageRef.current?.destroy();
+        closeFunc?.();
+      },
+      Header: HeaderComponent,
+      Footer: FooterComponent,
+      setFooter: (footer: React.ReactNode) => {
+        pageRef.current?.setFooter(footer);
+      },
+      setHeader: (header: { title?: React.ReactNode; extra?: React.ReactNode }) => {
+        pageRef.current?.setHeader(header);
+      },
+      navigation: config.inputArgs?.navigation,
+    };
+
+    const ctx = new FlowContext();
+    ctx.defineProperty('view', {
+      get: () => currentPage,
+      meta: createViewMeta(ctx, () => currentPage),
+      resolveOnServer: (p: string) => p === 'record' || p.startsWith('record.'),
+    });
+    // 为当前视图创建作用域引擎（隔离实例与缓存）
+    const scopedEngine = createViewScopedEngine(flowContext.engine);
+    ctx.defineProperty('engine', { value: scopedEngine });
+    ctx.addDelegate(scopedEngine.context);
+    if (inheritContext) {
+      ctx.addDelegate(flowContext);
+    } else {
+      ctx.addDelegate(flowContext.engine.context);
+    }
+
+    const PageWithContext = observer(
+      () => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const mountedRef = React.useRef(false);
+        // 支持 content 为函数，传递 currentPage
+        const pageContent = typeof content === 'function' ? content(currentPage, ctx) : content;
+        // 响应themeToken的响应式更新
+        void ctx.themeToken;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        React.useEffect(() => {
+          config.onOpen?.(currentPage, ctx);
+        }, []);
+
+        if (config.inputArgs?.hidden?.value && !mountedRef.current) {
+          return null;
+        }
+
+        mountedRef.current = true;
+
+        return (
+          <PageComponent
+            key={`page-${uuid}`}
+            ref={pageRef}
+            hidden={config.inputArgs?.hidden?.value}
+            {...restConfig}
+            afterClose={() => {
+              closeFunc?.();
+              config.onClose?.();
+              resolvePromise?.(config.result);
+              // 关闭时修正 previous/next 指针
+              scopedEngine.unlinkFromStack();
+            }}
+          >
+            {pageContent}
+          </PageComponent>
+        );
+      },
+      {
+        displayName: 'PageWithContext',
+      },
+    );
+
+    const page = (
+      <FlowEngineProvider engine={scopedEngine}>
+        <FlowViewContextProvider context={ctx}>
+          <PageWithContext />
+        </FlowViewContextProvider>
+      </FlowEngineProvider>
+    );
+
+    if (target && target instanceof HTMLElement) {
+      closeFunc = holderRef.current?.patchElement(ReactDOM.createPortal(page, target));
+    } else {
+      closeFunc = holderRef.current?.patchElement(page);
+    }
+
+    return Object.assign(promise, currentPage);
+  };
+
+  const api = React.useMemo(() => ({ open }), []);
+
+  return [api, <PageElementsHolder key="page-holder" ref={holderRef} />];
+}

package/src/views/usePatchElement.tsx

@@ -0,0 +1,27 @@
+/**
+ * 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 * as React from 'react';
+
+export default function usePatchElement<T = React.ReactElement>(): [T[], (element: T) => () => void] {
+  const [elements, setElements] = React.useState<T[]>([]);
+
+  const patchElement = React.useCallback((element: T) => {
+    // append a new element to elements (and create a new ref)
+    setElements((originElements) => [...originElements, element]);
+
+    // return a function that removes the new element out of elements (and create a new ref)
+    // it works a little like useEffect
+    return () => {
+      setElements((originElements) => originElements.filter((ele) => ele !== element));
+    };
+  }, []);
+
+  return [elements, patchElement];
+}

package/src/views/usePopover.tsx

@@ -0,0 +1,131 @@
+/**
+ * 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 { Popover } from 'antd';
+import DOMPurify from 'dompurify';
+import * as React from 'react';
+import usePatchElement from './usePatchElement';
+
+let uuid = 0;
+
+// 独立 PopoverComponent，参考 DrawerComponent 实现
+const PopoverComponent = React.forwardRef<any, any>(({ afterClose, content, placement, rect, ...props }, ref) => {
+  const [visible, setVisible] = React.useState(true);
+  const [config, setConfig] = React.useState<any>({ content, placement, rect, ...props });
+
+  React.useImperativeHandle(ref, () => ({
+    destroy: () => setVisible(false),
+    update: (newConfig: any) => setConfig((prev) => ({ ...prev, ...newConfig })),
+    close: (result?: any, _force?: boolean) => setVisible(false),
+  }));
+
+  // 关闭后触发 afterClose
+  React.useEffect(() => {
+    if (!visible) {
+      afterClose?.();
+    }
+  }, [visible, afterClose]);
+
+  return (
+    <Popover
+      arrow={false}
+      open={visible}
+      trigger={['click']}
+      destroyTooltipOnHide
+      content={config.content}
+      placement={config.placement}
+      getPopupContainer={() => document.body}
+      onOpenChange={(nextOpen) => {
+        setVisible(nextOpen);
+        if (!nextOpen) {
+          afterClose?.();
+        }
+      }}
+      {...config}
+    >
+      <span
+        style={{
+          position: 'absolute',
+          top: (config.rect?.top ?? 0) + window.scrollY,
+          left: (config.rect?.left ?? 0) + window.scrollX,
+          width: 0,
+          height: 0,
+        }}
+      />
+    </Popover>
+  );
+});
+
+export function usePopover() {
+  const holderRef = React.useRef<any>(null);
+
+  const open = (config) => {
+    uuid += 1;
+    const { target, placement = 'rightTop', content, ...rest } = config;
+    const popoverRef = React.createRef<any>();
+
+    // 计算目标位置
+    const rect = target?.getBoundingClientRect?.() ?? { top: 0, left: 0 };
+
+    // eslint-disable-next-line prefer-const
+    let closeFunc: (() => void) | undefined;
+    let resolvePromise: (value?: any) => void;
+    const promise = new Promise((resolve) => {
+      resolvePromise = resolve;
+    });
+
+    // 构造 currentPopover 实例
+    const currentPopover = {
+      type: 'popover',
+      destroy: () => popoverRef.current?.destroy(),
+      update: (newConfig) => popoverRef.current?.update(newConfig),
+      close: (result?: any) => {
+        resolvePromise?.(result);
+        popoverRef.current?.close(result);
+      },
+    };
+    const rawChildren = typeof content === 'function' ? content(currentPopover) : content;
+    const children =
+      typeof rawChildren === 'string' ? (
+        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(rawChildren) }} />
+      ) : (
+        rawChildren
+      );
+
+    const popover = (
+      <PopoverComponent
+        key={`popover-${uuid}`}
+        ref={popoverRef}
+        content={children}
+        placement={placement}
+        rect={rect}
+        afterClose={() => {
+          closeFunc?.();
+          config.onClose?.();
+          resolvePromise?.(config.result);
+        }}
+        {...rest}
+      />
+    );
+    closeFunc = holderRef.current?.patchElement(popover);
+
+    return Object.assign(promise, currentPopover);
+  };
+
+  const api = React.useMemo(() => ({ open }), []);
+  const ElementsHolder = React.memo(
+    React.forwardRef((props, ref) => {
+      const [elements, patchElement] = usePatchElement();
+      React.useImperativeHandle(ref, () => ({ patchElement }), []);
+      return <>{elements}</>;
+    }),
+  );
+
+  return [api, <ElementsHolder key="popover-holder" ref={holderRef} />];
+}