choerodon-ui/pro/es/table/query-bar/ComboFieldList.js

An enterprise-class UI design language and React-based implementation

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useCallback, useMemo, useState, memo } from 'react';
import Icon from '../../../../es/icon';
import TextField from '../../text-field';
import CheckBox from '../../check-box';
import { $l } from '../../locale-context';

var ComboFieldList = function ComboFieldList(_ref) {
  var value = _ref.value,
      onSelect = _ref.onSelect,
      onUnSelect = _ref.onUnSelect,
      groups = _ref.groups,
      prefixCls = _ref.prefixCls,
      fieldsLimit = _ref.fieldsLimit;

  var _useState = useState(''),
      _useState2 = _slicedToArray(_useState, 2),
      searchText = _useState2[0],
      setSearchText = _useState2[1];

  var labelCodes = useMemo(function () {
    return groups.reduce(function (res, current) {
      return [].concat(_toConsumableArray(res), _toConsumableArray(current.fields.map(function (o) {
        return [o.get('name'), o.get('label')];
      })));
    }, []);
  }, [groups]);
  var isChecked = useCallback(function (code) {
    return value.includes(code);
  }, [value]);
  var handleChange = useCallback(function (code, select) {
    if (select) {
      onSelect(code);
    } else {
      onUnSelect(code);
    }
  }, [onSelect, onUnSelect]);
  var renderGroup = useCallback(function (group) {
    return group.fields.length > 0 && /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-section"),
      key: group.title
    }, /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-list")
    }, group.fields.map(function (field) {
      var code = field.get('name');
      var label = field.get('label');
      var checked = isChecked(code);

      if (label && label.includes(searchText || '')) {
        return /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefixCls, "-item"),
          key: code
        }, /*#__PURE__*/React.createElement(CheckBox, {
          value: code,
          disabled: field.get('disabled'),
          checked: checked,
          onChange: function onChange() {
            return handleChange(code, !checked);
          }
        }, label));
      }

      return null;
    })));
  }, [handleChange, isChecked, searchText]);

  var chooseRe = function chooseRe() {
    var allValue = labelCodes.map(function (lc) {
      if (lc[1] && lc[1].includes(searchText || '')) {
        return lc[0];
      }

      return undefined;
    }).filter(function (v) {
      return !!v;
    });
    var selected = value.slice(fieldsLimit);
    var reSelectedOptions = allValue.filter(function (i) {
      var optionIsSelect = selected.some(function (v) {
        return v === i;
      });
      return !optionIsSelect;
    });
    handleChange(selected, false);
    handleChange(reSelectedOptions, true);
  };

  return /*#__PURE__*/React.createElement("div", {
    className: prefixCls
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-search")
  }, /*#__PURE__*/React.createElement(TextField, {
    style: {
      flex: 1
    },
    value: searchText,
    onClick: function onClick(e) {
      e.preventDefault();
      e.currentTarget.focus();
    },
    onChange: function onChange(v) {
      setSearchText(v);
    },
    onInput: function onInput(e) {
      setSearchText(e.target.value);
    },
    prefix: /*#__PURE__*/React.createElement(Icon, {
      type: "search"
    }),
    placeholder: $l('Table', 'enter_search_filter'),
    clearButton: true
  })), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-header")
  }, /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-search-action"),
    onClick: function onClick() {
      var values = labelCodes.map(function (lc) {
        if (lc[1] && lc[1].includes(searchText || '')) {
          return lc[0];
        }

        return undefined;
      }).filter(function (v) {
        return !!v;
      });
      handleChange(values, true);
    }
  }, $l('Select', 'select_all')), /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-search-action"),
    onClick: chooseRe
  }, $l('Select', 'select_re')), /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-search-action"),
    onClick: function onClick() {
      var values = labelCodes.map(function (lc) {
        if (lc[1] && lc[1].includes(searchText || '')) {
          return lc[0];
        }

        return undefined;
      }).filter(function (v) {
        return !!v;
      });
      handleChange(values, false);
    }
  }, $l('Table', 'clear'))), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-content")
  }, groups.map(function (group) {
    return renderGroup(group);
  })));
};

ComboFieldList.displayName = 'ComboFieldList';
export default /*#__PURE__*/memo(ComboFieldList);
//# sourceMappingURL=ComboFieldList.js.map