@fudanda/workflow 0.0.0-stage → 1.20261015.1-beta.1

package/vendor/coze/original/tree-variable-selector.less

@@ -0,0 +1,292 @@
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable max-nesting-depth */
+.tree-select {
+  background-color: var(--semi-color-white);
+  border: 1px solid var(--semi-color-border);
+
+  &:global(.semi-tree-select-focus) {
+    border: 1px solid var(--semi-color-focus-border);
+  }
+
+  &:global(.semi-tree-select-error) {
+    background-color: var(--semi-color-danger-light-default);
+    border-color: var(--semi-color-danger-light-default);
+  }
+
+  :global {
+    .semi-tree-select-selection-TriggerSearchItem {
+      cursor: text;
+      max-width: calc(100% - 8px);
+      white-space: nowrap;
+    }
+
+    // 为 tooltip + search 做妥协
+    // 当选择框上支持搜索的时候，搜索 Input 会覆盖在选中值元素上面，导致 hover tooltip 不出现
+    // 而直接将选中值元素层级升高，又会在画布中和其他节点有层级问题
+    // 因此这里做一个特殊处理，当鼠标悬浮在搜索 Input 上 / 选中值元素上时，保持选中值元素层级，以展示 tooltip
+    .semi-tree-select-selection-TriggerSearchItem:hover {
+      z-index: 1;
+    }
+
+    .semi-tree-select-selection-TriggerSearchItem:has(+ .semi-tree-select-triggerSingleSearch-wrapper:hover) {
+      z-index: 1;
+    }
+  }
+
+  .select-selection {
+    display: inline-block;
+    max-width: 100%;
+
+    div {
+      display: inline-flex;
+      gap: 4px;
+      max-width: 100%;
+
+      span {
+        display: inline-block;
+
+        max-width: 100%;
+
+        font-size: 14px;
+        font-weight: 400;
+        font-style: normal;
+        line-height: 20px;
+        white-space: nowrap;
+      }
+
+      .label-prefix {
+        font-weight: 600;
+        color: var(--light-usage-text-color-text-2, rgba(29, 28, 35, 60%));
+      }
+
+      .label-content {
+        overflow: hidden;
+        font-weight: 400;
+        color: var(--light-usage-text-color-text-0, #1D1C23);
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+.tree-select-dropdown {
+  overflow: auto;
+  // max-width: 400px;
+  max-height: 380px;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgb(29 28 35 / 30%);
+    border-radius: 6px;
+    // border-top: 3px solid transparent;
+    // border-left: 3px solid transparent;
+    // background-clip: padding-box;
+
+    &:hover {
+      background: rgb(29 28 35 / 60%);
+    }
+  }
+
+  &::-webkit-scrollbar-corner {
+    display: none;
+  }
+
+  .search-text {
+    color: var(--light-usage-warning-color-warning, #FF9600)
+  }
+
+  :global {
+    .semi-tree-wrapper {
+      // width: fit-content;
+
+      .semi-tree-option-list {
+        width: fit-content;
+        min-width: 100%;
+        padding: 4px;
+        padding-left: 0;
+
+        li {
+          height: 32px;
+        }
+
+        .semi-tree-option {
+          pointer-events: none;
+          background-color: transparent;
+        }
+
+        .semi-tree-option-label {
+          pointer-events: auto;
+
+          height: 24px;
+          margin-right: 4px;
+          padding: 0 4px;
+
+          border-radius: 4px;
+
+          &:hover {
+            background: var(--light-usage-fill-color-fill-1, rgb(46 46 56 / 8%));
+          }
+
+          &:active {
+            background: var(--light-usage-fill-color-fill-2, rgb(46 46 56 / 12%));
+          }
+
+          img {
+            width: 16px;
+            height: 16px;
+            margin: 0 4px;
+          }
+
+          .semi-tree-option-label-text {
+            display: inline-block;
+            width: fit-content;
+            white-space: nowrap;
+          }
+
+          .semi-tree-option-label-text span {
+            display: inline-block;
+            width: fit-content;
+            white-space: nowrap;
+            // padding-right: 16px;
+          }
+        }
+
+        .semi-tree-option-selected {
+          font-weight: 600;
+          color: var(--light-usage-primary-color-primary, #4D53E8);
+        }
+
+        .semi-tree-option-disabled {
+          .semi-tree-option-label {
+            cursor: not-allowed;
+            background: transparent;
+          }
+
+          .semi-icon+.semi-tree-option-label {
+            color: var(--light-usage-text-color-text-0, #1D1C23);
+          }
+        }
+      }
+
+      .semi-tree-option-empty-icon {
+        width: 16px;
+      }
+
+      .semi-tree-option-expand-icon {
+        pointer-events: auto;
+
+        width: 16px;
+        height: 16px;
+        margin-right: 0;
+        padding: 4px;
+
+        border-radius: 4px;
+
+        &:hover {
+          background: var(--light-usage-fill-color-fill-1, rgb(46 46 56 / 8%));
+        }
+
+        &:active {
+          background: var(--light-usage-fill-color-fill-2, rgb(46 46 56 / 12%));
+        }
+
+        svg {
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+  }
+}
+
+.select-wrapper {
+  width: 100%;
+}
+
+.popover-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: center;
+
+  min-width: 160px;
+  max-width: 360px;
+  min-height: 22px;
+  /* stylelint-disable-next-line declaration-no-important */
+  padding: 16px !important;
+
+  background: var(--light-color-white-white, #FFF);
+  border-radius: 12px;
+
+  .popover {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: flex-start;
+
+    .header {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      align-self: stretch;
+
+      .logo {
+        width: 16px;
+        height: 16px;
+        border-radius: 2.667px;
+      }
+
+      .title {
+        font-size: 16px;
+        font-weight: 600;
+        font-style: normal;
+        line-height: 22px;
+        color: var(--light-usage-text-color-text-0, #1D1C23);
+      }
+    }
+
+    .content {
+      p {
+        font-size: 14px;
+        font-weight: 400;
+        font-style: normal;
+        line-height: 20px;
+        color: var(--light-usage-text-color-text-0, #1D1C23);
+        word-break: break-word;
+      }
+    }
+  }
+}
+
+.option-icon-wrapper {
+  line-height: 0;
+
+  img {
+    border-radius: 4px;;
+  }
+}
+
+.bot-select-node-variable-tree {
+  max-height: 352px;
+
+  :global {
+    .semi-tree-option-expand-icon {
+      margin-left: 4px;
+    }
+
+    .semi-tree-option-empty-icon {
+      margin-left: 4px;
+    }
+
+    .semi-tree-option-empty {
+      pointer-events: none;
+    }
+  }
+}

package/vendor/coze/original/tree-variable-selector.tsx

@@ -0,0 +1,298 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, {
+  type FC,
+  useCallback,
+  useState,
+  useEffect,
+  useRef,
+  type ReactNode,
+} from 'react';
+
+import { isArray } from 'lodash-es';
+import {
+  isGlobalVariableKey,
+  useVariableRename,
+  useWorkflowVariableByKeyPath,
+} from '@coze-workflow/variable';
+import { type ViewVariableType } from '@coze-workflow/variable';
+import { type WithCustomStyle } from '@coze-workflow/base/types';
+import { I18n } from '@coze-arch/i18n';
+import { usePersistCallback, useUpdateEffect } from '@coze-arch/hooks';
+import { type TreeSelectProps } from '@coze-arch/bot-semi/TreeSelect';
+import { type TreeNodeData } from '@coze-arch/bot-semi/Tree';
+import { IconCozVariables } from '@coze-arch/coze-design/icons';
+
+import useGlobalVariableCache from '@/form-extensions/components/tree-variable-selector/use-global-variable-cache';
+import GlobalVarIcon from '@/form-extensions/components/tree-variable-selector/global-var-icon';
+
+import { NodeIcon } from '../../../components/node-icon';
+import {
+  formatDataWithGlobalVariable,
+  processDataSourceLabelRender,
+} from './utils';
+import { useFormatVariableDataSource } from './useFormatVariableDataSource';
+import {
+  type CustomFilterVar,
+  type RenderDisplayVarName,
+  type VariableTreeDataNode,
+} from './types';
+import { TreeVariableSelectorContext } from './context';
+import { CompositeSelect } from './composite-select';
+
+export type VariableSelectorProps = WithCustomStyle<{
+  testId?: string;
+  disabled?: boolean;
+  disabledTypes?: Array<ViewVariableType>;
+  forArrayItem?: boolean;
+  value?: string[];
+  onChange?: (value: string[] | undefined) => void;
+  onBlur?: (e: React.MouseEvent) => void;
+  dataSource?: VariableTreeDataNode[];
+  validateStatus?: TreeSelectProps['validateStatus'];
+  placeholder?: string;
+  emptyContent?: TreeSelectProps['emptyContent'];
+  invalidContent?: string;
+  readonly?: boolean;
+  // Can be replaced by disabledTypes
+  optionFilter?: (value: string[]) => boolean;
+  dropdownClassName?: string;
+  showClear?: boolean;
+  // Trigger onChange when variable rename occurs
+  triggerChangeWhenRename?: boolean;
+  renderDisplayVarName?: RenderDisplayVarName;
+  customFilterVar?: CustomFilterVar;
+  trigger?: ReactNode;
+  onPopoverVisibleChange?: (visible: boolean) => void;
+  renderExtraOption?: (data?: TreeNodeData[]) => ReactNode;
+  handleDataSource?: (data: TreeNodeData[]) => TreeNodeData[];
+  // Whether to allow node selection
+  enableSelectNode?: boolean;
+  popoverStyle?: React.CSSProperties;
+}>;
+
+/**
+ * A stateless component where value is externally controlled
+ */
+// eslint-disable-next-line complexity
+export const VariableSelector: FC<VariableSelectorProps> = props => {
+  const {
+    dataSource: rawDataSource,
+    disabled,
+    disabledTypes = [],
+    forArrayItem,
+    className,
+    style = {},
+    onChange,
+    onBlur,
+    value,
+    placeholder,
+    emptyContent,
+    validateStatus,
+    invalidContent = I18n.t('workflow_detail_unknown_variable'),
+    readonly,
+    testId,
+    showClear,
+    triggerChangeWhenRename,
+    renderDisplayVarName,
+    customFilterVar,
+    trigger,
+    onPopoverVisibleChange,
+    renderExtraOption,
+    enableSelectNode = false,
+    popoverStyle,
+    handleDataSource,
+  } = props;
+  const [query, setQuery] = useState('');
+  const treeSelectRef = useRef<HTMLDivElement>(null);
+
+  /** Selectable variable data with default backstop */
+  const defaultVariableDataSource = useFormatVariableDataSource({
+    disabledTypes,
+  });
+
+  const dataSourceWithGlobal = useGlobalVariableCache(
+    rawDataSource || defaultVariableDataSource,
+  );
+
+  // Process DataSource data, add partial fields/renders
+  const variableDataSource = processDataSourceLabelRender({
+    dataSource: dataSourceWithGlobal,
+    disabledTypes,
+    icon: node =>
+      isGlobalVariableKey(node.value) ? (
+        <GlobalVarIcon nodeId={node.value} />
+      ) : (
+        <NodeIcon
+          size={16}
+          alt="logo"
+          nodeId={node.value}
+          className="leading-[0px]"
+        />
+      ),
+    renderDisplayVarName,
+    customFilterVar,
+    enableSelectNode,
+  });
+
+  const variableDataSourceWithGroup =
+    formatDataWithGlobalVariable(variableDataSource);
+
+  const dataSource = handleDataSource
+    ? handleDataSource(variableDataSourceWithGroup)
+    : variableDataSourceWithGroup;
+
+  const onValueChange = useCallback(
+    (v?: TreeNodeData) => {
+      const path: string[] = v?.path;
+      if (!Array.isArray(path) || path.length <= 0) {
+        return;
+      }
+      if (!enableSelectNode && path.length === 1) {
+        /**
+         * Disable node selection only
+         * When length is 1, node is selected and no variable is selected
+         */
+        return;
+      }
+      onChange?.(path);
+    },
+    [enableSelectNode, onChange],
+  );
+
+  const handleClear = () => {
+    onChange?.(undefined);
+  };
+
+  /** Get the currently selected subvariable according to the baseline variable and path */
+  const workflowVariable = useWorkflowVariableByKeyPath(value);
+  const valueSubVariableMeta =
+    value && workflowVariable?.viewMeta
+      ? {
+          ...workflowVariable.viewMeta,
+          key: value.join('-'),
+        }
+      : null;
+
+  const onRename = usePersistCallback(({ modifyIndex, modifyKey }) => {
+    if (isArray(value)) {
+      // Change the value reference directly to prevent triggerValidate from onChanging the old keyPath
+      value[modifyIndex] = modifyKey;
+
+      if (triggerChangeWhenRename) {
+        onChange?.(value);
+      }
+    }
+  });
+
+  // Update value when renaming, uncontrolled components also need to update internal state
+  useVariableRename({
+    keyPath: value,
+    onRename,
+  });
+
+  const isUnknownValue =
+    !valueSubVariableMeta ||
+    !dataSource?.find(_option => _option.value === value?.[0]);
+
+  const triggerValidate = usePersistCallback(() => {
+    if (value) {
+      onChange?.(value);
+    }
+  });
+
+  useUpdateEffect(() => {
+    triggerValidate();
+  }, [isUnknownValue]);
+
+  // searchPosition = "trigger" and hover tooltip mutual exclusion
+  // You need to actively trigger the focus of the input when you click on the selectSelection (tooltip) element
+  // So that you can hover to the selectSelection element and trigger the selectSearchInput search
+  useEffect(() => {
+    setTimeout(() => {
+      const selectSelection = treeSelectRef.current?.getElementsByClassName?.(
+        'semi-tree-select-selection-TriggerSearchItem',
+      )?.[0];
+      const selectSearchInputWrapper =
+        treeSelectRef.current?.getElementsByClassName?.(
+          'semi-tree-select-triggerSingleSearch-wrapper',
+        )?.[0];
+      const selectSearchInput =
+        selectSearchInputWrapper?.getElementsByTagName('input')?.[0];
+
+      selectSelection?.addEventListener('click', () => {
+        selectSearchInput?.focus?.();
+      });
+    }, 0);
+  }, [treeSelectRef, query]);
+
+  const displayVarName =
+    renderDisplayVarName?.({
+      meta: valueSubVariableMeta,
+      path: value,
+    }) ||
+    valueSubVariableMeta?.label ||
+    valueSubVariableMeta?.name;
+
+  return (
+    <TreeVariableSelectorContext.Provider
+      value={{
+        value,
+        dataSource,
+        query,
+        setQuery,
+        forArrayItem,
+        invalidContent,
+        testId,
+        valueSubVariableMeta,
+        displayVarName,
+        isUnknownValue,
+      }}
+    >
+      <div ref={treeSelectRef} className={className} style={style}>
+        <CompositeSelect
+          renderExtraOption={renderExtraOption}
+          treeData={dataSource}
+          onChange={onValueChange}
+          onBlur={onBlur}
+          onSelect={onValueChange}
+          value={value ?? undefined}
+          invalidContent={invalidContent}
+          placeholder={
+            placeholder || I18n.t('workflow_detail_condition_pleaseselect')
+          }
+          emptyContent={
+            emptyContent || (
+              <div className="text-center">
+                <IconCozVariables fontSize={24} />
+                <div>{I18n.t('workflow_detail_node_nodata')}</div>
+              </div>
+            )
+          }
+          disabled={disabled}
+          readonly={readonly}
+          validateStatus={validateStatus}
+          showClear={showClear}
+          onClear={handleClear}
+          trigger={trigger}
+          onPopoverVisibleChange={onPopoverVisibleChange}
+          popoverStyle={popoverStyle}
+        />
+      </div>
+    </TreeVariableSelectorContext.Provider>
+  );
+};