@atlaskit/editor-plugin-table 24.6.1 → 25.0.1
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 +40 -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/TableFloatingControls/index.js +1 -17
- 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/TableFloatingControls/index.js +1 -17
- 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/TableFloatingControls/index.js +1 -17
- 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 -20
- package/dist/cjs/nodeviews/OverflowShadowsObserver.js +0 -132
- package/dist/cjs/nodeviews/update-overflow-shadows.js +0 -16
- package/dist/cjs/ui/TableFloatingControls/CornerControls/DragCornerControls.js +0 -118
- package/dist/cjs/ui/TableFloatingControls/CornerControls/types.js +0 -5
- package/dist/es2019/nodeviews/OverflowShadowsObserver.js +0 -112
- package/dist/es2019/nodeviews/update-overflow-shadows.js +0 -10
- package/dist/es2019/ui/TableFloatingControls/CornerControls/DragCornerControls.js +0 -126
- package/dist/es2019/ui/TableFloatingControls/CornerControls/types.js +0 -1
- package/dist/esm/nodeviews/OverflowShadowsObserver.js +0 -125
- package/dist/esm/nodeviews/update-overflow-shadows.js +0 -10
- package/dist/esm/ui/TableFloatingControls/CornerControls/DragCornerControls.js +0 -109
- package/dist/esm/ui/TableFloatingControls/CornerControls/types.js +0 -1
- 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
- package/dist/types/ui/TableFloatingControls/CornerControls/DragCornerControls.d.ts +0 -15
- package/dist/types/ui/TableFloatingControls/CornerControls/types.d.ts +0 -11
|
@@ -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,126 +0,0 @@
|
|
|
1
|
-
import React, { useMemo } from 'react';
|
|
2
|
-
import classnames from 'classnames';
|
|
3
|
-
import { injectIntl } from 'react-intl';
|
|
4
|
-
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
5
|
-
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
6
|
-
import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
|
|
7
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
8
|
-
import { clearHoverSelection } from '../../../pm-plugins/commands';
|
|
9
|
-
import { TableCssClassName as ClassName } from '../../../types';
|
|
10
|
-
const DragCornerControlsComponent = ({
|
|
11
|
-
editorView,
|
|
12
|
-
isInDanger,
|
|
13
|
-
isResizing,
|
|
14
|
-
intl: {
|
|
15
|
-
formatMessage
|
|
16
|
-
}
|
|
17
|
-
}) => {
|
|
18
|
-
const handleOnClick = () => {
|
|
19
|
-
const {
|
|
20
|
-
state,
|
|
21
|
-
dispatch
|
|
22
|
-
} = editorView;
|
|
23
|
-
dispatch(selectTable(state.tr).setMeta('addToHistory', false));
|
|
24
|
-
};
|
|
25
|
-
const handleMouseOut = () => {
|
|
26
|
-
const {
|
|
27
|
-
state,
|
|
28
|
-
dispatch
|
|
29
|
-
} = editorView;
|
|
30
|
-
clearHoverSelection()(state, dispatch);
|
|
31
|
-
};
|
|
32
|
-
const isActive = useMemo(() => {
|
|
33
|
-
const {
|
|
34
|
-
selection
|
|
35
|
-
} = editorView.state;
|
|
36
|
-
const table = findTable(selection);
|
|
37
|
-
if (!table) {
|
|
38
|
-
return false;
|
|
39
|
-
}
|
|
40
|
-
return isTableSelected(selection);
|
|
41
|
-
}, [editorView.state]);
|
|
42
|
-
if (isResizing) {
|
|
43
|
-
return null;
|
|
44
|
-
}
|
|
45
|
-
return /*#__PURE__*/React.createElement("button", {
|
|
46
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
47
|
-
className: classnames(ClassName.DRAG_CORNER_BUTTON, {
|
|
48
|
-
active: isActive,
|
|
49
|
-
danger: isActive && isInDanger
|
|
50
|
-
}),
|
|
51
|
-
"aria-label": formatMessage(messages.cornerControl),
|
|
52
|
-
type: "button",
|
|
53
|
-
onClick: handleOnClick,
|
|
54
|
-
onMouseOut: handleMouseOut,
|
|
55
|
-
onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
|
|
56
|
-
contentEditable: false
|
|
57
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
58
|
-
className: ClassName.DRAG_CORNER_BUTTON_INNER
|
|
59
|
-
}));
|
|
60
|
-
};
|
|
61
|
-
const DragCornerControlsComponentWithSelection = ({
|
|
62
|
-
editorView,
|
|
63
|
-
isInDanger,
|
|
64
|
-
isResizing,
|
|
65
|
-
intl: {
|
|
66
|
-
formatMessage
|
|
67
|
-
},
|
|
68
|
-
api
|
|
69
|
-
}) => {
|
|
70
|
-
const {
|
|
71
|
-
selection
|
|
72
|
-
} = useSharedPluginStateWithSelector(api, ['selection'], states => {
|
|
73
|
-
var _states$selectionStat;
|
|
74
|
-
return {
|
|
75
|
-
selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
|
|
76
|
-
};
|
|
77
|
-
});
|
|
78
|
-
const handleOnClick = () => {
|
|
79
|
-
const {
|
|
80
|
-
state,
|
|
81
|
-
dispatch
|
|
82
|
-
} = editorView;
|
|
83
|
-
dispatch(selectTable(state.tr).setMeta('addToHistory', false));
|
|
84
|
-
};
|
|
85
|
-
const handleMouseOut = () => {
|
|
86
|
-
const {
|
|
87
|
-
state,
|
|
88
|
-
dispatch
|
|
89
|
-
} = editorView;
|
|
90
|
-
clearHoverSelection()(state, dispatch);
|
|
91
|
-
};
|
|
92
|
-
const isActive = useMemo(() => {
|
|
93
|
-
if (!selection) {
|
|
94
|
-
return;
|
|
95
|
-
}
|
|
96
|
-
const table = findTable(selection);
|
|
97
|
-
if (!table) {
|
|
98
|
-
return false;
|
|
99
|
-
}
|
|
100
|
-
return isTableSelected(selection);
|
|
101
|
-
}, [selection]);
|
|
102
|
-
if (isResizing) {
|
|
103
|
-
return null;
|
|
104
|
-
}
|
|
105
|
-
return /*#__PURE__*/React.createElement("button", {
|
|
106
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
107
|
-
className: classnames(ClassName.DRAG_CORNER_BUTTON, {
|
|
108
|
-
active: isActive,
|
|
109
|
-
danger: isActive && isInDanger
|
|
110
|
-
}),
|
|
111
|
-
"aria-label": formatMessage(messages.cornerControl),
|
|
112
|
-
type: "button",
|
|
113
|
-
onClick: handleOnClick,
|
|
114
|
-
onMouseOut: handleMouseOut,
|
|
115
|
-
onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
|
|
116
|
-
contentEditable: false
|
|
117
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
118
|
-
className: ClassName.DRAG_CORNER_BUTTON_INNER
|
|
119
|
-
}));
|
|
120
|
-
};
|
|
121
|
-
|
|
122
|
-
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
123
|
-
export const DragCornerControlsWithSelection = injectIntl(DragCornerControlsComponentWithSelection);
|
|
124
|
-
|
|
125
|
-
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
126
|
-
export const DragCornerControls = injectIntl(DragCornerControlsComponent);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -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,109 +0,0 @@
|
|
|
1
|
-
import React, { useMemo } from 'react';
|
|
2
|
-
import classnames from 'classnames';
|
|
3
|
-
import { injectIntl } from 'react-intl';
|
|
4
|
-
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
5
|
-
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
6
|
-
import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
|
|
7
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
8
|
-
import { clearHoverSelection } from '../../../pm-plugins/commands';
|
|
9
|
-
import { TableCssClassName as ClassName } from '../../../types';
|
|
10
|
-
var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
|
|
11
|
-
var editorView = _ref.editorView,
|
|
12
|
-
isInDanger = _ref.isInDanger,
|
|
13
|
-
isResizing = _ref.isResizing,
|
|
14
|
-
formatMessage = _ref.intl.formatMessage;
|
|
15
|
-
var handleOnClick = function handleOnClick() {
|
|
16
|
-
var state = editorView.state,
|
|
17
|
-
dispatch = editorView.dispatch;
|
|
18
|
-
dispatch(selectTable(state.tr).setMeta('addToHistory', false));
|
|
19
|
-
};
|
|
20
|
-
var handleMouseOut = function handleMouseOut() {
|
|
21
|
-
var state = editorView.state,
|
|
22
|
-
dispatch = editorView.dispatch;
|
|
23
|
-
clearHoverSelection()(state, dispatch);
|
|
24
|
-
};
|
|
25
|
-
var isActive = useMemo(function () {
|
|
26
|
-
var selection = editorView.state.selection;
|
|
27
|
-
var table = findTable(selection);
|
|
28
|
-
if (!table) {
|
|
29
|
-
return false;
|
|
30
|
-
}
|
|
31
|
-
return isTableSelected(selection);
|
|
32
|
-
}, [editorView.state]);
|
|
33
|
-
if (isResizing) {
|
|
34
|
-
return null;
|
|
35
|
-
}
|
|
36
|
-
return /*#__PURE__*/React.createElement("button", {
|
|
37
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
38
|
-
className: classnames(ClassName.DRAG_CORNER_BUTTON, {
|
|
39
|
-
active: isActive,
|
|
40
|
-
danger: isActive && isInDanger
|
|
41
|
-
}),
|
|
42
|
-
"aria-label": formatMessage(messages.cornerControl),
|
|
43
|
-
type: "button",
|
|
44
|
-
onClick: handleOnClick,
|
|
45
|
-
onMouseOut: handleMouseOut,
|
|
46
|
-
onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
|
|
47
|
-
contentEditable: false
|
|
48
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
49
|
-
className: ClassName.DRAG_CORNER_BUTTON_INNER
|
|
50
|
-
}));
|
|
51
|
-
};
|
|
52
|
-
var DragCornerControlsComponentWithSelection = function DragCornerControlsComponentWithSelection(_ref2) {
|
|
53
|
-
var editorView = _ref2.editorView,
|
|
54
|
-
isInDanger = _ref2.isInDanger,
|
|
55
|
-
isResizing = _ref2.isResizing,
|
|
56
|
-
formatMessage = _ref2.intl.formatMessage,
|
|
57
|
-
api = _ref2.api;
|
|
58
|
-
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['selection'], function (states) {
|
|
59
|
-
var _states$selectionStat;
|
|
60
|
-
return {
|
|
61
|
-
selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
|
|
62
|
-
};
|
|
63
|
-
}),
|
|
64
|
-
selection = _useSharedPluginState.selection;
|
|
65
|
-
var handleOnClick = function handleOnClick() {
|
|
66
|
-
var state = editorView.state,
|
|
67
|
-
dispatch = editorView.dispatch;
|
|
68
|
-
dispatch(selectTable(state.tr).setMeta('addToHistory', false));
|
|
69
|
-
};
|
|
70
|
-
var handleMouseOut = function handleMouseOut() {
|
|
71
|
-
var state = editorView.state,
|
|
72
|
-
dispatch = editorView.dispatch;
|
|
73
|
-
clearHoverSelection()(state, dispatch);
|
|
74
|
-
};
|
|
75
|
-
var isActive = useMemo(function () {
|
|
76
|
-
if (!selection) {
|
|
77
|
-
return;
|
|
78
|
-
}
|
|
79
|
-
var table = findTable(selection);
|
|
80
|
-
if (!table) {
|
|
81
|
-
return false;
|
|
82
|
-
}
|
|
83
|
-
return isTableSelected(selection);
|
|
84
|
-
}, [selection]);
|
|
85
|
-
if (isResizing) {
|
|
86
|
-
return null;
|
|
87
|
-
}
|
|
88
|
-
return /*#__PURE__*/React.createElement("button", {
|
|
89
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
90
|
-
className: classnames(ClassName.DRAG_CORNER_BUTTON, {
|
|
91
|
-
active: isActive,
|
|
92
|
-
danger: isActive && isInDanger
|
|
93
|
-
}),
|
|
94
|
-
"aria-label": formatMessage(messages.cornerControl),
|
|
95
|
-
type: "button",
|
|
96
|
-
onClick: handleOnClick,
|
|
97
|
-
onMouseOut: handleMouseOut,
|
|
98
|
-
onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
|
|
99
|
-
contentEditable: false
|
|
100
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
101
|
-
className: ClassName.DRAG_CORNER_BUTTON_INNER
|
|
102
|
-
}));
|
|
103
|
-
};
|
|
104
|
-
|
|
105
|
-
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
106
|
-
export var DragCornerControlsWithSelection = injectIntl(DragCornerControlsComponentWithSelection);
|
|
107
|
-
|
|
108
|
-
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
109
|
-
export var DragCornerControls = injectIntl(DragCornerControlsComponent);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -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;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
|
|
3
|
-
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
4
|
-
import type { TablePlugin } from '../../../tablePluginType';
|
|
5
|
-
import type { CornerControlProps } from './types';
|
|
6
|
-
export declare const DragCornerControlsWithSelection: React.FC<WithIntlProps<CornerControlProps & WrappedComponentProps & {
|
|
7
|
-
api?: ExtractInjectionAPI<TablePlugin>;
|
|
8
|
-
}>> & {
|
|
9
|
-
WrappedComponent: React.ComponentType<CornerControlProps & WrappedComponentProps & {
|
|
10
|
-
api?: ExtractInjectionAPI<TablePlugin>;
|
|
11
|
-
}>;
|
|
12
|
-
};
|
|
13
|
-
export declare const DragCornerControls: React.FC<WithIntlProps<CornerControlProps & WrappedComponentProps>> & {
|
|
14
|
-
WrappedComponent: React.ComponentType<CornerControlProps & WrappedComponentProps>;
|
|
15
|
-
};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
2
|
-
export type CornerControlProps = {
|
|
3
|
-
editorView: EditorView;
|
|
4
|
-
hoveredRows?: number[];
|
|
5
|
-
isHeaderColumnEnabled?: boolean;
|
|
6
|
-
isHeaderRowEnabled?: boolean;
|
|
7
|
-
isInDanger?: boolean;
|
|
8
|
-
isResizing?: boolean;
|
|
9
|
-
stickyTop?: number;
|
|
10
|
-
tableRef?: HTMLTableElement;
|
|
11
|
-
};
|