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

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _TableWrapper = _interopRequireDefault(require("./TableWrapper"));
var _fns = _interopRequireDefault(require("../fns"));
// 渲染的形式: 默认渲染/弹窗渲染
// 参数聚合

const reducer = (state, action) => {
  const {
    page,
    resize,
    columnCount,
    rows,
    checkboxConfig,
    radioConfig
  } = action;
  switch (action.type) {
    case 'changePage':
      // 分页改变
      return {
        ...state,
        page
      };
    case 'changeColumnCount':
      return {
        ...state,
        columnCount
      };
    case 'changeRows':
      return {
        ...state,
        rows
      };
    case 'windowResize':
      return {
        ...state,
        resize
      };
    case 'changeCheckboxConfig':
      // 复选中的Key
      return {
        ...state,
        checkboxConfig: {
          ...state.checkboxConfig,
          ...checkboxConfig
        }
      };
    case 'changeRadioConfig':
      // 单选中的Key
      return {
        ...state,
        radioConfig: {
          ...state.radioConfig,
          ...radioConfig
        }
      };
    default:
      throw new Error();
  }
};

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

const LmCardTableRoot = (props, ref) => {
  const initialState = (0, _react.useMemo)(() => getInitialState(props), []);
  const [state, dispatch] = (0, _react.useReducer)(reducer, initialState);
  // eslint-disable-next-line no-unused-vars
  const [isFullScreen, setIsFullScreen] = (0, _react.useState)(false);

  // 配置对象收集
  const configProps = (0, _react.useMemo)(() => {
    const {
      rowConfig,
      cellConfig,
      defaultConfig,
      checkboxConfig,
      radioConfig,
      selectionConfig,
      pagerConfig,
      toolbarConfig,
      ...resetProps
    } = props;
    return {
      ...resetProps,
      rowConfig: {
        // 行配置
        gap: 16,
        // 行间隔
        ...rowConfig
      },
      cellConfig: {
        // 单元格配置对象
        width: 192,
        height: 282,
        // 单元格高度
        ...cellConfig
      },
      selectionConfig: {
        type: ['checkbox', 'radio'],
        ...selectionConfig
      },
      radioConfig: {
        ...radioConfig
      },
      checkboxConfig: {
        ...checkboxConfig
      },
      pagerConfig: {
        ...pagerConfig
      },
      toolbarConfig: {
        ...toolbarConfig
      },
      defaultConfig
    };
  }, [props]);

  // 方法收集
  const eventProps = (0, _react.useMemo)(() => {
    return (0, _fns.default)({
      state,
      dispatch,
      props: configProps
    });
  }, [state, dispatch, configProps]);
  const table = {
    ...configProps,
    ...eventProps,
    state,
    dispatch
  };

  // 向外暴露出的方法
  (0, _react.useImperativeHandle)(ref, () => ({
    getCheckboxRecords: () => state.checkboxConfig.checkValues,
    getRadioRecord: () => state.radioConfig.checkValue,
    ...eventProps
  }));
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isFullScreen && /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
    table: table
  }));
};
var _default = /*#__PURE__*/(0, _react.forwardRef)(LmCardTableRoot);
exports.default = _default;