@atlaskit/editor-plugin-table 5.3.38 → 5.4.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 +18 -0
- package/dist/cjs/plugins/table/nodeviews/TableComponent.js +5 -2
- package/dist/cjs/plugins/table/nodeviews/TableRow.js +158 -45
- package/dist/cjs/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.js +0 -6
- package/dist/cjs/plugins/table/ui/TableFloatingControls/RowDropTarget/index.js +3 -0
- package/dist/cjs/plugins/table/ui/common-styles.js +18 -7
- package/dist/cjs/plugins/table/ui/ui-styles.js +26 -21
- package/dist/es2019/plugins/table/nodeviews/TableComponent.js +5 -2
- package/dist/es2019/plugins/table/nodeviews/TableRow.js +163 -50
- package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.js +1 -9
- package/dist/es2019/plugins/table/ui/TableFloatingControls/RowDropTarget/index.js +1 -0
- package/dist/es2019/plugins/table/ui/common-styles.js +17 -0
- package/dist/es2019/plugins/table/ui/ui-styles.js +36 -19
- package/dist/esm/plugins/table/nodeviews/TableComponent.js +5 -2
- package/dist/esm/plugins/table/nodeviews/TableRow.js +158 -46
- package/dist/esm/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.js +1 -7
- package/dist/esm/plugins/table/ui/TableFloatingControls/RowDropTarget/index.js +3 -0
- package/dist/esm/plugins/table/ui/common-styles.js +18 -7
- package/dist/esm/plugins/table/ui/ui-styles.js +26 -21
- package/dist/types/plugins/table/nodeviews/TableRow.d.ts +3 -0
- package/dist/types-ts4.5/plugins/table/nodeviews/TableRow.d.ts +3 -0
- package/package.json +6 -3
- package/src/plugins/table/nodeviews/TableComponent.tsx +13 -12
- package/src/plugins/table/nodeviews/TableRow.ts +199 -52
- package/src/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx +1 -7
- package/src/plugins/table/ui/TableFloatingControls/RowDropTarget/index.tsx +1 -0
- package/src/plugins/table/ui/common-styles.ts +23 -0
- package/src/plugins/table/ui/ui-styles.ts +40 -19
|
@@ -14,7 +14,7 @@ var _colors = require("@atlaskit/theme/colors");
|
|
|
14
14
|
var _constants = require("@atlaskit/theme/constants");
|
|
15
15
|
var _types = require("../types");
|
|
16
16
|
var _consts = require("./consts");
|
|
17
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34;
|
|
17
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35;
|
|
18
18
|
var InsertLine = function InsertLine(props, cssString) {
|
|
19
19
|
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n background: ", ";\n display: none;\n position: absolute;\n z-index: ", ";\n ", "\n }\n"])), _types.TableCssClassName.CONTROLS_INSERT_LINE, (0, _consts.tableBorderSelectedColor)(props), _editorSharedStyles.akEditorUnitZIndex, cssString);
|
|
20
20
|
};
|
|
@@ -46,7 +46,7 @@ var dragInsertButtonWrapper = exports.dragInsertButtonWrapper = function dragIns
|
|
|
46
46
|
return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n position: absolute;\n z-index: ", ";\n }\n\n .", " {\n bottom: -3px;\n left: 2px;\n }\n\n .", " {\n left: -3px;\n bottom: -2px;\n }\n\n .", " {\n ", "\n }\n\n .", ":hover {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n background: ".concat("var(--ds-surface-overlay, white)", ";\n color: ", "var(--ds-icon, ".concat(_colors.N300, ")"), ";\n border: 1px solid ", "var(--ds-background-accent-gray-subtler, #C1C7D0)", ";\n border-radius: 50%;\n height: ", _consts.dragTableInsertColumnButtonSize, "px;\n width: ").concat(_consts.dragTableInsertColumnButtonSize, "px;\n ")), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-icon-inverse, white)");
|
|
47
47
|
};
|
|
48
48
|
var dragCornerControlButton = exports.dragCornerControlButton = function dragCornerControlButton(props) {
|
|
49
|
-
return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n width:
|
|
49
|
+
return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n width: 24px;\n height: 24px;\n display: flex;\n justify-content: flex-end;\n align-items: flex-end;\n position: absolute;\n top: ", ";\n left: ", ";\n background-color: transparent;\n border: none;\n padding: 0;\n outline: none;\n z-index: ", ";\n\n &.active .", " {\n background-color: ", ";\n width: 10px;\n height: 10px;\n border-width: 2px;\n border-radius: 4px;\n top: ", ";\n left: ", ";\n }\n\n &:hover {\n cursor: pointer;\n\n .", " {\n width: 10px;\n height: 10px;\n border-width: 2px;\n border-radius: 4px;\n top: ", ";\n left: ", ";\n }\n }\n }\n\n .", " {\n border: 1px solid ", ";\n background-color: ", ";\n border-radius: 2px;\n width: 5px;\n height: 5px;\n position: relative;\n }\n"])), _types.TableCssClassName.DRAG_CORNER_BUTTON, "var(--ds-space-negative-250, -20px)", "var(--ds-space-negative-100, -8px)", _editorSharedStyles.akEditorUnitZIndex * 99, _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-selected, #0C66E4)", "var(--ds-space-075, 6px)", "var(--ds-space-075, 6px)", _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-space-075, 6px)", "var(--ds-space-075, 6px)", _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-inverse, #FFF)", "var(--ds-background-accent-gray-subtler, #DCDFE4)");
|
|
50
50
|
};
|
|
51
51
|
var insertColumnButtonWrapper = exports.insertColumnButtonWrapper = function insertColumnButtonWrapper(props) {
|
|
52
52
|
return (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", "\n ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine(props, "\n width: 2px;\n left: 9px;\n "));
|
|
@@ -61,64 +61,69 @@ var DeleteButton = exports.DeleteButton = function DeleteButton(props) {
|
|
|
61
61
|
return (0, _react.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n .", ",\n .", " {\n height: ", "px;\n width: ", "px;\n }\n .", " {\n .", " {\n ", "\n }\n }\n\n .", ":hover {\n background: ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableDeleteButtonSize, _consts.tableDeleteButtonSize, _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, Button("\n background: ".concat((0, _consts.tableCellSelectedDeleteIconBackground)(props), ";\n color: ").concat((0, _consts.tableCellSelectedDeleteIconColor)(props), ";\n ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, (0, _consts.tableCellHoverDeleteIconBackground)(props), (0, _consts.tableCellHoverDeleteIconColor)(props));
|
|
62
62
|
};
|
|
63
63
|
var OverflowShadow = exports.OverflowShadow = function OverflowShadow(props) {
|
|
64
|
-
return (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n .", ", .", " {\n display: block;\n height: calc(100% - ", "px);\n position: absolute;\n pointer-events: none;\n top: ", "px;\n z-index: ", ";\n width: ", "px;\n }\n .", " {\n background: linear-gradient(\n to left,\n transparent 0,\n ", "\n ", "%\n ),\n linear-gradient(\n to right,\n ", " 0px,\n transparent 1px\n );\n left: 0px;\n }\n .", "[data-number-column='true'] > :not(.", ").", " {\n left: ", "px;\n }\n .", " {\n background: linear-gradient(\n to right,\n transparent 0,\n ", "\n ", "%\n ),\n linear-gradient(\n to left,\n ", " 0px,\n transparent 1px\n );\n left: ", ";\n }\n .", " {\n
|
|
64
|
+
return (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n .", ", .", " {\n display: block;\n height: calc(100% - ", "px);\n position: absolute;\n pointer-events: none;\n top: ", "px;\n z-index: ", ";\n width: ", "px;\n }\n .", " {\n background: linear-gradient(\n to left,\n transparent 0,\n ", "\n ", "%\n ),\n linear-gradient(\n to right,\n ", " 0px,\n transparent 1px\n );\n left: 0px;\n }\n .", "[data-number-column='true'] > :not(.", ").", " {\n left: ", "px;\n }\n .", " {\n background: linear-gradient(\n to right,\n transparent 0,\n ", "\n ", "%\n ),\n linear-gradient(\n to left,\n ", " 0px,\n transparent 1px\n );\n left: ", ";\n }\n .", " {\n ", "\n .", " {\n border-left: 1px solid ", ";\n }\n }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide : _consts.tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "calc(100% - ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide : _consts.tableOverflowShadowWidth, "px)") : "calc(100% - ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide - 10 : -2, "px)"), _types.TableCssClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(), _types.TableCssClassName.TABLE_LEFT_SHADOW, (0, _consts.tableBorderColor)(props));
|
|
65
|
+
};
|
|
66
|
+
var overflowShadowWidhoutDnD = function overflowShadowWidhoutDnD() {
|
|
67
|
+
if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop')) {
|
|
68
|
+
return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n .", ", .", " {\n height: calc(100% - ", "px);\n top: ", "px;\n }\n "])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTopWithControl, _styles.tableMarginTopWithControl);
|
|
69
|
+
}
|
|
65
70
|
};
|
|
66
71
|
var columnHeaderButton = function columnHeaderButton(props, cssString) {
|
|
67
72
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.column-controls-styles-updated')) {
|
|
68
|
-
return (0, _react.css)(
|
|
73
|
+
return (0, _react.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n display: block;\n box-sizing: border-box;\n padding: 0;\n\n :focus {\n outline: none;\n }\n\n ", "\n "])), (0, _consts.tableHeaderCellBackgroundColor)(props), cssString);
|
|
69
74
|
} else {
|
|
70
|
-
return (0, _react.css)(
|
|
75
|
+
return (0, _react.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n border: 1px solid ", ";\n display: block;\n box-sizing: border-box;\n padding: 0;\n\n :focus {\n outline: none;\n }\n\n ", "\n "])), (0, _consts.tableHeaderCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), cssString);
|
|
71
76
|
}
|
|
72
77
|
};
|
|
73
78
|
var columnHeaderButtonSelected = function columnHeaderButtonSelected(props) {
|
|
74
|
-
return (0, _react.css)(
|
|
79
|
+
return (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n z-index: ", ";\n"])), "var(--ds-text-inverse, ".concat(_colors.N0, ")"), (0, _consts.tableToolbarSelectedColor)(props), (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsSelectedZIndex);
|
|
75
80
|
};
|
|
76
81
|
var getFloatingDotOverrides = function getFloatingDotOverrides(props) {
|
|
77
|
-
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(
|
|
82
|
+
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n tr\n th:last-child\n .", "::before,\n tr\n td:last-child\n .", "::before {\n content: '';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: ", ";\n right: 0px;\n }\n "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, "var(--ds-space-025, 2px)") : '';
|
|
78
83
|
};
|
|
79
84
|
var floatingColumnControls = exports.floatingColumnControls = function floatingColumnControls(props) {
|
|
80
|
-
return (0, _react.css)(
|
|
85
|
+
return (0, _react.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n box-sizing: border-box;\n position: absolute;\n top: 0;\n\n .", " {\n display: flex;\n flex-direction: row;\n }\n }\n\n .", " {\n box-sizing: border-box;\n\n .", " {\n display: grid;\n justify-items: center;\n }\n }\n "])), _types.TableCssClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER);
|
|
81
86
|
};
|
|
82
87
|
var rowControlsWrapperDotStyle = exports.rowControlsWrapperDotStyle = function rowControlsWrapperDotStyle(props) {
|
|
83
88
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop')) {
|
|
84
|
-
return (0, _react.css)(
|
|
89
|
+
return (0, _react.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n div.", ">.", "::after {\n display: none;\n }\n "])), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER);
|
|
85
90
|
} else {
|
|
86
|
-
return (0, _react.css)(
|
|
91
|
+
return (0, _react.css)(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n div.", ">.", "::after {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: -", "px;\n right: -1px;\n }\n "])), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
|
|
87
92
|
}
|
|
88
93
|
};
|
|
89
94
|
var columnControlsDecoration = exports.columnControlsDecoration = function columnControlsDecoration(props) {
|
|
90
95
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.column-controls-styles-updated')) {
|
|
91
|
-
return (0, _react.css)(
|
|
96
|
+
return (0, _react.css)(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n display: none;\n cursor: pointer;\n position: absolute;\n width: 100%;\n left: 0;\n top: -", "px;\n height: ", "px;\n // floating dot for adding column button\n &::before {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: 2px;\n right: -1px;\n }\n\n &::after {\n content: ' ';\n\n ", "\n }\n }\n\n // floating dot for adding column button - overriding style on last column to avoid scroll\n ", "\n\n .", " .", " {\n display: block;\n }\n\n table tr:first-of-type th.", " {\n &.", ", &.", " {\n .", "::after {\n ", ";\n }\n\n &.", "\n .", "::after {\n background-color: ", ";\n border-color: ", ";\n z-index: ", ";\n }\n }\n }\n\n table tr:first-of-type th.", " {\n &.", ", &.", " {\n .", "::after {\n ", ";\n border-left: ", "px solid\n ", ";\n left: -", "px;\n }\n }\n }\n\n table tr:first-of-type th.", " {\n &.", " {\n .", "::after {\n ", ";\n }\n\n &.", "\n .", "::after {\n background-color: ", ";\n border-color: ", ";\n border-left: ", "px solid\n ", ";\n left: -", "px;\n z-index: ", ";\n }\n }\n }\n\n .", "\n table\n tr:first-of-type\n td.", ",\n .", "\n table\n tr:first-of-type\n th.", " {\n .", "::after {\n ", ";\n }\n }\n "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, columnHeaderButton(props, "\n border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n border-top: ").concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n border-bottom: ").concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n box-sizing: content-box;\n height: ").concat(_consts.tableToolbarSize - 1, "px;\n width: 100%;\n position: absolute;\n top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n left: 0px;\n z-index: ").concat(_consts.columnControlsZIndex, ";\n ")), getFloatingDotOverrides(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _styles.tableCellBorderWidth, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _styles.tableCellBorderWidth, (0, _consts.tableBorderDeleteColor)(props), _styles.tableCellBorderWidth, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
|
|
92
97
|
} else {
|
|
93
|
-
return (0, _react.css)(
|
|
98
|
+
return (0, _react.css)(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n display: none;\n cursor: pointer;\n position: absolute;\n width: calc(100% + ", "px);\n left: -1px;\n top: -", "px;\n height: ", "px;\n // floating dot for adding column button\n &::before {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: 2px;\n right: -1px;\n }\n\n &::after {\n content: ' ';\n\n ", "\n }\n }\n\n // floating dot for adding column button - overriding style on last column to avoid scroll\n ", "\n\n .", " .", " {\n display: block;\n }\n\n table\n tr:first-of-type\n td.", ",\n table\n tr:first-of-type\n th.", " {\n &.", ",\n &.", ",\n &.", " {\n .", "::after {\n ", ";\n }\n\n &.", "\n .", "::after {\n background-color: ", ";\n border: 1px solid ", ";\n border-bottom: none;\n z-index: ", ";\n }\n }\n }\n\n .", "\n table\n tr:first-of-type\n td.", ",\n .", "\n table\n tr:first-of-type\n th.", " {\n .", "::after {\n ", ";\n }\n }\n "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _styles.tableCellBorderWidth * 2, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, columnHeaderButton(props, "\n border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n border-bottom: none;\n height: ").concat(_consts.tableToolbarSize, "px;\n width: 100%;\n position: absolute;\n top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n left: 0px;\n z-index: ").concat(_consts.columnControlsZIndex, ";\n ")), getFloatingDotOverrides(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
|
|
94
99
|
}
|
|
95
100
|
};
|
|
96
101
|
var hoveredDeleteButton = exports.hoveredDeleteButton = function hoveredDeleteButton(props) {
|
|
97
|
-
return (0, _react.css)(
|
|
102
|
+
return (0, _react.css)(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2.default)(["\n .", ".", " {\n .", ",\n .", ",\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n }\n }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderDeleteColor)(props), _types.TableCssClassName.SELECTED_CELL, (0, _consts.tableCellDeleteColor)(props));
|
|
98
103
|
};
|
|
99
104
|
var disabledCell = exports.disabledCell = function disabledCell(props) {
|
|
100
|
-
return (0, _react.css)(
|
|
105
|
+
return (0, _react.css)(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2.default)(["\n :not(.", ")\n .", ":not(.", ") {\n .", ".", " {\n position: relative;\n border: 1px solid ", ";\n }\n .", ".", "::after {\n border: 1px solid ", ";\n }\n }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.HOVERED_DISABLED_CELL, _consts.tableCellDisabledColor, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.HOVERED_DISABLED_CELL, _consts.tableCellDisabledColor);
|
|
101
106
|
};
|
|
102
107
|
var hoveredCell = exports.hoveredCell = function hoveredCell(props) {
|
|
103
|
-
return (0, _react.css)(
|
|
108
|
+
return (0, _react.css)(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2.default)(["\n :not(.", ")\n .", ":not(.", ") {\n .", " {\n position: relative;\n border: 1px solid ", ";\n }\n }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderSelectedColor)(props));
|
|
104
109
|
};
|
|
105
|
-
var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(
|
|
110
|
+
var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2.default)(["\n :not(.", ")\n .", ":not(.", ") {\n td.", " {\n background-color: ", " !important; // We need to override the background-color added to the cell\n border: 1px solid ", ";\n }\n }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(_colors.Y50, ")"), "var(--ds-border-warning, ".concat(_colors.Y200, ")"));
|
|
106
111
|
|
|
107
112
|
// move the resize handle zone completely inside the table cell to avoid overflow
|
|
108
113
|
var getLastColumnResizerOverrides = function getLastColumnResizerOverrides() {
|
|
109
|
-
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(
|
|
114
|
+
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2.default)(["\n tr\n th:last-child\n .", ",\n tr\n td:last-child\n .", " {\n background-color: transparent;\n position: absolute;\n width: ", "px;\n height: 100%;\n top: 0;\n right: 0;\n cursor: col-resize;\n z-index: ", ";\n }\n "])), _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex) : '';
|
|
110
115
|
};
|
|
111
116
|
var resizeHandleOverrides = function resizeHandleOverrides(props) {
|
|
112
117
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop')) {
|
|
113
|
-
return (0, _react.css)(
|
|
118
|
+
return (0, _react.css)(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2.default)(["\n th.", "::before,\n td.", "::before {\n content: ' ';\n position: absolute;\n left: ", ";\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before,\n td.", "::before {\n content: ' ';\n position: absolute;\n right: -1px;\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n "])), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2);
|
|
114
119
|
}
|
|
115
|
-
return (0, _react.css)(
|
|
120
|
+
return (0, _react.css)(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2.default)(["\n td.", "::before {\n content: ' ';\n position: absolute;\n left: ", ";\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: ", ";\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n right: -1px;\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n right: -1px;\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n "])), _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
|
|
116
121
|
};
|
|
117
122
|
var resizeHandle = exports.resizeHandle = function resizeHandle(props) {
|
|
118
|
-
return (0, _react.css)(
|
|
123
|
+
return (0, _react.css)(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n .", " {\n background-color: transparent;\n position: absolute;\n width: ", "px;\n height: 100%;\n top: 0;\n right: -", "px;\n cursor: col-resize;\n z-index: ", ";\n }\n\n ", "\n\n ", "\n\n table\n tr:first-of-type\n th.", "\n .", "::after,\n table\n tr:first-of-type\n td.", "\n .", "::after {\n top: -", "px;\n height: calc(100% + ", "px);\n }\n }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, getLastColumnResizerOverrides(), resizeHandleOverrides(props), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
|
|
119
124
|
};
|
|
120
125
|
|
|
121
126
|
// Drag and Drop: drop target insert line
|
|
122
127
|
var insertLine = exports.insertLine = function insertLine(props) {
|
|
123
|
-
return (0, _react.css)(
|
|
128
|
+
return (0, _react.css)(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n td.", "::before {\n content: ' ';\n position: absolute;\n left: -1px;\n top: -1px;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: -1px;\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n left: ", ";\n top: -1px;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: ", ";\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n right: -1px;\n top: -1px;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n right: -1px;\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n left: ", ";\n top: -1px;\n height: ", "px;\n width: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: ", ";\n position: absolute;\n height: ", "px;\n width: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -1px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n left: ", ";\n bottom: 0;\n height: ", "px;\n width: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: ", ";\n bottom: 0;\n position: absolute;\n height: ", "px;\n width: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n }\n }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2);
|
|
124
129
|
};
|
|
@@ -594,6 +594,7 @@ class TableComponent extends React.Component {
|
|
|
594
594
|
tablePos = undefined;
|
|
595
595
|
}
|
|
596
596
|
const isNested = isTableNested(view.state, tablePos);
|
|
597
|
+
const topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
|
|
597
598
|
return /*#__PURE__*/React.createElement(TableContainer, {
|
|
598
599
|
className: classnames(ClassName.TABLE_CONTAINER, {
|
|
599
600
|
[ClassName.WITH_CONTROLS]: allowControls && tableActive,
|
|
@@ -635,7 +636,8 @@ class TableComponent extends React.Component {
|
|
|
635
636
|
className: `${ClassName.TABLE_LEFT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`,
|
|
636
637
|
style: {
|
|
637
638
|
visibility: showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden',
|
|
638
|
-
top: `${
|
|
639
|
+
top: `${topStickyShadowPosition}px`,
|
|
640
|
+
paddingBottom: `${isDragAndDropEnabled ? '1px' : ''}`
|
|
639
641
|
}
|
|
640
642
|
}), /*#__PURE__*/React.createElement("div", {
|
|
641
643
|
className: classnames(ClassName.TABLE_NODE_WRAPPER),
|
|
@@ -673,7 +675,8 @@ class TableComponent extends React.Component {
|
|
|
673
675
|
className: `${ClassName.TABLE_RIGHT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`,
|
|
674
676
|
style: {
|
|
675
677
|
visibility: showAfterShadow && hasHeaderRow ? 'visible' : 'hidden',
|
|
676
|
-
top: `${
|
|
678
|
+
top: `${topStickyShadowPosition}px`,
|
|
679
|
+
paddingBottom: `${isDragAndDropEnabled ? '1px' : ''}`
|
|
677
680
|
}
|
|
678
681
|
})), /*#__PURE__*/React.createElement("div", {
|
|
679
682
|
className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM,
|
|
@@ -3,6 +3,7 @@ import debounce from 'lodash/debounce';
|
|
|
3
3
|
import throttle from 'lodash/throttle';
|
|
4
4
|
import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
|
|
5
5
|
import { browser } from '@atlaskit/editor-common/utils';
|
|
6
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
6
7
|
import { getPluginState } from '../pm-plugins/plugin-factory';
|
|
7
8
|
import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
|
|
8
9
|
import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
|
|
@@ -12,7 +13,6 @@ import { STICKY_HEADER_TOGGLE_TOLERANCE_MS, stickyHeaderBorderBottomWidth, stick
|
|
|
12
13
|
import { getTop, getTree } from '../utils/dom';
|
|
13
14
|
import { supportedHeaderRow } from '../utils/nodes';
|
|
14
15
|
import TableNodeView from './TableNodeViewBase';
|
|
15
|
-
|
|
16
16
|
// limit scroll event calls
|
|
17
17
|
const HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
|
|
18
18
|
|
|
@@ -26,6 +26,18 @@ export default class TableRow extends TableNodeView {
|
|
|
26
26
|
_defineProperty(this, "focused", false);
|
|
27
27
|
_defineProperty(this, "topPosEditorElement", 0);
|
|
28
28
|
_defineProperty(this, "sentinels", {});
|
|
29
|
+
_defineProperty(this, "sentinelData", {
|
|
30
|
+
top: {
|
|
31
|
+
isIntersecting: false,
|
|
32
|
+
boundingClientRect: null,
|
|
33
|
+
rootBounds: null
|
|
34
|
+
},
|
|
35
|
+
bottom: {
|
|
36
|
+
isIntersecting: false,
|
|
37
|
+
boundingClientRect: null,
|
|
38
|
+
rootBounds: null
|
|
39
|
+
}
|
|
40
|
+
});
|
|
29
41
|
_defineProperty(this, "listening", false);
|
|
30
42
|
_defineProperty(this, "padding", 0);
|
|
31
43
|
_defineProperty(this, "top", 0);
|
|
@@ -232,62 +244,163 @@ export default class TableRow extends TableNodeView {
|
|
|
232
244
|
});
|
|
233
245
|
}
|
|
234
246
|
createIntersectionObserver() {
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
return
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
247
|
+
if (getBooleanFF('platform.editor.table.alternative-sticky-header-logic')) {
|
|
248
|
+
this.intersectionObserver = new IntersectionObserver((entries, _) => {
|
|
249
|
+
var _this$editorScrollabl2, _this$editorScrollabl3;
|
|
250
|
+
// IMPORTANT: please try and avoid using entry.rootBounds it's terribly inconsistent. For example; sometimes it may return
|
|
251
|
+
// 0 height. In safari it will multiply all values by the window scale factor, however chrome & firfox won't.
|
|
252
|
+
// This is why i just get the scroll view bounding rect here and use it, and fallback to the entry.rootBounds if needed.
|
|
253
|
+
const rootBounds = (_this$editorScrollabl2 = this.editorScrollableElement) === null || _this$editorScrollabl2 === void 0 ? void 0 : (_this$editorScrollabl3 = _this$editorScrollabl2.getBoundingClientRect) === null || _this$editorScrollabl3 === void 0 ? void 0 : _this$editorScrollabl3.call(_this$editorScrollabl2);
|
|
254
|
+
entries.forEach(entry => {
|
|
255
|
+
const {
|
|
256
|
+
target,
|
|
257
|
+
isIntersecting,
|
|
258
|
+
boundingClientRect
|
|
259
|
+
} = entry;
|
|
260
|
+
// This observer only every looks at the top/bottom sentinels, we can assume if it's not one then it's the other.
|
|
261
|
+
const targetKey = target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_TOP) ? 'top' : 'bottom';
|
|
262
|
+
// Cache the latest sentinel information
|
|
263
|
+
this.sentinelData[targetKey] = {
|
|
264
|
+
isIntersecting,
|
|
265
|
+
boundingClientRect,
|
|
266
|
+
rootBounds: rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds
|
|
267
|
+
};
|
|
268
|
+
// Keep the other sentinels rootBounds in sync with this latest one
|
|
269
|
+
this.sentinelData[targetKey === 'top' ? 'bottom' : targetKey].rootBounds = rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds;
|
|
270
|
+
});
|
|
271
|
+
this.refreshStickyState();
|
|
272
|
+
}, {
|
|
273
|
+
threshold: 0,
|
|
274
|
+
root: this.editorScrollableElement
|
|
275
|
+
});
|
|
276
|
+
} else {
|
|
277
|
+
this.intersectionObserver = new IntersectionObserver((entries, _) => {
|
|
278
|
+
const tree = getTree(this.dom);
|
|
279
|
+
if (!tree) {
|
|
254
280
|
return;
|
|
255
281
|
}
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
} else {
|
|
264
|
-
table && this.makeRowHeaderNotSticky(table);
|
|
265
|
-
}
|
|
282
|
+
const {
|
|
283
|
+
table
|
|
284
|
+
} = tree;
|
|
285
|
+
if (table.rows.length < 2) {
|
|
286
|
+
// ED-19307 - When there's only one row in a table the top & bottom sentinels become inverted. This creates some nasty visiblity
|
|
287
|
+
// toggling side-effects because the intersection observers gets confused.
|
|
288
|
+
return;
|
|
266
289
|
}
|
|
267
|
-
|
|
268
|
-
var _entry$
|
|
269
|
-
const
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
290
|
+
entries.forEach(entry => {
|
|
291
|
+
var _entry$rootBounds;
|
|
292
|
+
const target = entry.target;
|
|
293
|
+
|
|
294
|
+
// if the rootBounds has 0 height, e.g. confluence preview mode, we do nothing.
|
|
295
|
+
if (((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.height) === 0) {
|
|
296
|
+
return;
|
|
297
|
+
}
|
|
298
|
+
if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_TOP)) {
|
|
299
|
+
var _entry$rootBounds2;
|
|
300
|
+
const sentinelIsBelowScrollArea = (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.bottom) || 0) < entry.boundingClientRect.bottom;
|
|
301
|
+
if (!entry.isIntersecting && !sentinelIsBelowScrollArea) {
|
|
302
|
+
var _entry$rootBounds3;
|
|
303
|
+
tree && this.makeHeaderRowSticky(tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
|
|
304
|
+
this.lastStickyTimestamp = Date.now();
|
|
305
|
+
} else {
|
|
306
|
+
table && this.makeRowHeaderNotSticky(table);
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)) {
|
|
310
|
+
var _entry$rootBounds4;
|
|
311
|
+
const sentinelIsAboveScrollArea = entry.boundingClientRect.top - this.dom.offsetHeight < (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.top) || 0);
|
|
312
|
+
if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
|
|
313
|
+
// Not a perfect solution, but need to this code specific for FireFox ED-19177
|
|
314
|
+
if (browser.gecko) {
|
|
315
|
+
if (this.lastStickyTimestamp && Date.now() - this.lastStickyTimestamp > STICKY_HEADER_TOGGLE_TOLERANCE_MS) {
|
|
316
|
+
this.makeRowHeaderNotSticky(table);
|
|
317
|
+
}
|
|
318
|
+
} else {
|
|
274
319
|
this.makeRowHeaderNotSticky(table);
|
|
275
320
|
}
|
|
276
|
-
} else {
|
|
277
|
-
|
|
321
|
+
} else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
|
|
322
|
+
var _entry$rootBounds5;
|
|
323
|
+
tree && this.makeHeaderRowSticky(tree, entry === null || entry === void 0 ? void 0 : (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
|
|
324
|
+
this.lastStickyTimestamp = Date.now();
|
|
278
325
|
}
|
|
279
|
-
} else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
|
|
280
|
-
var _entry$rootBounds5;
|
|
281
|
-
tree && this.makeHeaderRowSticky(tree, entry === null || entry === void 0 ? void 0 : (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
|
|
282
|
-
this.lastStickyTimestamp = Date.now();
|
|
283
326
|
}
|
|
284
|
-
|
|
285
|
-
|
|
327
|
+
return;
|
|
328
|
+
});
|
|
329
|
+
}, {
|
|
330
|
+
root: this.editorScrollableElement
|
|
286
331
|
});
|
|
287
|
-
}
|
|
288
|
-
root: this.editorScrollableElement
|
|
289
|
-
});
|
|
332
|
+
}
|
|
290
333
|
}
|
|
334
|
+
refreshStickyState() {
|
|
335
|
+
const tree = getTree(this.dom);
|
|
336
|
+
if (!tree) {
|
|
337
|
+
return;
|
|
338
|
+
}
|
|
339
|
+
const {
|
|
340
|
+
table
|
|
341
|
+
} = tree;
|
|
342
|
+
const shouldStick = this.isHeaderSticky();
|
|
343
|
+
if (this.isSticky !== shouldStick) {
|
|
344
|
+
if (shouldStick) {
|
|
345
|
+
var _this$sentinelData$to;
|
|
346
|
+
// The rootRect is kept in sync across sentinels so it doesn't matter which one we use.
|
|
347
|
+
const rootRect = (_this$sentinelData$to = this.sentinelData.top.rootBounds) !== null && _this$sentinelData$to !== void 0 ? _this$sentinelData$to : this.sentinelData.bottom.rootBounds;
|
|
348
|
+
this.makeHeaderRowSticky(tree, rootRect === null || rootRect === void 0 ? void 0 : rootRect.top);
|
|
349
|
+
} else {
|
|
350
|
+
this.makeRowHeaderNotSticky(table);
|
|
351
|
+
}
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
isHeaderSticky() {
|
|
355
|
+
var _sentinelTop$rootBoun;
|
|
356
|
+
/*
|
|
357
|
+
# Overview
|
|
358
|
+
I'm going to list all the view states associated with the sentinels and when they should trigger sticky headers.
|
|
359
|
+
The format of the states are; {top|bottom}:{in|above|below}
|
|
360
|
+
ie sentinel:view-position -- both "above" and "below" are equal to out of the viewport
|
|
361
|
+
For example; "top:in" means top sentinel is within the viewport. "bottom:above" means the bottom sentinel is
|
|
362
|
+
above and out of the viewport
|
|
363
|
+
This will hopefully simplify things and make it easier to determine when sticky should/shouldn't be triggered.
|
|
364
|
+
# States
|
|
365
|
+
top:in / bottom:in - NOT sticky
|
|
366
|
+
top:in / bottom:above - NOT sticky - NOTE: This is an inversion clause
|
|
367
|
+
top:in / bottom:below - NOT sticky
|
|
368
|
+
top:above / bottom:in - STICKY
|
|
369
|
+
top:above / bottom:above - NOT sticky
|
|
370
|
+
top:above / bottom:below - STICKY
|
|
371
|
+
top:below / bottom:in - NOT sticky - NOTE: This is an inversion clause
|
|
372
|
+
top:below / bottom:above - NOT sticky - NOTE: This is an inversion clause
|
|
373
|
+
top:below / bottom:below - NOT sticky
|
|
374
|
+
# Summary
|
|
375
|
+
The only time the header should be sticky is when the top sentinel is above the view and the bottom sentinel
|
|
376
|
+
is in or below it.
|
|
377
|
+
*/
|
|
378
|
+
|
|
379
|
+
const {
|
|
380
|
+
top: sentinelTop,
|
|
381
|
+
bottom: sentinelBottom
|
|
382
|
+
} = this.sentinelData;
|
|
383
|
+
// The rootRect is kept in sync across sentinels so it doesn't matter which one we use.
|
|
384
|
+
const rootBounds = (_sentinelTop$rootBoun = sentinelTop.rootBounds) !== null && _sentinelTop$rootBoun !== void 0 ? _sentinelTop$rootBoun : sentinelBottom.rootBounds;
|
|
385
|
+
if (!rootBounds || !sentinelTop.boundingClientRect || !sentinelBottom.boundingClientRect) {
|
|
386
|
+
return false;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
// Normalize the sentinels to y points
|
|
390
|
+
// Since the sentinels are actually rects 1px high we want make sure we normalise the inner most values closest to the table.
|
|
391
|
+
const sentinelTopY = sentinelTop.boundingClientRect.bottom;
|
|
392
|
+
const sentinelBottomY = sentinelBottom.boundingClientRect.top;
|
|
393
|
+
|
|
394
|
+
// If header row height is more than 50% of viewport height don't do this
|
|
395
|
+
const isRowHeaderTooLarge = this.stickyRowHeight && this.stickyRowHeight > window.innerHeight * 0.5;
|
|
396
|
+
const isTopSentinelAboveScrollArea = !sentinelTop.isIntersecting && sentinelTopY <= rootBounds.top;
|
|
397
|
+
const isBottomSentinelInOrBelowScrollArea = sentinelBottom.isIntersecting || sentinelBottomY > rootBounds.bottom;
|
|
398
|
+
|
|
399
|
+
// This makes sure that the top sentinel is actually above the bottom sentinel, and that they havn't inverted.
|
|
400
|
+
const isTopSentinelAboveBottomSentinel = sentinelTopY < sentinelBottomY;
|
|
401
|
+
return isTopSentinelAboveScrollArea && isBottomSentinelInOrBelowScrollArea && isTopSentinelAboveBottomSentinel && !isRowHeaderTooLarge;
|
|
402
|
+
}
|
|
403
|
+
|
|
291
404
|
/* receive external events */
|
|
292
405
|
|
|
293
406
|
onTablePluginState(state) {
|
|
@@ -383,7 +496,7 @@ export default class TableRow extends TableNodeView {
|
|
|
383
496
|
}
|
|
384
497
|
const domTop = currentTableTop > 0 ? scrollTop : scrollTop + currentTableTop;
|
|
385
498
|
if (!this.isSticky) {
|
|
386
|
-
var _this$
|
|
499
|
+
var _this$editorScrollabl4;
|
|
387
500
|
syncStickyRowToTable(table);
|
|
388
501
|
this.dom.classList.add('sticky');
|
|
389
502
|
table.classList.add(ClassName.TABLE_STICKY);
|
|
@@ -394,7 +507,7 @@ export default class TableRow extends TableNodeView {
|
|
|
394
507
|
* detaches from the table. This typically happens during a fast scroll by the user which causes
|
|
395
508
|
* the intersection observer logic to not fire as expected.
|
|
396
509
|
*/
|
|
397
|
-
(_this$
|
|
510
|
+
(_this$editorScrollabl4 = this.editorScrollableElement) === null || _this$editorScrollabl4 === void 0 ? void 0 : _this$editorScrollabl4.addEventListener('scrollend', this.refireIntersectionObservers, {
|
|
398
511
|
passive: true,
|
|
399
512
|
once: true
|
|
400
513
|
});
|
package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.js
CHANGED
|
@@ -3,7 +3,7 @@ import classnames from 'classnames';
|
|
|
3
3
|
import { injectIntl } from 'react-intl-next';
|
|
4
4
|
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
5
5
|
import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
|
|
6
|
-
import { clearHoverSelection
|
|
6
|
+
import { clearHoverSelection } from '../../../commands';
|
|
7
7
|
import { TableCssClassName as ClassName } from '../../../types';
|
|
8
8
|
const DragCornerControlsComponent = ({
|
|
9
9
|
editorView,
|
|
@@ -19,13 +19,6 @@ const DragCornerControlsComponent = ({
|
|
|
19
19
|
} = editorView;
|
|
20
20
|
dispatch(selectTable(state.tr).setMeta('addToHistory', false));
|
|
21
21
|
};
|
|
22
|
-
const handleMouseOver = () => {
|
|
23
|
-
const {
|
|
24
|
-
state,
|
|
25
|
-
dispatch
|
|
26
|
-
} = editorView;
|
|
27
|
-
hoverTable()(state, dispatch);
|
|
28
|
-
};
|
|
29
22
|
const handleMouseOut = () => {
|
|
30
23
|
const {
|
|
31
24
|
state,
|
|
@@ -51,7 +44,6 @@ const DragCornerControlsComponent = ({
|
|
|
51
44
|
"aria-label": formatMessage(messages.cornerControl),
|
|
52
45
|
type: "button",
|
|
53
46
|
onClick: handleOnClick,
|
|
54
|
-
onMouseOver: handleMouseOver,
|
|
55
47
|
onMouseOut: handleMouseOut,
|
|
56
48
|
contentEditable: false
|
|
57
49
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -27,6 +27,7 @@ const RowDropTarget = ({
|
|
|
27
27
|
!!((_data$indexes = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(index)) === -1
|
|
28
28
|
);
|
|
29
29
|
},
|
|
30
|
+
getIsSticky: () => true,
|
|
30
31
|
getData({
|
|
31
32
|
input,
|
|
32
33
|
element
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { css } from '@emotion/react';
|
|
2
2
|
import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
|
|
3
|
+
import { browser } from '@atlaskit/editor-common/utils';
|
|
3
4
|
import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, relativeFontSizeToBase16, SelectionStyle } from '@atlaskit/editor-shared-styles';
|
|
4
5
|
import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
|
|
5
6
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
@@ -158,6 +159,20 @@ const tableStickyHeaderColumnControlsDecorationsStyle = props => {
|
|
|
158
159
|
`;
|
|
159
160
|
}
|
|
160
161
|
};
|
|
162
|
+
const tableStickyHeaderFirefoxFixStyle = props => {
|
|
163
|
+
/*
|
|
164
|
+
This is MAGIC!
|
|
165
|
+
This fixes a bug which occurs in firefox when the first row becomes sticky.
|
|
166
|
+
see https://product-fabric.atlassian.net/browse/ED-19177
|
|
167
|
+
*/
|
|
168
|
+
if (browser.gecko && getBooleanFF('platform.editor.table.alternative-sticky-header-logic')) {
|
|
169
|
+
return css`
|
|
170
|
+
.${ClassName.TABLE_STICKY} > tbody::before {
|
|
171
|
+
content: '';
|
|
172
|
+
}
|
|
173
|
+
`;
|
|
174
|
+
}
|
|
175
|
+
};
|
|
161
176
|
const tableRowControlStyles = () => {
|
|
162
177
|
return getBooleanFF('platform.editor.table.drag-and-drop') ? css`
|
|
163
178
|
.${ClassName.ROW_CONTROLS_WRAPPER} {
|
|
@@ -311,6 +326,8 @@ export const tableStyles = props => {
|
|
|
311
326
|
|
|
312
327
|
${tableStickyHeaderColumnControlsDecorationsStyle(props)}
|
|
313
328
|
|
|
329
|
+
${tableStickyHeaderFirefoxFixStyle(props)}
|
|
330
|
+
|
|
314
331
|
.${ClassName.TABLE_STICKY}
|
|
315
332
|
.${ClassName.ROW_CONTROLS}
|
|
316
333
|
.${ClassName.ROW_CONTROLS_BUTTON_WRAP}.sticky {
|