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

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { useContext, useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import classNames from 'classnames';
import measureScrollbar from '../../../es/_util/measureScrollbar';
import { pxToRem } from '../../../es/_util/UnitConvertor';
import TableContext from './TableContext';
import { ColumnLock, DragColumnAlign } from './enum';
import TableEditor from './TableEditor';
import TableCol from './TableCol';
import { getColumnKey, isStickySupport } from './utils';
import { treeReduce } from '../_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 = useContext(TableContext),
      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 !== ColumnLock.left && (hasHeader || hasFooter) && tableStore.overflowY;
  var tableWidth = overflowX ? lock !== ColumnLock.left && !hasBody && tableStore.overflowY ? pxToRem(width + measureScrollbar(), true) : pxToRem(width, true) : '100%';
  var editorKeys = new Set();
  var editors = useMemo(function () {
    return hasBody ? 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 || isStickySupport() || !column.lock || !overflowX)) {
        var key = getColumnKey(column);

        if (!editorKeys.has(key)) {
          editorKeys.add(key);
          nodes.push( /*#__PURE__*/React.createElement(TableEditor, {
            key: key,
            column: column
          }));
        }
      }

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

    if (customizable) {
      fixedColumnLength += 1;
    }

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

    var cols = leafs.map(function (_ref2, index, array) {
      var column = _ref2.column,
          key = _ref2.key;
      return /*#__PURE__*/React.createElement(TableCol, {
        key: key,
        column: column,
        last: fullColumnWidth && index === array.length - fixedColumnLength
      });
    });

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

    if (hasPlaceHolder) {
      cols.push( /*#__PURE__*/React.createElement("col", {
        key: "fixed-column",
        style: {
          width: pxToRem(measureScrollbar(), true)
        }
      }));
    }

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

TableWrapper.displayName = 'TableWrapper';
export default observer(TableWrapper);
//# sourceMappingURL=TableWrapper.js.map