qt-public-ui/es/CheckboxList/index.js

新设计规范下业务组件库

import React, { useState, useEffect } from 'react';
import { Checkbox, Tooltip } from 'antd';
import classnames from 'classnames';
import { formatValue, getCycleColor } from '../utils';
import { Input, Table } from '..';
import './style';
var GROUP_HEIGHT = 364;
var SEARCH_HEIGHT = 44;
var checkboxColors = getCycleColor('colors');
var barColors = getCycleColor('colors');
var CheckboxList = function CheckboxList(props) {
  var _props$max = props.max,
    max = _props$max === void 0 ? Infinity : _props$max,
    _props$type = props.type,
    type = _props$type === void 0 ? 'list' : _props$type,
    _props$labelInValue = props.labelInValue,
    labelInValue = _props$labelInValue === void 0 ? true : _props$labelInValue;
  var isControlled = ('value' in props);
  var defaultSelected = ((isControlled ? props.value : props.defaultValue) || []).slice(0, max);
  var _useState = useState(defaultSelected),
    selected = _useState[0],
    setSelected = _useState[1];
  var _useState2 = useState(''),
    searchValue = _useState2[0],
    setSearchValue = _useState2[1];
  checkboxColors.reset();
  barColors.reset();
  useEffect(function () {
    isControlled && setSelected(props.value || []);
  }, [isControlled, props.value]);
  var onCheckboxChange = function onCheckboxChange(key, e) {
    var checked = e.target.checked;
    var _selected = [].concat(selected);
    var index = _selected.indexOf(key);
    if (index > -1) {
      !checked && _selected.splice(index, 1);
    } else {
      checked && _selected.push(key);
    }
    if (_selected.length <= max) {
      !isControlled && setSelected(_selected);
      props.onChange && props.onChange(_selected);
    }
  };
  var onLabelClick = function onLabelClick(opt) {
    props.onLabelClick && props.onLabelClick(opt.value, opt);
  };
  var onSearchChange = function onSearchChange(e) {
    setSearchValue(e.target.value);
  };
  var filterOptions = props.options.filter(function (opt) {
    if (typeof opt === 'string') {
      return opt.includes(searchValue);
    } else {
      var _opt$label;
      return opt === null || opt === void 0 ? void 0 : (_opt$label = opt.label) === null || _opt$label === void 0 ? void 0 : _opt$label.includes(searchValue);
    }
  });
  var renderList = function renderList() {
    return /*#__PURE__*/React.createElement("div", {
      className: classnames('umui-checkbox-group-wrapper', {
        'umui-sep-checkbox': !labelInValue,
        'umui-label-in-value': labelInValue
      }),
      style: {
        height: props.showSearch ? GROUP_HEIGHT : GROUP_HEIGHT + SEARCH_HEIGHT
      }
    }, filterOptions.map(function (opt) {
      var _opt = typeof opt === 'string' ? {
        value: opt,
        label: opt,
        disabled: false
      } : opt;
      return labelInValue ? /*#__PURE__*/React.createElement(Checkbox, {
        key: _opt.value.toString(),
        checked: selected.includes(_opt.value),
        disabled: _opt.disabled,
        onChange: onCheckboxChange.bind(null, _opt.value)
      }, _opt.label) : /*#__PURE__*/React.createElement("div", {
        className: "umui-checkbox-wrapper",
        key: _opt.value.toString()
      }, /*#__PURE__*/React.createElement(Checkbox, {
        checked: selected.includes(_opt.value),
        disabled: _opt.disabled,
        onChange: onCheckboxChange.bind(null, _opt.value)
      }, "\xA0"), /*#__PURE__*/React.createElement(Tooltip, {
        title: _opt.label,
        placement: "top"
      }, /*#__PURE__*/React.createElement("span", {
        onClick: onLabelClick.bind(null, _opt)
      }, _opt.label)));
    }));
  };
  var renderTable = function renderTable() {
    var _props$tableHeaders = props.tableHeaders,
      tableHeaders = _props$tableHeaders === void 0 ? [] : _props$tableHeaders,
      options = props.options,
      showSearch = props.showSearch;
    var viewHeight = showSearch ? GROUP_HEIGHT : GROUP_HEIGHT + SEARCH_HEIGHT;
    var columns = [{
      title: '',
      width: 24,
      dataIndex: 'value',
      render: function render(value) {
        var cls = "color-" + checkboxColors.next().slice(1);
        return /*#__PURE__*/React.createElement(Checkbox, {
          className: cls,
          checked: selected.includes(value),
          onChange: onCheckboxChange.bind(null, value)
        });
      }
    }, {
      width: 112,
      title: tableHeaders[0] || '名称',
      dataIndex: 'label',
      ellipsis: true
    }, {
      title: tableHeaders[1] || '占比',
      dataIndex: 'percent',
      render: function render(value) {
        return /*#__PURE__*/React.createElement("div", {
          className: "umui-checkbox-percent"
        }, /*#__PURE__*/React.createElement("div", {
          className: "umui-checkbox-percent-wrapper"
        }, /*#__PURE__*/React.createElement("div", {
          className: "umui-checkbox-percent-bar",
          style: {
            width: value * 100 + "%",
            backgroundColor: barColors.next()
          }
        })), /*#__PURE__*/React.createElement("div", {
          className: "umui-checkbox-percent-value umui-number"
        }, formatValue('percent')(value * 100)));
      }
    }];
    return /*#__PURE__*/React.createElement("div", {
      className: "umui-checkbox-group-wrapper table-list",
      style: {
        height: viewHeight
      }
    }, /*#__PURE__*/React.createElement(Table, {
      collapsed: true,
      rowKey: "value",
      columns: columns,
      dataSource: options,
      pagination: false,
      scroll: {
        y: viewHeight - 40
      }
    }));
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "umui-checkbox-list",
    style: props.style
  }, props.showSearch && /*#__PURE__*/React.createElement(Input.Search, {
    placeholder: props.placeholder || '输入名称进行搜索',
    value: searchValue,
    onChange: onSearchChange,
    className: "umui-checkbox-search"
  }), type === 'list' ? renderList() : renderTable(), max < Infinity && /*#__PURE__*/React.createElement("div", {
    className: "umui-checkbox-hint"
  }, /*#__PURE__*/React.createElement("span", null, "\u6700\u591A\u9009\u62E9", max, "\u4E2A\u8FDB\u884C\u5BF9\u6BD4"), /*#__PURE__*/React.createElement("div", {
    className: "umui-checkbox-hint-num"
  }, selected.length, "/", max)));
};
CheckboxList.defaultValue = {
  defaultValue: []
};
CheckboxList.displayName = 'CheckboxList';
export default CheckboxList;