@aliretail/react-materials-components/es/Tablex/TableContainer.js

B 端物料组件库

import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React from 'react';
import * as R from 'ramda';
import cx from 'classnames';
import PropTypes from 'prop-types';
import { v4 as uuidv4 } from 'uuid';
import { TableProvider } from "./TableContext";
import { needResort, filterSetting } from "./components/Setting/util";

// 全局 Table 容器
var TableContainer = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(TableContainer, _React$Component);

  function TableContainer(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;

    _this.tableStateChange = function (newState) {
      _this.setState({
        tableState: _extends({}, _this.state.tableState, newState)
      });
    };

    _this.state = {
      providerState: R.omit(['children', 'tableState'], props),
      tableState: {
        containerId: props.containerId || uuidv4(),
        columns: filterSetting(props.columns)
      }
    };
    return _this;
  }

  // 传递所有 props 到 state 中，除外 children
  TableContainer.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
    var changeState = {
      providerState: R.omit(['children', 'tableState'], nextProps)
    };

    if (!prevState.tableState.hasTableSetting || needResort(nextProps.columns, prevState.providerState.columns)) {
      changeState.tableState = _extends({}, prevState.tableState, {
        columns: nextProps.columns
      });
    }

    return changeState;
  };

  var _proto = TableContainer.prototype;

  _proto.render = function render() {
    var _cx;

    var _this$props = this.props,
        className = _this$props.className,
        style = _this$props.style;
    var classes = cx((_cx = {
      'aliretail-table': true
    }, _cx[className] = !!className, _cx));
    return /*#__PURE__*/React.createElement("div", {
      "data-name": "AliretailTableContainer",
      id: this.state.tableState.containerId,
      className: classes,
      style: style
    }, /*#__PURE__*/React.createElement(TableProvider, {
      value: _extends({}, this.state.providerState, {
        tableState: this.state.tableState,
        tableStateChange: this.tableStateChange
      })
    }, this.props.children));
  };

  return TableContainer;
}(React.Component);

TableContainer.propTypes = {
  columns: PropTypes.array
};
TableContainer.defaultProps = {
  primaryKey: 'id',
  columns: [],
  dataSource: []
};
export default TableContainer;