linkmore-design/lib/custom-table-option/components/CardConfig/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"));
var _radio = _interopRequireDefault(require("../../../radio"));
var _columnSpan = _interopRequireDefault(require("../../images/columnSpan1.png"));
var _columnSpan2 = _interopRequireDefault(require("../../images/columnSpan2.png"));
const {
  LmToolTip
} = _tooltip.default;
const Item = /*#__PURE__*/_react.default.memo(({
  item = {},
  listeners,
  toggleShow,
  instance,
  isSearch,
  isDragging
}) => {
  const {
    dataIndex
  } = 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, dataIndex)
    // onChange={(e) => toggleShow(e.target.checked, dataIndex)}
    ,
    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 {
    card: localCard
  } = state;
  const handleMove = (activeItem, overItem) => {
    const oldIndex = localCard.findIndex(s => s.dataIndex === activeItem.dataIndex);
    const newIndex = localCard.findIndex(s => s.dataIndex === overItem.dataIndex);
    const res = (0, _sortable.arrayMove)(localCard, oldIndex, newIndex).map((item, index) => ({
      ...item,
      order: index
    }));
    dispatch({
      type: 'changeCard',
      card: res
    });
  };
  const toggleShow = (value, id) => {
    const result = localCard.map(item => {
      if (item.dataIndex === id) {
        return {
          ...item,
          show: item.show === false
        };
      }
      return {
        ...item
      };
    });
    dispatch({
      type: 'changeCard',
      card: result
    });
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "drag_scroll"
  }, /*#__PURE__*/_react.default.createElement(_lmDrag.default, {
    options: options,
    rowKey: "dataIndex",
    move: handleMove,
    activationConstraint: {
      delay: 0
    }
  }, ({
    item,
    listeners,
    index,
    isDragging
  }) => /*#__PURE__*/_react.default.createElement(Item, {
    key: item?.dataIndex || index,
    item: item,
    instance: instance,
    listeners: listeners,
    toggleShow: toggleShow,
    isSearch: isSearch,
    isDragging: isDragging
  })));
});
const TableSize = /*#__PURE__*/_react.default.memo(({
  instance
}) => {
  const {
    state,
    dispatch,
    locale
  } = instance;
  const {
    cardMode
  } = state;
  const getDefaultSize = () => cardMode === 'double' ? 'double' : 'single';
  const optionsWithDisabled = [{
    label: locale.cardColumnSpan,
    value: 'single',
    img: _columnSpan.default
  }, {
    label: locale.cardColumnDoubleSpan,
    value: 'double',
    img: _columnSpan2.default
  }];
  const handleChange = val => {
    dispatch({
      type: 'changeCardMode',
      cardMode: val
    });
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_custom_option_group_size"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "group_title"
  }, locale.cardStyle), /*#__PURE__*/_react.default.createElement(_radio.default.Group, {
    onChange: e => handleChange(e.target.value),
    className: "lm_size_radio_group",
    value: getDefaultSize()
  }, optionsWithDisabled.map(item => {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "lm_custom_size_warp",
      key: item.value,
      onClick: () => handleChange(item.value)
    }, /*#__PURE__*/_react.default.createElement("img", {
      src: item.img,
      alt: ""
    }), /*#__PURE__*/_react.default.createElement(_radio.default, {
      value: item.value
    }, item.label));
  })));
});
const CardConfig = /*#__PURE__*/_react.default.memo(({
  instance
}) => {
  const [searchValue, setSearchValue] = (0, _react.useState)('');
  const {
    enableCardMode,
    state,
    card,
    dispatch,
    locale,
    onReset
  } = instance;
  const {
    card: localCard
  } = state;
  const [colStateValue, setColStateValue] = (0, _react.useState)({});
  const sortMenu = (0, _react.useMemo)(() => {
    const cloneCol = (0, _lodash.cloneDeep)(localCard);
    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);
  }, [localCard, colStateValue, searchValue]);
  const isCheckAll = (0, _react.useMemo)(() => {
    const showLength = localCard.filter(item => item.show !== false);
    return {
      indeterminate: !!(showLength?.length && showLength.length !== localCard.length),
      checkAll: showLength.length === localCard.length
    };
  }, [localCard]);

  /** 切换是否全选 */
  const onCheckAllChange = () => {
    const resultColumns = localCard.map(item => {
      return {
        ...item,
        show: !isCheckAll.checkAll
      };
    });
    dispatch({
      type: 'changeCard',
      card: resultColumns
    });
  };
  const resetChangeFilter = () => {
    dispatch({
      type: 'changeCard',
      card
    });
    onReset?.({
      type: 'card'
    });
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_custom_option_columns"
  }, enableCardMode && /*#__PURE__*/_react.default.createElement(TableSize, {
    instance: instance
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "group_title"
  }, locale.cardTitle), /*#__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 = CardConfig;
exports.default = _default;