index.js

import React, { useContext, useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Button, Input, Radio, Modal, Checkbox, Row, Col, Tree, ConfigProvider } from 'antd';
import Empty from '@wisdom-components/Empty';
import { ExclamationCircleFilled, SearchOutlined, CloseOutlined } from '@ant-design/icons';
import './index.less';

const { TreeNode } = Tree;

const QuotaSelect = ({
  buttonProps,
  width,
  title,
  cancelText,
  onModalOk,
  onModalCancel,
  searchPrefix,
  placeholder,
  targetValue,
  maximum,
  dataSource,
  selectData,
  onSearch,
  onRadioChange,
  onCheckboxChange,
  onCancelSelect,
  treeProps,
}) => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('quota-select');

  const [visible, setVisible] = useState(false);

  // 展示模态框
  const showModal = () => {
    setVisible(true);
  };

  // 关闭模态框
  const handleCancel = (e) => {
    if (e.target.innerHTML === cancelText) {
      onModalCancel && onModalCancel();
    } else {
      setVisible(false);
    }
  };

  const onOk = () => {
    onModalOk && onModalOk();
    setVisible(false);
  };

  return (
    <div className={classNames(prefixCls)}>
      <Button {...buttonProps} onClick={showModal} />
      <Modal
        centered
        width={width}
        title={title}
        cancelText={cancelText}
        visible={visible}
        onCancel={handleCancel}
        onOk={onOk}
        className={classNames(`${prefixCls}-modal`)}
      >
        <div className={classNames(`${prefixCls}-modal-wrap`)}>
          <div className={classNames(`${prefixCls}-modal-left`)}>
            <div className={classNames(`${prefixCls}-modal-select-wrap`)}>
              <Input
                className={classNames(`${prefixCls}-modal-search`)}
                placeholder={placeholder}
                bordered={false}
                prefix={searchPrefix}
                onChange={onSearch}
                onPressEnter={onSearch}
              />
              <div className={classNames(`${prefixCls}-modal-target`)}>
                <div>指标：</div>
                <Radio.Group onChange={onRadioChange} defaultValue={targetValue}>
                  <Radio.Button value="emphasis">重点指标</Radio.Button>
                  <Radio.Button value="all">全部</Radio.Button>
                </Radio.Group>
              </div>
              <div
                className={classNames(`${prefixCls}-modal-select`, {
                  warning: !(selectData.length < maximum),
                })}
              >
                {selectData.length < maximum ? (
                  <>
                    <ExclamationCircleFilled />
                    <div>已选择 {selectData.length} 个指标</div>
                  </>
                ) : (
                  <>
                    <ExclamationCircleFilled />
                    <div>已达上限，最多选择 {maximum} 个指标</div>
                  </>
                )}
              </div>
            </div>
            <div className={classNames(`${prefixCls}-modal-option-wrap`)}>
              {!dataSource.length && <Empty />}
              <Row gutter={[0, 6]}>
                {!!dataSource.length &&
                  dataSource.map((item) => (
                    <Col span={8} key={item.key}>
                      <Checkbox
                        value={item.title}
                        checked={item.checked}
                        disabled={
                          (selectData.length > maximum || selectData.length === maximum) &&
                          !item.checked
                        }
                        onChange={onCheckboxChange}
                      >
                        {item.title}
                      </Checkbox>
                    </Col>
                  ))}
              </Row>
            </div>
          </div>
          <div className={classNames(`${prefixCls}-modal-right`)}>
            <div className={classNames(`${prefixCls}-modal-number`)}>
              已选：{selectData.length}/{maximum}
            </div>
            <div className={classNames(`${prefixCls}-modal-tree`)}>
              <Tree {...treeProps}>
                {selectData.map((item) => (
                  <TreeNode
                    key={item.key}
                    title={
                      <div className={classNames(`${prefixCls}-modal-tree-title`)}>
                        <div>{item.title}</div>
                        <CloseOutlined onClick={() => onCancelSelect(item)} />
                      </div>
                    }
                  />
                ))}
              </Tree>
            </div>
          </div>
        </div>
      </Modal>
    </div>
  );
};

QuotaSelect.defaultProps = {
  buttonProps: {},
  width: 900,
  title: '选择显示字段',
  cancelText: '取消选择',
  placeholder: '搜索关键词',
  searchPrefix: <SearchOutlined />,
  targetValue: 'emphasis',
  maximum: 0,
  dataSource: [],
  selectData: [],
  treeProps: {},
  onModalCancel: () => {},
  onModalOk: () => {},
  onSearch: () => {},
  onRadioChange: () => {},
  onCancelSelect: () => {},
};

QuotaSelect.propTypes = {
  buttonProps: PropTypes.object,
  width: PropTypes.number,
  title: PropTypes.string,
  cancelText: PropTypes.string,
  placeholder: PropTypes.string,
  searchPrefix: PropTypes.node,
  targetValue: PropTypes.string,
  maximum: PropTypes.number,
  dataSource: PropTypes.array,
  selectData: PropTypes.array,
  treeProps: PropTypes.object,
  onModalCancel: PropTypes.func,
  onModalOk: PropTypes.func,
  onSearch: PropTypes.func,
  onRadioChange: PropTypes.func,
  onCancelSelect: PropTypes.func,
};

export default QuotaSelect;