@atlaskit/editor-plugin-table 5.3.14 → 5.3.16
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 +14 -0
- package/dist/cjs/plugins/table/event-handlers.js +4 -3
- package/dist/cjs/plugins/table/index.js +2 -1
- package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/plugin.js +1 -0
- package/dist/cjs/plugins/table/types.js +5 -3
- package/dist/cjs/plugins/table/ui/FloatingDragMenu/DragMenu.js +49 -11
- package/dist/cjs/plugins/table/ui/FloatingDragMenu/index.js +5 -2
- package/dist/cjs/plugins/table/ui/FloatingInsertButton/index.js +5 -0
- package/dist/cjs/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js +3 -11
- package/dist/cjs/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/index.js +2 -2
- package/dist/cjs/plugins/table/ui/TableFloatingColumnControls/index.js +1 -1
- package/dist/cjs/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +114 -0
- package/dist/cjs/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.js +60 -0
- package/dist/cjs/plugins/table/ui/TableFloatingControls/CornerControls/index.js +11 -112
- package/dist/cjs/plugins/table/ui/TableFloatingControls/CornerControls/types.js +5 -0
- package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +1 -7
- package/dist/cjs/plugins/table/ui/TableFloatingControls/index.js +7 -2
- package/dist/cjs/plugins/table/ui/common-styles.js +1 -1
- package/dist/cjs/plugins/table/ui/icons/AddColLeftIcon.js +44 -0
- package/dist/cjs/plugins/table/ui/icons/AddColRightIcon.js +44 -0
- package/dist/cjs/plugins/table/ui/icons/AddRowAboveIcon.js +45 -0
- package/dist/cjs/plugins/table/ui/icons/AddRowBelowIcon.js +40 -0
- package/dist/cjs/plugins/table/ui/icons/index.js +29 -1
- package/dist/cjs/plugins/table/ui/messages.js +5 -0
- package/dist/cjs/plugins/table/ui/ui-styles.js +28 -25
- package/dist/cjs/plugins/table/utils/dom.js +16 -7
- package/dist/cjs/plugins/table/utils/drag-menu.js +122 -10
- package/dist/cjs/plugins/table/utils/index.js +12 -6
- package/dist/es2019/plugins/table/event-handlers.js +5 -4
- package/dist/es2019/plugins/table/index.js +2 -1
- package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/plugin.js +2 -1
- package/dist/es2019/plugins/table/types.js +5 -3
- package/dist/es2019/plugins/table/ui/FloatingDragMenu/DragMenu.js +52 -8
- package/dist/es2019/plugins/table/ui/FloatingDragMenu/index.js +5 -2
- package/dist/es2019/plugins/table/ui/FloatingInsertButton/index.js +5 -0
- package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js +3 -11
- package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/index.js +2 -2
- package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/index.js +1 -1
- package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +93 -0
- package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.js +61 -0
- package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/index.js +2 -99
- package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/types.js +1 -0
- package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +1 -7
- package/dist/es2019/plugins/table/ui/TableFloatingControls/index.js +8 -3
- package/dist/es2019/plugins/table/ui/common-styles.js +8 -6
- package/dist/es2019/plugins/table/ui/icons/AddColLeftIcon.js +35 -0
- package/dist/es2019/plugins/table/ui/icons/AddColRightIcon.js +35 -0
- package/dist/es2019/plugins/table/ui/icons/AddRowAboveIcon.js +36 -0
- package/dist/es2019/plugins/table/ui/icons/AddRowBelowIcon.js +31 -0
- package/dist/es2019/plugins/table/ui/icons/index.js +5 -1
- package/dist/es2019/plugins/table/ui/messages.js +5 -0
- package/dist/es2019/plugins/table/ui/ui-styles.js +44 -3
- package/dist/es2019/plugins/table/utils/dom.js +13 -6
- package/dist/es2019/plugins/table/utils/drag-menu.js +118 -8
- package/dist/es2019/plugins/table/utils/index.js +1 -1
- package/dist/esm/plugins/table/event-handlers.js +5 -4
- package/dist/esm/plugins/table/index.js +2 -1
- package/dist/esm/plugins/table/pm-plugins/drag-and-drop/plugin.js +2 -1
- package/dist/esm/plugins/table/types.js +5 -3
- package/dist/esm/plugins/table/ui/FloatingDragMenu/DragMenu.js +46 -8
- package/dist/esm/plugins/table/ui/FloatingDragMenu/index.js +5 -2
- package/dist/esm/plugins/table/ui/FloatingInsertButton/index.js +5 -0
- package/dist/esm/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js +3 -11
- package/dist/esm/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/index.js +2 -2
- package/dist/esm/plugins/table/ui/TableFloatingColumnControls/index.js +1 -1
- package/dist/esm/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +104 -0
- package/dist/esm/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.js +50 -0
- package/dist/esm/plugins/table/ui/TableFloatingControls/CornerControls/index.js +2 -110
- package/dist/esm/plugins/table/ui/TableFloatingControls/CornerControls/types.js +1 -0
- package/dist/esm/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +1 -7
- package/dist/esm/plugins/table/ui/TableFloatingControls/index.js +8 -3
- package/dist/esm/plugins/table/ui/common-styles.js +2 -2
- package/dist/esm/plugins/table/ui/icons/AddColLeftIcon.js +37 -0
- package/dist/esm/plugins/table/ui/icons/AddColRightIcon.js +37 -0
- package/dist/esm/plugins/table/ui/icons/AddRowAboveIcon.js +38 -0
- package/dist/esm/plugins/table/ui/icons/AddRowBelowIcon.js +33 -0
- package/dist/esm/plugins/table/ui/icons/index.js +5 -1
- package/dist/esm/plugins/table/ui/messages.js +5 -0
- package/dist/esm/plugins/table/ui/ui-styles.js +27 -24
- package/dist/esm/plugins/table/utils/dom.js +15 -6
- package/dist/esm/plugins/table/utils/drag-menu.js +120 -8
- package/dist/esm/plugins/table/utils/index.js +1 -1
- package/dist/types/plugins/table/types.d.ts +5 -3
- package/dist/types/plugins/table/ui/FloatingDragMenu/DragMenu.d.ts +5 -2
- package/dist/types/plugins/table/ui/FloatingDragMenu/index.d.ts +3 -1
- package/dist/types/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.d.ts +6 -0
- package/dist/types/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.d.ts +6 -0
- package/dist/types/plugins/table/ui/TableFloatingControls/CornerControls/index.d.ts +2 -16
- package/dist/types/plugins/table/ui/TableFloatingControls/CornerControls/types.d.ts +11 -0
- package/dist/types/plugins/table/ui/icons/AddColLeftIcon.d.ts +2 -0
- package/dist/types/plugins/table/ui/icons/AddColRightIcon.d.ts +2 -0
- package/dist/types/plugins/table/ui/icons/AddRowAboveIcon.d.ts +2 -0
- package/dist/types/plugins/table/ui/icons/AddRowBelowIcon.d.ts +2 -0
- package/dist/types/plugins/table/ui/icons/index.d.ts +4 -0
- package/dist/types/plugins/table/ui/messages.d.ts +5 -0
- package/dist/types/plugins/table/ui/ui-styles.d.ts +1 -0
- package/dist/types/plugins/table/utils/dom.d.ts +3 -2
- package/dist/types/plugins/table/utils/drag-menu.d.ts +6 -3
- package/dist/types/plugins/table/utils/index.d.ts +1 -1
- package/dist/types-ts4.5/plugins/table/types.d.ts +5 -3
- package/dist/types-ts4.5/plugins/table/ui/FloatingDragMenu/DragMenu.d.ts +5 -2
- package/dist/types-ts4.5/plugins/table/ui/FloatingDragMenu/index.d.ts +3 -1
- package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.d.ts +6 -0
- package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.d.ts +6 -0
- package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/CornerControls/index.d.ts +2 -16
- package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/CornerControls/types.d.ts +11 -0
- package/dist/types-ts4.5/plugins/table/ui/icons/AddColLeftIcon.d.ts +2 -0
- package/dist/types-ts4.5/plugins/table/ui/icons/AddColRightIcon.d.ts +2 -0
- package/dist/types-ts4.5/plugins/table/ui/icons/AddRowAboveIcon.d.ts +2 -0
- package/dist/types-ts4.5/plugins/table/ui/icons/AddRowBelowIcon.d.ts +2 -0
- package/dist/types-ts4.5/plugins/table/ui/icons/index.d.ts +4 -0
- package/dist/types-ts4.5/plugins/table/ui/messages.d.ts +5 -0
- package/dist/types-ts4.5/plugins/table/ui/ui-styles.d.ts +1 -0
- package/dist/types-ts4.5/plugins/table/utils/dom.d.ts +3 -2
- package/dist/types-ts4.5/plugins/table/utils/drag-menu.d.ts +6 -3
- package/dist/types-ts4.5/plugins/table/utils/index.d.ts +1 -1
- package/package.json +2 -2
- package/src/plugins/table/event-handlers.ts +7 -2
- package/src/plugins/table/index.tsx +1 -0
- package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts +7 -1
- package/src/plugins/table/types.ts +7 -4
- package/src/plugins/table/ui/FloatingDragMenu/DragMenu.tsx +73 -6
- package/src/plugins/table/ui/FloatingDragMenu/index.tsx +5 -0
- package/src/plugins/table/ui/FloatingInsertButton/index.tsx +8 -0
- package/src/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.tsx +5 -7
- package/src/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/index.tsx +2 -2
- package/src/plugins/table/ui/TableFloatingColumnControls/index.tsx +1 -1
- package/src/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx +107 -0
- package/src/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx +66 -0
- package/src/plugins/table/ui/TableFloatingControls/CornerControls/index.tsx +2 -125
- package/src/plugins/table/ui/TableFloatingControls/CornerControls/types.ts +12 -0
- package/src/plugins/table/ui/TableFloatingControls/RowControls/DragControls.tsx +3 -3
- package/src/plugins/table/ui/TableFloatingControls/index.tsx +22 -14
- package/src/plugins/table/ui/common-styles.ts +8 -5
- package/src/plugins/table/ui/icons/AddColLeftIcon.tsx +43 -0
- package/src/plugins/table/ui/icons/AddColRightIcon.tsx +43 -0
- package/src/plugins/table/ui/icons/AddRowAboveIcon.tsx +42 -0
- package/src/plugins/table/ui/icons/AddRowBelowIcon.tsx +36 -0
- package/src/plugins/table/ui/icons/index.ts +4 -0
- package/src/plugins/table/ui/messages.ts +6 -0
- package/src/plugins/table/ui/ui-styles.ts +45 -3
- package/src/plugins/table/utils/dom.ts +16 -4
- package/src/plugins/table/utils/drag-menu.ts +158 -5
- package/src/plugins/table/utils/index.ts +2 -1
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.rowControlsWrapperDotStyle = exports.resizeHandle = exports.insertRowButtonWrapper = exports.insertLine = exports.insertColumnButtonWrapper = exports.hoveredWarningCell = exports.hoveredDeleteButton = exports.hoveredCell = exports.floatingColumnControls = exports.dragInsertButtonWrapper = exports.columnControlsLineMarker = exports.columnControlsDecoration = exports.OverflowShadow = exports.InsertMarker = exports.HeaderButtonHover = exports.HeaderButtonDanger = exports.HeaderButton = exports.DeleteButton = void 0;
|
|
7
|
+
exports.rowControlsWrapperDotStyle = exports.resizeHandle = exports.insertRowButtonWrapper = exports.insertLine = exports.insertColumnButtonWrapper = exports.hoveredWarningCell = exports.hoveredDeleteButton = exports.hoveredCell = exports.floatingColumnControls = exports.dragInsertButtonWrapper = exports.dragCornerControlButton = exports.columnControlsLineMarker = exports.columnControlsDecoration = exports.OverflowShadow = exports.InsertMarker = exports.HeaderButtonHover = exports.HeaderButtonDanger = exports.HeaderButton = exports.DeleteButton = void 0;
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
@@ -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;
|
|
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;
|
|
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
|
};
|
|
@@ -43,74 +43,77 @@ var InsertButtonHover = function InsertButtonHover() {
|
|
|
43
43
|
return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n .", ":hover {\n background: ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-icon-inverse, white)");
|
|
44
44
|
};
|
|
45
45
|
var dragInsertButtonWrapper = exports.dragInsertButtonWrapper = function dragInsertButtonWrapper(props) {
|
|
46
|
-
return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n position: absolute;\n z-index: ", ";\n bottom: -5px;\n left: 3px;\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, 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 ")), _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)");
|
|
46
|
+
return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n position: absolute;\n z-index: ", ";\n bottom: -5px;\n left: 3px;\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, 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 ")), _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
|
+
};
|
|
48
|
+
var dragCornerControlButton = exports.dragCornerControlButton = function dragCornerControlButton(props) {
|
|
49
|
+
return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n width: 12px;\n height: 12px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: ", ";\n left: ", ";\n background-color: ", ";\n border-radius: 50%;\n border: none;\n padding: 0;\n outline: none;\n z-index: ", ";\n\n &.active .", " {\n background-color: ", ";\n border-color: ", ";\n }\n\n &:hover {\n cursor: pointer;\n\n .", " {\n border-color: ", ";\n }\n }\n }\n\n .", " {\n border: 1px solid\n ", ";\n border-radius: 50%;\n width: 6px;\n height: 6px;\n }\n"])), _types.TableCssClassName.DRAG_CORNER_BUTTON, "var(--ds-space-negative-075, -6px)", "var(--ds-space-075, 6px)", "var(--ds-surface, #FFF)", _editorSharedStyles.akEditorUnitZIndex * 99, _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-selected, #0C66E4)", "var(--ds-border-selected, #0C66E4)", _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-selected, #0C66E4)", _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-background-accent-gray-subtler, #DCDFE4)");
|
|
47
50
|
};
|
|
48
51
|
var insertColumnButtonWrapper = exports.insertColumnButtonWrapper = function insertColumnButtonWrapper(props) {
|
|
49
|
-
return (0, _react.css)(
|
|
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 "));
|
|
50
53
|
};
|
|
51
54
|
var insertRowButtonWrapper = exports.insertRowButtonWrapper = function insertRowButtonWrapper(props) {
|
|
52
|
-
return (0, _react.css)(
|
|
55
|
+
return (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", "\n ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine(props, "\n height: 2px;\n top: -11px;\n left: ".concat(_consts.tableInsertColumnButtonSize - 1, "px;\n ")));
|
|
53
56
|
};
|
|
54
57
|
var columnControlsLineMarker = exports.columnControlsLineMarker = function columnControlsLineMarker() {
|
|
55
|
-
return (0, _react.css)(
|
|
58
|
+
return (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n .", ".", "\n table\n tr:first-of-type\n td,\n .", ".", "\n table\n tr:first-of-type\n th {\n position: relative;\n }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS);
|
|
56
59
|
};
|
|
57
60
|
var DeleteButton = exports.DeleteButton = function DeleteButton(props) {
|
|
58
|
-
return (0, _react.css)(
|
|
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));
|
|
59
62
|
};
|
|
60
63
|
var OverflowShadow = exports.OverflowShadow = function OverflowShadow(props) {
|
|
61
|
-
return (0, _react.css)(
|
|
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 height: calc(100% - ", "px);\n top: ", "px;\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, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTopWithControl, _styles.tableMarginTopWithControl, _types.TableCssClassName.TABLE_LEFT_SHADOW, (0, _consts.tableBorderColor)(props));
|
|
62
65
|
};
|
|
63
66
|
var columnHeaderButton = function columnHeaderButton(props, cssString) {
|
|
64
67
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.column-controls-styles-updated')) {
|
|
65
|
-
return (0, _react.css)(
|
|
68
|
+
return (0, _react.css)(_templateObject17 || (_templateObject17 = (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);
|
|
66
69
|
} else {
|
|
67
|
-
return (0, _react.css)(
|
|
70
|
+
return (0, _react.css)(_templateObject18 || (_templateObject18 = (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);
|
|
68
71
|
}
|
|
69
72
|
};
|
|
70
73
|
var columnHeaderButtonSelected = function columnHeaderButtonSelected(props) {
|
|
71
|
-
return (0, _react.css)(
|
|
74
|
+
return (0, _react.css)(_templateObject19 || (_templateObject19 = (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);
|
|
72
75
|
};
|
|
73
76
|
var getFloatingDotOverrides = function getFloatingDotOverrides(props) {
|
|
74
|
-
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(
|
|
77
|
+
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(_templateObject20 || (_templateObject20 = (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)") : '';
|
|
75
78
|
};
|
|
76
79
|
var floatingColumnControls = exports.floatingColumnControls = function floatingColumnControls(props) {
|
|
77
|
-
return (0, _react.css)(
|
|
80
|
+
return (0, _react.css)(_templateObject21 || (_templateObject21 = (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);
|
|
78
81
|
};
|
|
79
82
|
var rowControlsWrapperDotStyle = exports.rowControlsWrapperDotStyle = function rowControlsWrapperDotStyle(props) {
|
|
80
83
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop')) {
|
|
81
|
-
return (0, _react.css)(
|
|
84
|
+
return (0, _react.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n div.", ">.", "::after {\n display: none;\n }\n "])), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER);
|
|
82
85
|
} else {
|
|
83
|
-
return (0, _react.css)(
|
|
86
|
+
return (0, _react.css)(_templateObject23 || (_templateObject23 = (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);
|
|
84
87
|
}
|
|
85
88
|
};
|
|
86
89
|
var columnControlsDecoration = exports.columnControlsDecoration = function columnControlsDecoration(props) {
|
|
87
90
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.column-controls-styles-updated')) {
|
|
88
|
-
return (0, _react.css)(
|
|
91
|
+
return (0, _react.css)(_templateObject24 || (_templateObject24 = (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));
|
|
89
92
|
} else {
|
|
90
|
-
return (0, _react.css)(
|
|
93
|
+
return (0, _react.css)(_templateObject25 || (_templateObject25 = (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));
|
|
91
94
|
}
|
|
92
95
|
};
|
|
93
96
|
var hoveredDeleteButton = exports.hoveredDeleteButton = function hoveredDeleteButton(props) {
|
|
94
|
-
return (0, _react.css)(
|
|
97
|
+
return (0, _react.css)(_templateObject26 || (_templateObject26 = (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));
|
|
95
98
|
};
|
|
96
99
|
var hoveredCell = exports.hoveredCell = function hoveredCell(props) {
|
|
97
|
-
return (0, _react.css)(
|
|
100
|
+
return (0, _react.css)(_templateObject27 || (_templateObject27 = (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));
|
|
98
101
|
};
|
|
99
|
-
var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(
|
|
102
|
+
var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(_templateObject28 || (_templateObject28 = (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, ")"));
|
|
100
103
|
|
|
101
104
|
// move the resize handle zone completely inside the table cell to avoid overflow
|
|
102
105
|
var getLastColumnResizerOverrides = function getLastColumnResizerOverrides() {
|
|
103
|
-
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(
|
|
106
|
+
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(_templateObject29 || (_templateObject29 = (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) : '';
|
|
104
107
|
};
|
|
105
108
|
var resizeHandleOverrides = function resizeHandleOverrides(props) {
|
|
106
109
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop')) {
|
|
107
|
-
return (0, _react.css)(
|
|
110
|
+
return (0, _react.css)(_templateObject30 || (_templateObject30 = (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);
|
|
108
111
|
}
|
|
109
|
-
return (0, _react.css)(
|
|
112
|
+
return (0, _react.css)(_templateObject31 || (_templateObject31 = (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);
|
|
110
113
|
};
|
|
111
114
|
var resizeHandle = exports.resizeHandle = function resizeHandle(props) {
|
|
112
|
-
return (0, _react.css)(
|
|
115
|
+
return (0, _react.css)(_templateObject32 || (_templateObject32 = (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);
|
|
113
116
|
};
|
|
114
117
|
var insertLine = exports.insertLine = function insertLine(props) {
|
|
115
|
-
return (0, _react.css)(
|
|
118
|
+
return (0, _react.css)(_templateObject33 || (_templateObject33 = (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);
|
|
116
119
|
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.updateResizeHandles = exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.
|
|
6
|
+
exports.updateResizeHandles = exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isDragRowFloatingInsertDot = exports.isDragRowControlsButton = exports.isDragCornerButton = exports.isDragColumnFloatingInsertDot = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getTree = exports.getTop = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getColumnOrRowIndex = void 0;
|
|
7
7
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
8
8
|
var _types = require("../types");
|
|
9
9
|
var _consts = require("../ui/consts");
|
|
@@ -37,7 +37,7 @@ var isTableContainerOrWrapper = exports.isTableContainerOrWrapper = function isT
|
|
|
37
37
|
};
|
|
38
38
|
|
|
39
39
|
/** drag-and-drop classes */
|
|
40
|
-
var
|
|
40
|
+
var isDragRowControlsButton = exports.isDragRowControlsButton = function isDragRowControlsButton(node) {
|
|
41
41
|
return (0, _utils.containsClassName)(node, _types.TableCssClassName.DRAG_ROW_CONTROLS) || (0, _utils.closestElement)(node, ".".concat(_types.TableCssClassName.DRAG_ROW_CONTROLS));
|
|
42
42
|
};
|
|
43
43
|
var isDragRowFloatingInsertDot = exports.isDragRowFloatingInsertDot = function isDragRowFloatingInsertDot(node) {
|
|
@@ -46,6 +46,9 @@ var isDragRowFloatingInsertDot = exports.isDragRowFloatingInsertDot = function i
|
|
|
46
46
|
var isDragColumnFloatingInsertDot = exports.isDragColumnFloatingInsertDot = function isDragColumnFloatingInsertDot(node) {
|
|
47
47
|
return (0, _utils.containsClassName)(node, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER);
|
|
48
48
|
};
|
|
49
|
+
var isDragCornerButton = exports.isDragCornerButton = function isDragCornerButton(node) {
|
|
50
|
+
return (0, _utils.containsClassName)(node, _types.TableCssClassName.DRAG_CORNER_BUTTON) || (0, _utils.containsClassName)(node, _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER);
|
|
51
|
+
};
|
|
49
52
|
|
|
50
53
|
/*
|
|
51
54
|
* This function returns which side of a given element the mouse cursor is,
|
|
@@ -101,14 +104,20 @@ var isDragColumnFloatingInsertDot = exports.isDragColumnFloatingInsertDot = func
|
|
|
101
104
|
* the same is valid to the right side.
|
|
102
105
|
*/
|
|
103
106
|
|
|
104
|
-
var getMousePositionHorizontalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = function getMousePositionHorizontalRelativeByElement(mouseEvent, elementContentRects, gapInPixels) {
|
|
107
|
+
var getMousePositionHorizontalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = function getMousePositionHorizontalRelativeByElement(mouseEvent, elementContentRects, gapInPixels, isDragAndDropEnabled) {
|
|
105
108
|
var element = mouseEvent.target;
|
|
106
109
|
if (element instanceof HTMLElement) {
|
|
107
|
-
var _closestCell$id, _elementContentRects$, _elementContentRects$2;
|
|
108
110
|
var width, x;
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
111
|
+
if (isDragAndDropEnabled) {
|
|
112
|
+
// mouse event fires for new overlapping column controls, so the cell can not get detected. Get width
|
|
113
|
+
// directly from element that will be .pm-table-drag-columns-floating-insert-dot-wrapper
|
|
114
|
+
width = element.clientWidth;
|
|
115
|
+
} else {
|
|
116
|
+
var _closestCell$id, _elementContentRects$, _elementContentRects$2;
|
|
117
|
+
var closestCell = element.closest(SELECTOR_TABLE_LEAFS);
|
|
118
|
+
var id = (_closestCell$id = closestCell === null || closestCell === void 0 ? void 0 : closestCell.id) !== null && _closestCell$id !== void 0 ? _closestCell$id : '';
|
|
119
|
+
width = (_elementContentRects$ = elementContentRects === null || elementContentRects === void 0 || (_elementContentRects$2 = elementContentRects[id]) === null || _elementContentRects$2 === void 0 ? void 0 : _elementContentRects$2.width) !== null && _elementContentRects$ !== void 0 ? _elementContentRects$ : 0;
|
|
120
|
+
}
|
|
112
121
|
x = mouseEvent.offsetX;
|
|
113
122
|
if (width <= 0) {
|
|
114
123
|
return null;
|
|
@@ -6,7 +6,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.getDragMenuConfig = void 0;
|
|
8
8
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
|
-
var
|
|
9
|
+
var _customSteps = require("@atlaskit/custom-steps");
|
|
10
|
+
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
11
|
+
var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-down"));
|
|
12
|
+
var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left"));
|
|
13
|
+
var _arrowRight = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-right"));
|
|
14
|
+
var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-up"));
|
|
15
|
+
var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
|
|
16
|
+
var _layoutThreeEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-three-equal"));
|
|
17
|
+
var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
|
|
18
|
+
var _chevronDoubleDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-double-down"));
|
|
19
|
+
var _chevronDoubleUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-double-up"));
|
|
20
|
+
var _commands = require("../commands");
|
|
21
|
+
var _delete = require("../commands/delete");
|
|
22
|
+
var _commands2 = require("../pm-plugins/drag-and-drop/commands");
|
|
23
|
+
var _transforms = require("../transforms");
|
|
24
|
+
var _icons = require("../ui/icons");
|
|
10
25
|
var canDecrease = function canDecrease(index) {
|
|
11
26
|
var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
12
27
|
return index !== undefined && index > min;
|
|
@@ -15,45 +30,142 @@ var canIncrease = function canIncrease(index) {
|
|
|
15
30
|
var max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
16
31
|
return index !== undefined && index < max;
|
|
17
32
|
};
|
|
18
|
-
var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, tableMap, index) {
|
|
33
|
+
var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, tableMap, index, targetCellPosition, selectionRect) {
|
|
34
|
+
var addOptions = direction === 'row' ? [{
|
|
35
|
+
label: 'above',
|
|
36
|
+
offset: 0,
|
|
37
|
+
icon: _icons.AddRowAboveIcon,
|
|
38
|
+
keymap: _keymaps.addRowBefore
|
|
39
|
+
}, {
|
|
40
|
+
label: 'below',
|
|
41
|
+
offset: 1,
|
|
42
|
+
icon: _icons.AddRowBelowIcon,
|
|
43
|
+
keymap: _keymaps.addRowAfter
|
|
44
|
+
}] : [{
|
|
45
|
+
label: 'left',
|
|
46
|
+
offset: 0,
|
|
47
|
+
icon: _icons.AddColLeftIcon,
|
|
48
|
+
keymap: _keymaps.addColumnBefore
|
|
49
|
+
}, {
|
|
50
|
+
label: 'right',
|
|
51
|
+
offset: 1,
|
|
52
|
+
icon: _icons.AddColRightIcon,
|
|
53
|
+
keymap: _keymaps.addColumnAfter
|
|
54
|
+
}];
|
|
19
55
|
var moveOptions = direction === 'row' ? [{
|
|
20
56
|
label: 'up',
|
|
21
57
|
offset: -1,
|
|
22
|
-
canMove: canDecrease
|
|
58
|
+
canMove: canDecrease,
|
|
59
|
+
icon: _arrowUp.default
|
|
23
60
|
}, {
|
|
24
61
|
label: 'down',
|
|
25
62
|
offset: 1,
|
|
26
63
|
canMove: function canMove(index) {
|
|
27
64
|
var _tableMap$height;
|
|
28
65
|
return canIncrease(index, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
|
|
29
|
-
}
|
|
66
|
+
},
|
|
67
|
+
icon: _arrowDown.default
|
|
30
68
|
}] : [{
|
|
31
69
|
label: 'left',
|
|
32
70
|
offset: -1,
|
|
33
|
-
canMove: canDecrease
|
|
71
|
+
canMove: canDecrease,
|
|
72
|
+
icon: _arrowLeft.default
|
|
34
73
|
}, {
|
|
35
74
|
label: 'right',
|
|
36
75
|
offset: 1,
|
|
37
76
|
canMove: function canMove(index) {
|
|
38
77
|
var _tableMap$width;
|
|
39
78
|
return canIncrease(index, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
|
|
40
|
-
}
|
|
79
|
+
},
|
|
80
|
+
icon: _arrowRight.default
|
|
41
81
|
}];
|
|
42
|
-
|
|
82
|
+
var sortOptions = direction === 'column' ? [{
|
|
83
|
+
label: 'increasing',
|
|
84
|
+
order: _customSteps.TableSortOrder.ASC,
|
|
85
|
+
icon: _chevronDoubleUp.default
|
|
86
|
+
}, {
|
|
87
|
+
label: 'decreasing',
|
|
88
|
+
order: _customSteps.TableSortOrder.DESC,
|
|
89
|
+
icon: _chevronDoubleDown.default
|
|
90
|
+
}] : [];
|
|
91
|
+
return [].concat((0, _toConsumableArray2.default)(addOptions.map(function (_ref) {
|
|
43
92
|
var label = _ref.label,
|
|
44
93
|
offset = _ref.offset,
|
|
45
|
-
|
|
94
|
+
icon = _ref.icon,
|
|
95
|
+
keymap = _ref.keymap;
|
|
96
|
+
return {
|
|
97
|
+
id: "add_".concat(direction, "_").concat(label),
|
|
98
|
+
title: "Add ".concat(direction, " ").concat(label),
|
|
99
|
+
icon: icon,
|
|
100
|
+
onClick: function onClick(state, dispatch) {
|
|
101
|
+
if (direction === 'row') {
|
|
102
|
+
(0, _commands.insertRow)(index + offset, true)(state, dispatch);
|
|
103
|
+
} else {
|
|
104
|
+
(0, _commands.insertColumn)(getEditorContainerWidth)(index + offset)(state, dispatch);
|
|
105
|
+
}
|
|
106
|
+
return true;
|
|
107
|
+
},
|
|
108
|
+
keymap: keymap && (0, _keymaps.tooltip)(keymap)
|
|
109
|
+
};
|
|
110
|
+
})), [direction === 'column' ? {
|
|
111
|
+
id: 'distribute_columns',
|
|
112
|
+
title: 'Distribute columns',
|
|
113
|
+
disabled: true,
|
|
114
|
+
onClick: function onClick() {
|
|
115
|
+
return false;
|
|
116
|
+
},
|
|
117
|
+
icon: _layoutThreeEqual.default
|
|
118
|
+
} : undefined, {
|
|
119
|
+
id: 'clear_cells',
|
|
120
|
+
title: 'Clear cells',
|
|
121
|
+
onClick: function onClick(state, dispatch) {
|
|
122
|
+
(0, _commands.clearMultipleCells)(targetCellPosition)(state, dispatch);
|
|
123
|
+
return true;
|
|
124
|
+
},
|
|
125
|
+
icon: _crossCircle.default,
|
|
126
|
+
keymap: (0, _keymaps.tooltip)(_keymaps.backspace)
|
|
127
|
+
}, {
|
|
128
|
+
id: "delete_".concat(direction),
|
|
129
|
+
title: "Delete ".concat(direction),
|
|
130
|
+
onClick: function onClick(state, dispatch) {
|
|
131
|
+
if (direction === 'row') {
|
|
132
|
+
dispatch === null || dispatch === void 0 || dispatch((0, _transforms.deleteRows)(selectionRect, false)(state.tr));
|
|
133
|
+
} else {
|
|
134
|
+
(0, _delete.deleteColumnsCommand)(selectionRect)(state, dispatch);
|
|
135
|
+
}
|
|
136
|
+
return true;
|
|
137
|
+
},
|
|
138
|
+
icon: _remove.default
|
|
139
|
+
}], (0, _toConsumableArray2.default)(moveOptions.map(function (_ref2) {
|
|
140
|
+
var label = _ref2.label,
|
|
141
|
+
offset = _ref2.offset,
|
|
142
|
+
canMove = _ref2.canMove,
|
|
143
|
+
icon = _ref2.icon;
|
|
46
144
|
return {
|
|
47
145
|
id: "move_".concat(direction, "_").concat(label),
|
|
48
146
|
title: "Move ".concat(direction, " ").concat(label),
|
|
49
147
|
disabled: !canMove(index),
|
|
148
|
+
icon: icon,
|
|
50
149
|
onClick: function onClick(state, dispatch) {
|
|
51
150
|
if (canMove(index)) {
|
|
52
|
-
(0,
|
|
151
|
+
(0, _commands2.moveSource)("table-".concat(direction), index, index + offset)(state, dispatch);
|
|
53
152
|
return true;
|
|
54
153
|
}
|
|
55
154
|
return false;
|
|
56
155
|
}
|
|
57
156
|
};
|
|
58
|
-
}))
|
|
157
|
+
})), (0, _toConsumableArray2.default)(sortOptions.map(function (_ref3) {
|
|
158
|
+
var label = _ref3.label,
|
|
159
|
+
order = _ref3.order,
|
|
160
|
+
icon = _ref3.icon;
|
|
161
|
+
return {
|
|
162
|
+
id: "sort_column_".concat(order),
|
|
163
|
+
title: "Sort ".concat(label),
|
|
164
|
+
icon: icon,
|
|
165
|
+
onClick: function onClick(state, dispatch) {
|
|
166
|
+
(0, _commands.sortByColumn)(index, order)(state, dispatch);
|
|
167
|
+
return true;
|
|
168
|
+
}
|
|
169
|
+
};
|
|
170
|
+
}))).filter(Boolean);
|
|
59
171
|
};
|
|
@@ -243,6 +243,18 @@ Object.defineProperty(exports, "isDragColumnFloatingInsertDot", {
|
|
|
243
243
|
return _dom.isDragColumnFloatingInsertDot;
|
|
244
244
|
}
|
|
245
245
|
});
|
|
246
|
+
Object.defineProperty(exports, "isDragCornerButton", {
|
|
247
|
+
enumerable: true,
|
|
248
|
+
get: function get() {
|
|
249
|
+
return _dom.isDragCornerButton;
|
|
250
|
+
}
|
|
251
|
+
});
|
|
252
|
+
Object.defineProperty(exports, "isDragRowControlsButton", {
|
|
253
|
+
enumerable: true,
|
|
254
|
+
get: function get() {
|
|
255
|
+
return _dom.isDragRowControlsButton;
|
|
256
|
+
}
|
|
257
|
+
});
|
|
246
258
|
Object.defineProperty(exports, "isDragRowFloatingInsertDot", {
|
|
247
259
|
enumerable: true,
|
|
248
260
|
get: function get() {
|
|
@@ -285,12 +297,6 @@ Object.defineProperty(exports, "isRowDeleteButtonVisible", {
|
|
|
285
297
|
return _rowControls.isRowDeleteButtonVisible;
|
|
286
298
|
}
|
|
287
299
|
});
|
|
288
|
-
Object.defineProperty(exports, "isRowDragControlsButton", {
|
|
289
|
-
enumerable: true,
|
|
290
|
-
get: function get() {
|
|
291
|
-
return _dom.isRowDragControlsButton;
|
|
292
|
-
}
|
|
293
|
-
});
|
|
294
300
|
Object.defineProperty(exports, "isSelectionUpdated", {
|
|
295
301
|
enumerable: true,
|
|
296
302
|
get: function get() {
|
|
@@ -9,7 +9,7 @@ import { getPluginState } from './pm-plugins/plugin-factory';
|
|
|
9
9
|
import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
|
|
10
10
|
import { deleteColumns, deleteRows } from './transforms';
|
|
11
11
|
import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
|
|
12
|
-
import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
|
|
12
|
+
import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
|
|
13
13
|
import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
|
|
14
14
|
const isFocusingCalendar = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
|
|
15
15
|
const isFocusingModal = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="dialog"]');
|
|
@@ -132,7 +132,7 @@ export const handleMouseOver = (view, mouseEvent) => {
|
|
|
132
132
|
// Ignore any `mousedown` `event` from control and numbered column buttons
|
|
133
133
|
// PM end up changing selection during shift selection if not prevented
|
|
134
134
|
export const handleMouseDown = (_, event) => {
|
|
135
|
-
const isControl = !!(event.target && event.target instanceof HTMLElement && (isTableContainerOrWrapper(event.target) || isColumnControlsDecorations(event.target) || isRowControlsButton(event.target)));
|
|
135
|
+
const isControl = !!(event.target && event.target instanceof HTMLElement && (isTableContainerOrWrapper(event.target) || isColumnControlsDecorations(event.target) || isRowControlsButton(event.target) || isDragCornerButton(event.target)));
|
|
136
136
|
if (isControl) {
|
|
137
137
|
event.preventDefault();
|
|
138
138
|
}
|
|
@@ -198,10 +198,11 @@ export const handleMouseMove = (view, event, elementContentRects) => {
|
|
|
198
198
|
dispatch
|
|
199
199
|
} = view;
|
|
200
200
|
const {
|
|
201
|
-
insertColumnButtonIndex
|
|
201
|
+
insertColumnButtonIndex,
|
|
202
|
+
isDragAndDropEnabled
|
|
202
203
|
} = getPluginState(state);
|
|
203
204
|
const [startIndex, endIndex] = getColumnOrRowIndex(element);
|
|
204
|
-
const positionColumn = getMousePositionHorizontalRelativeByElement(event, elementContentRects) === 'right' ? endIndex : startIndex;
|
|
205
|
+
const positionColumn = getMousePositionHorizontalRelativeByElement(event, elementContentRects, undefined, isDragAndDropEnabled) === 'right' ? endIndex : startIndex;
|
|
205
206
|
if (positionColumn !== insertColumnButtonIndex) {
|
|
206
207
|
return showInsertColumnButton(positionColumn)(state, dispatch);
|
|
207
208
|
}
|
|
@@ -329,7 +329,8 @@ const tablesPlugin = ({
|
|
|
329
329
|
targetCellPosition: targetCellPosition,
|
|
330
330
|
direction: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
|
|
331
331
|
index: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
|
|
332
|
-
isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing
|
|
332
|
+
isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing,
|
|
333
|
+
getEditorContainerWidth: defaultGetEditorContainerWidth
|
|
333
334
|
}), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
|
|
334
335
|
editorView: editorView,
|
|
335
336
|
selection: editorView.state.selection,
|
|
@@ -6,7 +6,7 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/el
|
|
|
6
6
|
import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils/merged-cells';
|
|
7
7
|
import { getPluginState as getTablePluginState } from '../plugin-factory';
|
|
8
8
|
import { DragAndDropActionType } from './actions';
|
|
9
|
-
import { clearDropTarget, moveSource, setDropTarget } from './commands';
|
|
9
|
+
import { clearDropTarget, moveSource, setDropTarget, toggleDragMenu } from './commands';
|
|
10
10
|
import { DropTargetType } from './consts';
|
|
11
11
|
import { createPluginState, getPluginState } from './plugin-factory';
|
|
12
12
|
import { pluginKey } from './plugin-key';
|
|
@@ -90,6 +90,7 @@ export const createPlugin = (dispatch, eventDispatcher) => {
|
|
|
90
90
|
autoScroller.start({
|
|
91
91
|
input: location.current.input
|
|
92
92
|
});
|
|
93
|
+
toggleDragMenu(false)(editorView.state, editorView.dispatch);
|
|
93
94
|
},
|
|
94
95
|
onDrag(event) {
|
|
95
96
|
autoScroller.updateInput({
|
|
@@ -50,9 +50,6 @@ export const TableCssClassName = {
|
|
|
50
50
|
COLUMN_CONTROLS: `${tablePrefixSelector}-column-controls`,
|
|
51
51
|
COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
|
|
52
52
|
COLUMN_SELECTED: `${tablePrefixSelector}-column__selected`,
|
|
53
|
-
COLUMN_CONTROLS_WRAPPER: `${tablePrefixSelector}-col-controls-wrapper`,
|
|
54
|
-
COLUMN_DROP_TARGET_CONTROLS: `${tablePrefixSelector}-col-drop-target-controls`,
|
|
55
|
-
COLUMN_CONTROLS_INNER: `${tablePrefixSelector}-col-controls__inner`,
|
|
56
53
|
ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-row-controls-wrapper`,
|
|
57
54
|
ROW_CONTROLS: `${tablePrefixSelector}-row-controls`,
|
|
58
55
|
ROW_CONTROLS_INNER: `${tablePrefixSelector}-row-controls__inner`,
|
|
@@ -87,7 +84,12 @@ export const TableCssClassName = {
|
|
|
87
84
|
DRAG_COLUMN_CONTROLS: `${tablePrefixSelector}-drag-column-controls`,
|
|
88
85
|
DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-columns-floating-insert-dot-wrapper`,
|
|
89
86
|
DRAG_COLUMN_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-columns-floating-insert-dot`,
|
|
87
|
+
DRAG_COLUMN_CONTROLS_WRAPPER: `${tablePrefixSelector}-col-controls-wrapper`,
|
|
88
|
+
DRAG_COLUMN_DROP_TARGET_CONTROLS: `${tablePrefixSelector}-col-drop-target-controls`,
|
|
89
|
+
DRAG_COLUMN_CONTROLS_INNER: `${tablePrefixSelector}-col-controls__inner`,
|
|
90
90
|
DRAG_HANDLE_BUTTON_CONTAINER: `${tablePrefixSelector}-drag-handle-button-container`,
|
|
91
|
+
DRAG_CORNER_BUTTON: `${tablePrefixSelector}-drag-corner-button`,
|
|
92
|
+
DRAG_CORNER_BUTTON_INNER: `${tablePrefixSelector}-drag-corner-button-inner`,
|
|
91
93
|
/** Other classes */
|
|
92
94
|
NUMBERED_COLUMN: `${tablePrefixSelector}-numbered-column`,
|
|
93
95
|
NUMBERED_COLUMN_BUTTON: `${tablePrefixSelector}-numbered-column__button`,
|