antd树形控件的二次封装

emmmm，主要解决的是一些样式上的问题 ，使用泛型二次封装一下

复选框只能叶结点存在，这里需要自己写一下渲染逻辑，当然，树形结构，使用递归即可

import { ConfigProvider, TreeSelect, TreeSelectProps } from 'antd';
import { CaretDownOutlined } from '@easyv/react-icons';
import { Key } from 'react';


interface ReplaceTreeSelectProps<T extends object> extends TreeSelectProps {
  value?: string[] | string;
  treeCheckable?: boolean;
  className?: string;
  treeData?: T[];
  onChange?: (value: string[] | string) => void;
}

export function ReplaceTreeSelect<T extends { [key: string]: any }>({
  treeCheckable = true,
  value,
  className,
  onChange,
  treeData = [],
  treeDefaultExpandedKeys,
  ...props
}: ReplaceTreeSelectProps<T>) {
  function constructTreeNodes(data: ReplaceTreeSelectProps<T>['treeData'] = []) {
    return data.map(({ value, children, title }) => {
      if (children) {
        return (
          <TreeSelect.TreeNode
            key={value}
            value={value}
            title={title}
            selectable={false}
            checkable={false}
            disableCheckbox={false}
            className="bg-[#232630]">
            {constructTreeNodes(children)}
          </TreeSelect.TreeNode>
        );
      }
      return (
        <TreeSelect.TreeNode
          key={value}
          selectable
          checkable
          value={value}
          className="bg-[#232630]"
          title={title}
        />
      );
    });
  }

  return (
    <ConfigProvider
      theme={{
        components: {
          TreeSelect: {
            nodeSelectedBg: '#2e2f34',
            nodeHoverBg: '#2e2f34',
            colorPrimaryBorder: '#232630',
            titleHeight: 32,
          },
        },
      }}>
      <TreeSelect
        value={value}
        className={className}
        treeCheckable={treeCheckable}
        treeDefaultExpandedKeys={treeDefaultExpandedKeys ?? (value as Key[])}
        treeLine={{ showLeafIcon: <div /> }}
        switcherIcon={<CaretDownOutlined />}
        onChange={onChange}
        {...props}>
        {constructTreeNodes(treeData)}
      </TreeSelect>
    </ConfigProvider>
  );
}

使用自定义主题修改了treeSlect的一些默认样式

但是使用treeSelect的话会有一个问题 就是switcherIcon 他的大小是固定的 ，这里想隐藏叶子节点的icon，但是他的空间依旧存在，因为它使用了div包了一层，固定了大小，这也是为什么他展开的间距会相等，

解决这个问题的话 需要去修改antd对应的默认样式

在全局样式文件 antd.less中进行样式覆盖，叶结点的类名为ant-select-tree-switcher-noop

.ant-select-tree-switcher-noop {
  display: none;
}