linkmore-design/es/lm-filter/components/CheckboxFilter.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 React, { useRef, useState, useMemo, useEffect, useLayoutEffect } from 'react';
import cn from 'classnames';
import Button from "../../button";
import VirtualList from "../../virtual-list";
import Checkbox from "../../checkbox";
import InputSearchClose from "./InputSearchClose";
import EmptyFilter from "./EmptyFilter";
import { uniqueFunc } from "../utils";
import { useDelayedFn } from "../hooks";
var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
var CheckboxFilter = function CheckboxFilter(_ref) {
  var instance = _ref.instance,
    itemProps = _ref.item;
  var _instance$filterValue = instance.filterValue,
    filterValue = _instance$filterValue === void 0 ? [] : _instance$filterValue,
    setFilterValue = instance.setFilterValue,
    visible = instance.visible,
    setVisible = instance.setVisible,
    locale = instance.locale;
  var _itemProps$data = itemProps.data,
    filters = _itemProps$data === void 0 ? [] : _itemProps$data,
    showSearch = itemProps.showSearch,
    showAllChecked = itemProps.showAllChecked;
  var inputRef = useRef(null);
  // 选中的数据项: [key, key, ...];
  var _useState = useState(filterValue),
    _useState2 = _slicedToArray(_useState, 2),
    checkedValues = _useState2[0],
    setCheckedValues = _useState2[1];
  // 选中的数据的键
  // const checkedKeys = useMemo(() => checkedValues.map(v => v), [checkedValues]);
  // 搜索后的筛选项
  var _useState3 = useState(filters),
    _useState4 = _slicedToArray(_useState3, 2),
    options = _useState4[0],
    setOptions = _useState4[1];
  var delayedFn = useDelayedFn();

  // 是否存在搜索, 当数据大于8时存在搜索
  var isSearch = useMemo(function () {
    return filters.length > 8 && !!(showSearch !== null && showSearch !== void 0 ? showSearch : true);
  }, [filters.length, showSearch]);
  var isAllCheck = useMemo(function () {
    return !!(showAllChecked !== null && showAllChecked !== void 0 ? showAllChecked : true);
  }, [showAllChecked]);

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

  // 是否半选: 存在选中的数据 && 未全选
  var indeterminate = useMemo(function () {
    return checkedValues.length && !checkAll;
  }, [checkedValues.length, checkAll]);

  // 搜索
  var handleFilter = function handleFilter() {
    var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
    var serachValues = filters.filter(function (v) {
      return v.label.indexOf(val) > -1;
    });
    setOptions(serachValues);
  };

  // 单选事件
  var onChange = function onChange(e, item) {
    e.preventDefault();
    var nValue = checkedValues.some(function (value) {
      return value === item.value;
    }) ? checkedValues.filter(function (value) {
      return value !== item.value;
    }) : uniqueFunc([].concat(_toConsumableArray(checkedValues), [item.value]), 'value');
    setCheckedValues(nValue);
  };

  // 全选事件
  var onCheckAllChange = function onCheckAllChange() {
    var nValue = checkAll ? checkedValues.filter(function (value) {
      return !options.some(function (v) {
        return v.value === value;
      });
    }) : uniqueFunc([].concat(_toConsumableArray(checkedValues), _toConsumableArray(options.map(function (_ref3) {
      var value = _ref3.value;
      return value;
    }))), 'value');
    setCheckedValues(nValue);
  };

  // 取消 不执行查询操作 关闭下拉框
  var handleCancel = function handleCancel() {
    // 手动触发内容改变(不会触发onChange事件)
    setVisible === null || setVisible === void 0 ? void 0 : setVisible(false);
  };

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

  // 展开下拉时触发: 赋值 && 聚焦 && 重置显示内容
  useIsomorphicLayoutEffect(function () {
    if (visible) {
      delayedFn(function () {
        var _inputRef$current;
        return inputRef.current && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus({
          cursor: 'all'
        }));
      });

      // 若开启了 Dropdown => destroyPopupOnHide=true 无需重置操作 反之需开启
      // setCheckedValues(filterValue);
      // inputRef.current?.setValue?.('');
      // handleFilter('');
    }
  }, [visible]);
  return /*#__PURE__*/React.createElement("div", {
    className: "filter_dropdown"
  }, isSearch && /*#__PURE__*/React.createElement("div", {
    className: "filter_header"
  }, /*#__PURE__*/React.createElement(InputSearchClose, {
    ref: inputRef,
    onSearch: handleFilter,
    onChange: handleFilter
  }), isAllCheck && /*#__PURE__*/React.createElement("div", {
    className: "filter_header_operate"
  }, /*#__PURE__*/React.createElement(Checkbox, {
    indeterminate: indeterminate,
    onChange: onCheckAllChange,
    checked: checkAll,
    className: "filter_tip"
  }, locale.all), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
    className: "filter_tip"
  }, locale.selected, ": ", checkedValues.length)))), /*#__PURE__*/React.createElement(Checkbox.Group, {
    value: checkedValues,
    className: "filter_body"
  }, /*#__PURE__*/React.createElement(VirtualList, {
    options: options,
    className: "filter_list"
  }, function (_ref4) {
    var item = _ref4.item,
      resetProps = _objectWithoutProperties(_ref4, _excluded);
    return /*#__PURE__*/React.createElement("div", _extends({}, resetProps, {
      className: cn('filter_item', {
        checked: checkedValues.some(function (value) {
          return value === item.value;
        })
      }),
      onClick: function onClick(e) {
        return onChange(e, item);
      }
    }), /*#__PURE__*/React.createElement(Checkbox, {
      value: item.value,
      className: "filter_item_content"
    }, item.label));
  }), !options.length && /*#__PURE__*/React.createElement(EmptyFilter, {
    description: locale.empty
  })), /*#__PURE__*/React.createElement("div", {
    className: "filter_footer"
  }, /*#__PURE__*/React.createElement("div", {
    className: "footer_clear",
    onClick: handleCancel
  }, locale.cancel), /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    size: "small",
    onClick: handleSure
  }, locale.ok)));
};
export default CheckboxFilter;