@atlaskit/renderer
Version:
Renderer component
296 lines (284 loc) • 11.1 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.tableStickyPadding = exports.StickyTable = exports.OverflowParent = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _styles = require("@atlaskit/editor-common/styles");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _table = require("./table");
var _injectProps = require("../../utils/inject-props");
/**
* @jsxRuntime classic
* @jsx jsx
*/
/* 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 */
var tableStickyPadding = exports.tableStickyPadding = 8;
var modeSpecficStyles = {
none: (0, _react2.css)({
display: 'none'
}),
stick: (0, _react2.css)({
position: 'fixed'
}),
'pin-bottom': (0, _react2.css)({
position: 'absolute'
})
};
// refactored based on fixedTableDivStaticStyles
// TODO: DSP-4123 - Quality ticket
var fixedTableDivStaticStyles = (0, _react2.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
zIndex: 'var(--ak-renderer-sticky-header-zindex)'
}, "& .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ", & .").concat(_styles.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(_styles.TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky.right-shadow::after, & .").concat(_styles.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 = _editorSharedStyles.akEditorStickyHeaderZIndex;
}
var attrs = {
mode: mode
};
return (0, _react2.jsx)("div", (0, _extends2.default)({}, 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);
};
var StickyTable = exports.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 = (0, _react2.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 = (0, _react2.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
(0, _react2.jsx)("div", {
css: styles
}, (0, _react2.jsx)(FixedTableDiv, {
top: mode === 'stick' ? top : undefined,
mode: rowHeight > 300 ? 'none' : mode,
wrapperWidth: wrapperWidth,
allowTableResizing: allowTableResizing
}, (0, _react2.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: "".concat(_styles.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 : ''
}
}, (0, _react2.jsx)("div", {
ref: innerRef
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: "".concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER),
style: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
overflow: 'hidden'
}
}, (0, _react2.jsx)(_table.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.
*/
(0, _injectProps.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;
}
/**
*
*/
var OverflowParent = exports.OverflowParent = /*#__PURE__*/function () {
function OverflowParent(ref) {
(0, _classCallCheck2.default)(this, OverflowParent);
this.ref = ref;
this.ref = ref;
}
/**
*
* @param el
* @param defaultScrollRootId
* @example
*/
return (0, _createClass2.default)(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);
}
}]);
}();