choerodon-ui/pro/lib/table/TableWrapper.js

An enterprise-class UI design language and React-based implementation

"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _mobxReactLite = require("mobx-react-lite");

var _classnames = _interopRequireDefault(require("classnames"));

var _measureScrollbar = _interopRequireDefault(require("../../../lib/_util/measureScrollbar"));

var _UnitConvertor = require("../../../lib/_util/UnitConvertor");

var _TableContext = _interopRequireDefault(require("./TableContext"));

var _enum = require("./enum");

var _TableEditor = _interopRequireDefault(require("./TableEditor"));

var _TableCol = _interopRequireDefault(require("./TableCol"));

var _utils = require("./utils");

var _treeUtils = require("../_util/treeUtils");

var TableWrapper = function TableWrapper(props) {
  var children = props.children,
      hasBody = props.hasBody,
      lock = props.lock,
      hasHeader = props.hasHeader,
      hasFooter = props.hasFooter,
      columnGroups = props.columnGroups,
      getCopyBodyRef = props.getCopyBodyRef;

  var _useContext = (0, _react.useContext)(_TableContext["default"]),
      prefixCls = _useContext.prefixCls,
      summary = _useContext.summary,
      tableStore = _useContext.tableStore,
      fullColumnWidth = _useContext.fullColumnWidth;

  var leafs = columnGroups.leafs,
      width = columnGroups.width;
  var overflowX = tableStore.overflowX,
      customizable = tableStore.customizable,
      rowDraggable = tableStore.rowDraggable,
      dragColumnAlign = tableStore.dragColumnAlign,
      clipboard = tableStore.clipboard;
  var hasPlaceHolder = lock !== _enum.ColumnLock.left && (hasHeader || hasFooter) && tableStore.overflowY;
  var tableWidth = overflowX ? lock !== _enum.ColumnLock.left && !hasBody && tableStore.overflowY ? (0, _UnitConvertor.pxToRem)(width + (0, _measureScrollbar["default"])(), true) : (0, _UnitConvertor.pxToRem)(width, true) : '100%';
  var editorKeys = new Set();
  var editors = (0, _react.useMemo)(function () {
    return hasBody ? (0, _treeUtils.treeReduce)(leafs.map(function (_ref) {
      var column = _ref.column;
      return column;
    }), function (nodes, column) {
      var editor = column.editor,
          name = column.name;

      if (editor && name && (lock || (0, _utils.isStickySupport)() || !column.lock || !overflowX)) {
        var key = (0, _utils.getColumnKey)(column);

        if (!editorKeys.has(key)) {
          editorKeys.add(key);
          nodes.push( /*#__PURE__*/_react["default"].createElement(_TableEditor["default"], {
            key: key,
            column: column
          }));
        }
      }

      return nodes;
    }, []) : undefined;
  }, [leafs, overflowX, lock, hasBody]);
  var colGroup = (0, _react.useMemo)(function () {
    var fixedColumnLength = 1;

    if (customizable) {
      fixedColumnLength += 1;
    }

    if (rowDraggable && dragColumnAlign === _enum.DragColumnAlign.right) {
      fixedColumnLength += 1;
    }

    var cols = leafs.map(function (_ref2, index, array) {
      var column = _ref2.column,
          key = _ref2.key;
      return /*#__PURE__*/_react["default"].createElement(_TableCol["default"], {
        key: key,
        column: column,
        last: fullColumnWidth && index === array.length - fixedColumnLength
      });
    });

    if (!fullColumnWidth && lock !== _enum.ColumnLock.left && !overflowX && !tableStore.hasEmptyWidthColumn) {
      cols.push( /*#__PURE__*/_react["default"].createElement("col", {
        key: "empty-column"
      }));
    }

    if (hasPlaceHolder) {
      cols.push( /*#__PURE__*/_react["default"].createElement("col", {
        key: "fixed-column",
        style: {
          width: (0, _UnitConvertor.pxToRem)((0, _measureScrollbar["default"])(), true)
        }
      }));
    }

    return /*#__PURE__*/_react["default"].createElement("colgroup", null, cols);
  }, [leafs, customizable, rowDraggable, dragColumnAlign, hasPlaceHolder, lock, fullColumnWidth]);
  var style = (0, _react.useMemo)(function () {
    return {
      width: tableWidth
    };
  }, [tableWidth]);
  var className = (0, _classnames["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-last-row-bordered"), hasBody && !tableStore.overflowY && (tableStore.height !== undefined || !tableStore.hasFooter && overflowX)));
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("table", {
    key: "table",
    className: className,
    style: style,
    summary: hasBody ? summary : undefined
  }, colGroup, children), clipboard && /*#__PURE__*/_react["default"].createElement("div", {
    ref: getCopyBodyRef,
    className: "".concat(prefixCls, "-range-border"),
    hidden: !!tableStore.currentEditorName
  }), editors);
};

TableWrapper.displayName = 'TableWrapper';

var _default = (0, _mobxReactLite.observer)(TableWrapper);

exports["default"] = _default;
//# sourceMappingURL=TableWrapper.js.map