linkmore-design/es/lm-select/useCheckboxOptions.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var _excluded = ["item"];
import { useControllableValue } from 'ahooks';
import classNames from 'classnames';
import CheckBox from "../checkbox";
import VirtualList from "../virtual-list";
import React, { useMemo } from 'react';
import { useEvent } from "../hooks";
import { onStringSearch } from "./utils";
import Empty from "../empty";
var FilterEmpty = function FilterEmpty() {
  return /*#__PURE__*/React.createElement("div", {
    className: "filter_empty"
  }, /*#__PURE__*/React.createElement(Empty, {
    title: "\u6682\u65E0\u6570\u636E"
  }));
};

// todo 抽取出来, 后续做统一处理, 项目中多处用到类似的功能
export var useCheckboxOptions = function useCheckboxOptions(options, _ref) {
  var _ref$value = _ref.value,
    value = _ref$value === void 0 ? [] : _ref$value,
    onCheckChange = _ref.onChange;
  var filter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
  // 将value和onChange改为受控，和父组件共享
  var _useControllableValue = useControllableValue({
      value: value,
      onChange: onCheckChange
    }),
    _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
    checkedValues = _useControllableValue2[0],
    setCheckedValues = _useControllableValue2[1];
  var renderOptions = useMemo(function () {
    return options.filter(function (v) {
      return !v.disabled && onStringSearch(filter, v.label);
    });
  }, [options, filter]);

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

  // 是否半选: 存在选中的数据 && 未全选
  var indeterminate = useMemo(function () {
    return checkedValues.length && !checkAll;
  }, [checkedValues.length, checkAll]);
  // 全选事件
  var onCheckAllChange = useEvent(function () {
    var nValue = checkAll ? checkedValues.filter(function (v) {
      return !renderOptions.some(function (_ref3) {
        var value = _ref3.value;
        return v === value;
      });
    }) : Array.from(new Set([].concat(_toConsumableArray(checkedValues), _toConsumableArray(renderOptions.map(function (v) {
      return v.value;
    })))));
    setCheckedValues(nValue || []);
  });
  var onChange = useEvent(function (e, item) {
    e.preventDefault();
    e.stopPropagation();
    var arr = checkedValues.includes(item.value) ? checkedValues.filter(function (v) {
      return v !== item.value;
    }) : [].concat(_toConsumableArray(checkedValues), [item.value]);
    setCheckedValues(arr || []);
  });
  return /*#__PURE__*/React.createElement("div", {
    className: "select_dropdown"
  }, /*#__PURE__*/React.createElement("div", {
    className: "filter_header"
  }, /*#__PURE__*/React.createElement("div", {
    className: "filter_header_operate"
  }, /*#__PURE__*/React.createElement(CheckBox, {
    indeterminate: indeterminate,
    onChange: onCheckAllChange,
    checked: checkAll,
    className: "filter_tip"
  }, "\u5168\u90E8"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
    className: "filter_tip"
  }, "\u5DF2\u9009: ", checkedValues.length)))), /*#__PURE__*/React.createElement(CheckBox.Group, {
    value: checkedValues,
    className: "filter_body"
  }, /*#__PURE__*/React.createElement(VirtualList, {
    options: renderOptions,
    className: "filter_list"
  }, function (_ref4) {
    var item = _ref4.item,
      resetProps = _objectWithoutProperties(_ref4, _excluded);
    return /*#__PURE__*/React.createElement("div", _extends({}, resetProps, {
      className: classNames('filter_item', {
        checked: checkedValues.includes(item.value),
        disabled: item.disabled
      }),
      onClick: function onClick(e) {
        return onChange(e, item);
      }
    }), /*#__PURE__*/React.createElement(CheckBox, {
      value: item.value,
      className: "filter_item-content"
    }, item.label));
  }), !renderOptions.length && /*#__PURE__*/React.createElement(FilterEmpty, null)));
};
export default useCheckboxOptions;