linkmore-design/lib/custom-table-option/components/FilterConfig/index.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 _sortable = require("@dnd-kit/sortable");
var _classnames = _interopRequireDefault(require("classnames"));
var _lodash = require("lodash");
var _react = _interopRequireWildcard(require("react"));
var _ = require("../..");
var _checkbox = _interopRequireDefault(require("../../../checkbox"));
var _iconFont = _interopRequireDefault(require("../../../icon-font"));
var _input = _interopRequireDefault(require("../../../input"));
var _lmDrag = _interopRequireDefault(require("../../../lm-drag"));
var _tooltip = _interopRequireDefault(require("../../../tooltip"));
const {
  LmToolTip
} = _tooltip.default;
const Item = /*#__PURE__*/_react.default.memo(({
  item = {},
  listeners,
  toggleShow,
  instance,
  isSearch,
  isDragging
}) => {
  const {
    field
  } = item || {};
  const {
    locale
  } = instance;
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('lm_custom_item', isDragging && 'drag')
  }, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
    checked: item?.show !== false,
    disabled: item?.behaviorNoCache,
    onClick: () => toggleShow(item?.show === false, field)
    // onCahnge={(e) => toggleShow(e.target.checked, field)}
    ,
    className: "filter_item-content"
  }, item?.title), !isSearch && /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_custom_item_operate"
  }, /*#__PURE__*/_react.default.createElement(LmToolTip, {
    title: locale.sort
  }, /*#__PURE__*/_react.default.createElement(_iconFont.default, (0, _extends2.default)({
    type: "icon-a-tongyongaAtuodong",
    className: "lm_custom_icon sort_item"
  }, listeners))))));
});
const List = /*#__PURE__*/_react.default.memo(({
  options,
  instance,
  isSearch
}) => {
  const {
    state,
    dispatch
  } = instance;
  const {
    filter: localFilter
  } = state;
  const handleMove = (activeItem, overItem) => {
    const oldIndex = localFilter.findIndex(s => s.field === activeItem.field);
    const newIndex = localFilter.findIndex(s => s.field === overItem.field);
    const res = (0, _sortable.arrayMove)(localFilter, oldIndex, newIndex).map((item, index) => ({
      ...item,
      order: index
    }));
    dispatch({
      type: 'changeFilter',
      filter: res
    });
  };
  const toggleShow = (value, id) => {
    const result = localFilter.map(item => {
      if (item.field === id) {
        return {
          ...item,
          show: item?.show === false
        };
      }
      return {
        ...item
      };
    });
    dispatch({
      type: 'changeFilter',
      filter: result
    });
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "drag_scroll"
  }, /*#__PURE__*/_react.default.createElement(_lmDrag.default, {
    options: options,
    rowKey: "field",
    move: handleMove,
    activationConstraint: {
      delay: 0
    }
  }, ({
    item,
    listeners,
    index,
    isDragging
  }) => /*#__PURE__*/_react.default.createElement(Item, {
    key: item?.field || index,
    item: item,
    instance: instance,
    listeners: listeners,
    toggleShow: toggleShow,
    isSearch: isSearch,
    isDragging: isDragging
  })));
});
const FilterConfig = /*#__PURE__*/_react.default.memo(({
  instance
}) => {
  const [searchValue, setSearchValue] = (0, _react.useState)('');
  const {
    state,
    filter,
    dispatch,
    locale,
    onReset
  } = instance;
  const {
    filter: localFilter
  } = state;
  const [colStateValue, setColStateValue] = (0, _react.useState)({});
  const sortMenu = (0, _react.useMemo)(() => {
    const cloneCol = (0, _lodash.cloneDeep)(localFilter);
    cloneCol.forEach((item, index) => {
      const order = colStateValue[item.field]?.order;
      item.order = order !== undefined && order !== null ? order : _.UNLLVALUE.includes(item.order) ? index : item.order;
      item.show = colStateValue[item.field]?.show === false ? false : _.UNLLVALUE.includes(item.show) ? true : !!item.show;
    });
    return cloneCol.filter(item => item.title?.indexOf(searchValue) > -1);
  }, [localFilter, colStateValue, searchValue]);
  const isCheckAll = (0, _react.useMemo)(() => {
    const showLength = localFilter.filter(item => item.show !== false);
    return {
      indeterminate: !!(showLength?.length && showLength.length !== localFilter.length),
      checkAll: showLength.length === localFilter.length
    };
  }, [localFilter]);
  const onCheckAllChange = () => {
    const resultColumns = localFilter.map(item => {
      return {
        ...item,
        show: !isCheckAll.checkAll
      };
    });
    dispatch({
      type: 'changeFilter',
      filter: resultColumns
    });
  };
  const resetChangeFilter = () => {
    dispatch({
      type: 'changeFilter',
      filter
    });
    onReset?.({
      type: 'filter'
    });
  };
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_custom_option_columns"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "group_title"
  }, locale.filterTitle), /*#__PURE__*/_react.default.createElement("div", {
    className: "global_search"
  }, /*#__PURE__*/_react.default.createElement(_input.default, {
    placeholder: locale.placeholder,
    value: searchValue,
    onChange: e => setSearchValue(e.target.value),
    prefix: /*#__PURE__*/_react.default.createElement(_iconFont.default, {
      type: "icon-sousuo"
    })
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: "global_setting"
  }, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
    indeterminate: isCheckAll.indeterminate,
    onClick: onCheckAllChange,
    checked: isCheckAll.checkAll
  }, locale.selectAll), /*#__PURE__*/_react.default.createElement("span", {
    onClick: resetChangeFilter
  }, locale.reset)), !!sortMenu?.length && /*#__PURE__*/_react.default.createElement(List, {
    instance: instance,
    options: sortMenu,
    isSearch: !!searchValue
  })));
});
var _default = FilterConfig;
exports.default = _default;