@atlaskit/renderer
Version:
Renderer component
85 lines (84 loc) • 3.58 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 const Table = /*#__PURE__*/React.memo(({
innerRef,
isNumberColumnEnabled,
columnWidths,
layout,
renderWidth,
children,
tableNode,
rendererAppearance,
isInsideOfBlockNode,
isInsideOfTable,
isinsideMultiBodiedExtension,
allowTableResizing,
isPresentational,
fixTableSSRResizing = false,
allowFixedColumnWidthOption = false
}) => {
var _tableNode$attrs;
let tableWidth = tableNode ? getTableContainerWidth(tableNode) : akEditorDefaultLayoutWidth;
let 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;
}
}
const tableLayout = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout;
const tableDisplayMode = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.displayMode;
const isContentMode = isTableInContentMode({
tableNode,
isSupported: isContentModeSupported({
allowTableResizing,
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));
});