@atlaskit/editor-plugin-table 24.6.0 → 25.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +38 -0
- package/dist/cjs/entry-points/types.js +0 -6
- package/dist/cjs/nodeviews/TableCell.js +23 -1
- package/dist/cjs/nodeviews/rounded-table-edges.js +74 -11
- package/dist/cjs/nodeviews/table.js +0 -7
- package/dist/cjs/types/index.js +2 -6
- package/dist/cjs/ui/common-styles.js +4 -5
- package/dist/cjs/ui/consts.js +1 -3
- package/dist/cjs/ui/ui-styles.js +12 -18
- package/dist/es2019/entry-points/types.js +1 -1
- package/dist/es2019/nodeviews/TableCell.js +23 -1
- package/dist/es2019/nodeviews/rounded-table-edges.js +72 -10
- package/dist/es2019/nodeviews/table.js +0 -7
- package/dist/es2019/types/index.js +0 -5
- package/dist/es2019/ui/common-styles.js +3 -60
- package/dist/es2019/ui/consts.js +0 -2
- package/dist/es2019/ui/ui-styles.js +3 -57
- package/dist/esm/entry-points/types.js +1 -1
- package/dist/esm/nodeviews/TableCell.js +23 -1
- package/dist/esm/nodeviews/rounded-table-edges.js +73 -10
- package/dist/esm/nodeviews/table.js +0 -7
- package/dist/esm/types/index.js +0 -5
- package/dist/esm/ui/common-styles.js +6 -7
- package/dist/esm/ui/consts.js +0 -2
- package/dist/esm/ui/ui-styles.js +14 -20
- package/dist/types/entry-points/types.d.ts +1 -1
- package/dist/types/nodeviews/rounded-table-edges.d.ts +16 -0
- package/dist/types/types/index.d.ts +0 -9
- package/dist/types/ui/consts.d.ts +0 -2
- package/dist/types/ui/ui-styles.d.ts +0 -2
- package/package.json +17 -17
- package/dist/cjs/nodeviews/OverflowShadowsObserver.js +0 -132
- package/dist/cjs/nodeviews/update-overflow-shadows.js +0 -16
- package/dist/es2019/nodeviews/OverflowShadowsObserver.js +0 -112
- package/dist/es2019/nodeviews/update-overflow-shadows.js +0 -10
- package/dist/esm/nodeviews/OverflowShadowsObserver.js +0 -125
- package/dist/esm/nodeviews/update-overflow-shadows.js +0 -10
- package/dist/types/nodeviews/OverflowShadowsObserver.d.ts +0 -26
- package/dist/types/nodeviews/__mocks__/OverflowShadowsObserver.d.ts +0 -9
- package/dist/types/nodeviews/__mocks__/OverridableMock.d.ts +0 -9
- package/dist/types/nodeviews/update-overflow-shadows.d.ts +0 -1
|
@@ -1,4 +1,19 @@
|
|
|
1
1
|
import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
|
|
2
|
+
type RoundedTableCellEdgeState = {
|
|
3
|
+
reachesBottom: boolean;
|
|
4
|
+
reachesLeft: boolean;
|
|
5
|
+
reachesRight: boolean;
|
|
6
|
+
reachesTop: boolean;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Returns the rounded-edge membership for a cell offset.
|
|
10
|
+
*
|
|
11
|
+
* The first lookup for a table scans only the TableMap's four borders and caches edge cells.
|
|
12
|
+
* Interior cells have no cache entry and require no DOM attributes. Subsequent cell nodeview
|
|
13
|
+
* constructors perform an O(1) lookup. The cache is keyed by the immutable table node, so
|
|
14
|
+
* structural document changes naturally create a fresh entry.
|
|
15
|
+
*/
|
|
16
|
+
export declare const getRoundedTableCellEdgeState: (tableNode: PmNode, cellOffset: number) => RoundedTableCellEdgeState | undefined;
|
|
2
17
|
/**
|
|
3
18
|
* Keeps a table's rounded-corner edge attributes in sync as its shape changes.
|
|
4
19
|
*
|
|
@@ -24,3 +39,4 @@ export declare class RoundedTableEdges {
|
|
|
24
39
|
destroy(): void;
|
|
25
40
|
private scheduleRefresh;
|
|
26
41
|
}
|
|
42
|
+
export {};
|
|
@@ -434,24 +434,19 @@ export declare const TableCssClassName: {
|
|
|
434
434
|
TABLE_HEADER_CELL: 'pm-table-header-content-wrap';
|
|
435
435
|
TABLE_HEADER_CELL_WRAPPER: 'pm-table-header-content-wrap';
|
|
436
436
|
TABLE_LEFT_BORDER: 'pm-table-left-border';
|
|
437
|
-
TABLE_LEFT_SHADOW: 'pm-table-with-left-shadow';
|
|
438
437
|
TABLE_NODE_WRAPPER: 'pm-table-wrapper';
|
|
439
438
|
TABLE_NODE_WRAPPER_NO_OVERFLOW: 'pm-table-wrapper-no-overflow';
|
|
440
439
|
TABLE_RESIZER_CONTAINER: 'pm-table-resizer-container';
|
|
441
440
|
TABLE_RIGHT_BORDER: 'pm-table-right-border';
|
|
442
|
-
TABLE_RIGHT_SHADOW: 'pm-table-with-right-shadow';
|
|
443
441
|
TABLE_ROW_CONTROLS_WRAPPER: 'pm-table-row-controls-wrapper';
|
|
444
442
|
TABLE_SCROLL_INLINE_SHADOW: 'pm-table-scroll-inline-shadow';
|
|
445
443
|
TABLE_SELECTED: string;
|
|
446
|
-
TABLE_SHADOW_SENTINEL_LEFT: 'pm-table-shadow-sentinel-left';
|
|
447
|
-
TABLE_SHADOW_SENTINEL_RIGHT: 'pm-table-shadow-sentinel-right';
|
|
448
444
|
TABLE_STICKY: string;
|
|
449
445
|
TABLE_STICKY_SCROLLBAR_CONTAINER: 'pm-table-sticky-scrollbar-container';
|
|
450
446
|
TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM: 'pm-table-sticky-scrollbar-sentinel-bottom';
|
|
451
447
|
TABLE_STICKY_SCROLLBAR_SENTINEL_TOP: 'pm-table-sticky-scrollbar-sentinel-top';
|
|
452
448
|
TABLE_STICKY_SENTINEL_BOTTOM: 'pm-table-sticky-sentinel-bottom';
|
|
453
449
|
TABLE_STICKY_SENTINEL_TOP: 'pm-table-sticky-sentinel-top';
|
|
454
|
-
TABLE_STICKY_SHADOW: 'pm-table-sticky-shadow';
|
|
455
450
|
TABLE_STICKY_WRAPPER: 'pm-table-sticky-wrapper';
|
|
456
451
|
TABLE_VIEW_CONTENT_WRAP: 'tableView-content-wrap';
|
|
457
452
|
TOP_LEFT_CELL: string;
|
|
@@ -487,10 +482,6 @@ export interface ToolbarMenuState {
|
|
|
487
482
|
export interface ToolbarMenuContext {
|
|
488
483
|
formatMessage: IntlShape['formatMessage'];
|
|
489
484
|
}
|
|
490
|
-
export declare enum ShadowEvent {
|
|
491
|
-
SHOW_BEFORE_SHADOW = "showBeforeShadow",
|
|
492
|
-
SHOW_AFTER_SHADOW = "showAfterShadow"
|
|
493
|
-
}
|
|
494
485
|
export type ReportInvalidNodeAttrs = (invalidNodeAttrs: InvalidNodeAttr) => void;
|
|
495
486
|
export type InvalidNodeAttr = {
|
|
496
487
|
attribute: string;
|
|
@@ -45,8 +45,6 @@ export declare const contextualMenuDropdownWidthDnD = 250;
|
|
|
45
45
|
export declare const stickyRowZIndex: number;
|
|
46
46
|
export declare const stickyRowOffsetTop = 8;
|
|
47
47
|
export declare const stickyHeaderBorderBottomWidth = 1;
|
|
48
|
-
export declare const tableOverflowShadowWidth = 8;
|
|
49
|
-
export declare const tableOverflowShadowWidthWide = 32;
|
|
50
48
|
export declare const tablePopupMenuFitHeight = 188;
|
|
51
49
|
export declare const tableColumnControlsHeight = 24;
|
|
52
50
|
export declare const nativeStickyHeaderZIndex: number;
|
|
@@ -9,8 +9,6 @@ export declare const insertColumnButtonWrapper: () => SerializedStyles;
|
|
|
9
9
|
export declare const insertRowButtonWrapper: () => SerializedStyles;
|
|
10
10
|
export declare const columnControlsLineMarker: () => SerializedStyles;
|
|
11
11
|
export declare const DeleteButton: () => SerializedStyles;
|
|
12
|
-
export declare const OverflowShadow: () => SerializedStyles;
|
|
13
|
-
export declare const OverflowShadowLessPadding: (tableOverflowShadowWidth: number) => SerializedStyles;
|
|
14
12
|
export declare const floatingColumnControls: () => SerializedStyles;
|
|
15
13
|
export declare const rowControlsWrapperDotStyle: () => SerializedStyles;
|
|
16
14
|
export declare const columnControlsDecoration: () => SerializedStyles;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "25.0.0",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -24,20 +24,20 @@
|
|
|
24
24
|
"@atlaskit/button": "^25.0.0",
|
|
25
25
|
"@atlaskit/custom-steps": "^1.0.0",
|
|
26
26
|
"@atlaskit/editor-palette": "^3.4.0",
|
|
27
|
-
"@atlaskit/editor-plugin-accessibility-utils": "^
|
|
28
|
-
"@atlaskit/editor-plugin-analytics": "^
|
|
29
|
-
"@atlaskit/editor-plugin-batch-attribute-updates": "^
|
|
30
|
-
"@atlaskit/editor-plugin-content-insertion": "^
|
|
31
|
-
"@atlaskit/editor-plugin-editor-viewmode": "^
|
|
32
|
-
"@atlaskit/editor-plugin-extension": "
|
|
33
|
-
"@atlaskit/editor-plugin-guideline": "^
|
|
34
|
-
"@atlaskit/editor-plugin-interaction": "^
|
|
35
|
-
"@atlaskit/editor-plugin-limited-mode": "^
|
|
36
|
-
"@atlaskit/editor-plugin-selection": "^
|
|
37
|
-
"@atlaskit/editor-plugin-toolbar": "^
|
|
38
|
-
"@atlaskit/editor-plugin-ui-control-registry": "^
|
|
39
|
-
"@atlaskit/editor-plugin-user-intent": "^
|
|
40
|
-
"@atlaskit/editor-plugin-width": "^
|
|
27
|
+
"@atlaskit/editor-plugin-accessibility-utils": "^13.0.0",
|
|
28
|
+
"@atlaskit/editor-plugin-analytics": "^13.0.0",
|
|
29
|
+
"@atlaskit/editor-plugin-batch-attribute-updates": "^13.0.0",
|
|
30
|
+
"@atlaskit/editor-plugin-content-insertion": "^13.0.0",
|
|
31
|
+
"@atlaskit/editor-plugin-editor-viewmode": "^15.0.0",
|
|
32
|
+
"@atlaskit/editor-plugin-extension": "16.0.0",
|
|
33
|
+
"@atlaskit/editor-plugin-guideline": "^13.0.0",
|
|
34
|
+
"@atlaskit/editor-plugin-interaction": "^24.0.0",
|
|
35
|
+
"@atlaskit/editor-plugin-limited-mode": "^10.0.0",
|
|
36
|
+
"@atlaskit/editor-plugin-selection": "^13.0.0",
|
|
37
|
+
"@atlaskit/editor-plugin-toolbar": "^10.0.0",
|
|
38
|
+
"@atlaskit/editor-plugin-ui-control-registry": "^7.0.0",
|
|
39
|
+
"@atlaskit/editor-plugin-user-intent": "^11.0.0",
|
|
40
|
+
"@atlaskit/editor-plugin-width": "^14.0.0",
|
|
41
41
|
"@atlaskit/editor-prosemirror": "^8.0.0",
|
|
42
42
|
"@atlaskit/editor-shared-styles": "^4.0.0",
|
|
43
43
|
"@atlaskit/editor-tables": "^3.0.0",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
|
|
54
54
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
|
|
55
55
|
"@atlaskit/primitives": "^22.2.0",
|
|
56
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
56
|
+
"@atlaskit/tmp-editor-statsig": "^138.0.0",
|
|
57
57
|
"@atlaskit/toggle": "^17.1.0",
|
|
58
58
|
"@atlaskit/tokens": "^16.3.0",
|
|
59
59
|
"@atlaskit/tooltip": "^24.0.0",
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"uuid": "^3.1.0"
|
|
69
69
|
},
|
|
70
70
|
"peerDependencies": {
|
|
71
|
-
"@atlaskit/editor-common": "^
|
|
71
|
+
"@atlaskit/editor-common": "^117.0.0",
|
|
72
72
|
"react": "^18.2.0 || ^19.2.0",
|
|
73
73
|
"react-dom": "^18.2.0 || ^19.2.0",
|
|
74
74
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.OverflowShadowsObserver = void 0;
|
|
8
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
9
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
10
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
var _rafSchd = _interopRequireDefault(require("raf-schd"));
|
|
12
|
-
var _types = require("../types");
|
|
13
|
-
var _updateOverflowShadows = require("./update-overflow-shadows");
|
|
14
|
-
var OverflowShadowsObserver = exports.OverflowShadowsObserver = /*#__PURE__*/function () {
|
|
15
|
-
// updateShadowState is a method to update shadow key
|
|
16
|
-
function OverflowShadowsObserver(updateShadowState, _table, wrapper) {
|
|
17
|
-
var _this = this;
|
|
18
|
-
(0, _classCallCheck2.default)(this, OverflowShadowsObserver);
|
|
19
|
-
(0, _defineProperty2.default)(this, "leftShadowSentinel", null);
|
|
20
|
-
(0, _defineProperty2.default)(this, "rightShadowSentinel", null);
|
|
21
|
-
(0, _defineProperty2.default)(this, "shadowsObserved", false);
|
|
22
|
-
(0, _defineProperty2.default)(this, "isSticky", false);
|
|
23
|
-
(0, _defineProperty2.default)(this, "stickyRowHeight", 0);
|
|
24
|
-
(0, _defineProperty2.default)(this, "init", function () {
|
|
25
|
-
var table = _this.table;
|
|
26
|
-
if (!_this.wrapper || !table) {
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
if (!_this.tableIntersectionObserver) {
|
|
30
|
-
var intersectonOnbserverCallback = function intersectonOnbserverCallback(entry) {
|
|
31
|
-
if (entry.target !== _this.leftShadowSentinel && entry.target !== _this.rightShadowSentinel) {
|
|
32
|
-
return;
|
|
33
|
-
}
|
|
34
|
-
_this.updateStickyShadowsHeightIfChanged();
|
|
35
|
-
_this.updateShadowState(_this.leftShadowSentinel === entry.target ? _types.ShadowEvent.SHOW_BEFORE_SHADOW : _types.ShadowEvent.SHOW_AFTER_SHADOW, entry.intersectionRatio !== 1);
|
|
36
|
-
};
|
|
37
|
-
_this.tableIntersectionObserver = new IntersectionObserver(function (entries, _) {
|
|
38
|
-
entries.forEach(function (entry) {
|
|
39
|
-
return intersectonOnbserverCallback(entry);
|
|
40
|
-
});
|
|
41
|
-
}, {
|
|
42
|
-
threshold: [0, 1],
|
|
43
|
-
root: _this.wrapper,
|
|
44
|
-
rootMargin: '0px'
|
|
45
|
-
});
|
|
46
|
-
return;
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
(0, _defineProperty2.default)(this, "observeShadowSentinels", function (isSticky) {
|
|
50
|
-
var _this$table, _this$table2;
|
|
51
|
-
if (_this.isSticky === isSticky) {
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
_this.isSticky = !!isSticky;
|
|
55
|
-
|
|
56
|
-
// reset height
|
|
57
|
-
_this.stickyRowHeight = 0;
|
|
58
|
-
// update sticky shadows
|
|
59
|
-
_this.updateStickyShadowsHeightIfChanged();
|
|
60
|
-
_this.leftShadowSentinel = (_this$table = _this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(".".concat(_types.TableCssClassName.TABLE_SHADOW_SENTINEL_LEFT));
|
|
61
|
-
_this.rightShadowSentinel = (_this$table2 = _this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.querySelector(".".concat(_types.TableCssClassName.TABLE_SHADOW_SENTINEL_RIGHT));
|
|
62
|
-
if (_this.tableIntersectionObserver && _this.leftShadowSentinel && _this.rightShadowSentinel && !_this.shadowsObserved) {
|
|
63
|
-
_this.tableIntersectionObserver.disconnect();
|
|
64
|
-
_this.tableIntersectionObserver.observe(_this.leftShadowSentinel);
|
|
65
|
-
_this.tableIntersectionObserver.observe(_this.rightShadowSentinel);
|
|
66
|
-
_this.shadowsObserved = true;
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
/**
|
|
70
|
-
* Takes a heightStyle if it can be computed in a less expensive manner,
|
|
71
|
-
* e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
|
|
72
|
-
* reading it from sticky cell
|
|
73
|
-
*/
|
|
74
|
-
(0, _defineProperty2.default)(this, "updateStickyShadows", (0, _rafSchd.default)(function (stickyRowHeight) {
|
|
75
|
-
var _this$wrapper;
|
|
76
|
-
if (!_this.isSticky) {
|
|
77
|
-
return;
|
|
78
|
-
}
|
|
79
|
-
var stickyCell = _this.getStickyCell();
|
|
80
|
-
if (!stickyCell || !((_this$wrapper = _this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement)) {
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
// Reflow Warning! - stickyCell.clientHeight
|
|
85
|
-
var newStickyRowHeight = stickyRowHeight || stickyCell.clientHeight + 1;
|
|
86
|
-
if (newStickyRowHeight !== _this.stickyRowHeight) {
|
|
87
|
-
var _this$wrapper2, _this$wrapper3;
|
|
88
|
-
_this.stickyRowHeight = newStickyRowHeight;
|
|
89
|
-
var heightStyleOrCompute = "".concat(newStickyRowHeight, "px");
|
|
90
|
-
// Use getElementsByClassName here for a live node list to capture
|
|
91
|
-
// sticky shadows
|
|
92
|
-
var liveRightShadows = (_this$wrapper2 = _this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.parentElement) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.getElementsByClassName("".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW));
|
|
93
|
-
var liveLeftShadows = (_this$wrapper3 = _this.wrapper) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.parentElement) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.getElementsByClassName("".concat(_types.TableCssClassName.TABLE_LEFT_SHADOW));
|
|
94
|
-
(0, _updateOverflowShadows.updateShadowListForStickyStyles)(heightStyleOrCompute, liveLeftShadows);
|
|
95
|
-
(0, _updateOverflowShadows.updateShadowListForStickyStyles)(heightStyleOrCompute, liveRightShadows);
|
|
96
|
-
}
|
|
97
|
-
}));
|
|
98
|
-
this.updateShadowState = updateShadowState;
|
|
99
|
-
this.table = _table;
|
|
100
|
-
this.wrapper = wrapper;
|
|
101
|
-
this.init();
|
|
102
|
-
}
|
|
103
|
-
return (0, _createClass2.default)(OverflowShadowsObserver, [{
|
|
104
|
-
key: "updateStickyShadowsHeightIfChanged",
|
|
105
|
-
value: function updateStickyShadowsHeightIfChanged() {
|
|
106
|
-
if (!this.isSticky) {
|
|
107
|
-
return;
|
|
108
|
-
}
|
|
109
|
-
var stickyCell = this.getStickyCell();
|
|
110
|
-
if (!stickyCell) {
|
|
111
|
-
return;
|
|
112
|
-
}
|
|
113
|
-
this.updateStickyShadows();
|
|
114
|
-
}
|
|
115
|
-
}, {
|
|
116
|
-
key: "getStickyCell",
|
|
117
|
-
value: function getStickyCell() {
|
|
118
|
-
var _this$wrapper4;
|
|
119
|
-
var stickyRow = (_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 ? void 0 : _this$wrapper4.querySelector('tr.sticky');
|
|
120
|
-
var stickyCell = stickyRow && stickyRow.firstElementChild;
|
|
121
|
-
return stickyCell;
|
|
122
|
-
}
|
|
123
|
-
}, {
|
|
124
|
-
key: "dispose",
|
|
125
|
-
value: function dispose() {
|
|
126
|
-
if (this.tableIntersectionObserver) {
|
|
127
|
-
this.tableIntersectionObserver.disconnect();
|
|
128
|
-
this.tableIntersectionObserver = undefined;
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
}]);
|
|
132
|
-
}();
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.updateShadowListForStickyStyles = void 0;
|
|
7
|
-
var _types = require("../types");
|
|
8
|
-
var updateShadowListForStickyStyles = exports.updateShadowListForStickyStyles = function updateShadowListForStickyStyles(heightStyle, shadows) {
|
|
9
|
-
Array.from(shadows).forEach(function (shadow) {
|
|
10
|
-
if (shadow.classList.contains(_types.TableCssClassName.TABLE_STICKY_SHADOW)) {
|
|
11
|
-
if (shadow instanceof HTMLElement && shadow.style.height !== heightStyle) {
|
|
12
|
-
shadow.style.height = heightStyle;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
});
|
|
16
|
-
};
|
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
import rafSchedule from 'raf-schd';
|
|
3
|
-
import { TableCssClassName as ClassName, ShadowEvent } from '../types';
|
|
4
|
-
import { updateShadowListForStickyStyles } from './update-overflow-shadows';
|
|
5
|
-
export class OverflowShadowsObserver {
|
|
6
|
-
// updateShadowState is a method to update shadow key
|
|
7
|
-
constructor(updateShadowState, _table, wrapper) {
|
|
8
|
-
_defineProperty(this, "leftShadowSentinel", null);
|
|
9
|
-
_defineProperty(this, "rightShadowSentinel", null);
|
|
10
|
-
_defineProperty(this, "shadowsObserved", false);
|
|
11
|
-
_defineProperty(this, "isSticky", false);
|
|
12
|
-
_defineProperty(this, "stickyRowHeight", 0);
|
|
13
|
-
_defineProperty(this, "init", () => {
|
|
14
|
-
const table = this.table;
|
|
15
|
-
if (!this.wrapper || !table) {
|
|
16
|
-
return;
|
|
17
|
-
}
|
|
18
|
-
if (!this.tableIntersectionObserver) {
|
|
19
|
-
const intersectonOnbserverCallback = entry => {
|
|
20
|
-
if (entry.target !== this.leftShadowSentinel && entry.target !== this.rightShadowSentinel) {
|
|
21
|
-
return;
|
|
22
|
-
}
|
|
23
|
-
this.updateStickyShadowsHeightIfChanged();
|
|
24
|
-
this.updateShadowState(this.leftShadowSentinel === entry.target ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW, entry.intersectionRatio !== 1);
|
|
25
|
-
};
|
|
26
|
-
this.tableIntersectionObserver = new IntersectionObserver((entries, _) => {
|
|
27
|
-
entries.forEach(entry => intersectonOnbserverCallback(entry));
|
|
28
|
-
}, {
|
|
29
|
-
threshold: [0, 1],
|
|
30
|
-
root: this.wrapper,
|
|
31
|
-
rootMargin: '0px'
|
|
32
|
-
});
|
|
33
|
-
return;
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
_defineProperty(this, "observeShadowSentinels", isSticky => {
|
|
37
|
-
var _this$table, _this$table2;
|
|
38
|
-
if (this.isSticky === isSticky) {
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
this.isSticky = !!isSticky;
|
|
42
|
-
|
|
43
|
-
// reset height
|
|
44
|
-
this.stickyRowHeight = 0;
|
|
45
|
-
// update sticky shadows
|
|
46
|
-
this.updateStickyShadowsHeightIfChanged();
|
|
47
|
-
this.leftShadowSentinel = (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(`.${ClassName.TABLE_SHADOW_SENTINEL_LEFT}`);
|
|
48
|
-
this.rightShadowSentinel = (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.querySelector(`.${ClassName.TABLE_SHADOW_SENTINEL_RIGHT}`);
|
|
49
|
-
if (this.tableIntersectionObserver && this.leftShadowSentinel && this.rightShadowSentinel && !this.shadowsObserved) {
|
|
50
|
-
this.tableIntersectionObserver.disconnect();
|
|
51
|
-
this.tableIntersectionObserver.observe(this.leftShadowSentinel);
|
|
52
|
-
this.tableIntersectionObserver.observe(this.rightShadowSentinel);
|
|
53
|
-
this.shadowsObserved = true;
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
/**
|
|
57
|
-
* Takes a heightStyle if it can be computed in a less expensive manner,
|
|
58
|
-
* e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
|
|
59
|
-
* reading it from sticky cell
|
|
60
|
-
*/
|
|
61
|
-
_defineProperty(this, "updateStickyShadows", rafSchedule(stickyRowHeight => {
|
|
62
|
-
var _this$wrapper;
|
|
63
|
-
if (!this.isSticky) {
|
|
64
|
-
return;
|
|
65
|
-
}
|
|
66
|
-
const stickyCell = this.getStickyCell();
|
|
67
|
-
if (!stickyCell || !((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement)) {
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
// Reflow Warning! - stickyCell.clientHeight
|
|
72
|
-
const newStickyRowHeight = stickyRowHeight || stickyCell.clientHeight + 1;
|
|
73
|
-
if (newStickyRowHeight !== this.stickyRowHeight) {
|
|
74
|
-
var _this$wrapper2, _this$wrapper2$parent, _this$wrapper3, _this$wrapper3$parent;
|
|
75
|
-
this.stickyRowHeight = newStickyRowHeight;
|
|
76
|
-
const heightStyleOrCompute = `${newStickyRowHeight}px`;
|
|
77
|
-
// Use getElementsByClassName here for a live node list to capture
|
|
78
|
-
// sticky shadows
|
|
79
|
-
const liveRightShadows = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : (_this$wrapper2$parent = _this$wrapper2.parentElement) === null || _this$wrapper2$parent === void 0 ? void 0 : _this$wrapper2$parent.getElementsByClassName(`${ClassName.TABLE_RIGHT_SHADOW}`);
|
|
80
|
-
const liveLeftShadows = (_this$wrapper3 = this.wrapper) === null || _this$wrapper3 === void 0 ? void 0 : (_this$wrapper3$parent = _this$wrapper3.parentElement) === null || _this$wrapper3$parent === void 0 ? void 0 : _this$wrapper3$parent.getElementsByClassName(`${ClassName.TABLE_LEFT_SHADOW}`);
|
|
81
|
-
updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
|
|
82
|
-
updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
|
|
83
|
-
}
|
|
84
|
-
}));
|
|
85
|
-
this.updateShadowState = updateShadowState;
|
|
86
|
-
this.table = _table;
|
|
87
|
-
this.wrapper = wrapper;
|
|
88
|
-
this.init();
|
|
89
|
-
}
|
|
90
|
-
updateStickyShadowsHeightIfChanged() {
|
|
91
|
-
if (!this.isSticky) {
|
|
92
|
-
return;
|
|
93
|
-
}
|
|
94
|
-
const stickyCell = this.getStickyCell();
|
|
95
|
-
if (!stickyCell) {
|
|
96
|
-
return;
|
|
97
|
-
}
|
|
98
|
-
this.updateStickyShadows();
|
|
99
|
-
}
|
|
100
|
-
getStickyCell() {
|
|
101
|
-
var _this$wrapper4;
|
|
102
|
-
const stickyRow = (_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 ? void 0 : _this$wrapper4.querySelector('tr.sticky');
|
|
103
|
-
const stickyCell = stickyRow && stickyRow.firstElementChild;
|
|
104
|
-
return stickyCell;
|
|
105
|
-
}
|
|
106
|
-
dispose() {
|
|
107
|
-
if (this.tableIntersectionObserver) {
|
|
108
|
-
this.tableIntersectionObserver.disconnect();
|
|
109
|
-
this.tableIntersectionObserver = undefined;
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { TableCssClassName as ClassName } from '../types';
|
|
2
|
-
export const updateShadowListForStickyStyles = (heightStyle, shadows) => {
|
|
3
|
-
Array.from(shadows).forEach(shadow => {
|
|
4
|
-
if (shadow.classList.contains(ClassName.TABLE_STICKY_SHADOW)) {
|
|
5
|
-
if (shadow instanceof HTMLElement && shadow.style.height !== heightStyle) {
|
|
6
|
-
shadow.style.height = heightStyle;
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
});
|
|
10
|
-
};
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
|
-
import rafSchedule from 'raf-schd';
|
|
5
|
-
import { TableCssClassName as ClassName, ShadowEvent } from '../types';
|
|
6
|
-
import { updateShadowListForStickyStyles } from './update-overflow-shadows';
|
|
7
|
-
export var OverflowShadowsObserver = /*#__PURE__*/function () {
|
|
8
|
-
// updateShadowState is a method to update shadow key
|
|
9
|
-
function OverflowShadowsObserver(updateShadowState, _table, wrapper) {
|
|
10
|
-
var _this = this;
|
|
11
|
-
_classCallCheck(this, OverflowShadowsObserver);
|
|
12
|
-
_defineProperty(this, "leftShadowSentinel", null);
|
|
13
|
-
_defineProperty(this, "rightShadowSentinel", null);
|
|
14
|
-
_defineProperty(this, "shadowsObserved", false);
|
|
15
|
-
_defineProperty(this, "isSticky", false);
|
|
16
|
-
_defineProperty(this, "stickyRowHeight", 0);
|
|
17
|
-
_defineProperty(this, "init", function () {
|
|
18
|
-
var table = _this.table;
|
|
19
|
-
if (!_this.wrapper || !table) {
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
if (!_this.tableIntersectionObserver) {
|
|
23
|
-
var intersectonOnbserverCallback = function intersectonOnbserverCallback(entry) {
|
|
24
|
-
if (entry.target !== _this.leftShadowSentinel && entry.target !== _this.rightShadowSentinel) {
|
|
25
|
-
return;
|
|
26
|
-
}
|
|
27
|
-
_this.updateStickyShadowsHeightIfChanged();
|
|
28
|
-
_this.updateShadowState(_this.leftShadowSentinel === entry.target ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW, entry.intersectionRatio !== 1);
|
|
29
|
-
};
|
|
30
|
-
_this.tableIntersectionObserver = new IntersectionObserver(function (entries, _) {
|
|
31
|
-
entries.forEach(function (entry) {
|
|
32
|
-
return intersectonOnbserverCallback(entry);
|
|
33
|
-
});
|
|
34
|
-
}, {
|
|
35
|
-
threshold: [0, 1],
|
|
36
|
-
root: _this.wrapper,
|
|
37
|
-
rootMargin: '0px'
|
|
38
|
-
});
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
|
-
_defineProperty(this, "observeShadowSentinels", function (isSticky) {
|
|
43
|
-
var _this$table, _this$table2;
|
|
44
|
-
if (_this.isSticky === isSticky) {
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
_this.isSticky = !!isSticky;
|
|
48
|
-
|
|
49
|
-
// reset height
|
|
50
|
-
_this.stickyRowHeight = 0;
|
|
51
|
-
// update sticky shadows
|
|
52
|
-
_this.updateStickyShadowsHeightIfChanged();
|
|
53
|
-
_this.leftShadowSentinel = (_this$table = _this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(".".concat(ClassName.TABLE_SHADOW_SENTINEL_LEFT));
|
|
54
|
-
_this.rightShadowSentinel = (_this$table2 = _this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.querySelector(".".concat(ClassName.TABLE_SHADOW_SENTINEL_RIGHT));
|
|
55
|
-
if (_this.tableIntersectionObserver && _this.leftShadowSentinel && _this.rightShadowSentinel && !_this.shadowsObserved) {
|
|
56
|
-
_this.tableIntersectionObserver.disconnect();
|
|
57
|
-
_this.tableIntersectionObserver.observe(_this.leftShadowSentinel);
|
|
58
|
-
_this.tableIntersectionObserver.observe(_this.rightShadowSentinel);
|
|
59
|
-
_this.shadowsObserved = true;
|
|
60
|
-
}
|
|
61
|
-
});
|
|
62
|
-
/**
|
|
63
|
-
* Takes a heightStyle if it can be computed in a less expensive manner,
|
|
64
|
-
* e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
|
|
65
|
-
* reading it from sticky cell
|
|
66
|
-
*/
|
|
67
|
-
_defineProperty(this, "updateStickyShadows", rafSchedule(function (stickyRowHeight) {
|
|
68
|
-
var _this$wrapper;
|
|
69
|
-
if (!_this.isSticky) {
|
|
70
|
-
return;
|
|
71
|
-
}
|
|
72
|
-
var stickyCell = _this.getStickyCell();
|
|
73
|
-
if (!stickyCell || !((_this$wrapper = _this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement)) {
|
|
74
|
-
return;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
// Reflow Warning! - stickyCell.clientHeight
|
|
78
|
-
var newStickyRowHeight = stickyRowHeight || stickyCell.clientHeight + 1;
|
|
79
|
-
if (newStickyRowHeight !== _this.stickyRowHeight) {
|
|
80
|
-
var _this$wrapper2, _this$wrapper3;
|
|
81
|
-
_this.stickyRowHeight = newStickyRowHeight;
|
|
82
|
-
var heightStyleOrCompute = "".concat(newStickyRowHeight, "px");
|
|
83
|
-
// Use getElementsByClassName here for a live node list to capture
|
|
84
|
-
// sticky shadows
|
|
85
|
-
var liveRightShadows = (_this$wrapper2 = _this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.parentElement) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.getElementsByClassName("".concat(ClassName.TABLE_RIGHT_SHADOW));
|
|
86
|
-
var liveLeftShadows = (_this$wrapper3 = _this.wrapper) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.parentElement) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.getElementsByClassName("".concat(ClassName.TABLE_LEFT_SHADOW));
|
|
87
|
-
updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
|
|
88
|
-
updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
|
|
89
|
-
}
|
|
90
|
-
}));
|
|
91
|
-
this.updateShadowState = updateShadowState;
|
|
92
|
-
this.table = _table;
|
|
93
|
-
this.wrapper = wrapper;
|
|
94
|
-
this.init();
|
|
95
|
-
}
|
|
96
|
-
return _createClass(OverflowShadowsObserver, [{
|
|
97
|
-
key: "updateStickyShadowsHeightIfChanged",
|
|
98
|
-
value: function updateStickyShadowsHeightIfChanged() {
|
|
99
|
-
if (!this.isSticky) {
|
|
100
|
-
return;
|
|
101
|
-
}
|
|
102
|
-
var stickyCell = this.getStickyCell();
|
|
103
|
-
if (!stickyCell) {
|
|
104
|
-
return;
|
|
105
|
-
}
|
|
106
|
-
this.updateStickyShadows();
|
|
107
|
-
}
|
|
108
|
-
}, {
|
|
109
|
-
key: "getStickyCell",
|
|
110
|
-
value: function getStickyCell() {
|
|
111
|
-
var _this$wrapper4;
|
|
112
|
-
var stickyRow = (_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 ? void 0 : _this$wrapper4.querySelector('tr.sticky');
|
|
113
|
-
var stickyCell = stickyRow && stickyRow.firstElementChild;
|
|
114
|
-
return stickyCell;
|
|
115
|
-
}
|
|
116
|
-
}, {
|
|
117
|
-
key: "dispose",
|
|
118
|
-
value: function dispose() {
|
|
119
|
-
if (this.tableIntersectionObserver) {
|
|
120
|
-
this.tableIntersectionObserver.disconnect();
|
|
121
|
-
this.tableIntersectionObserver = undefined;
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
}]);
|
|
125
|
-
}();
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { TableCssClassName as ClassName } from '../types';
|
|
2
|
-
export var updateShadowListForStickyStyles = function updateShadowListForStickyStyles(heightStyle, shadows) {
|
|
3
|
-
Array.from(shadows).forEach(function (shadow) {
|
|
4
|
-
if (shadow.classList.contains(ClassName.TABLE_STICKY_SHADOW)) {
|
|
5
|
-
if (shadow instanceof HTMLElement && shadow.style.height !== heightStyle) {
|
|
6
|
-
shadow.style.height = heightStyle;
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
});
|
|
10
|
-
};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { ShadowEvent } from '../types';
|
|
2
|
-
export declare class OverflowShadowsObserver {
|
|
3
|
-
private tableIntersectionObserver?;
|
|
4
|
-
private updateShadowState;
|
|
5
|
-
private table;
|
|
6
|
-
private wrapper;
|
|
7
|
-
private leftShadowSentinel;
|
|
8
|
-
private rightShadowSentinel;
|
|
9
|
-
private shadowsObserved;
|
|
10
|
-
private isSticky;
|
|
11
|
-
private stickyRowHeight;
|
|
12
|
-
constructor(updateShadowState: (shadowKey: ShadowEvent, value: boolean) => void, table: HTMLElement, wrapper: HTMLDivElement);
|
|
13
|
-
private init;
|
|
14
|
-
private updateStickyShadowsHeightIfChanged;
|
|
15
|
-
private getStickyCell;
|
|
16
|
-
observeShadowSentinels: (isSticky?: boolean) => void;
|
|
17
|
-
/**
|
|
18
|
-
* Takes a heightStyle if it can be computed in a less expensive manner,
|
|
19
|
-
* e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
|
|
20
|
-
* reading it from sticky cell
|
|
21
|
-
*/
|
|
22
|
-
updateStickyShadows: ((stickyRowHeight?: number) => void) & {
|
|
23
|
-
cancel(): void;
|
|
24
|
-
};
|
|
25
|
-
dispose(): void;
|
|
26
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { OverridableMock } from './OverridableMock';
|
|
2
|
-
export declare class OverflowShadowsObserver extends OverridableMock {
|
|
3
|
-
leftShadowSentinel: HTMLElement | null;
|
|
4
|
-
rightShadowSentinel: HTMLElement | null;
|
|
5
|
-
constructor(...inputs: any[]);
|
|
6
|
-
observeShadowSentinels: any;
|
|
7
|
-
updateStickyShadows: any;
|
|
8
|
-
dispose: any;
|
|
9
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const updateShadowListForStickyStyles: (heightStyle: string, shadows: HTMLCollection) => void;
|