index.js

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

const DeviceTree = (props) => {
  const { prefix, placeholder, treeData, first, 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 && <Skeleton loading={first} active><Tree {...props} /></Skeleton>}
                {!treeData.length && !first ? <Empty /> : ''} */}
        {
          first || !!treeData.length ?
            <Skeleton loading={first} active>
              <Tree {...props} />
            </Skeleton>
            :
            <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;