linkmore-design/lib/custom-table-option/components/TableConfig/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 _checkbox = _interopRequireDefault(require("../../../checkbox"));
var _iconFont = _interopRequireDefault(require("../../../icon-font"));
var _input = _interopRequireDefault(require("../../../input"));
var _lmDrag = _interopRequireDefault(require("../../../lm-drag"));
var _slider = _interopRequireDefault(require("../../../slider"));
var _tooltip = _interopRequireDefault(require("../../../tooltip"));
// import Radio from '../../../radio'

// import Large from '../../images/large.png'
// import Middle from '../../images/middle.png'
// import Size from '../../images/small.png'

const {
  LmToolTip
} = _tooltip.default;
const Item = /*#__PURE__*/_react.default.memo(({
  item = {},
  listeners,
  toggleShow,
  clearFiexd,
  addFiexd,
  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), /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_custom_item_operate"
  }, item?.fixed && /*#__PURE__*/_react.default.createElement(LmToolTip, {
    title: locale.noFixed
  }, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: "icon-quxiaoguding",
    className: (0, _classnames.default)('lm_custom_icon', 'hover_show'),
    onClick: e => {
      e.stopPropagation();
      clearFiexd(dataIndex);
    }
  })), !item?.fixed && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(LmToolTip, {
    title: locale.fixedLeft
  }, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: "icon-zhiding",
    className: (0, _classnames.default)('lm_custom_icon', 'icon_top', 'hover_show'),
    onClick: e => {
      e.stopPropagation();
      addFiexd(dataIndex, 'left');
    }
  })), /*#__PURE__*/_react.default.createElement(LmToolTip, {
    title: locale.fixedRight
  }, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: "icon-zhidi",
    className: (0, _classnames.default)('lm_custom_icon', 'icon_bottom', 'hover_show'),
    onClick: e => {
      e.stopPropagation();
      addFiexd(dataIndex, 'right');
    }
  }))), !isSearch && /*#__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 {
    columns: localColumns
  } = state;
  const handleMove = (activeItem, overItem) => {
    const oldIndex = localColumns.findIndex(s => s.dataIndex === activeItem.dataIndex);
    const newIndex = localColumns.findIndex(s => s.dataIndex === overItem.dataIndex);
    const res = (0, _sortable.arrayMove)(localColumns, oldIndex, newIndex).map((item, index) => ({
      ...item,
      order: index
    }));
    dispatch({
      type: 'changeColumns',
      columns: res
    });
  };
  const toggleShow = (value, id) => {
    const result = localColumns.map(item => {
      if (item.dataIndex === id) {
        return {
          ...item,
          show: item?.show === false
        };
      }
      return {
        ...item
      };
    });
    dispatch({
      type: 'changeColumns',
      columns: result
    });
  };

  /** 添加取消固定后重新排序 */
  const reSortColumns = (columns = []) => {
    const leftSortItem = [];
    const rigthSortItem = [];
    const items = [];
    columns.forEach(item => {
      if (item?.fixed === 'right') {
        rigthSortItem.push(item);
      } else if (!item?.fixed) {
        items.push(item);
      } else {
        leftSortItem.push(item);
      }
    });
    return [...leftSortItem, ...items, ...rigthSortItem].map((item, index) => ({
      ...item,
      order: index,
      colSort: index
    }));
  };

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

  /** 添加左右固定 */
  const addFiexd = (id, type) => {
    const resultColumns = localColumns.map(item => {
      if (item.dataIndex === id) {
        return {
          ...item,
          fixed: type
        };
      }
      return {
        ...item
      };
    });
    dispatch({
      type: 'changeColumns',
      columns: reSortColumns(resultColumns)
    });
  };
  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,
    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>
//   )
// })

const TablePreviewSize = ({
  instance
}) => {
  const {
    state,
    dispatch,
    locale
  } = instance;
  const {
    previewSize
  } = state;
  const marks = {
    40: ' ',
    64: ' ',
    80: ' ',
    96: ' '
  };
  const handleChange = val => {
    dispatch({
      type: 'changePreviewSize',
      previewSize: val
    });
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_custom_option_group_preview_size"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "group_title"
  }, locale.previewSize, "\uFF1A", `${previewSize}x${previewSize}`), /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_custom_preview_size_wrapper"
  }, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: "icon-tu",
    className: "lm_custom_preview_size_prefix"
  }), /*#__PURE__*/_react.default.createElement(_slider.default, {
    className: "lm_custom_preview_size_slider",
    min: 40,
    max: 96,
    marks: marks,
    onChange: handleChange,
    value: previewSize
  }), /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: "icon-tu",
    className: "lm_custom_preview_size_suffix"
  })));
};
const TableConfig = /*#__PURE__*/_react.default.memo(({
  instance
}) => {
  const [searchValue, setSearchValue] = (0, _react.useState)('');
  const {
    state,
    columns,
    dispatch,
    locale,
    onReset,
    enablePreviewSize
  } = instance;
  const {
    columns: localColumns
  } = state;
  const sortMenu = (0, _react.useMemo)(() => {
    const cloneCol = (0, _lodash.cloneDeep)(localColumns)?.filter(item => {
      return (0, _lodash.isFunction)(item.title) || item.title?.$$typeof ? true : item.title?.indexOf(searchValue) > -1;
    });
    const leftSortItem = [];
    const rigthSortItem = [];
    const items = [];
    cloneCol?.forEach((item, idx) => {
      if (!item.dataIndex) {
        item.dataIndex = item.key || item.title || idx;
      }
      if (item?.fixed === 'right') {
        rigthSortItem.push(item);
      } else if (!item?.fixed) {
        items.push(item);
      } else {
        leftSortItem.push(item);
      }
    });
    return {
      leftSortItem,
      rigthSortItem,
      items
    };
  }, [localColumns, searchValue]);
  const isCheckAll = (0, _react.useMemo)(() => {
    const showLength = localColumns.filter(item => item.show !== false);
    return {
      indeterminate: !!(showLength?.length && showLength.length !== localColumns.length),
      checkAll: showLength.length === localColumns.length
    };
  }, [localColumns]);

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