linkmore-design/es/custom-table-option/components/TableConfig/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, isFunction } from 'lodash';
import React, { useMemo, useState } from 'react';
import Checkbox from "../../../checkbox";
import IconFont from "../../../icon-font";
import Input from "../../../input";
import LmDrag from "../../../lm-drag";
// import Radio from '../../../radio'
import Slider from "../../../slider";
import Tooltip from "../../../tooltip";
// import Large from '../../images/large.png'
// import Middle from '../../images/middle.png'
// import Size from '../../images/small.png'

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,
    clearFiexd = _ref.clearFiexd,
    addFiexd = _ref.addFiexd,
    instance = _ref.instance,
    isSearch = _ref.isSearch,
    isDragging = _ref.isDragging;
  var _ref2 = item || {},
    dataIndex = _ref2.dataIndex;
  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, dataIndex);
    }
    // onChange={(e) => toggleShow(e.target.checked, dataIndex)}
    ,
    className: "filter_item-content"
  }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React.createElement("div", {
    className: "lm_custom_item_operate"
  }, (item === null || item === void 0 ? void 0 : item.fixed) && /*#__PURE__*/React.createElement(LmToolTip, {
    title: locale.noFixed
  }, /*#__PURE__*/React.createElement(IconFont, {
    type: "icon-quxiaoguding",
    className: cls('lm_custom_icon', 'hover_show'),
    onClick: function onClick(e) {
      e.stopPropagation();
      clearFiexd(dataIndex);
    }
  })), !(item !== null && item !== void 0 && item.fixed) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LmToolTip, {
    title: locale.fixedLeft
  }, /*#__PURE__*/React.createElement(IconFont, {
    type: "icon-zhiding",
    className: cls('lm_custom_icon', 'icon_top', 'hover_show'),
    onClick: function onClick(e) {
      e.stopPropagation();
      addFiexd(dataIndex, 'left');
    }
  })), /*#__PURE__*/React.createElement(LmToolTip, {
    title: locale.fixedRight
  }, /*#__PURE__*/React.createElement(IconFont, {
    type: "icon-zhidi",
    className: cls('lm_custom_icon', 'icon_bottom', 'hover_show'),
    onClick: function onClick(e) {
      e.stopPropagation();
      addFiexd(dataIndex, 'right');
    }
  }))), !isSearch && /*#__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 _ref3$options = _ref3.options,
    options = _ref3$options === void 0 ? [] : _ref3$options,
    instance = _ref3.instance,
    isSearch = _ref3.isSearch;
  var state = instance.state,
    dispatch = instance.dispatch;
  var localColumns = state.columns;
  var handleMove = function handleMove(activeItem, overItem) {
    var oldIndex = localColumns.findIndex(function (s) {
      return s.dataIndex === activeItem.dataIndex;
    });
    var newIndex = localColumns.findIndex(function (s) {
      return s.dataIndex === overItem.dataIndex;
    });
    var res = arrayMove(localColumns, oldIndex, newIndex).map(function (item, index) {
      return _objectSpread(_objectSpread({}, item), {}, {
        order: index
      });
    });
    dispatch({
      type: 'changeColumns',
      columns: res
    });
  };
  var toggleShow = function toggleShow(value, id) {
    var result = localColumns.map(function (item) {
      if (item.dataIndex === id) {
        return _objectSpread(_objectSpread({}, item), {}, {
          show: (item === null || item === void 0 ? void 0 : item.show) === false
        });
      }
      return _objectSpread({}, item);
    });
    dispatch({
      type: 'changeColumns',
      columns: result
    });
  };

  /** 添加取消固定后重新排序 */
  var reSortColumns = function reSortColumns() {
    var columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
    var leftSortItem = [];
    var rigthSortItem = [];
    var items = [];
    columns.forEach(function (item) {
      if ((item === null || item === void 0 ? void 0 : item.fixed) === 'right') {
        rigthSortItem.push(item);
      } else if (!(item !== null && item !== void 0 && item.fixed)) {
        items.push(item);
      } else {
        leftSortItem.push(item);
      }
    });
    return [].concat(leftSortItem, items, rigthSortItem).map(function (item, index) {
      return _objectSpread(_objectSpread({}, item), {}, {
        order: index,
        colSort: index
      });
    });
  };

  /** 取消固定 */
  var clearFiexd = function clearFiexd(id) {
    var resultColumns = localColumns.map(function (item) {
      if (item.dataIndex === id) {
        return _objectSpread(_objectSpread({}, item), {}, {
          fixed: undefined
        });
      }
      return _objectSpread({}, item);
    });
    dispatch({
      type: 'changeColumns',
      columns: reSortColumns(resultColumns)
    });
  };

  /** 添加左右固定 */
  var addFiexd = function addFiexd(id, type) {
    var resultColumns = localColumns.map(function (item) {
      if (item.dataIndex === id) {
        return _objectSpread(_objectSpread({}, item), {}, {
          fixed: type
        });
      }
      return _objectSpread({}, item);
    });
    dispatch({
      type: 'changeColumns',
      columns: reSortColumns(resultColumns)
    });
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "drag_scroll"
  }, /*#__PURE__*/React.createElement(LmDrag, {
    options: options,
    rowKey: "dataIndex",
    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.dataIndex) || index,
      item: item,
      instance: instance,
      listeners: listeners,
      toggleShow: toggleShow,
      clearFiexd: clearFiexd,
      addFiexd: addFiexd,
      isSearch: isSearch,
      isDragging: isDragging
    });
  }));
});

