@atlaskit/renderer/dist/cjs/react/nodes/table/table.js

Renderer component

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Table = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _colgroup = require("./colgroup");
var _nodeWidth = require("@atlaskit/editor-common/node-width");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _table = require("@atlaskit/editor-common/table");
var _contentMode = require("./content-mode");
var Table = exports.Table = /*#__PURE__*/_react.default.memo(function (_ref) {
  var _tableNode$attrs;
  var innerRef = _ref.innerRef,
    isNumberColumnEnabled = _ref.isNumberColumnEnabled,
    columnWidths = _ref.columnWidths,
    layout = _ref.layout,
    renderWidth = _ref.renderWidth,
    children = _ref.children,
    tableNode = _ref.tableNode,
    rendererAppearance = _ref.rendererAppearance,
    isInsideOfBlockNode = _ref.isInsideOfBlockNode,
    isInsideOfTable = _ref.isInsideOfTable,
    isinsideMultiBodiedExtension = _ref.isinsideMultiBodiedExtension,
    allowTableResizing = _ref.allowTableResizing,
    isPresentational = _ref.isPresentational,
    _ref$fixTableSSRResiz = _ref.fixTableSSRResizing,
    fixTableSSRResizing = _ref$fixTableSSRResiz === void 0 ? false : _ref$fixTableSSRResiz,
    _ref$allowFixedColumn = _ref.allowFixedColumnWidthOption,
    allowFixedColumnWidthOption = _ref$allowFixedColumn === void 0 ? false : _ref$allowFixedColumn;
  var tableWidth = tableNode ? (0, _nodeWidth.getTableContainerWidth)(tableNode) : _editorSharedStyles.akEditorDefaultLayoutWidth;
  var tableColumnWidths = columnWidths;
  if (rendererAppearance === 'comment' && allowTableResizing && tableNode && !((_tableNode$attrs = tableNode.attrs) !== null && _tableNode$attrs !== void 0 && _tableNode$attrs.width)) {
    tableWidth = 'inherit';
  }
  if (rendererAppearance === 'comment' && !allowTableResizing) {
    // in the case we have css container stylings,
    // we don't need to calculate width here as this
    // is done via css
    if (!(0, _platformFeatureFlags.fg)('platform-ssr-table-resize')) {
      tableWidth = renderWidth;
    }
  }

  // for columns that are evenly distributed, do not return `colgroup` since existing table containerQuery
  // scales up the columns width. This ensures columns always have 42px.
  if (rendererAppearance === 'comment') {
    if ((0, _platformFeatureFlags.fg)('platform-ssr-table-resize')) {
      tableColumnWidths = columnWidths && (0, _colgroup.colWidthSum)(columnWidths) ? columnWidths : undefined;
    }
  }
  var tableLayout = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout;
  var tableDisplayMode = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.displayMode;
  var isContentMode = (0, _table.isTableInContentMode)({
    tableNode: tableNode,
    isSupported: (0, _contentMode.isContentModeSupported)({
      allowTableResizing: allowTableResizing,
      rendererAppearance: rendererAppearance
    }),
    isTableNested: isInsideOfBlockNode || isInsideOfTable
  }) && (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
  return /*#__PURE__*/_react.default.createElement("table", (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform_renderer_isPresentational') && {
    role: isPresentational ? 'presentation' : undefined
  }, {
    "data-testid": "renderer-table",
    "data-number-column": isNumberColumnEnabled,
    "data-table-width": tableWidth,
    "data-layout": tableLayout,
    "data-table-display-mode": tableDisplayMode,
    "data-initial-width-mode": isContentMode ? 'content' : undefined,
    ref: innerRef,
    style: {
      marginTop: fixTableSSRResizing ? '0px' : ''
    }
  }), /*#__PURE__*/_react.default.createElement(_colgroup.Colgroup, {
    columnWidths: tableColumnWidths,
    layout: layout,
    isNumberColumnEnabled: isNumberColumnEnabled,
    renderWidth: renderWidth,
    tableNode: tableNode,
    rendererAppearance: rendererAppearance,
    isInsideOfBlockNode: isInsideOfBlockNode,
    isInsideOfTable: isInsideOfTable,
    isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
    allowTableResizing: allowTableResizing,
    allowFixedColumnWidthOption: allowFixedColumnWidthOption
  }), /*#__PURE__*/_react.default.createElement("tbody", null, children));
});