@atlaskit/renderer
Version:
Renderer component
768 lines (753 loc) • 42.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.tableCanBeSticky = exports.shouldHeaderStick = exports.shouldHeaderPinBottom = exports.orderChildren = exports.isTableResizingEnabled = exports.isStickyScrollbarEnabled = exports.isHeaderRowEnabled = exports.hasRowspan = exports.getRefTop = exports.default = exports.addSortableColumn = exports.TableProcessor = exports.TableContainer = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _reactIntl = require("react-intl");
var _styles = require("@atlaskit/editor-common/styles");
var _messages = require("@atlaskit/editor-common/messages");
var _ui = require("@atlaskit/editor-common/ui");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _utils = require("@atlaskit/editor-common/utils");
var _types = require("@atlaskit/editor-common/types");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _nodeWidth = require("@atlaskit/editor-common/node-width");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _style = require("../../ui/Renderer/style");
var _tableCell = require("./tableCell");
var _SmartCardStorage = require("../../ui/SmartCardStorage");
var _sticky = require("./table/sticky");
var _table = require("./table/table");
var _appearance = require("../utils/appearance");
var _TableStickyScrollbar = require("./TableStickyScrollbar");
var _tableNew = require("./tableNew");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _table2 = require("@atlaskit/editor-common/table");
var _contentMode = require("./table/content-mode");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var isTableResizingEnabled = exports.isTableResizingEnabled = function isTableResizingEnabled(appearance) {
return (0, _appearance.isFullWidthOrFullPageAppearance)(appearance) || (0, _appearance.isCommentAppearance)(appearance);
};
var isStickyScrollbarEnabled = exports.isStickyScrollbarEnabled = function isStickyScrollbarEnabled(appearance) {
return (0, _appearance.isFullWidthOrFullPageAppearance)(appearance) && (0, _experiments.editorExperiment)('platform_renderer_table_sticky_scrollbar', true, {
exposure: true
});
};
var orderChildren = exports.orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
if (!tableOrderStatus || tableOrderStatus.order === _types.SortOrder.NO_ORDER) {
return children;
}
var order = tableOrderStatus.order,
columnIndex = tableOrderStatus.columnIndex;
var compareNodesInOrder = (0, _utils.createCompareNodes)({
getInlineCardTextFromStore: function getInlineCardTextFromStore(attrs) {
var _ref = attrs,
url = _ref.url;
if (!url) {
return null;
}
return smartCardStorage.get(url) || null;
}
}, order);
var tableArray = (0, _utils.convertProsemirrorTableNodeToArrayOfRows)(tableNode);
var tableArrayWithChildren = tableArray.map(function (rowNodes, index) {
return {
rowNodes: rowNodes,
rowReact: children[index]
};
});
var headerRow = tableArrayWithChildren.shift();
var sortedTable = tableArrayWithChildren.sort(function (rowA, rowB) {
return compareNodesInOrder(rowA.rowNodes[columnIndex], rowB.rowNodes[columnIndex]);
});
if (headerRow) {
sortedTable.unshift(headerRow);
}
return sortedTable.map(function (elem) {
return elem.rowReact;
});
};
var hasRowspan = exports.hasRowspan = function hasRowspan(row) {
var hasRowspan = false;
row.forEach(function (cell) {
return hasRowspan = hasRowspan || cell.attrs.rowspan > 1;
});
return hasRowspan;
};
var getRefTop = exports.getRefTop = function getRefTop(refElement) {
return Math.round(refElement.getBoundingClientRect().top);
};
var shouldHeaderStick = exports.shouldHeaderStick = function shouldHeaderStick(scrollTop, tableTop, tableBottom, rowHeight) {
return tableTop <= scrollTop && !(tableBottom - rowHeight <= scrollTop);
};
var shouldHeaderPinBottom = exports.shouldHeaderPinBottom = function shouldHeaderPinBottom(scrollTop, tableBottom, rowHeight) {
return tableBottom - rowHeight <= scrollTop && !(tableBottom < scrollTop);
};
var addSortableColumn = exports.addSortableColumn = function addSortableColumn(rows, tableOrderStatus, onSorting
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-explicit-any
) {
return _react.default.Children.map(rows, function (row, index) {
if (index === 0) {
return /*#__PURE__*/_react.default.cloneElement(_react.default.Children.only(row), {
tableOrderStatus: tableOrderStatus,
onSorting: onSorting
});
}
return row;
});
};
var isHeaderRowEnabled = exports.isHeaderRowEnabled = function isHeaderRowEnabled(rows
// eslint-disable-next-line @typescript-eslint/no-explicit-any
) {
if (!rows.length) {
return false;
}
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var children = rows[0].props.children;
if (!children.length) {
return false;
}
if (children.length === 1) {
return children[0].type === _tableCell.TableHeader;
}
return children.every(function (node) {
return node.type === _tableCell.TableHeader;
});
};
/**
* This TableWrapper component was created to make sure that the aria-label can be
* internationalized without needing to add `intl` to the TableContainer.
*
* <TableWrapper wrapperRef={ref} onScroll={handleScroll} stickyHeaders={config}>
* <Table>...</Table>
* </TableWrapper>
*/
var TableWrapper = function TableWrapper(_ref2) {
var children = _ref2.children,
wrapperRef = _ref2.wrapperRef,
onScroll = _ref2.onScroll,
stickyHeaders = _ref2.stickyHeaders,
tabIndex = _ref2.tabIndex;
var _useIntl = (0, _reactIntl.useIntl)(),
formatMessage = _useIntl.formatMessage;
var isScrollableRegion = tabIndex !== undefined;
return /*#__PURE__*/_react.default.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
ref: wrapperRef,
onScroll: stickyHeaders ? onScroll : undefined
// Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
// eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
,
tabIndex: tabIndex,
role: isScrollableRegion ? 'region' : undefined,
"aria-label": isScrollableRegion ? formatMessage(_messages.tableMessages.tableScrollRegion) : undefined
}, children);
};
var tableCanBeSticky = exports.tableCanBeSticky = function tableCanBeSticky(node, children
// eslint-disable-next-line @typescript-eslint/no-explicit-any
) {
return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
};
/**
*
*/
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components
var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Component) {
function TableContainer() {
var _this;
(0, _classCallCheck2.default)(this, TableContainer);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, TableContainer, [].concat(args));
(0, _defineProperty2.default)(_this, "state", {
stickyMode: 'none',
wrapperWidth: 0,
headerRowHeight: 0
});
(0, _defineProperty2.default)(_this, "tableRef", /*#__PURE__*/_react.default.createRef());
(0, _defineProperty2.default)(_this, "stickyHeaderRef", /*#__PURE__*/_react.default.createRef());
(0, _defineProperty2.default)(_this, "stickyScrollbarRef", /*#__PURE__*/_react.default.createRef());
// used for sync scroll + copying wrapper width to sticky header
(0, _defineProperty2.default)(_this, "stickyWrapperRef", /*#__PURE__*/_react.default.createRef());
(0, _defineProperty2.default)(_this, "wrapperRef", /*#__PURE__*/_react.default.createRef());
(0, _defineProperty2.default)(_this, "overflowParent", null);
(0, _defineProperty2.default)(_this, "resizeObserver", null);
(0, _defineProperty2.default)(_this, "applyResizerChange", function (entries) {
var wrapperWidth = _this.state.wrapperWidth;
var headerRowHeight = _this.state.headerRowHeight;
var _iterator = _createForOfIteratorHelper(entries),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var entry = _step.value;
if (entry.target === _this.wrapperRef.current) {
wrapperWidth = entry.contentRect.width;
} else if (entry.target === _this.stickyHeaderRef.current) {
headerRowHeight = Math.round(entry.contentRect.height);
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
if (headerRowHeight !== _this.state.headerRowHeight || wrapperWidth !== _this.state.wrapperWidth) {
_this.setState({
wrapperWidth: wrapperWidth,
headerRowHeight: headerRowHeight
});
}
});
(0, _defineProperty2.default)(_this, "componentWillUnmount", function () {
if (_this.overflowParent) {
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
_this.overflowParent.removeEventListener('scroll', _this.onScroll);
}
if (_this.nextFrame) {
cancelAnimationFrame(_this.nextFrame);
}
if (_this.resizeObserver) {
_this.resizeObserver.disconnect();
}
if (_this.stickyScrollbar) {
_this.stickyScrollbar.dispose();
}
});
(0, _defineProperty2.default)(_this, "getScrollTop", function () {
var stickyHeaders = _this.props.stickyHeaders;
var offsetTop = stickyHeaders && stickyHeaders.offsetTop || 0;
return (_this.overflowParent ? _this.overflowParent.top : 0) + offsetTop;
});
(0, _defineProperty2.default)(_this, "updateSticky", function () {
var tableElem = _this.tableRef.current;
var refElem = _this.stickyHeaderRef.current;
if (!tableElem || !refElem) {
return;
}
var scrollTop = _this.getScrollTop() + _sticky.tableStickyPadding;
var tableTop = getRefTop(tableElem);
var tableBottom = tableTop + tableElem.clientHeight;
var shouldSticky = shouldHeaderStick(scrollTop, tableTop, tableBottom, refElem.clientHeight);
var shouldPin = shouldHeaderPinBottom(scrollTop, tableBottom, refElem.clientHeight);
var stickyMode = 'none';
if (shouldPin) {
stickyMode = 'pin-bottom';
} else if (shouldSticky) {
stickyMode = 'stick';
}
if (_this.state.stickyMode !== stickyMode) {
_this.setState({
stickyMode: stickyMode
});
}
_this.nextFrame = undefined;
});
(0, _defineProperty2.default)(_this, "onScroll", function () {
if (!_this.nextFrame) {
_this.nextFrame = requestAnimationFrame(_this.updateSticky);
}
});
(0, _defineProperty2.default)(_this, "onWrapperScrolled", function () {
if (!_this.wrapperRef.current || !_this.stickyWrapperRef.current) {
return;
}
_this.stickyWrapperRef.current.scrollLeft = _this.wrapperRef.current.scrollLeft;
if (_this.stickyScrollbarRef.current) {
_this.stickyScrollbarRef.current.scrollLeft = _this.wrapperRef.current.scrollLeft;
}
});
(0, _defineProperty2.default)(_this, "grabFirstRowRef", function (children) {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return _react.default.Children.map(children || false, function (child, idx) {
if (idx === 0 && /*#__PURE__*/_react.default.isValidElement(child)) {
return /*#__PURE__*/_react.default.cloneElement(child, {
innerRef: _this.stickyHeaderRef
});
}
return child;
});
});
return _this;
}
(0, _inherits2.default)(TableContainer, _React$Component);
return (0, _createClass2.default)(TableContainer, [{
key: "componentDidMount",
value:
/**
*
* @example
*/
function componentDidMount() {
this.resizeObserver = new ResizeObserver(this.applyResizerChange);
if (this.wrapperRef.current) {
this.resizeObserver.observe(this.wrapperRef.current);
}
if (this.stickyHeaderRef.current) {
this.resizeObserver.observe(this.stickyHeaderRef.current);
}
if (this.props.stickyHeaders) {
var _this$props$stickyHea;
this.overflowParent = _sticky.OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea = this.props.stickyHeaders) === null || _this$props$stickyHea === void 0 ? void 0 : _this$props$stickyHea.defaultScrollRootId_DO_NOT_USE);
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.overflowParent.addEventListener('scroll', this.onScroll);
}
if (this.wrapperRef.current && isStickyScrollbarEnabled(this.props.rendererAppearance)) {
this.stickyScrollbar = new _TableStickyScrollbar.TableStickyScrollbar(this.wrapperRef.current);
}
}
/**
*
* @param prevProps
* @param prevState
* @example
*/
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
// toggling sticky headers visiblity
if (this.props.stickyHeaders && !this.overflowParent) {
var _this$props$stickyHea2;
this.overflowParent = _sticky.OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea2 = this.props.stickyHeaders) === null || _this$props$stickyHea2 === void 0 ? void 0 : _this$props$stickyHea2.defaultScrollRootId_DO_NOT_USE);
} else if (!this.props.stickyHeaders && this.overflowParent) {
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.overflowParent.removeEventListener('scroll', this.onScroll);
this.overflowParent = null;
}
// offsetTop might have changed, re-position sticky header
if (this.props.stickyHeaders !== prevProps.stickyHeaders) {
this.updateSticky();
}
// sync horizontal scroll in floating div when toggling modes
if (prevState.stickyMode !== this.state.stickyMode) {
this.onWrapperScrolled();
}
}
}, {
key: "pinTop",
get:
/**
*
*/
function get() {
if (!this.tableRef.current || !this.stickyHeaderRef.current) {
return;
}
return this.tableRef.current.offsetHeight - this.stickyHeaderRef.current.offsetHeight + _styles.tableMarginTop - _sticky.tableStickyPadding;
}
/**
*
*/
}, {
key: "shouldAddOverflowParentOffsetTop_DO_NOT_USE",
get: function get() {
// IF the StickyHeaderConfig specifies that the default scroll root offsetTop should be added
// AND the StickyHeaderConfig specifies a default scroll root id
// AND the OverflowParent is the corresponding element
// THEN we should add the OverflowParent offset top (RETURN TRUE)
return this.props.stickyHeaders && !!this.props.stickyHeaders.shouldAddDefaultScrollRootOffsetTop_DO_NOT_USE && !!this.props.stickyHeaders.defaultScrollRootId_DO_NOT_USE && this.overflowParent && this.overflowParent.id === this.props.stickyHeaders.defaultScrollRootId_DO_NOT_USE;
}
/**
*
*/
}, {
key: "stickyTop",
get: function get() {
switch (this.state.stickyMode) {
case 'pin-bottom':
return this.pinTop;
case 'stick':
var offsetTop = this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
if (typeof offsetTop === 'number' && this.shouldAddOverflowParentOffsetTop_DO_NOT_USE) {
var overflowParentOffsetTop = this.overflowParent ? this.overflowParent.top : 0;
return offsetTop + overflowParentOffsetTop;
} else {
return offsetTop;
}
default:
return undefined;
}
}
/**
*
* @example
*/
}, {
key: "render",
value: function render() {
var _this$tableRef$curren;
var _this$props = this.props,
isNumberColumnEnabled = _this$props.isNumberColumnEnabled,
layout = _this$props.layout,
renderWidth = _this$props.renderWidth,
columnWidths = _this$props.columnWidths,
stickyHeaders = _this$props.stickyHeaders,
tableNode = _this$props.tableNode,
rendererAppearance = _this$props.rendererAppearance,
isInsideOfBlockNode = _this$props.isInsideOfBlockNode,
isInsideOfTable = _this$props.isInsideOfTable,
isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension,
allowTableAlignment = _this$props.allowTableAlignment,
allowTableResizing = _this$props.allowTableResizing,
isPresentational = _this$props.isPresentational,
allowFixedColumnWidthOption = _this$props.allowFixedColumnWidthOption;
var stickyMode = this.state.stickyMode;
var lineLengthFixedWidth = _editorSharedStyles.akEditorDefaultLayoutWidth;
var left;
var updatedLayout;
// The tableWidth and left offset logic below must stay aligned with the `breakout-ssr.tsx` logic
// Please consider changes below carefully to not negatively impact SSR
// `renderWidth` cannot be depended on during SSR
var isRenderWidthValid = !!renderWidth && renderWidth > 0;
var fullPageRendererWidthCSS = (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
exposure: true
}) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : "100cqw - ".concat(_style.FullPagePadding, "px * 2");
var renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : "100cqw";
var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
return [isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth, "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")")];
} else if (rendererAppearance === 'max' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
return [isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorMaxWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorMaxWidthLayoutWidth, "min(".concat(_editorSharedStyles.akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")")];
} else if (rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
return [isRenderWidthValid ? renderWidth : tableContainerWidth, renderWidthCSS];
} else {
// custom width, or width mapped to breakpoint
var _tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
return [isRenderWidthValid ? Math.min(_tableContainerWidth, renderWidth) : _tableContainerWidth, "min(".concat(_tableContainerWidth, "px, ").concat(renderWidthCSS, ")")];
}
};
var _calcDefaultLayoutWid = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode),
_calcDefaultLayoutWid2 = (0, _slicedToArray2.default)(_calcDefaultLayoutWid, 2),
tableWidth = _calcDefaultLayoutWid2[0],
tableWidthCSS = _calcDefaultLayoutWid2[1];
// Logic for table alignment in renderer
var isTableAlignStart = tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment;
var fullWidthLineLength = isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
var fullWidthLineLengthCSS = "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
var maxWidthLineLength = isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorMaxWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorMaxWidthLayoutWidth;
var maxWidthLineLengthCSS = "min(".concat(_editorSharedStyles.akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
var commentLineLength = isRenderWidthValid ? renderWidth : lineLengthFixedWidth;
var isCommentAppearanceAndTableAlignmentEnabled = (0, _appearance.isCommentAppearance)(rendererAppearance) && allowTableAlignment;
var lineLength = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLength : (0, _appearance.isMaxWidthAppearance)(rendererAppearance) && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) ? maxWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
var lineLengthCSS = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLengthCSS : (0, _appearance.isMaxWidthAppearance)(rendererAppearance) && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
// Setting fixTableSSRResizing to false while FG logic is true in tableNew
var fixTableSSRResizing = false;
var tableWidthNew = fixTableSSRResizing ? (0, _nodeWidth.getTableContainerWidth)(tableNode) : tableWidth;
var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance) || ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) && (0, _appearance.isMaxWidthAppearance)(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
var leftCSS;
if (shouldCalculateLeftForAlignment) {
left = (tableWidth - lineLength) / 2;
leftCSS = "(".concat(tableWidthCSS, " - ").concat(lineLengthCSS, ") / 2");
}
if (fixTableSSRResizing) {
if (!shouldCalculateLeftForAlignment && (0, _appearance.isFullPageAppearance)(rendererAppearance)) {
// Note tableWidthCSS here is the renderer width
// When the screen is super wide we want table to break out.
// However if screen is smaller than 760px. We want table align to left.
leftCSS = "min(0px, ".concat(lineLengthCSS, " - ").concat(tableWidthCSS, ") / 2");
}
} else {
if (!shouldCalculateLeftForAlignment && (0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidthNew > lineLengthFixedWidth) {
left = lineLengthFixedWidth / 2 - tableWidth / 2;
}
}
var children = _react.default.Children.toArray(this.props.children);
// Historically, tables in the full-width renderer had their layout set to 'default' which is deceiving.
// This check caters for those tables and helps with SSR logic
var isFullWidth = !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && rendererAppearance === 'full-width' && layout !== 'full-width';
if (isFullWidth) {
updatedLayout = 'full-width';
// if table has width explicity set, ensure SSR is handled
} else if (tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) {
updatedLayout = 'custom';
} else {
updatedLayout = layout;
}
var finalTableContainerWidth = allowTableResizing ? tableWidthNew : 'inherit';
// We can only use CSS to determine the width when we have a known width in container.
// When appearance is full-page, full-width or comment we use CSS based width calculation.
// Otherwise it's fixed table width (customized width) or inherit.
if ((rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max') && fixTableSSRResizing) {
finalTableContainerWidth = allowTableResizing ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
}
if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {
// If table alignment is disabled and table width is akEditorDefaultLayoutWidth = 760,
// it is most likely a table created before "Support Table in Comments" FF was enabled
// and we would see a bug ED-24795. A table created before "Support Table in Comments",
// should inhirit the width of the renderer container.
// !NOTE: it a table resized to 760 is copied from 'full-page' editor and pasted in comment editor
// where (allowTableResizing && !allowTableAlignment), the table will loose 760px width.
finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== _editorSharedStyles.akEditorDefaultLayoutWidth ? fixTableSSRResizing ? "calc(".concat(tableWidthCSS, ")") : tableWidth : 'inherit';
}
if (rendererAppearance === 'comment' && allowTableResizing && allowTableAlignment) {
// If table alignment is enabled and layout is not 'align-start' or 'center', we are loading a table that was
// created before "Support Table in Comments" FF was enabled. So the table should have the same width as renderer container
// instead of 760 that was set on tableNode when the table had been published.
finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? fixTableSSRResizing ? "calc(".concat(tableWidthCSS, ")") : tableWidth : 'inherit';
}
var isContentModeTable = (0, _table2.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);
var style;
if (fixTableSSRResizing) {
style = _objectSpread(_objectSpread({}, isContentModeTable && {
'--renderer-table-max-width': renderWidthCSS
}), {}, {
width: finalTableContainerWidth,
left: leftCSS ? "calc(".concat(leftCSS, ")") : undefined,
marginLeft: shouldCalculateLeftForAlignment && leftCSS !== undefined ? "calc(-1 * (".concat(leftCSS, "))") : undefined
});
} else {
style = _objectSpread(_objectSpread({}, isContentModeTable && {
'--renderer-table-max-width': "".concat(renderWidth, "px")
}), {}, {
width: finalTableContainerWidth,
left: left,
marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
});
}
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
"data-layout": updatedLayout,
ref: this.props.handleRef
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: style
}, isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/_react.default.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: _styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
"data-testid": "sticky-scrollbar-sentinel-top"
}), stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/_react.default.createElement(_sticky.StickyTable, {
isNumberColumnEnabled: isNumberColumnEnabled,
tableWidth: tableWidth,
layout: layout,
renderWidth: renderWidth,
handleRef: this.props.handleRef,
shadowClassNames: this.props.shadowClassNames,
top: this.stickyTop,
mode: stickyMode,
innerRef: this.stickyWrapperRef,
wrapperWidth: this.state.wrapperWidth,
columnWidths: columnWidths,
rowHeight: this.state.headerRowHeight,
tableNode: tableNode,
rendererAppearance: rendererAppearance,
allowTableResizing: allowTableResizing,
allowFixedColumnWidthOption: allowFixedColumnWidthOption
}, [children && children[0]]), /*#__PURE__*/_react.default.createElement(TableWrapper, {
wrapperRef: this.wrapperRef,
onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
stickyHeaders: stickyHeaders,
tabIndex: this.props.tabIndex
}, /*#__PURE__*/_react.default.createElement(_table.Table, {
innerRef: this.tableRef,
columnWidths: columnWidths,
layout: layout,
isNumberColumnEnabled: isNumberColumnEnabled,
renderWidth: renderWidth,
tableNode: tableNode,
rendererAppearance: rendererAppearance,
isInsideOfBlockNode: isInsideOfBlockNode,
isInsideOfTable: isInsideOfTable,
isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
allowTableResizing: allowTableResizing,
isPresentational: isPresentational,
allowFixedColumnWidthOption: allowFixedColumnWidthOption
}, this.grabFirstRowRef(children))), isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/_react.default.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: _styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
ref: this.stickyScrollbarRef,
style: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
height: "var(--ds-space-250, 20px)",
// MAX_BROWSER_SCROLLBAR_HEIGHT
// Follow editor to hide by default so it does not show empty gap in SSR
// https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/editor/editor-plugin-table/src/nodeviews/TableComponent.tsx#957
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
display: fixTableSSRResizing ? 'none' : 'block',
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
width: '100%'
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
width: (_this$tableRef$curren = this.tableRef.current) === null || _this$tableRef$curren === void 0 ? void 0 : _this$tableRef$curren.clientWidth,
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
height: '100%'
}
})), isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/_react.default.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: _styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
"data-testid": "sticky-scrollbar-sentinel-bottom"
}), /*#__PURE__*/_react.default.createElement(_tableNew.RefSyncBlockFakeBorders, {
isNumberColumnEnabled: isNumberColumnEnabled
})));
}
}]);
}(_react.default.Component);
/**
*
*/
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components
var TableProcessor = exports.TableProcessor = /*#__PURE__*/function (_React$Component2) {
function TableProcessor() {
var _this2;
(0, _classCallCheck2.default)(this, TableProcessor);
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
_this2 = _callSuper(this, TableProcessor, [].concat(args));
(0, _defineProperty2.default)(_this2, "state", {
tableOrderStatus: undefined
});
// adds sortable + re-orders children
(0, _defineProperty2.default)(_this2, "addSortableColumn", function (childrenArray) {
var _this2$props = _this2.props,
tableNode = _this2$props.tableNode,
allowColumnSorting = _this2$props.allowColumnSorting,
smartCardStorage = _this2$props.smartCardStorage;
var tableOrderStatus = _this2.state.tableOrderStatus;
if (allowColumnSorting && isHeaderRowEnabled(childrenArray) && tableNode && !(0, _utils.hasMergedCell)(tableNode)) {
return addSortableColumn(orderChildren(childrenArray, tableNode, smartCardStorage, tableOrderStatus), tableOrderStatus, _this2.changeSortOrder);
}
return childrenArray;
});
(0, _defineProperty2.default)(_this2, "changeSortOrder", function (columnIndex, sortOrder) {
_this2.setState({
tableOrderStatus: {
columnIndex: columnIndex,
order: sortOrder
}
});
});
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(0, _defineProperty2.default)(_this2, "addNumberColumnIndexes", function (rows) {
var isNumberColumnEnabled = _this2.props.isNumberColumnEnabled;
var headerRowEnabled = isHeaderRowEnabled(rows);
return _react.default.Children.map(rows, function (row, index) {
return /*#__PURE__*/_react.default.cloneElement(_react.default.Children.only(row), {
isNumberColumnEnabled: isNumberColumnEnabled,
index: headerRowEnabled ? index === 0 ? '' : index : index + 1
});
});
});
return _this2;
}
(0, _inherits2.default)(TableProcessor, _React$Component2);
return (0, _createClass2.default)(TableProcessor, [{
key: "render",
value:
/**
*
* @example
*/
function render() {
var children = this.props.children;
if (!children) {
return null;
}
var childrenArray = _react.default.Children.toArray(children);
var orderedChildren = (0, _utils.compose)(this.addNumberColumnIndexes, this.addSortableColumn
// @ts-expect-error TS2345: Argument of type '(ReactChild | ReactFragment | ReactPortal)[]' is not assignable to parameter of type 'ReactElement<any, string | JSXElementConstructor<any>>[]'
)(childrenArray);
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
return /*#__PURE__*/_react.default.createElement(TableContainer, this.props, orderedChildren);
}
}]);
}(_react.default.Component); // eslint-disable-next-line @typescript-eslint/no-explicit-any
var TableWithShadowsAndContainerStyles = (0, _ui.overflowShadow)(_tableNew.TableProcessorWithContainerStyles, {
/**
* The :scope is in reference to table container and we are selecting only
* direct children that match the table node wrapper selector, not their
* descendants.
*/
overflowSelector: ":scope > .".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER),
useShadowObserver: true
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var TableWithShadows = (0, _ui.overflowShadow)(TableProcessor, {
/**
* The :scope is in reference to table container and we are selecting only
* direct children that match the table node wrapper selector, not their
* descendants.
*/
overflowSelector: ":scope > .".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER),
useShadowObserver: true
});
var TableWithWidth = function TableWithWidth(props) {
if ((0, _platformFeatureFlags.fg)('platform-ssr-table-resize')) {
var _props$columnWidths;
var colWidthsSum =
// eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
return total + val;
}, 0)) || 0;
if (colWidthsSum || props.allowTableResizing) {
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
return /*#__PURE__*/_react.default.createElement(TableWithShadowsAndContainerStyles, props);
}
return /*#__PURE__*/_react.default.createElement(_tableNew.TableProcessorWithContainerStyles
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, props);
} else {
return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref3) {
var _props$columnWidths2;
var width = _ref3.width;
var renderWidth = props.rendererAppearance === 'full-page' ? width - _style.FullPagePadding * 2 : width;
var colWidthsSum =
// eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
((_props$columnWidths2 = props.columnWidths) === null || _props$columnWidths2 === void 0 ? void 0 : _props$columnWidths2.reduce(function (total, val) {
return total + val;
}, 0)) || 0;
if (colWidthsSum || props.allowTableResizing) {
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
renderWidth: renderWidth
}, props));
}
// there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
return /*#__PURE__*/_react.default.createElement(TableProcessor, (0, _extends2.default)({
renderWidth: renderWidth
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, props));
});
}
};
var _default_1 = (0, _SmartCardStorage.withSmartCardStorage)(TableWithWidth);
var _default = exports.default = _default_1;