@jannie-shao/components-antd4/es/table/index.js

基于 Antd 4 的组件封装

import "antd/es/table/style";
import _Table from "antd/es/table";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["className", "type", "dataSource", "expandable", "columns"],
  _excluded2 = ["defaultExpandAllRows", "expandedRowKeys"];
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { isEmpty, pull } from 'lodash';
import { rootPrefix } from "../style/config";
var getClass = {
  tabMore: rootPrefix + "-table-use-tab-more",
  tabExpand: rootPrefix + "-table-in-expand"
};
var CompTable = function CompTable(_ref) {
  var className = _ref.className,
    type = _ref.type,
    dataSource = _ref.dataSource,
    expandable = _ref.expandable,
    columns = _ref.columns,
    tableProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useState = useState([]),
    expandedKeys = _useState[0],
    setExpandedKeys = _useState[1];
  var defaultExpandAllRows = expandable.defaultExpandAllRows,
    expandedRowKeys = expandable.expandedRowKeys,
    expandMore = _objectWithoutPropertiesLoose(expandable, _excluded2);
  var handleExpand = function handleExpand(expanded, _ref2) {
    var _rowKey = _ref2._rowKey;
    if (expanded && !expandedKeys.includes(_rowKey)) {
      setExpandedKeys([].concat(expandedKeys, [_rowKey]));
    } else if (!expanded && expandedKeys.includes(_rowKey)) {
      setExpandedKeys(pull([].concat(expandedKeys), _rowKey));
    }
  };
  useEffect(function () {
    if (defaultExpandAllRows) {
      setExpandedKeys(dataSource.map(function (d) {
        return d._rowKey;
      }));
    } else {
      setExpandedKeys(expandedRowKeys || []);
    }
  }, [defaultExpandAllRows, expandedRowKeys, dataSource]);
  return /*#__PURE__*/React.createElement(_Table, _extends({
    className: classnames(getClass[type] || '', className),
    expandable: isEmpty(expandable) ? {} : _extends({}, expandMore, {
      expandedRowKeys: expandedKeys,
      onExpand: handleExpand
    }),
    columns: columns.map(function (c) {
      var cNow = _extends({}, c);
      if (!isEmpty(c._expandable)) {
        var _c$_expandable = c._expandable,
          _c$_expandable$show = _c$_expandable.show,
          show = _c$_expandable$show === void 0 ? 'Show' : _c$_expandable$show,
          _c$_expandable$hide = _c$_expandable.hide,
          hide = _c$_expandable$hide === void 0 ? 'Hide' : _c$_expandable$hide;
        cNow.render = function (_, record) {
          return /*#__PURE__*/React.createElement(React.Fragment, null, expandedKeys.includes(record._rowKey) && /*#__PURE__*/React.createElement("a", {
            onClick: function onClick() {
              return handleExpand(false, record);
            }
          }, hide), !expandedKeys.includes(record._rowKey) && /*#__PURE__*/React.createElement("a", {
            onClick: function onClick() {
              return handleExpand(true, record);
            }
          }, show));
        };
      }
      return cNow;
    }),
    dataSource: dataSource
  }, tableProps));
};
CompTable.propTypes = {
  className: PropTypes.string,
  type: PropTypes.string,
  dataSource: PropTypes.array,
  expandable: PropTypes.object
};
CompTable.defaultProps = {
  className: '',
  type: '',
  dataSource: [],
  expandable: {}
};
export default CompTable;