Function EditableVariableTree

packages/designer/src/components/variable-tree.tsx:136–279

({
  height,
  searchAddonAfter,
  searchStyle,
  dataSource,
  onAddVariable = noop,
  onDeleteVariable = noop,
  onDeleteStore = noop,
  getPreviewValue = noop,
  onSelect = noop,
  onSave = noop,
  modes = ['add', 'preview', 'define'],
  defaultMode = 'preview',
}: EditableVariableTreeProps)

];

export function EditableVariableTree({
  height,
  searchAddonAfter,
  searchStyle,
  dataSource,
  onAddVariable = noop,
  onDeleteVariable = noop,
  onDeleteStore = noop,
  getPreviewValue = noop,
  onSelect = noop,
  onSave = noop,
  modes = ['add', 'preview', 'define'],
  defaultMode = 'preview',
}: EditableVariableTreeProps) {
  const [keyword, setKeyword] = useState('');
  const [node, setNode] = useState<IVariableTreeNode>();
  const [mode, setMode] = useState<EditableVariableTreeProps['defaultMode']>(defaultMode);
  const hasPanelSwitch = modes.includes('define') && modes.includes('preview');

  const treeData = useMemo(() => {
    const pattern = new RegExp(keyword, 'ig');
    return keyword
      ? filterTreeData(dataSource, (leaf) => pattern.test(leaf.title), 'children', true)
      : dataSource;
  }, [keyword, dataSource]);

  return (
    <Box
      className="EditableVariableTree"
      display="flex"
      overflow="auto"
      height={height}
      position="relative"
    >
      <Box p="l" width="40%">
        <Box mb="m" position="sticky" top="0" bg="white" zIndex={2}>
          <Input.Group compact>
            <Search
              placeholder="请输入变量名"
              onChange={(val) => setKeyword(val?.trim())}
              style={searchStyle}
            />
            {searchAddonAfter}
          </Input.Group>
        </Box>
        <VariableTree
          dataSource={treeData}
          showViewIcon
          onSelect={(item) => {
            setNode(item);
            mode === 'add' && setMode(defaultMode);
            onSelect(item);
          }}
          onView={(item) => {
            setNode(item);
            mode === 'add' && setMode(defaultMode);
          }}
          onAdd={(item) => {