choerodon-ui/pro/lib/table/query-bar/FieldList.js

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _icon = _interopRequireDefault(require("../../../../lib/icon"));

var _textField = _interopRequireDefault(require("../../text-field"));

var _checkBox = _interopRequireDefault(require("../../check-box"));

var _localeContext = require("../../locale-context");

var _TableDynamicFilterBar = require("./TableDynamicFilterBar");

var FieldList = function FieldList(_ref) {
  var value = _ref.value,
      onSelect = _ref.onSelect,
      onUnSelect = _ref.onUnSelect,
      groups = _ref.groups,
      prefixCls = _ref.prefixCls,
      queryDataSet = _ref.queryDataSet;

  var _useState = (0, _react.useState)(''),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      searchText = _useState2[0],
      setSearchText = _useState2[1];

  var codes = (0, _react.useMemo)(function () {
    return groups.reduce(function (res, current) {
      return [].concat((0, _toConsumableArray2["default"])(res), (0, _toConsumableArray2["default"])(current.fields.map(function (o) {
        var hasBindProps = function hasBindProps(propsName) {
          return o && o.get(propsName) && o.get(propsName).bind;
        };

        if (!o.get('bind') && !hasBindProps('computedProps') && !hasBindProps('dynamicProps')) {
          return o.get('name');
        }

        return undefined;
      })));
    }, []);
  }, [groups]);
  var labelCodes = (0, _react.useMemo)(function () {
    return groups.reduce(function (res, current) {
      return [].concat((0, _toConsumableArray2["default"])(res), (0, _toConsumableArray2["default"])(current.fields.map(function (o) {
        var hasBindProps = function hasBindProps(propsName) {
          return o && o.get(propsName) && o.get(propsName).bind;
        };

        if (!o.get('bind') && !hasBindProps('computedProps') && !hasBindProps('dynamicProps')) {
          return [o.get('name'), o.get('label')];
        }

        return undefined;
      })));
    }, []);
  }, [groups]);
  var hasSelect = (0, _react.useMemo)(function () {
    var isSelect = labelCodes.some(function (lc) {
      if (lc && (lc[1] && lc[1].includes(searchText || '') || lc[1] === undefined)) {
        return value.includes(lc[0]);
      }

      return false;
    });
    return isSelect;
  }, [value.length, searchText]);
  var hasSelectAll = (0, _react.useMemo)(function () {
    var isAll = labelCodes.some(function (lc) {
      if (lc && (lc[1] && lc[1].includes(searchText || '') || lc[1] === undefined)) {
        return !value.includes(lc[0]);
      }

      return false;
    });
    return !isAll;
  }, [searchText, value.length]);
  var isChecked = (0, _react.useCallback)(function (code) {
    return value.includes(code);
  }, [value]);
  var handleChange = (0, _react.useCallback)(function (code, select) {
    if (select) {
      onSelect(code);
    } else {
      onUnSelect(code);
    }
  }, [onSelect, onUnSelect]);
  var renderGroup = (0, _react.useCallback)(function (group) {
    return group.fields.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(prefixCls, "-section"),
      key: group.title
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(prefixCls, "-list")
    }, group.fields.map(function (field) {
      var code = field.get('name');
      var label = field.get('label') || code;
      var checked = isChecked(code);
      var disabled = queryDataSet && (0, _TableDynamicFilterBar.fieldIsDisabled)(field, queryDataSet);

      var hasBindProps = function hasBindProps(propsName) {
        return field && field.get(propsName) && field.get(propsName).bind;
      };

      if (label && label.includes(searchText || '') && !field.get('bind') && !hasBindProps('computedProps') && !hasBindProps('dynamicProps')) {
        var itemClassNames = (0, _classnames["default"])("".concat(prefixCls, "-item"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-item-disabled"), disabled));
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: itemClassNames,
          key: code
        }, /*#__PURE__*/_react["default"].createElement(_checkBox["default"], {
          value: code,
          checked: checked,
          onChange: function onChange() {
            return handleChange(code, !checked);
          }
        }, label));
      }

      return null;
    })));
  }, [handleChange, isChecked, searchText, queryDataSet]);
  var selectItems = value.filter(function (v) {
    return codes.includes(v);
  });
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: prefixCls
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-search")
  }, /*#__PURE__*/_react["default"].createElement(_textField["default"], {
    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["default"].createElement(_icon["default"], {
      type: "search"
    }),
    placeholder: (0, _localeContext.$l)('Table', 'enter_text_filter'),
    clearButton: true
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-header")
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "".concat(prefixCls, "-search-selected")
  }, (0, _localeContext.$l)('Screening', 'selected'), /*#__PURE__*/_react["default"].createElement("span", {
    className: "".concat(prefixCls, "-search-items")
  }, selectItems.length), (0, _localeContext.$l)('Transfer', 'items')), /*#__PURE__*/_react["default"].createElement("span", {
    className: "".concat(prefixCls, "-search-divide")
  }), /*#__PURE__*/_react["default"].createElement("span", {
    style: {
      display: !hasSelectAll ? 'inline-block' : 'none'
    },
    className: "".concat(prefixCls, "-search-action"),
    onClick: function onClick() {
      var values = labelCodes.map(function (lc) {
        if (lc && (lc[1] && lc[1].includes(searchText || '') || lc[1] === undefined)) {
          return lc[0];
        }

        return undefined;
      }).filter(function (v) {
        return !!v;
      });
      handleChange(values, true);
    }
  }, (0, _localeContext.$l)('Select', 'select_all')), /*#__PURE__*/_react["default"].createElement("span", {
    style: {
      display: hasSelect ? 'inline-block' : 'none'
    },
    className: "".concat(prefixCls, "-search-action"),
    onClick: function onClick() {
      var values = labelCodes.map(function (lc) {
        if (lc && (lc[1] && lc[1].includes(searchText || '') || lc[1] === undefined)) {
          return lc[0];
        }

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

FieldList.displayName = 'FieldList';

var _default = /*#__PURE__*/(0, _react.memo)(FieldList);

exports["default"] = _default;
//# sourceMappingURL=FieldList.js.map