@nocobase/flow-engine 2.0.0-alpha.2

package/src/components/variables/VariableInput.tsx

@@ -0,0 +1,342 @@
+/**
+ * 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, { useMemo, useCallback, useState, useEffect, useRef } from 'react';
+import { Input, Space } from 'antd';
+import type { VariableInputProps } from './types';
+import { FlowContextSelector } from '../FlowContextSelector';
+import { VariableTag } from './VariableTag';
+import { isVariableValue } from './utils';
+import { createFinalConverters } from './utils';
+import { MetaTreeNode } from '../../flowContext';
+import { useRequest } from 'ahooks';
+
+const compactStyle = {
+  display: 'flex' as const,
+  alignItems: 'flex-start' as const,
+};
+
+/**
+ * 根据路径数组在metaTree中查找对应的MetaTreeNode
+ * - 支持在 metaTree 为子树（如去掉了根级 ctx.collection）的情况下，自动裁剪首段进行查找
+ */
+const findMetaTreeNodeByPath = (metaTree: MetaTreeNode[], targetPath: string[]): MetaTreeNode | null => {
+  if (!targetPath || targetPath.length === 0) return null;
+
+  const searchInNodes = (nodes: MetaTreeNode[], path: string[]): MetaTreeNode | null => {
+    for (const node of nodes) {
+      if (node.paths && arraysEqual(node.paths, path)) {
+        return node;
+      }
+      if (node.paths && isPathPrefix(node.paths, path) && node.children) {
+        if (Array.isArray(node.children)) {
+          const found = searchInNodes(node.children, path);
+          if (found) return found;
+        }
+      }
+    }
+    return null;
+  };
+
+  // 1) 直接尝试完整路径
+  const direct = searchInNodes(metaTree, targetPath);
+  if (direct) return direct;
+
+  // 2) 若顶层不包含首段，则裁剪首段重试（兼容子树作为 metaTree 的情况）
+  const topNames = new Set((metaTree || []).map((n) => String(n.name)));
+  if (!topNames.has(String(targetPath[0]))) {
+    const trimmed = targetPath.slice(1);
+    if (trimmed.length > 0) {
+      return searchInNodes(metaTree, trimmed);
+    }
+  }
+
+  return null;
+};
+
+/**
+ * 检查两个数组是否相等
+ */
+const arraysEqual = (a: string[], b: string[]): boolean => {
+  if (a.length !== b.length) return false;
+  return a.every((val, index) => val === b[index]);
+};
+
+/**
+ * 检查pathA是否是pathB的前缀
+ * 例如 ["user"] 是 ["user", "profile"] 的前缀
+ */
+const isPathPrefix = (pathA: string[], pathB: string[]): boolean => {
+  if (pathA.length >= pathB.length) return false;
+  return pathA.every((val, index) => val === pathB[index]);
+};
+
+const VariableInputComponent: React.FC<VariableInputProps> = ({
+  value,
+  onChange,
+  converters: propConverters,
+  metaTree,
+  showValueComponent = true,
+  onlyLeafSelectable = false,
+  clearValue,
+  ...restProps
+}) => {
+  const [currentMetaTreeNode, setCurrentMetaTreeNode] = useState<MetaTreeNode | null>(null);
+  const lastEmitRef = useRef<{ value: any; path?: string } | null>(null);
+  const [innerValue, setInnerValue] = useState<any>(value);
+  useEffect(() => {
+    setInnerValue(value);
+  }, [value]);
+  const { resolveValueFromPath, resolvePathFromValue, renderInputComponent } = useMemo(() => {
+    return createFinalConverters(propConverters);
+  }, [propConverters]);
+  const { data: resolvedMetaTree, loading } = useRequest(
+    async () => {
+      if (typeof metaTree === 'function') {
+        const ret = await metaTree();
+        if (typeof ret === 'function') {
+          return await (ret as unknown as () => any)();
+        }
+        return ret;
+      }
+      return metaTree;
+    },
+    { refreshDeps: [metaTree] },
+  );
+
+  const emitChange = useCallback(
+    (nextValue: any, meta?: MetaTreeNode) => {
+      const nextPath = meta?.paths ? meta.paths.join('.') : undefined;
+      const last = lastEmitRef.current;
+      if (last && last.value === nextValue && last.path === nextPath) {
+        return false;
+      }
+      lastEmitRef.current = { value: nextValue, path: nextPath };
+      onChange?.(nextValue, meta);
+      return true;
+    },
+    [onChange],
+  );
+
+  const resolvedMetaTreeNode = useMemo(() => {
+    if (currentMetaTreeNode) return currentMetaTreeNode;
+    if (Array.isArray(resolvedMetaTree)) {
+      const path = resolvePathFromValue?.(innerValue);
+      if (path) {
+        return findMetaTreeNodeByPath(resolvedMetaTree, path);
+      }
+    }
+    return null;
+  }, [currentMetaTreeNode, innerValue, resolvedMetaTree, resolvePathFromValue]);
+
+  // 当 value 存在但 currentMetaTreeNode 还未恢复，尝试按路径逐级加载（支持 children 为函数的场景）
+  useEffect(() => {
+    const restoreFromValue = async () => {
+      if (!Array.isArray(resolvedMetaTree) || !value) return;
+
+      // 若已存在且路径匹配，跳过
+      if (currentMetaTreeNode) {
+        return;
+      }
+
+      const rawPath = resolvePathFromValue?.(value);
+      if (!rawPath || rawPath.length === 0) return;
+
+      // 兼容 metaTree 为子树的情况：若顶层无首段，裁剪第一段
+      const topNames = new Set(resolvedMetaTree.map((n) => String(n.name)));
+      const path = !topNames.has(String(rawPath[0])) ? rawPath.slice(1) : rawPath;
+      if (path.length === 0) return;
+
+      // 逐级解析，必要时异步加载 children
+      let nodes: MetaTreeNode[] | undefined = resolvedMetaTree;
+      let found: MetaTreeNode | null = null;
+      for (let i = 0; i < path.length; i++) {
+        if (!nodes) {
+          found = null;
+          break;
+        }
+        const seg = String(path[i]);
+        const node = nodes.find((n) => String(n?.name) === seg);
+        if (!node) {
+          found = null;
+          break;
+        }
+        found = node;
+        if (i < path.length - 1) {
+          if (Array.isArray(node.children)) {
+            nodes = node.children as any;
+          } else if (typeof node.children === 'function') {
+            try {
+              const childNodes = await (node.children as any)();
+              node.children = childNodes;
+              nodes = childNodes as any;
+            } catch {
+              nodes = undefined;
+            }
+          } else {
+            nodes = undefined;
+          }
+        }
+      }
+
+      if (found) {
+        setCurrentMetaTreeNode(found);
+      }
+    };
+
+    restoreFromValue();
+  }, [resolvedMetaTree, innerValue, resolvePathFromValue, currentMetaTreeNode]);
+
+  const ValueComponent = useMemo(() => {
+    const Component = renderInputComponent?.(resolvedMetaTreeNode);
+    const CustomComponent = resolvedMetaTreeNode?.render;
+    const finalComponent = isVariableValue(innerValue) ? VariableTag : Component || CustomComponent || Input;
+    return finalComponent;
+  }, [renderInputComponent, resolvedMetaTreeNode, innerValue]);
+
+  useEffect(() => {
+    if (!resolvedMetaTreeNode) return;
+    if (!Array.isArray(resolvedMetaTree) || !innerValue) return;
+    const finalValue = resolveValueFromPath?.(resolvedMetaTreeNode) || innerValue;
+    emitChange(finalValue, resolvedMetaTreeNode);
+    setCurrentMetaTreeNode(resolvedMetaTreeNode);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [resolvedMetaTreeNode]);
+
+  // Track IME composition input
+  const composingRef = useRef(false);
+  const handleComposition = useCallback(
+    (e: React.CompositionEvent<HTMLInputElement> | any) => {
+      if (e?.type === 'compositionend') {
+        composingRef.current = false;
+        // After composition ends, ensure latest value is emitted
+        const newValue = e?.target?.value !== undefined ? e.target.value : e;
+        setInnerValue(newValue);
+        emitChange(newValue);
+      } else {
+        composingRef.current = true;
+      }
+    },
+    [emitChange],
+  );
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement> | any) => {
+      const newValue = e?.target?.value !== undefined ? e.target.value : e;
+      setInnerValue(newValue);
+      // If currently composing, defer outer change until compositionend
+      const isComposing = composingRef.current || (e?.nativeEvent && (e.nativeEvent as any).isComposing);
+      if (isComposing) return;
+      emitChange(newValue);
+    },
+    [emitChange],
+  );
+
+  const handleVariableSelect = useCallback(
+    (variableValue: string, metaTreeNode?: MetaTreeNode) => {
+      setCurrentMetaTreeNode(metaTreeNode);
+      const finalValue = resolveValueFromPath?.(metaTreeNode) || variableValue;
+      setInnerValue(finalValue);
+      emitChange(finalValue, metaTreeNode);
+    },
+    [emitChange, resolveValueFromPath],
+  );
+
+  const { disabled } = restProps;
+
+  const handleClear = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    setCurrentMetaTreeNode(null);
+    const cleared = clearValue !== undefined ? clearValue : null;
+    setInnerValue(cleared);
+    emitChange(cleared as any);
+  }, [emitChange, disabled, clearValue]);
+
+  const stableProps = useMemo(() => {
+    const { style, onFocus, onBlur, disabled, ...otherProps } = restProps;
+    return { style, onFocus, onBlur, otherProps };
+  }, [restProps]);
+
+  const inputProps = useMemo(() => {
+    const baseProps = {
+      value: innerValue || '',
+      onChange: handleInputChange,
+      disabled,
+    };
+
+    if (ValueComponent === VariableTag) {
+      return {
+        ...baseProps,
+        onClear: handleClear,
+        metaTreeNode: resolvedMetaTreeNode,
+        metaTree,
+        style: stableProps.style,
+      };
+    }
+
+    // 避免外部 otherProps 中的 value/onChange 覆盖受控值
+    const { value: _ignoredValue, onChange: _ignoredOnChange, ...restOthers } = stableProps.otherProps || {};
+    const props = {
+      ...baseProps,
+      ...restOthers,
+      // Ensure IME composition works correctly for text inputs
+      onCompositionStart: handleComposition,
+      onCompositionUpdate: handleComposition,
+      onCompositionEnd: handleComposition,
+    };
+    return props;
+  }, [
+    innerValue,
+    handleInputChange,
+    handleComposition,
+    disabled,
+    handleClear,
+    resolvedMetaTreeNode,
+    metaTree,
+    ValueComponent,
+    stableProps,
+  ]);
+
+  const finalStyle = useMemo(
+    () => ({
+      ...compactStyle,
+      ...restProps.style,
+    }),
+    [restProps.style],
+  );
+
+  if (loading) {
+    return null;
+  }
+
+  return (
+    <Space.Compact style={finalStyle}>
+      {showValueComponent && (
+        <ValueComponent
+          // 保证值组件在 Flex 容器中可收缩并占满可用宽度
+          style={{ width: '100%', minWidth: 0, ...inputProps['style'] }}
+          {...inputProps}
+        />
+      )}
+      <FlowContextSelector
+        metaTree={resolvedMetaTree}
+        value={innerValue}
+        onChange={handleVariableSelect}
+        parseValueToPath={resolvePathFromValue}
+        formatPathToValue={resolveValueFromPath}
+        onlyLeafSelectable={onlyLeafSelectable}
+        {...(!showValueComponent && { children: null, placeholder: restProps?.placeholder })}
+      />
+    </Space.Compact>
+  );
+};
+
+export const VariableInput = React.memo(VariableInputComponent);

