@atlaskit/renderer
Version:
Renderer component
287 lines (278 loc) • 10.3 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React from 'react';
/* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
import { jsx, css } from '@emotion/react';
import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
import { Table } from './table';
import { recursivelyInjectProps } from '../../utils/inject-props';
export var tableStickyPadding = 8;
var modeSpecficStyles = {
none: css({
display: 'none'
}),
stick: css({
position: 'fixed'
}),
'pin-bottom': css({
position: 'absolute'
})
};
// refactored based on fixedTableDivStaticStyles
// TODO: DSP-4123 - Quality ticket
var fixedTableDivStaticStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
zIndex: 'var(--ak-renderer-sticky-header-zindex)'
}, "& .".concat(TableSharedCssClassName.TABLE_CONTAINER, ", & .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
marginTop: 0,
marginBottom: 0,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
tr: {
background: "var(--ds-surface, #FFFFFF)"
}
}), "borderTop", "".concat(tableStickyPadding, "px solid ", "var(--ds-surface, #FFFFFF)")), "background", "var(--ds-surface-overlay, #FFFFFF)"), "boxShadow", "0 6px 4px -4px ".concat("var(--ds-shadow-overflow-perimeter, #1E1F211f)")), "div[data-expanded='false'] &", {
display: 'none'
}), "& .".concat(TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky.right-shadow::after, & .").concat(TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky.left-shadow::before"), {
top: '0px',
height: '100%'
}), "&.fixed-table-div-custom-table-resizing[mode='stick']", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
zIndex: 'var(--ak-renderer-sticky-header-zindex)'
}));
var FixedTableDiv = function FixedTableDiv(props) {
var top = props.top,
wrapperWidth = props.wrapperWidth,
mode = props.mode,
allowTableResizing = props.allowTableResizing;
var stickyHeaderZIndex;
if (allowTableResizing) {
stickyHeaderZIndex = 13;
} else {
stickyHeaderZIndex = akEditorStickyHeaderZIndex;
}
var attrs = {
mode: mode
};
return jsx("div", _extends({}, attrs, {
"data-testid": "sticky-table-fixed"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: allowTableResizing ? 'fixed-table-div-custom-table-resizing' : '',
css: [fixedTableDivStaticStyles, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]],
style: {
'--ak-renderer-sticky-header-zindex': stickyHeaderZIndex,
width: "".concat(wrapperWidth, "px"),
top: typeof top === 'number' ? "".concat(top, "px") : undefined
}
}), props.children);
};
export var StickyTable = function StickyTable(_ref) {
var top = _ref.top,
left = _ref.left,
mode = _ref.mode,
shadowClassNames = _ref.shadowClassNames,
innerRef = _ref.innerRef,
wrapperWidth = _ref.wrapperWidth,
tableWidth = _ref.tableWidth,
isNumberColumnEnabled = _ref.isNumberColumnEnabled,
layout = _ref.layout,
children = _ref.children,
columnWidths = _ref.columnWidths,
renderWidth = _ref.renderWidth,
rowHeight = _ref.rowHeight,
tableNode = _ref.tableNode,
rendererAppearance = _ref.rendererAppearance,
allowTableResizing = _ref.allowTableResizing,
_ref$fixTableSSRResiz = _ref.fixTableSSRResizing,
fixTableSSRResizing = _ref$fixTableSSRResiz === void 0 ? false : _ref$fixTableSSRResiz,
allowFixedColumnWidthOption = _ref.allowFixedColumnWidthOption;
var styles;
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
if (allowTableResizing) {
styles = css({
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
top: mode === 'pin-bottom' ? top : undefined,
position: 'absolute'
});
} else {
styles = css({
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
left: left && left < 0 ? left : undefined,
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
top: mode === 'pin-bottom' ? top : undefined,
position: 'relative'
});
}
/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
return (
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
jsx("div", {
css: styles
}, jsx(FixedTableDiv, {
top: mode === 'stick' ? top : undefined,
mode: rowHeight > 300 ? 'none' : mode,
wrapperWidth: wrapperWidth,
allowTableResizing: allowTableResizing
}, jsx("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " is-sticky ").concat(shadowClassNames || ''),
"data-layout": layout,
style: {
width: tableWidth,
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
marginBottom: fixTableSSRResizing ? 0 : ''
}
}, jsx("div", {
ref: innerRef
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: "".concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER),
style: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
overflow: 'hidden'
}
}, jsx(Table, {
columnWidths: columnWidths,
layout: layout,
isNumberColumnEnabled: isNumberColumnEnabled,
renderWidth: renderWidth,
tableNode: tableNode,
rendererAppearance: rendererAppearance,
fixTableSSRResizing: fixTableSSRResizing,
allowFixedColumnWidthOption: allowFixedColumnWidthOption
},
/**
* @see https://product-fabric.atlassian.net/browse/ED-10235
* We pass prop 'invisible' to our table's children nodes meaning
* they exist inside of the 'invisible' duplicated table component that
* enables sticky headers.
*/
recursivelyInjectProps(children, {
invisible: true
}))))))
);
};
/**
* Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
* @param table
* @param defaultScrollRootId
* @example
*/
function findHorizontalOverflowScrollParent(table, defaultScrollRootId) {
var parent = table;
if (!parent) {
return null;
}
// Ignored via go/ees005
// eslint-disable-next-line no-cond-assign
while (parent = parent.parentElement) {
// IE11 on Window 8 doesn't show styles from CSS when accessing through element.style property.
var style = window.getComputedStyle(parent);
if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
return parent;
}
if (!!defaultScrollRootId && parent.id === defaultScrollRootId) {
// If a defaultScrollRootId was specified and we reached the element with this id without finding a closer
// scroll parent, use this element as the scroll parent
return parent;
}
}
return null;
}
/**
*
*/
export var OverflowParent = /*#__PURE__*/function () {
function OverflowParent(ref) {
_classCallCheck(this, OverflowParent);
this.ref = ref;
this.ref = ref;
}
/**
*
* @param el
* @param defaultScrollRootId
* @example
*/
return _createClass(OverflowParent, [{
key: "isElement",
get:
/**
*
*/
function get() {
return this.ref instanceof HTMLElement;
}
/**
*
*/
}, {
key: "id",
get: function get() {
if (this.ref instanceof HTMLElement) {
return this.ref.id;
}
return '';
}
/**
*
*/
}, {
key: "top",
get: function get() {
if (this.ref instanceof HTMLElement) {
return this.ref.getBoundingClientRect().top;
}
return 0;
}
/**
*
* @param type
* @param cb
* @param {...any} args
* @example
*/
// Ignored via go/ees005
}, {
key: "addEventListener",
value: function addEventListener(type, cb) {
var _this$ref;
for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
args[_key - 2] = arguments[_key];
}
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
(_this$ref = this.ref).addEventListener.apply(_this$ref, [type, cb].concat(args));
}
/**
*
* @param type
* @param cb
* @param {...any} args
* @example
*/
// Ignored via go/ees005
}, {
key: "removeEventListener",
value: function removeEventListener(type, cb) {
var _this$ref2;
for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
args[_key2 - 2] = arguments[_key2];
}
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
(_this$ref2 = this.ref).removeEventListener.apply(_this$ref2, [type, cb].concat(args));
}
}], [{
key: "fromElement",
value: function fromElement(el, defaultScrollRootId) {
return new OverflowParent(findHorizontalOverflowScrollParent(el, defaultScrollRootId) || window);
}
}]);
}();