linkmore-design/lib/lm-select/useCheckboxOptions.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.useCheckboxOptions = exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _ahooks = require("ahooks");
var _classnames = _interopRequireDefault(require("classnames"));
var _checkbox = _interopRequireDefault(require("../checkbox"));
var _virtualList = _interopRequireDefault(require("../virtual-list"));
var _react = _interopRequireWildcard(require("react"));
var _hooks = require("../hooks");
var _utils = require("./utils");
var _empty = _interopRequireDefault(require("../empty"));
const FilterEmpty = () => {
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_empty"
  }, /*#__PURE__*/_react.default.createElement(_empty.default, {
    title: "\u6682\u65E0\u6570\u636E"
  }));
};

// todo 抽取出来, 后续做统一处理, 项目中多处用到类似的功能
const useCheckboxOptions = (options, {
  value = [],
  onChange: onCheckChange
}, filter = '') => {
  // 将value和onChange改为受控，和父组件共享
  const [checkedValues, setCheckedValues] = (0, _ahooks.useControllableValue)({
    value,
    onChange: onCheckChange
  });
  const renderOptions = (0, _react.useMemo)(() => options.filter(v => !v.disabled && (0, _utils.onStringSearch)(filter, v.label)), [options, filter]);

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

  // 是否半选: 存在选中的数据 && 未全选
  const indeterminate = (0, _react.useMemo)(() => checkedValues.length && !checkAll, [checkedValues.length, checkAll]);
  // 全选事件
  const onCheckAllChange = (0, _hooks.useEvent)(() => {
    const nValue = checkAll ? checkedValues.filter(v => !renderOptions.some(({
      value
    }) => v === value)) : Array.from(new Set([...checkedValues, ...renderOptions.map(v => v.value)]));
    setCheckedValues(nValue || []);
  });
  const onChange = (0, _hooks.useEvent)((e, item) => {
    e.preventDefault();
    e.stopPropagation();
    const arr = checkedValues.includes(item.value) ? checkedValues.filter(v => v !== item.value) : [...checkedValues, item.value];
    setCheckedValues(arr || []);
  });
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "select_dropdown"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_header"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_header_operate"
  }, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
    indeterminate: indeterminate,
    onChange: onCheckAllChange,
    checked: checkAll,
    className: "filter_tip"
  }, "\u5168\u90E8"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
    className: "filter_tip"
  }, "\u5DF2\u9009: ", checkedValues.length)))), /*#__PURE__*/_react.default.createElement(_checkbox.default.Group, {
    value: checkedValues,
    className: "filter_body"
  }, /*#__PURE__*/_react.default.createElement(_virtualList.default, {
    options: renderOptions,
    className: "filter_list"
  }, ({
    item,
    ...resetProps
  }) => {
    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
      className: (0, _classnames.default)('filter_item', {
        checked: checkedValues.includes(item.value),
        disabled: item.disabled
      }),
      onClick: e => onChange(e, item)
    }), /*#__PURE__*/_react.default.createElement(_checkbox.default, {
      value: item.value,
      className: "filter_item-content"
    }, item.label));
  }), !renderOptions.length && /*#__PURE__*/_react.default.createElement(FilterEmpty, null)));
};
exports.useCheckboxOptions = useCheckboxOptions;
var _default = useCheckboxOptions;
exports.default = _default;