package/src/components/variables/VariableTag.tsx

@@ -0,0 +1,123 @@
+/**
+ * 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 { Select, Tag, theme, Tooltip } from 'antd';
+import { cx, css } from '@emotion/css';
+import type { VariableTagProps } from './types';
+import { parseValueToPath } from './utils';
+import { useResolvedMetaTree } from './useResolvedMetaTree';
+import { useRequest } from 'ahooks';
+import { useFlowContext } from '../../FlowContextProvider';
+
+const VariableTagComponent: React.FC<VariableTagProps> = ({
+  value,
+  onClear,
+  className,
+  style,
+  metaTreeNode,
+  metaTree,
+}) => {
+  const { resolvedMetaTree } = useResolvedMetaTree(metaTree);
+  const ctx = useFlowContext();
+
+  const { data: displayedValue } = useRequest(
+    async () => {
+      if (metaTreeNode) {
+        return metaTreeNode.parentTitles
+          ? [...metaTreeNode.parentTitles, metaTreeNode.title].map(ctx.t).join('/')
+          : ctx.t(metaTreeNode.title) || '';
+      }
+      if (!value) return String(value);
+      const path = parseValueToPath(value);
+      return path ? path.join('/') : String(value);
+    },
+    { refreshDeps: [resolvedMetaTree, value, metaTreeNode] },
+  );
+
+  const { token } = theme.useToken();
+
+  // 修复 rc-select tags 模式下单个 tag 不能收缩的问题：
+  // 让包裹 tag 的 overflow item 可收缩，从而触发内部文本的省略。
+  const shrinkableOverflowItem = css`
+    /* 选择器容器允许收缩并隐藏超出 */
+    & .ant-select-selector {
+      min-width: 0;
+      overflow: hidden;
+    }
+    /* rc-overflow 只展示单行，避免换行导致容器增高 */
+    & .rc-overflow {
+      flex-wrap: nowrap;
+    }
+  `;
+
+  const customTagRender = (props: any) => {
+    const { label } = props;
+    const fullText = typeof label === 'string' ? label : String(label);
+
+    return (
+      <Tooltip title={fullText} placement="top" getPopupContainer={() => document.body}>
+        <Tag
+          color="blue"
+          style={{
+            margin: `0 ${token.marginXXS || token.marginXS}px`,
+            borderRadius: token.borderRadiusSM,
+            fontSize: token.fontSizeSM,
+            display: 'inline-flex',
+            alignItems: 'center',
+            padding: `0 ${token.paddingXXS}px`,
+            minWidth: 0,
+            maxWidth: '100%',
+            overflow: 'hidden',
+            width: '100%',
+          }}
+        >
+          <span
+            style={{
+              minWidth: 0,
+              width: '100%',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              display: 'inline-block',
+            }}
+          >
+            {fullText}
+          </span>
+        </Tag>
+      </Tooltip>
+    );
+  };
+
+  return (
+    <Select
+      className={cx('variable', shrinkableOverflowItem, className)}
+      style={{
+        // Fill the available width of the surrounding layout.
+        // A fixed maxWidth here caused the input to shrink when a variable is selected.
+        width: '100%',
+        minWidth: 0,
+        flex: '1 1 auto',
+        ...style,
+      }}
+      value={displayedValue ? [displayedValue] : []}
+      mode="tags"
+      open={false}
+      allowClear={!!onClear}
+      onClear={onClear}
+      disabled={!onClear}
+      variant="outlined"
+      suffixIcon={null}
+      tagRender={customTagRender}
+      onClick={(e) => e.preventDefault()}
+      removeIcon={null}
+    />
+  );
+};
+
+export const VariableTag = React.memo(VariableTagComponent);

package/src/components/variables/VariableTrigger.tsx

@@ -0,0 +1,116 @@
+/**
+ * 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, { useState } from 'react';
+import { Popover } from 'antd';
+import { RenderElementProps } from 'slate-react';
+import { FlowContextSelector } from '../FlowContextSelector';
+import type { VariableTriggerElement } from './types';
+import type { MetaTreeNode } from '../../flowContext';
+
+interface VariableTriggerProps extends RenderElementProps {
+  element: VariableTriggerElement;
+  metaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
+  onVariableSelect?: (triggerId: string, value: string, item: MetaTreeNode) => void;
+  onTriggerClose?: (triggerId: string) => void;
+}
+
+export const VariableTrigger: React.FC<VariableTriggerProps> = ({
+  attributes,
+  children,
+  element,
+  metaTree,
+  onVariableSelect,
+  onTriggerClose,
+}) => {
+  const [open, setOpen] = useState(true);
+
+  const handleVariableSelect = (value: string, item?: MetaTreeNode) => {
+    if (item) {
+      setOpen(false);
+      onVariableSelect?.(element.triggerId, value, item);
+    }
+  };
+
+  const handleOpenChange = (visible: boolean) => {
+    if (!visible) {
+      setOpen(false);
+      onTriggerClose?.(element.triggerId);
+    }
+  };
+
+  return (
+    <Popover
+      content={
+        <div style={{ width: 'fit-content' }}>
+          <style>
+            {`
+              .variable-trigger-popover {
+                width: fit-content !important;
+              }
+              .variable-trigger-popover .ant-popover-content,
+              .variable-trigger-popover .ant-popover-inner {
+                background: transparent !important;
+                box-shadow: none !important;
+                border: none !important;
+                padding: 0 !important;
+                width: fit-content !important;
+              }
+              .variable-trigger-popover .ant-popover-arrow { display: none !important; }
+              .variable-trigger-popover .ant-cascader-menu { 
+                max-height: 50vh !important; 
+                overflow-y: auto !important; 
+                width: auto !important; 
+                min-width: auto !important; 
+              }
+              .variable-trigger-popover .ant-cascader-menus { width: fit-content !important; }
+            `}
+          </style>
+          <FlowContextSelector
+            metaTree={metaTree}
+            onChange={handleVariableSelect}
+            open={true}
+            showSearch={false}
+            dropdownStyle={{ boxShadow: 'none', border: 'none' }}
+            style={{ display: 'none' }}
+          >
+            <div />
+          </FlowContextSelector>
+        </div>
+      }
+      open={open}
+      trigger="click"
+      placement="bottomLeft"
+      onOpenChange={handleOpenChange}
+      overlayClassName="variable-trigger-popover"
+      destroyTooltipOnHide
+    >
+      <span
+        {...attributes}
+        contentEditable={false}
+        style={{
+          backgroundColor: '#e6f7ff',
+          border: '1px dashed #1890ff',
+          borderRadius: 4,
+          padding: '1px 4px',
+          margin: '0 1px',
+          cursor: 'pointer',
+          display: 'inline-block',
+          fontSize: '12px',
+          color: '#1890ff',
+          userSelect: 'none',
+        }}
+        data-slate-void={true}
+      >
+        {'{{}}'}
+        <span style={{ display: 'none' }}>{children}</span>
+      </span>
+    </Popover>
+  );
+};