index.js

import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Input, Tree, Divider, ConfigProvider } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import Empty from '@wisdom-components/empty';
import './index.less';

const DeviceTree = (props) => {
  const { prefix, placeholder, treeData, onSearch } = props;

  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('device-tree');

  return (
    <div className={classNames(prefixCls)}>
      <Input
        prefix={prefix}
        placeholder={placeholder}
        bordered={false}
        onChange={onSearch}
        onPressEnter={onSearch}
      />
      <Divider />
      <div className={classNames(`${prefixCls}-content`)}>
        {!!treeData.length && <Tree {...props} />}
        {!treeData.length && <Empty />}
      </div>
    </div>
  );
};

DeviceTree.defaultProps = {
  prefix: <SearchOutlined />,
  placeholder: '搜索设备名称',
  treeData: [],
  onSearch: () => {},
};

DeviceTree.propTypes = {
  prefix: PropTypes.node,
  placeholder: PropTypes.string,
  treeData: PropTypes.array,
  onSearch: PropTypes.func,
};

export default DeviceTree;