// const TableSize = React.memo(({ instance }: ComponentProps) => {
//   const { state, dispatch, locale } = instance
//   const { size } = state

//   const getDefaultSize = () => (['small', 'middle', 'large'].includes(size) ? size : 'middle')

//   const optionsWithDisabled = [
//     { label: locale.sizeSmall, value: 'small', img: Size },
//     { label: locale.sizeDefault, value: 'middle', img: Middle },
//     { label: locale.sizeLarge, value: 'large', img: Large },
//   ]

//   const handleChange = (val) => {
//     dispatch({ type: 'changeSize', size: val })
//   }

//   return (
//     <div className="lm_custom_option_group_size">
//       <div className="group_title">{locale.sizeTitle}</div>
//       <Radio.Group
//         onChange={(e) => handleChange(e.target.value)}
//         className="lm_size_radio_group"
//         value={getDefaultSize()}
//       >
//         {optionsWithDisabled.map((item) => {
//           return (
//             <div className="lm_custom_size_warp" key={item.value} onClick={() => handleChange(item.value)}>
//               <img src={item.img} alt="" />
//               <Radio value={item.value}>{item.label}</Radio>
//             </div>
//           )
//         })}
//       </Radio.Group>
//     </div>
//   )
// })

var TablePreviewSize = function TablePreviewSize(_ref5) {
  var instance = _ref5.instance;
  var state = instance.state,
    dispatch = instance.dispatch,
    locale = instance.locale;
  var previewSize = state.previewSize;
  var marks = {
    40: ' ',
    64: ' ',
    80: ' ',
    96: ' '
  };
  var handleChange = function handleChange(val) {
    dispatch({
      type: 'changePreviewSize',
      previewSize: val
    });
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "lm_custom_option_group_preview_size"
  }, /*#__PURE__*/React.createElement("div", {
    className: "group_title"
  }, locale.previewSize, "\uFF1A", "".concat(previewSize, "x").concat(previewSize)), /*#__PURE__*/React.createElement("div", {
    className: "lm_custom_preview_size_wrapper"
  }, /*#__PURE__*/React.createElement(IconFont, {
    type: "icon-tu",
    className: "lm_custom_preview_size_prefix"
  }), /*#__PURE__*/React.createElement(Slider, {
    className: "lm_custom_preview_size_slider",
    min: 40,
    max: 96,
    marks: marks,
    onChange: handleChange,
    value: previewSize
  }), /*#__PURE__*/React.createElement(IconFont, {
    type: "icon-tu",
    className: "lm_custom_preview_size_suffix"
  })));
};
var TableConfig = /*#__PURE__*/React.memo(function (_ref6) {
  var _sortMenu$leftSortIte, _sortMenu$items, _sortMenu$rigthSortIt;
  var instance = _ref6.instance;
  var _useState = useState(''),
    _useState2 = _slicedToArray(_useState, 2),
    searchValue = _useState2[0],
    setSearchValue = _useState2[1];
  var state = instance.state,
    columns = instance.columns,
    dispatch = instance.dispatch,
    locale = instance.locale,
    onReset = instance.onReset,
    enablePreviewSize = instance.enablePreviewSize;
  var localColumns = state.columns;
  var sortMenu = useMemo(function () {
    var _cloneDeep;
    var cloneCol = (_cloneDeep = cloneDeep(localColumns)) === null || _cloneDeep === void 0 ? void 0 : _cloneDeep.filter(function (item) {
      var _item$title, _item$title2;
      return isFunction(item.title) || (_item$title = item.title) !== null && _item$title !== void 0 && _item$title.$$typeof ? true : ((_item$title2 = item.title) === null || _item$title2 === void 0 ? void 0 : _item$title2.indexOf(searchValue)) > -1;
    });
    var leftSortItem = [];
    var rigthSortItem = [];
    var items = [];
    cloneCol === null || cloneCol === void 0 ? void 0 : cloneCol.forEach(function (item, idx) {
      if (!item.dataIndex) {
        item.dataIndex = item.key || item.title || idx;
      }
      if ((item === null || item === void 0 ? void 0 : item.fixed) === 'right') {
        rigthSortItem.push(item);
      } else if (!(item !== null && item !== void 0 && item.fixed)) {
        items.push(item);
      } else {
        leftSortItem.push(item);
      }
    });
    return {
      leftSortItem: leftSortItem,
      rigthSortItem: rigthSortItem,
      items: items
    };
  }, [localColumns, searchValue]);
  var isCheckAll = useMemo(function () {
    var showLength = localColumns.filter(function (item) {
      return item.show !== false;
    });
    return {
      indeterminate: !!(showLength !== null && showLength !== void 0 && showLength.length && showLength.length !== localColumns.length),
      checkAll: showLength.length === localColumns.length
    };
  }, [localColumns]);

  /** 切换是否全选 */
  var onCheckAllChange = function onCheckAllChange() {
    var resultColumns = localColumns.map(function (item) {
      return _objectSpread(_objectSpread({}, item), {}, {
        show: !isCheckAll.checkAll
      });
    });
    dispatch({
      type: 'changeColumns',
      columns: resultColumns
    });
  };
  var resetChangeColumns = function resetChangeColumns() {
    dispatch({
      type: 'changeColumns',
      columns: columns
    });
    onReset === null || onReset === void 0 ? void 0 : onReset({
      type: 'table'
    });
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "lm_custom_option_columns"
  }, enablePreviewSize && /*#__PURE__*/React.createElement(TablePreviewSize, {
    instance: instance
  }), /*#__PURE__*/React.createElement("div", {
    className: "group_title"
  }, locale.columnTitle), /*#__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: resetChangeColumns
  }, locale.reset)), !!((_sortMenu$leftSortIte = sortMenu.leftSortItem) !== null && _sortMenu$leftSortIte !== void 0 && _sortMenu$leftSortIte.length) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
    className: "fixed_title"
  }, locale.fixedLeft), /*#__PURE__*/React.createElement(List, {
    key: "1",
    instance: instance,
    options: sortMenu.leftSortItem,
    isSearch: !!searchValue
  })), !!((_sortMenu$items = sortMenu.items) !== null && _sortMenu$items !== void 0 && _sortMenu$items.length) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
    className: "fixed_title"
  }, locale.noFixed), /*#__PURE__*/React.createElement(List, {
    key: "2",
    instance: instance,
    options: sortMenu.items,
    isSearch: !!searchValue
  })), !!((_sortMenu$rigthSortIt = sortMenu.rigthSortItem) !== null && _sortMenu$rigthSortIt !== void 0 && _sortMenu$rigthSortIt.length) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
    className: "fixed_title"
  }, locale.fixedRight), /*#__PURE__*/React.createElement(List, {
    key: "3",
    instance: instance,
    options: sortMenu.rigthSortItem,
    isSearch: !!searchValue
  })));
});
export default TableConfig;