@atlaskit/renderer
Version:
Renderer component
86 lines (85 loc) • 4.19 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import { Colgroup, colWidthSum } from './colgroup';
import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { isTableInContentMode } from '@atlaskit/editor-common/table';
import { isContentModeSupported } from './content-mode';
export var Table = /*#__PURE__*/React.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 ? getTableContainerWidth(tableNode) : 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 (!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 (fg('platform-ssr-table-resize')) {
tableColumnWidths = columnWidths && 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 = isTableInContentMode({
tableNode: tableNode,
isSupported: isContentModeSupported({
allowTableResizing: allowTableResizing,
rendererAppearance: rendererAppearance
}),
isTableNested: isInsideOfBlockNode || isInsideOfTable
}) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
return /*#__PURE__*/React.createElement("table", _extends({}, 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.createElement(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.createElement("tbody", null, children));
});