@atlaskit/editor-plugin-table 1.5.3 → 1.5.5
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 +12 -0
- package/dist/cjs/plugins/table/nodeviews/OverflowShadowsObserver.js +1 -16
- package/dist/cjs/plugins/table/nodeviews/TableComponent.js +1 -9
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/plugins/table/nodeviews/OverflowShadowsObserver.js +1 -16
- package/dist/es2019/plugins/table/nodeviews/TableComponent.js +3 -15
- package/dist/es2019/version.json +1 -1
- package/dist/esm/plugins/table/nodeviews/OverflowShadowsObserver.js +1 -16
- package/dist/esm/plugins/table/nodeviews/TableComponent.js +1 -9
- package/dist/esm/version.json +1 -1
- package/dist/types/plugins/table/nodeviews/OverflowShadowsObserver.d.ts +0 -1
- package/dist/types-ts4.5/plugins/table/nodeviews/OverflowShadowsObserver.d.ts +0 -1
- package/package.json +5 -5
- package/src/__tests__/unit/analytics.ts +0 -1
- package/src/plugins/table/nodeviews/OverflowShadowsObserver.ts +3 -23
- package/src/plugins/table/nodeviews/TableComponent.tsx +4 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 1.5.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 1.5.4
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`00d7488cf36`](https://bitbucket.org/atlassian/atlassian-frontend/commits/00d7488cf36) - [ux] The table shadow sentinels when rendered out of view would sometimes return a 0 root bounds object in the intersection observer. This became an issue because we ignore intersection entities with 0 root bounds. This fixes the right shadow not appear on tablessimply by removing the root bounds check from the observer
|
|
14
|
+
|
|
3
15
|
## 1.5.3
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -28,15 +28,11 @@ var OverflowShadowsObserver = /*#__PURE__*/function () {
|
|
|
28
28
|
}
|
|
29
29
|
if (!_this.tableIntersectionObserver) {
|
|
30
30
|
var intersectonOnbserverCallback = function intersectonOnbserverCallback(entry) {
|
|
31
|
-
var _entry$rootBounds, _entry$rootBounds2;
|
|
32
|
-
if (!((_entry$rootBounds = entry.rootBounds) !== null && _entry$rootBounds !== void 0 && _entry$rootBounds.height) && !((_entry$rootBounds2 = entry.rootBounds) !== null && _entry$rootBounds2 !== void 0 && _entry$rootBounds2.width)) {
|
|
33
|
-
return;
|
|
34
|
-
}
|
|
35
31
|
if (entry.target !== _this.leftShadowSentinel && entry.target !== _this.rightShadowSentinel) {
|
|
36
32
|
return;
|
|
37
33
|
}
|
|
38
34
|
_this.updateStickyShadowsHeightIfChanged();
|
|
39
|
-
_this.
|
|
35
|
+
_this.updateShadowState(_this.leftShadowSentinel === entry.target ? _types.ShadowEvent.SHOW_BEFORE_SHADOW : _types.ShadowEvent.SHOW_AFTER_SHADOW, entry.intersectionRatio !== 1);
|
|
40
36
|
};
|
|
41
37
|
_this.tableIntersectionObserver = new IntersectionObserver(function (entries, _) {
|
|
42
38
|
entries.forEach(function (entry) {
|
|
@@ -50,17 +46,6 @@ var OverflowShadowsObserver = /*#__PURE__*/function () {
|
|
|
50
46
|
return;
|
|
51
47
|
}
|
|
52
48
|
});
|
|
53
|
-
(0, _defineProperty2.default)(this, "checkIntersectionEvent", function (entry, shadowKey) {
|
|
54
|
-
if (
|
|
55
|
-
// If it's in full view, don't show shadow.
|
|
56
|
-
entry.isIntersecting && entry.intersectionRatio === 1) {
|
|
57
|
-
_this.updateShadowState(shadowKey, false);
|
|
58
|
-
} else if (
|
|
59
|
-
// If it's in partial view, show a shadow
|
|
60
|
-
entry.intersectionRatio < 1) {
|
|
61
|
-
_this.updateShadowState(shadowKey, true);
|
|
62
|
-
}
|
|
63
|
-
});
|
|
64
49
|
(0, _defineProperty2.default)(this, "observeShadowSentinels", function (isSticky) {
|
|
65
50
|
var _this$table, _this$table2;
|
|
66
51
|
_this.isSticky = !!isSticky;
|
|
@@ -59,10 +59,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
59
59
|
if (_this.state[shadowKey] === value) {
|
|
60
60
|
return;
|
|
61
61
|
}
|
|
62
|
-
// need this check to satisfy types for the setState argument
|
|
63
|
-
if (shadowKey === _types.ShadowEvent.SHOW_BEFORE_SHADOW) {
|
|
64
|
-
return _this.setState((0, _defineProperty3.default)({}, shadowKey, value));
|
|
65
|
-
}
|
|
66
62
|
_this.setState((0, _defineProperty3.default)({}, shadowKey, value));
|
|
67
63
|
});
|
|
68
64
|
(0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "createShadowSentinels", function (table) {
|
|
@@ -123,11 +119,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
123
119
|
if (!tableOverflowShadowsOptimization) {
|
|
124
120
|
_this.updateShadows();
|
|
125
121
|
}
|
|
126
|
-
|
|
127
|
-
_this.setState((0, _defineProperty3.default)({}, _types.ShadowEvent.SHOW_BEFORE_SHADOW, false));
|
|
128
|
-
} else {
|
|
129
|
-
_this.setState((0, _defineProperty3.default)({}, _types.ShadowEvent.SHOW_BEFORE_SHADOW, true));
|
|
130
|
-
}
|
|
122
|
+
_this.setState((0, _defineProperty3.default)({}, _types.ShadowEvent.SHOW_BEFORE_SHADOW, _this.wrapper.scrollLeft !== 0));
|
|
131
123
|
});
|
|
132
124
|
(0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleTableResizing", function () {
|
|
133
125
|
var _this$props = _this.props,
|
package/dist/cjs/version.json
CHANGED
|
@@ -17,15 +17,11 @@ export class OverflowShadowsObserver {
|
|
|
17
17
|
}
|
|
18
18
|
if (!this.tableIntersectionObserver) {
|
|
19
19
|
const intersectonOnbserverCallback = entry => {
|
|
20
|
-
var _entry$rootBounds, _entry$rootBounds2;
|
|
21
|
-
if (!((_entry$rootBounds = entry.rootBounds) !== null && _entry$rootBounds !== void 0 && _entry$rootBounds.height) && !((_entry$rootBounds2 = entry.rootBounds) !== null && _entry$rootBounds2 !== void 0 && _entry$rootBounds2.width)) {
|
|
22
|
-
return;
|
|
23
|
-
}
|
|
24
20
|
if (entry.target !== this.leftShadowSentinel && entry.target !== this.rightShadowSentinel) {
|
|
25
21
|
return;
|
|
26
22
|
}
|
|
27
23
|
this.updateStickyShadowsHeightIfChanged();
|
|
28
|
-
this.
|
|
24
|
+
this.updateShadowState(this.leftShadowSentinel === entry.target ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW, entry.intersectionRatio !== 1);
|
|
29
25
|
};
|
|
30
26
|
this.tableIntersectionObserver = new IntersectionObserver((entries, _) => {
|
|
31
27
|
entries.forEach(entry => intersectonOnbserverCallback(entry));
|
|
@@ -37,17 +33,6 @@ export class OverflowShadowsObserver {
|
|
|
37
33
|
return;
|
|
38
34
|
}
|
|
39
35
|
});
|
|
40
|
-
_defineProperty(this, "checkIntersectionEvent", (entry, shadowKey) => {
|
|
41
|
-
if (
|
|
42
|
-
// If it's in full view, don't show shadow.
|
|
43
|
-
entry.isIntersecting && entry.intersectionRatio === 1) {
|
|
44
|
-
this.updateShadowState(shadowKey, false);
|
|
45
|
-
} else if (
|
|
46
|
-
// If it's in partial view, show a shadow
|
|
47
|
-
entry.intersectionRatio < 1) {
|
|
48
|
-
this.updateShadowState(shadowKey, true);
|
|
49
|
-
}
|
|
50
|
-
});
|
|
51
36
|
_defineProperty(this, "observeShadowSentinels", isSticky => {
|
|
52
37
|
var _this$table, _this$table2;
|
|
53
38
|
this.isSticky = !!isSticky;
|
|
@@ -39,12 +39,6 @@ class TableComponent extends React.Component {
|
|
|
39
39
|
if (this.state[shadowKey] === value) {
|
|
40
40
|
return;
|
|
41
41
|
}
|
|
42
|
-
// need this check to satisfy types for the setState argument
|
|
43
|
-
if (shadowKey === ShadowEvent.SHOW_BEFORE_SHADOW) {
|
|
44
|
-
return this.setState({
|
|
45
|
-
[shadowKey]: value
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
42
|
this.setState({
|
|
49
43
|
[shadowKey]: value
|
|
50
44
|
});
|
|
@@ -113,15 +107,9 @@ class TableComponent extends React.Component {
|
|
|
113
107
|
if (!tableOverflowShadowsOptimization) {
|
|
114
108
|
this.updateShadows();
|
|
115
109
|
}
|
|
116
|
-
|
|
117
|
-
this.
|
|
118
|
-
|
|
119
|
-
});
|
|
120
|
-
} else {
|
|
121
|
-
this.setState({
|
|
122
|
-
[ShadowEvent.SHOW_BEFORE_SHADOW]: true
|
|
123
|
-
});
|
|
124
|
-
}
|
|
110
|
+
this.setState({
|
|
111
|
+
[ShadowEvent.SHOW_BEFORE_SHADOW]: this.wrapper.scrollLeft !== 0
|
|
112
|
+
});
|
|
125
113
|
});
|
|
126
114
|
_defineProperty(this, "handleTableResizing", () => {
|
|
127
115
|
const {
|
package/dist/es2019/version.json
CHANGED
|
@@ -21,15 +21,11 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
|
|
|
21
21
|
}
|
|
22
22
|
if (!_this.tableIntersectionObserver) {
|
|
23
23
|
var intersectonOnbserverCallback = function intersectonOnbserverCallback(entry) {
|
|
24
|
-
var _entry$rootBounds, _entry$rootBounds2;
|
|
25
|
-
if (!((_entry$rootBounds = entry.rootBounds) !== null && _entry$rootBounds !== void 0 && _entry$rootBounds.height) && !((_entry$rootBounds2 = entry.rootBounds) !== null && _entry$rootBounds2 !== void 0 && _entry$rootBounds2.width)) {
|
|
26
|
-
return;
|
|
27
|
-
}
|
|
28
24
|
if (entry.target !== _this.leftShadowSentinel && entry.target !== _this.rightShadowSentinel) {
|
|
29
25
|
return;
|
|
30
26
|
}
|
|
31
27
|
_this.updateStickyShadowsHeightIfChanged();
|
|
32
|
-
_this.
|
|
28
|
+
_this.updateShadowState(_this.leftShadowSentinel === entry.target ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW, entry.intersectionRatio !== 1);
|
|
33
29
|
};
|
|
34
30
|
_this.tableIntersectionObserver = new IntersectionObserver(function (entries, _) {
|
|
35
31
|
entries.forEach(function (entry) {
|
|
@@ -43,17 +39,6 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
|
|
|
43
39
|
return;
|
|
44
40
|
}
|
|
45
41
|
});
|
|
46
|
-
_defineProperty(this, "checkIntersectionEvent", function (entry, shadowKey) {
|
|
47
|
-
if (
|
|
48
|
-
// If it's in full view, don't show shadow.
|
|
49
|
-
entry.isIntersecting && entry.intersectionRatio === 1) {
|
|
50
|
-
_this.updateShadowState(shadowKey, false);
|
|
51
|
-
} else if (
|
|
52
|
-
// If it's in partial view, show a shadow
|
|
53
|
-
entry.intersectionRatio < 1) {
|
|
54
|
-
_this.updateShadowState(shadowKey, true);
|
|
55
|
-
}
|
|
56
|
-
});
|
|
57
42
|
_defineProperty(this, "observeShadowSentinels", function (isSticky) {
|
|
58
43
|
var _this$table, _this$table2;
|
|
59
44
|
_this.isSticky = !!isSticky;
|
|
@@ -54,10 +54,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
54
54
|
if (_this.state[shadowKey] === value) {
|
|
55
55
|
return;
|
|
56
56
|
}
|
|
57
|
-
// need this check to satisfy types for the setState argument
|
|
58
|
-
if (shadowKey === ShadowEvent.SHOW_BEFORE_SHADOW) {
|
|
59
|
-
return _this.setState(_defineProperty({}, shadowKey, value));
|
|
60
|
-
}
|
|
61
57
|
_this.setState(_defineProperty({}, shadowKey, value));
|
|
62
58
|
});
|
|
63
59
|
_defineProperty(_assertThisInitialized(_this), "createShadowSentinels", function (table) {
|
|
@@ -118,11 +114,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
118
114
|
if (!tableOverflowShadowsOptimization) {
|
|
119
115
|
_this.updateShadows();
|
|
120
116
|
}
|
|
121
|
-
|
|
122
|
-
_this.setState(_defineProperty({}, ShadowEvent.SHOW_BEFORE_SHADOW, false));
|
|
123
|
-
} else {
|
|
124
|
-
_this.setState(_defineProperty({}, ShadowEvent.SHOW_BEFORE_SHADOW, true));
|
|
125
|
-
}
|
|
117
|
+
_this.setState(_defineProperty({}, ShadowEvent.SHOW_BEFORE_SHADOW, _this.wrapper.scrollLeft !== 0));
|
|
126
118
|
});
|
|
127
119
|
_defineProperty(_assertThisInitialized(_this), "handleTableResizing", function () {
|
|
128
120
|
var _this$props = _this.props,
|
package/dist/esm/version.json
CHANGED
|
@@ -11,7 +11,6 @@ export declare class OverflowShadowsObserver {
|
|
|
11
11
|
private stickyRowHeight;
|
|
12
12
|
constructor(updateShadowState: (shadowKey: ShadowEvent, value: boolean) => void, table: HTMLElement, wrapper: HTMLDivElement);
|
|
13
13
|
private init;
|
|
14
|
-
private checkIntersectionEvent;
|
|
15
14
|
private updateStickyShadowsHeightIfChanged;
|
|
16
15
|
private getStickyCell;
|
|
17
16
|
observeShadowSentinels: (isSticky?: boolean) => void;
|
|
@@ -11,7 +11,6 @@ export declare class OverflowShadowsObserver {
|
|
|
11
11
|
private stickyRowHeight;
|
|
12
12
|
constructor(updateShadowState: (shadowKey: ShadowEvent, value: boolean) => void, table: HTMLElement, wrapper: HTMLDivElement);
|
|
13
13
|
private init;
|
|
14
|
-
private checkIntersectionEvent;
|
|
15
14
|
private updateStickyShadowsHeightIfChanged;
|
|
16
15
|
private getStickyCell;
|
|
17
16
|
observeShadowSentinels: (isSticky?: boolean) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.5",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -27,10 +27,10 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@atlaskit/adf-schema": "^25.8.0",
|
|
30
|
-
"@atlaskit/editor-common": "^74.
|
|
30
|
+
"@atlaskit/editor-common": "^74.6.0",
|
|
31
31
|
"@atlaskit/editor-palette": "1.4.3",
|
|
32
|
-
"@atlaskit/editor-plugin-analytics": "^0.0.
|
|
33
|
-
"@atlaskit/editor-plugin-content-insertion": "^0.0.
|
|
32
|
+
"@atlaskit/editor-plugin-analytics": "^0.0.2",
|
|
33
|
+
"@atlaskit/editor-plugin-content-insertion": "^0.0.2",
|
|
34
34
|
"@atlaskit/editor-shared-styles": "^2.4.0",
|
|
35
35
|
"@atlaskit/editor-tables": "^2.3.0",
|
|
36
36
|
"@atlaskit/icon": "^21.12.0",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"@atlaskit/analytics-next": "^9.1.0",
|
|
65
65
|
"@atlaskit/button": "^16.7.0",
|
|
66
|
-
"@atlaskit/editor-core": "^185.
|
|
66
|
+
"@atlaskit/editor-core": "^185.2.0",
|
|
67
67
|
"@atlaskit/editor-plugin-decorations": "^0.1.0",
|
|
68
68
|
"@atlaskit/editor-plugin-feature-flags": "^0.1.0",
|
|
69
69
|
"@atlaskit/editor-plugin-grid": "^0.1.0",
|
|
@@ -318,7 +318,6 @@ describe('Table analytic events', () => {
|
|
|
318
318
|
|
|
319
319
|
setColorWithAnalytics(editorAnalyticsAPIFake)(
|
|
320
320
|
INPUT_METHOD.CONTEXT_MENU,
|
|
321
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
322
321
|
B50,
|
|
323
322
|
)(editorView.state, editorView.dispatch);
|
|
324
323
|
});
|
|
@@ -39,21 +39,19 @@ export class OverflowShadowsObserver {
|
|
|
39
39
|
const intersectonOnbserverCallback = (
|
|
40
40
|
entry: IntersectionObserverEntry,
|
|
41
41
|
) => {
|
|
42
|
-
if (!entry.rootBounds?.height && !entry.rootBounds?.width) {
|
|
43
|
-
return;
|
|
44
|
-
}
|
|
45
42
|
if (
|
|
46
43
|
entry.target !== this.leftShadowSentinel &&
|
|
47
44
|
entry.target !== this.rightShadowSentinel
|
|
48
45
|
) {
|
|
49
46
|
return;
|
|
50
47
|
}
|
|
48
|
+
|
|
51
49
|
this.updateStickyShadowsHeightIfChanged();
|
|
52
|
-
this.
|
|
53
|
-
entry,
|
|
50
|
+
this.updateShadowState(
|
|
54
51
|
this.leftShadowSentinel === entry.target
|
|
55
52
|
? ShadowEvent.SHOW_BEFORE_SHADOW
|
|
56
53
|
: ShadowEvent.SHOW_AFTER_SHADOW,
|
|
54
|
+
entry.intersectionRatio !== 1,
|
|
57
55
|
);
|
|
58
56
|
};
|
|
59
57
|
|
|
@@ -71,24 +69,6 @@ export class OverflowShadowsObserver {
|
|
|
71
69
|
}
|
|
72
70
|
};
|
|
73
71
|
|
|
74
|
-
private checkIntersectionEvent = (
|
|
75
|
-
entry: IntersectionObserverEntry,
|
|
76
|
-
shadowKey: ShadowEvent,
|
|
77
|
-
) => {
|
|
78
|
-
if (
|
|
79
|
-
// If it's in full view, don't show shadow.
|
|
80
|
-
entry.isIntersecting &&
|
|
81
|
-
entry.intersectionRatio === 1
|
|
82
|
-
) {
|
|
83
|
-
this.updateShadowState(shadowKey, false);
|
|
84
|
-
} else if (
|
|
85
|
-
// If it's in partial view, show a shadow
|
|
86
|
-
entry.intersectionRatio < 1
|
|
87
|
-
) {
|
|
88
|
-
this.updateShadowState(shadowKey, true);
|
|
89
|
-
}
|
|
90
|
-
};
|
|
91
|
-
|
|
92
72
|
private updateStickyShadowsHeightIfChanged() {
|
|
93
73
|
if (!this.isSticky) {
|
|
94
74
|
return;
|
|
@@ -280,11 +280,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
|
|
|
280
280
|
if (this.state[shadowKey] === value) {
|
|
281
281
|
return;
|
|
282
282
|
}
|
|
283
|
-
|
|
284
|
-
if (shadowKey === ShadowEvent.SHOW_BEFORE_SHADOW) {
|
|
285
|
-
return this.setState({ [shadowKey]: value });
|
|
286
|
-
}
|
|
287
|
-
this.setState({ [shadowKey]: value });
|
|
283
|
+
this.setState({ [shadowKey]: value } as Pick<TableState, typeof shadowKey>);
|
|
288
284
|
};
|
|
289
285
|
|
|
290
286
|
private createShadowSentinels = (table: HTMLTableElement | null) => {
|
|
@@ -537,11 +533,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
|
|
|
537
533
|
this.updateShadows();
|
|
538
534
|
}
|
|
539
535
|
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
}
|
|
543
|
-
this.setState({ [ShadowEvent.SHOW_BEFORE_SHADOW]: true });
|
|
544
|
-
}
|
|
536
|
+
this.setState({
|
|
537
|
+
[ShadowEvent.SHOW_BEFORE_SHADOW]: this.wrapper.scrollLeft !== 0,
|
|
538
|
+
});
|
|
545
539
|
};
|
|
546
540
|
|
|
547
541
|
private handleTableResizing = () => {
|