linkmore-design/lib/lm-filter/components/CheckboxFilter.js

🌈 🚀lm组件库。🚀

"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _button = _interopRequireDefault(require("../../button"));
var _virtualList = _interopRequireDefault(require("../../virtual-list"));
var _checkbox = _interopRequireDefault(require("../../checkbox"));
var _InputSearchClose = _interopRequireDefault(require("./InputSearchClose"));
var _EmptyFilter = _interopRequireDefault(require("./EmptyFilter"));
var _utils = require("../utils");
var _hooks = require("../hooks");
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
const CheckboxFilter = ({
  instance,
  item: itemProps
}) => {
  const {
    filterValue = [],
    setFilterValue,
    visible,
    setVisible,
    locale
  } = instance;
  const {
    data: filters = [],
    showSearch,
    showAllChecked
  } = itemProps;
  const inputRef = (0, _react.useRef)(null);
  // 选中的数据项: [key, key, ...];
  const [checkedValues, setCheckedValues] = (0, _react.useState)(filterValue);
  // 选中的数据的键
  // const checkedKeys = useMemo(() => checkedValues.map(v => v), [checkedValues]);
  // 搜索后的筛选项
  const [options, setOptions] = (0, _react.useState)(filters);
  const delayedFn = (0, _hooks.useDelayedFn)();

  // 是否存在搜索, 当数据大于8时存在搜索
  const isSearch = (0, _react.useMemo)(() => filters.length > 8 && !!(showSearch ?? true), [filters.length, showSearch]);
  const isAllCheck = (0, _react.useMemo)(() => !!(showAllChecked ?? true), [showAllChecked]);

  // 是否全选: 选中的数据大于等于筛选后的数据 && 筛选后的数据全部存在于选中的数据中
  const checkAll = (0, _react.useMemo)(() => {
    const isAll = checkedValues.length >= options.length;
    return isAll && options.every(({
      value
    }) => checkedValues.some(v => v === value));
  }, [checkedValues, options]);

  // 是否半选: 存在选中的数据 && 未全选
  const indeterminate = (0, _react.useMemo)(() => checkedValues.length && !checkAll, [checkedValues.length, checkAll]);

  // 搜索
  const handleFilter = (val = '') => {
    const serachValues = filters.filter(v => v.label.indexOf(val) > -1);
    setOptions(serachValues);
  };

  // 单选事件
  const onChange = (e, item) => {
    e.preventDefault();
    const nValue = checkedValues.some(value => value === item.value) ? checkedValues.filter(value => value !== item.value) : (0, _utils.uniqueFunc)([...checkedValues, item.value], 'value');
    setCheckedValues(nValue);
  };

  // 全选事件
  const onCheckAllChange = () => {
    const nValue = checkAll ? checkedValues.filter(value => !options.some(v => v.value === value)) : (0, _utils.uniqueFunc)([...checkedValues, ...options.map(({
      value
    }) => value)], 'value');
    setCheckedValues(nValue);
  };

  // 取消 不执行查询操作 关闭下拉框
  const handleCancel = () => {
    // 手动触发内容改变(不会触发onChange事件)
    setVisible?.(false);
  };

  // 确定 执行查询操作
  const handleSure = () => {
    setFilterValue(checkedValues);
  };

  // 展开下拉时触发: 赋值 && 聚焦 && 重置显示内容
  useIsomorphicLayoutEffect(() => {
    if (visible) {
      delayedFn(() => inputRef.current && inputRef.current?.focus({
        cursor: 'all'
      }));

      // 若开启了 Dropdown => destroyPopupOnHide=true 无需重置操作 反之需开启
      // setCheckedValues(filterValue);
      // inputRef.current?.setValue?.('');
      // handleFilter('');
    }
  }, [visible]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_dropdown"
  }, isSearch && /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_header"
  }, /*#__PURE__*/_react.default.createElement(_InputSearchClose.default, {
    ref: inputRef,
    onSearch: handleFilter,
    onChange: handleFilter
  }), isAllCheck && /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_header_operate"
  }, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
    indeterminate: indeterminate,
    onChange: onCheckAllChange,
    checked: checkAll,
    className: "filter_tip"
  }, locale.all), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
    className: "filter_tip"
  }, locale.selected, ": ", checkedValues.length)))), /*#__PURE__*/_react.default.createElement(_checkbox.default.Group, {
    value: checkedValues,
    className: "filter_body"
  }, /*#__PURE__*/_react.default.createElement(_virtualList.default, {
    options: options,
    className: "filter_list"
  }, ({
    item,
    ...resetProps
  }) => {
    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
      className: (0, _classnames.default)('filter_item', {
        checked: checkedValues.some(value => value === item.value)
      }),
      onClick: e => onChange(e, item)
    }), /*#__PURE__*/_react.default.createElement(_checkbox.default, {
      value: item.value,
      className: "filter_item_content"
    }, item.label));
  }), !options.length && /*#__PURE__*/_react.default.createElement(_EmptyFilter.default, {
    description: locale.empty
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_footer"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "footer_clear",
    onClick: handleCancel
  }, locale.cancel), /*#__PURE__*/_react.default.createElement(_button.default, {
    type: "primary",
    size: "small",
    onClick: handleSure
  }, locale.ok)));
};
var _default = CheckboxFilter;
exports.default = _default;