linkmore-design/es/custom-table-option/components/FilterConfig/index.js

🌈 🚀lm组件库。🚀

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _extends from "@babel/runtime/helpers/esm/extends";
import { arrayMove } from '@dnd-kit/sortable';
import cls from 'classnames';
import { cloneDeep } from 'lodash';
import React, { useMemo, useState } from 'react';
import { UNLLVALUE } from "../..";
import Checkbox from "../../../checkbox";
import IconFont from "../../../icon-font";
import Input from "../../../input";
import LmDrag from "../../../lm-drag";
import Tooltip from "../../../tooltip";
var LmToolTip = Tooltip.LmToolTip;
var Item = /*#__PURE__*/React.memo(function (_ref) {
  var _ref$item = _ref.item,
    item = _ref$item === void 0 ? {} : _ref$item,
    listeners = _ref.listeners,
    toggleShow = _ref.toggleShow,
    instance = _ref.instance,
    isSearch = _ref.isSearch,
    isDragging = _ref.isDragging;
  var _ref2 = item || {},
    field = _ref2.field;
  var locale = instance.locale;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: cls('lm_custom_item', isDragging && 'drag')
  }, /*#__PURE__*/React.createElement(Checkbox, {
    checked: (item === null || item === void 0 ? void 0 : item.show) !== false,
    disabled: item === null || item === void 0 ? void 0 : item.behaviorNoCache,
    onClick: function onClick() {
      return toggleShow((item === null || item === void 0 ? void 0 : item.show) === false, field);
    }
    // onCahnge={(e) => toggleShow(e.target.checked, field)}
    ,
    className: "filter_item-content"
  }, item === null || item === void 0 ? void 0 : item.title), !isSearch && /*#__PURE__*/React.createElement("div", {
    className: "lm_custom_item_operate"
  }, /*#__PURE__*/React.createElement(LmToolTip, {
    title: locale.sort
  }, /*#__PURE__*/React.createElement(IconFont, _extends({
    type: "icon-a-tongyongaAtuodong",
    className: "lm_custom_icon sort_item"
  }, listeners))))));
});
var List = /*#__PURE__*/React.memo(function (_ref3) {
  var options = _ref3.options,
    instance = _ref3.instance,
    isSearch = _ref3.isSearch;
  var state = instance.state,
    dispatch = instance.dispatch;
  var localFilter = state.filter;
  var handleMove = function handleMove(activeItem, overItem) {
    var oldIndex = localFilter.findIndex(function (s) {
      return s.field === activeItem.field;
    });
    var newIndex = localFilter.findIndex(function (s) {
      return s.field === overItem.field;
    });
    var res = arrayMove(localFilter, oldIndex, newIndex).map(function (item, index) {
      return _objectSpread(_objectSpread({}, item), {}, {
        order: index
      });
    });
    dispatch({
      type: 'changeFilter',
      filter: res
    });
  };
  var toggleShow = function toggleShow(value, id) {
    var result = localFilter.map(function (item) {
      if (item.field === id) {
        return _objectSpread(_objectSpread({}, item), {}, {
          show: (item === null || item === void 0 ? void 0 : item.show) === false
        });
      }
      return _objectSpread({}, item);
    });
    dispatch({
      type: 'changeFilter',
      filter: result
    });
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "drag_scroll"
  }, /*#__PURE__*/React.createElement(LmDrag, {
    options: options,
    rowKey: "field",
    move: handleMove,
    activationConstraint: {
      delay: 0
    }
  }, function (_ref4) {
    var item = _ref4.item,
      listeners = _ref4.listeners,
      index = _ref4.index,
      isDragging = _ref4.isDragging;
    return /*#__PURE__*/React.createElement(Item, {
      key: (item === null || item === void 0 ? void 0 : item.field) || index,
      item: item,
      instance: instance,
      listeners: listeners,
      toggleShow: toggleShow,
      isSearch: isSearch,
      isDragging: isDragging
    });
  }));
});
var FilterConfig = /*#__PURE__*/React.memo(function (_ref5) {
  var instance = _ref5.instance;
  var _useState = useState(''),
    _useState2 = _slicedToArray(_useState, 2),
    searchValue = _useState2[0],
    setSearchValue = _useState2[1];
  var state = instance.state,
    filter = instance.filter,
    dispatch = instance.dispatch,
    locale = instance.locale,
    onReset = instance.onReset;
  var localFilter = state.filter;
  var _useState3 = useState({}),
    _useState4 = _slicedToArray(_useState3, 2),
    colStateValue = _useState4[0],
    setColStateValue = _useState4[1];
  var sortMenu = useMemo(function () {
    var cloneCol = cloneDeep(localFilter);
    cloneCol.forEach(function (item, index) {
      var _colStateValue$item$f, _colStateValue$item$f2;
      var order = (_colStateValue$item$f = colStateValue[item.field]) === null || _colStateValue$item$f === void 0 ? void 0 : _colStateValue$item$f.order;
      item.order = order !== undefined && order !== null ? order : UNLLVALUE.includes(item.order) ? index : item.order;
      item.show = ((_colStateValue$item$f2 = colStateValue[item.field]) === null || _colStateValue$item$f2 === void 0 ? void 0 : _colStateValue$item$f2.show) === false ? false : UNLLVALUE.includes(item.show) ? true : !!item.show;
    });
    return cloneCol.filter(function (item) {
      var _item$title;
      return ((_item$title = item.title) === null || _item$title === void 0 ? void 0 : _item$title.indexOf(searchValue)) > -1;
    });
  }, [localFilter, colStateValue, searchValue]);
  var isCheckAll = useMemo(function () {
    var showLength = localFilter.filter(function (item) {
      return item.show !== false;
    });
    return {
      indeterminate: !!(showLength !== null && showLength !== void 0 && showLength.length && showLength.length !== localFilter.length),
      checkAll: showLength.length === localFilter.length
    };
  }, [localFilter]);
  var onCheckAllChange = function onCheckAllChange() {
    var resultColumns = localFilter.map(function (item) {
      return _objectSpread(_objectSpread({}, item), {}, {
        show: !isCheckAll.checkAll
      });
    });
    dispatch({
      type: 'changeFilter',
      filter: resultColumns
    });
  };
  var resetChangeFilter = function resetChangeFilter() {
    dispatch({
      type: 'changeFilter',
      filter: filter
    });
    onReset === null || onReset === void 0 ? void 0 : onReset({
      type: 'filter'
    });
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "lm_custom_option_columns"
  }, /*#__PURE__*/React.createElement("div", {
    className: "group_title"
  }, locale.filterTitle), /*#__PURE__*/React.createElement("div", {
    className: "global_search"
  }, /*#__PURE__*/React.createElement(Input, {
    placeholder: locale.placeholder,
    value: searchValue,
    onChange: function onChange(e) {
      return setSearchValue(e.target.value);
    },
    prefix: /*#__PURE__*/React.createElement(IconFont, {
      type: "icon-sousuo"
    })
  })), /*#__PURE__*/React.createElement("div", {
    className: "global_setting"
  }, /*#__PURE__*/React.createElement(Checkbox, {
    indeterminate: isCheckAll.indeterminate,
    onClick: onCheckAllChange,
    checked: isCheckAll.checkAll
  }, locale.selectAll), /*#__PURE__*/React.createElement("span", {
    onClick: resetChangeFilter
  }, locale.reset)), !!(sortMenu !== null && sortMenu !== void 0 && sortMenu.length) && /*#__PURE__*/React.createElement(List, {
    instance: instance,
    options: sortMenu,
    isSearch: !!searchValue
  })));
});
export default FilterConfig;