linkmore-design/es/card-table/table/TableRoot.js

🌈 🚀lm组件库。🚀

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
var _excluded = ["checkKeys", "trigger", "checkMethod"],
  _excluded2 = ["checkKey", "trigger"],
  _excluded3 = ["rowConfig", "cellConfig", "defaultConfig", "checkboxConfig", "radioConfig", "selectionConfig", "pagerConfig", "toolbarConfig"];
// 渲染的形式: 默认渲染/弹窗渲染
// 参数聚合
import React, { useState, useMemo, useReducer, forwardRef, useImperativeHandle } from 'react';
import LmCardTableWrapper from "./TableWrapper";
import fns from "../fns";
var reducer = function reducer(state, action) {
  var page = action.page,
    resize = action.resize,
    columnCount = action.columnCount,
    rows = action.rows,
    checkboxConfig = action.checkboxConfig,
    radioConfig = action.radioConfig;
  switch (action.type) {
    case 'changePage':
      // 分页改变
      return _objectSpread(_objectSpread({}, state), {}, {
        page: page
      });
    case 'changeColumnCount':
      return _objectSpread(_objectSpread({}, state), {}, {
        columnCount: columnCount
      });
    case 'changeRows':
      return _objectSpread(_objectSpread({}, state), {}, {
        rows: rows
      });
    case 'windowResize':
      return _objectSpread(_objectSpread({}, state), {}, {
        resize: resize
      });
    case 'changeCheckboxConfig':
      // 复选中的Key
      return _objectSpread(_objectSpread({}, state), {}, {
        checkboxConfig: _objectSpread(_objectSpread({}, state.checkboxConfig), checkboxConfig)
      });
    case 'changeRadioConfig':
      // 单选中的Key
      return _objectSpread(_objectSpread({}, state), {}, {
        radioConfig: _objectSpread(_objectSpread({}, state.radioConfig), radioConfig)
      });
    default:
      throw new Error();
  }
};

// 仅在初始化时触发一次
var getInitialState = function getInitialState(props) {
  var _props$checkboxConfig = props.checkboxConfig,
    checkboxConfig = _props$checkboxConfig === void 0 ? {} : _props$checkboxConfig,
    _props$radioConfig = props.radioConfig,
    radioConfig = _props$radioConfig === void 0 ? {} : _props$radioConfig,
    _props$dataSource = props.dataSource,
    dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
    cellKey = props.cellKey;
  var _checkboxConfig$check = checkboxConfig.checkKeys,
    checkKeys = _checkboxConfig$check === void 0 ? [] : _checkboxConfig$check,
    _checkboxConfig$trigg = checkboxConfig.trigger,
    checkboxTrigger = _checkboxConfig$trigg === void 0 ? 'default' : _checkboxConfig$trigg,
    _checkboxConfig$check2 = checkboxConfig.checkMethod,
    checkMethod = _checkboxConfig$check2 === void 0 ? true : _checkboxConfig$check2,
    resetCheckCOnfig = _objectWithoutProperties(checkboxConfig, _excluded);
  var _radioConfig$checkKey = radioConfig.checkKey,
    checkKey = _radioConfig$checkKey === void 0 ? '' : _radioConfig$checkKey,
    _radioConfig$trigger = radioConfig.trigger,
    radioTrigger = _radioConfig$trigger === void 0 ? 'default' : _radioConfig$trigger,
    resetRadioConfig = _objectWithoutProperties(radioConfig, _excluded2);
  var checkValues = dataSource.filter(function (v) {
    return checkKeys.includes(v[cellKey]);
  }) || [];
  var checkValue = dataSource.find(function (v) {
    return checkKey === v[cellKey];
  });
  return {
    // 复选框的配置
    checkboxConfig: _objectSpread({
      checkKeys: checkKeys,
      checkValues: checkValues,
      trigger: checkboxTrigger,
      checkMethod: checkMethod
    }, resetCheckCOnfig),
    radioConfig: _objectSpread({
      checkKey: checkKey,
      checkValue: checkValue,
      trigger: radioTrigger
    }, resetRadioConfig),
    // 分页的配置
    page: {
      pageIndex: 1,
      pageSize: 20,
      total: 0
    },
    // 容器盒子的大小
    resize: {
      widht: 0,
      height: 0
    },
    // 列数量
    columnCount: 5,
    rows: [] // 行数据
  };
};

var LmCardTableRoot = function LmCardTableRoot(props, ref) {
  var initialState = useMemo(function () {
    return getInitialState(props);
  }, []);
  var _useReducer = useReducer(reducer, initialState),
    _useReducer2 = _slicedToArray(_useReducer, 2),
    state = _useReducer2[0],
    dispatch = _useReducer2[1];
  // eslint-disable-next-line no-unused-vars
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isFullScreen = _useState2[0],
    setIsFullScreen = _useState2[1];

  // 配置对象收集
  var configProps = useMemo(function () {
    var rowConfig = props.rowConfig,
      cellConfig = props.cellConfig,
      defaultConfig = props.defaultConfig,
      checkboxConfig = props.checkboxConfig,
      radioConfig = props.radioConfig,
      selectionConfig = props.selectionConfig,
      pagerConfig = props.pagerConfig,
      toolbarConfig = props.toolbarConfig,
      resetProps = _objectWithoutProperties(props, _excluded3);
    return _objectSpread(_objectSpread({}, resetProps), {}, {
      rowConfig: _objectSpread({
        // 行配置
        gap: 16
      }, rowConfig),
      cellConfig: _objectSpread({
        // 单元格配置对象
        width: 192,
        height: 282
      }, cellConfig),
      selectionConfig: _objectSpread({
        type: ['checkbox', 'radio']
      }, selectionConfig),
      radioConfig: _objectSpread({}, radioConfig),
      checkboxConfig: _objectSpread({}, checkboxConfig),
      pagerConfig: _objectSpread({}, pagerConfig),
      toolbarConfig: _objectSpread({}, toolbarConfig),
      defaultConfig: defaultConfig
    });
  }, [props]);

  // 方法收集
  var eventProps = useMemo(function () {
    return fns({
      state: state,
      dispatch: dispatch,
      props: configProps
    });
  }, [state, dispatch, configProps]);
  var table = _objectSpread(_objectSpread(_objectSpread({}, configProps), eventProps), {}, {
    state: state,
    dispatch: dispatch
  });

  // 向外暴露出的方法
  useImperativeHandle(ref, function () {
    return _objectSpread({
      getCheckboxRecords: function getCheckboxRecords() {
        return state.checkboxConfig.checkValues;
      },
      getRadioRecord: function getRadioRecord() {
        return state.radioConfig.checkValue;
      }
    }, eventProps);
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, !isFullScreen && /*#__PURE__*/React.createElement(LmCardTableWrapper, {
    table: table
  }));
};
export default /*#__PURE__*/forwardRef(LmCardTableRoot);