@flozy/editor 4.9.1 → 4.9.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. package/dist/Editor/Editor.css +17 -4
  2. package/dist/Editor/Elements/AI/CustomSelect.js +17 -10
  3. package/dist/Editor/Elements/AI/Styles.js +7 -1
  4. package/dist/Editor/Elements/Embed/Video.js +3 -2
  5. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +1 -1
  6. package/dist/Editor/Elements/Grid/GridItem.js +28 -9
  7. package/dist/Editor/Elements/Grid/Styles.js +1 -0
  8. package/dist/Editor/Elements/Search/SearchAttachment.js +27 -18
  9. package/dist/Editor/Elements/Search/SearchButton.js +66 -9
  10. package/dist/Editor/Elements/Search/SearchList.js +87 -75
  11. package/dist/Editor/Elements/Table/AddRowCol.js +76 -0
  12. package/dist/Editor/Elements/Table/DragButton.js +134 -0
  13. package/dist/Editor/Elements/Table/DragStyles.js +43 -0
  14. package/dist/Editor/Elements/Table/Draggable.js +25 -0
  15. package/dist/Editor/Elements/Table/Droppable.js +53 -0
  16. package/dist/Editor/Elements/Table/Styles.js +23 -41
  17. package/dist/Editor/Elements/Table/Table.js +185 -137
  18. package/dist/Editor/Elements/Table/TableCell.js +339 -101
  19. package/dist/Editor/Elements/Table/TablePopup.js +9 -3
  20. package/dist/Editor/Elements/Table/TableRow.js +10 -2
  21. package/dist/Editor/Elements/Table/TableTool.js +101 -0
  22. package/dist/Editor/Toolbar/PopupTool/index.js +6 -8
  23. package/dist/Editor/assets/svg/DocsIcon.js +77 -10
  24. package/dist/Editor/assets/svg/TableIcons.js +220 -0
  25. package/dist/Editor/assets/svg/UserIcon.js +2 -2
  26. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +27 -38
  27. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +1 -1
  28. package/dist/Editor/common/StyleBuilder/index.js +43 -57
  29. package/dist/Editor/common/StyleBuilder/tableStyle.js +92 -1
  30. package/dist/Editor/common/iconListV2.js +52 -0
  31. package/dist/Editor/hooks/useTable.js +164 -0
  32. package/dist/Editor/utils/helper.js +1 -1
  33. package/dist/Editor/utils/table.js +204 -21
  34. package/package.json +1 -1
@@ -1,12 +1,16 @@
1
1
  import React, { useState, useEffect } from "react";
2
- import { Editor, Element, Transforms } from "slate";
3
- import { Box, MenuItem, Popper, Typography } from "@mui/material";
2
+ import { Editor, Element, Path, Transforms } from "slate";
3
+ import { Box } from "@mui/material";
4
4
  import { useSlateStatic, ReactEditor } from "slate-react";
5
5
  import useTableResize from "../../utils/customHooks/useTableResize";
6
6
  import { TableUtil } from "../../utils/table";
7
7
  import TableStyles from "./Styles";
8
- import { useEditorSelection } from "../../hooks/useMouseMove";
9
- import useClickOutside from "../../hooks/useClickOutside";
8
+ import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
9
+ import useTable, { getDefaultTableSelection } from "../../hooks/useTable";
10
+ import DragButton from "./DragButton";
11
+ import TablePopup from "./TablePopup";
12
+ import { Droppable } from "./Droppable";
13
+ import { useDndContext } from "@dnd-kit/core";
10
14
  import { jsx as _jsx } from "react/jsx-runtime";
11
15
  import { Fragment as _Fragment } from "react/jsx-runtime";
12
16
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -28,9 +32,14 @@ const Resizer = ({
28
32
  })
29
33
  });
30
34
  };
35
+ const isCellEditable = (startCellPath, path) => {
36
+ return startCellPath?.length && startCellPath?.toString() === path?.toString();
37
+ };
31
38
  const TableCell = props => {
32
- const themeType = localStorage.getItem("themeType");
33
- const classes = TableStyles(themeType);
39
+ const {
40
+ theme
41
+ } = useEditorContext();
42
+ const classes = TableStyles(theme);
34
43
  const {
35
44
  element,
36
45
  attributes,
@@ -44,11 +53,36 @@ const TableCell = props => {
44
53
  bgColor,
45
54
  borderColor,
46
55
  entireBgColor,
47
- entireBorderColor
56
+ entireBorderColor,
57
+ entireTextColor,
58
+ entireFontFamily,
59
+ entireFontWeight,
60
+ entireTextSize
48
61
  } = element;
49
62
  const [parentDOM, setParentDOM] = useState(null);
50
63
  const editor = useSlateStatic();
51
64
  const [showTool] = useEditorSelection(editor);
65
+ const {
66
+ hoverPath,
67
+ setHoverPath,
68
+ getSelectedCells,
69
+ updateTableSelection,
70
+ tableSelection,
71
+ tableResizing,
72
+ setTableResizing,
73
+ otherProps
74
+ } = useTable();
75
+ const {
76
+ active,
77
+ over
78
+ } = useDndContext();
79
+ const currentDraggingType = active?.data?.current?.dragType;
80
+ const {
81
+ dragRowBtnCls
82
+ } = otherProps || {};
83
+ const {
84
+ startCellPath
85
+ } = tableSelection;
52
86
  const path = ReactEditor.findPath(editor, element);
53
87
  const isHeader = path.length >= 2 ? path[path.length - 2] === 0 : false;
54
88
  const [size, onMouseDown, resizing, onLoad] = useTableResize({
@@ -56,6 +90,7 @@ const TableCell = props => {
56
90
  size: element?.size
57
91
  });
58
92
  const [tableSize, setTableSize] = useState({});
93
+ const [openSettings, setOpenSettings] = useState(false);
59
94
  const table = new TableUtil(editor);
60
95
  const tableProps = table.getTableProps();
61
96
  const [tableNode] = Editor.nodes(editor, {
@@ -66,47 +101,18 @@ const TableCell = props => {
66
101
  at: path,
67
102
  match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
68
103
  });
104
+ const currentPath = path.slice(-2) || []; // getting last 2 items from path, which gives row and column position of the cell
105
+ const [row, column] = currentPath;
106
+ const isFirstRow = row === 0;
107
+ const isFirstColumn = column === 0;
108
+ const [hoverRow, hoverCol] = hoverPath ? hoverPath.slice(-2) : [];
109
+ const showColDrag = isFirstRow && hoverCol === column && !resizing && !readOnly;
110
+ const showRowDrag = isFirstColumn && hoverRow === row && !resizing && !readOnly;
69
111
  const [parentProps] = tableNode || [{}];
70
112
  const [rowProps] = rowNode || [{}];
71
113
  const tableDOM = table.getDOMNode(path, true);
72
- const isCellSelected = table.isCellSelected(editor.selection);
114
+ const isCellSelected = getSelectedCells();
73
115
  const hasSelected = (isCellSelected || [])?.findIndex(f => f.join(",") === path.join(",")) > -1;
74
- const [anchorEl, setAnchorEl] = useState(null);
75
- const open = Boolean(anchorEl);
76
- const popperOptions = [{
77
- value: "Delete Row"
78
- }, {
79
- value: "Delete Column"
80
- }];
81
- const onRightClick = e => {
82
- e.preventDefault();
83
- if (hasSelected) {
84
- setAnchorEl(e.currentTarget);
85
- }
86
- };
87
- const closePoper = () => {
88
- setAnchorEl(null);
89
- };
90
- const handleMenuItemClick = value => {
91
- Transforms.select(editor, editor.selection);
92
- switch (value) {
93
- case "Delete Row":
94
- table.deleteRow();
95
- break;
96
- case "Delete Column":
97
- table.deleteColumn();
98
- break;
99
- default:
100
- return;
101
- }
102
- // closePoper();
103
- };
104
-
105
- // Use the useClickOutside hook
106
- const popperRef = useClickOutside({
107
- onClickOutside: closePoper,
108
- refCount: 1
109
- })[0];
110
116
  useEffect(() => {
111
117
  if (tableDOM) {
112
118
  const {
@@ -116,81 +122,313 @@ const TableCell = props => {
116
122
  const {
117
123
  width: parentWidth
118
124
  } = tableDOM?.parentNode?.parentNode?.getBoundingClientRect();
119
- const {
120
- styleProps
121
- } = tableProps || {};
122
- const columns = styleProps ? styleProps["table.columns"] : 2;
125
+ const cellWidth = element?.size?.width;
126
+ const columns = tableNode?.[0]?.columns;
127
+ const oldTableWidth = parentWidth / columns - 4;
123
128
  setTableSize({
124
129
  width,
125
130
  height,
126
131
  parentWidth,
127
- cellWidth: parentWidth / columns
132
+ cellWidth: cellWidth || oldTableWidth
128
133
  });
129
134
  }
130
- }, [tableDOM, anchorEl]);
135
+ }, [tableDOM]);
131
136
  useEffect(() => {
132
137
  if (editor && element && tableSize) {
133
138
  const dom = ReactEditor.toDOMNode(editor, element);
134
139
  setParentDOM(dom);
135
- onLoad(element?.size || {
136
- width: tableSize?.cellWidth,
140
+ const width = tableSize?.cellWidth;
141
+ const size = element?.size ? {
142
+ ...element?.size,
143
+ width
144
+ } : {
145
+ width,
137
146
  height: 100
138
- });
147
+ };
148
+ onLoad(size);
139
149
  }
140
- }, [tableSize, anchorEl]);
150
+ }, [tableSize]);
151
+ const resetSelection = () => {
152
+ Transforms.deselect(editor);
153
+ updateTableSelection(getDefaultTableSelection());
154
+ };
141
155
  useEffect(() => {
142
- if (!resizing && tableProps) {
143
- table.updateTableStyle({
156
+ const currentPath = path?.toString();
157
+ setTimeout(() => {
158
+ if (tableResizing === currentPath) {
159
+ setTableResizing(null);
160
+
161
+ // reset selection after resizing
162
+ resetSelection();
163
+ }
164
+ }, 200);
165
+ if (!resizing && tableResizing) {
166
+ table.resizeTableCell({
144
167
  "col.size": size
145
- }, tableProps);
168
+ }, rowNode);
169
+ }
170
+ if (resizing) {
171
+ setTableResizing(currentPath);
172
+ }
173
+ }, [resizing]);
174
+ const onMouseEnter = path => {
175
+ setHoverPath(path);
176
+ if (tableSelection?.isDragging) {
177
+ updateTableSelection({
178
+ endCellPath: path
179
+ });
180
+ const isSelectingOneCellToAnotherCell = startCellPath?.length && !Path.equals(path, startCellPath);
181
+ if (isSelectingOneCellToAnotherCell) {
182
+ Transforms.deselect(editor);
183
+ }
184
+ }
185
+ };
186
+ const onMouseLeave = () => {
187
+ setHoverPath(null);
188
+ };
189
+ const onMouseDownInCell = e => {
190
+ if (!contentEditable) {
191
+ e.preventDefault();
192
+ }
193
+ updateTableSelection({
194
+ startCellPath: path,
195
+ endCellPath: [],
196
+ isDragging: true
197
+ });
198
+ };
199
+ const onMouseUp = e => {
200
+ if (startCellPath?.length) {
201
+ e.preventDefault();
202
+ updateTableSelection({
203
+ endCellPath: path,
204
+ isDragging: false
205
+ });
206
+ }
207
+ };
208
+ const onClick = () => {
209
+ const currentEditorSelection = editor?.selection?.focus?.path || [];
210
+ const selectionPath = currentEditorSelection?.slice(0, -2);
211
+ const isCellSelected = selectionPath?.length && Path.equals(selectionPath, path);
212
+ if (!isCellSelected) {
213
+ // focus the clicked cell
214
+ Transforms.select(editor, {
215
+ anchor: Editor.end(editor, path),
216
+ focus: Editor.end(editor, path)
217
+ });
218
+
219
+ // after mousedown event, onclick is triggered, while onclick, dragging should be disabled and focus should be on that clicked cell to edit the contents inside it.
220
+ updateTableSelection({
221
+ isDragging: false
222
+ });
146
223
  }
147
- }, [resizing, anchorEl]);
148
- const poperForDeltion = () => {
149
- return /*#__PURE__*/_jsx(Popper, {
150
- open: open,
151
- anchorEl: anchorEl,
152
- placement: "bottom-start",
153
- disablePortal: true,
154
- ref: popperRef,
155
- sx: classes.deleteCellsPopUp,
156
- children: popperOptions.map(option => /*#__PURE__*/_jsx(MenuItem, {
157
- value: option.value,
158
- onClick: () => handleMenuItemClick(option.value),
159
- contentEditable: false,
160
- sx: classes.menuItemPopUp,
161
- children: /*#__PURE__*/_jsx(Typography, {
162
- sx: {
163
- fontSize: "12px",
164
- userSelect: "none"
165
- },
166
- children: option.value
167
- })
168
- }, option.value))
224
+ };
225
+ const cellId = path.toString() + "table-cell";
226
+ const cellRef = document.getElementById(cellId);
227
+ const contentEditable = !readOnly && isCellEditable(startCellPath, path);
228
+ const commonTdProps = {
229
+ id: cellId,
230
+ contentEditable
231
+ };
232
+ const handleTouchMove = e => {
233
+ const touch = e.touches[0]; // Get the current touch point
234
+ const element = document.elementFromPoint(touch.clientX, touch.clientY);
235
+ if (element && element.dataset.cell) {
236
+ const elementPath = element.dataset.cell.split(",").map(Number);
237
+ onMouseEnter(elementPath);
238
+ }
239
+ };
240
+ const handleTouchEnd = () => {
241
+ updateTableSelection({
242
+ isDragging: false
169
243
  });
170
244
  };
171
- const sizeProps = isHeader ? {
172
- width: size?.width || tableSize?.cellWidth
173
- } : {};
245
+ const tbProps = resizing || over || readOnly ? {
246
+ ...commonTdProps,
247
+ contentEditable: false
248
+ } : {
249
+ ...commonTdProps,
250
+ onMouseEnter: () => onMouseEnter(path),
251
+ onMouseLeave,
252
+ onMouseDown: onMouseDownInCell,
253
+ onMouseUp,
254
+ onClick,
255
+ // mobile events for selection
256
+ onTouchStart: onMouseDownInCell,
257
+ onTouchMove: handleTouchMove,
258
+ onTouchEnd: handleTouchEnd
259
+ };
260
+ const dndProps = {
261
+ id: cellId,
262
+ data: {
263
+ path
264
+ }
265
+ };
266
+ const isCellDragging = active?.id && active?.id === cellId;
267
+ const isRowDragging = isCellDragging && currentDraggingType === "row";
268
+ const isColDragging = isCellDragging && currentDraggingType === "col";
269
+ const width = size?.width || tableSize?.cellWidth;
270
+ const sizeProps = {
271
+ minWidth: width,
272
+ maxWidth: width
273
+ };
174
274
  const cellBorderColor = borderColor || rowProps?.borderColor || parentProps?.borderColor || entireBorderColor;
175
- return /*#__PURE__*/_jsxs("td", {
176
- ...element.attr,
177
- ...attributes,
178
- className: `editor-table-cell ${hasSelected ? "selection" : ""}`,
179
- style: {
180
- position: "relative",
181
- background: bgColor || entireBgColor,
182
- border: cellBorderColor ? `3px solid ${cellBorderColor}` : "",
183
- ...(sizeProps || {})
184
- },
185
- onContextMenu: onRightClick,
186
- children: [children, isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
187
- classes: classes,
188
- onMouseDown: onMouseDown,
189
- height: tableDOM.getBoundingClientRect()?.height
190
- }) : null, hasSelected && !readOnly ? /*#__PURE__*/_jsx("div", {
191
- className: "selection-area-tc",
192
- contentEditable: false
193
- }) : null, poperForDeltion()]
275
+ const selectCurrentCell = () => {
276
+ const cellPath = Editor.start(editor, path);
277
+ const selection = {
278
+ anchor: cellPath,
279
+ focus: cellPath
280
+ };
281
+
282
+ // select the cell to insert/delete/duplicate/clear
283
+ Transforms.select(editor, selection);
284
+ };
285
+ const onRowDrag = () => {
286
+ const {
287
+ children
288
+ } = rowNode[0] || {};
289
+ const rowPath = rowNode[1] || [];
290
+ const rowStartCell = [...rowPath, 0];
291
+ const rowEndCell = [...rowPath, children?.length - 1];
292
+ updateTableSelection({
293
+ startCellPath: rowStartCell,
294
+ endCellPath: rowEndCell,
295
+ isDragging: false
296
+ });
297
+ selectCurrentCell();
298
+ };
299
+ const onColDrag = () => {
300
+ const [tableData, tablePath] = tableNode;
301
+ const {
302
+ rows
303
+ } = tableData;
304
+ const startColCell = [...tablePath, 0, column];
305
+ const endColCell = [...tablePath, rows - 1, column];
306
+ updateTableSelection({
307
+ startCellPath: startColCell,
308
+ endCellPath: endColCell,
309
+ isDragging: false
310
+ });
311
+ selectCurrentCell();
312
+ };
313
+ const handleToolAction = (value, option, dragType) => {
314
+ const isRowDrag = dragType === "row";
315
+ switch (value) {
316
+ case "insertAbove":
317
+ table.insertRow("at");
318
+ break;
319
+ case "insertBelow":
320
+ table.insertRow("after");
321
+ break;
322
+ case "delete":
323
+ const deleteFn = isRowDrag ? table.deleteRow : table.deleteColumn;
324
+ deleteFn();
325
+ setTimeout(() => resetSelection(), 200); // throws cannot find the descendant path error because of deletion
326
+ break;
327
+ case "duplicate":
328
+ if (isRowDrag) {
329
+ table.insertRow("duplicate");
330
+ } else {
331
+ table.duplicateColumn();
332
+ }
333
+ break;
334
+ case "clear":
335
+ if (isRowDrag) {
336
+ table.clearRow();
337
+ } else {
338
+ table.clearColumn();
339
+ }
340
+ break;
341
+ case "insertRight":
342
+ table.insertColumn("after");
343
+ break;
344
+ case "insertLeft":
345
+ table.insertColumn("at");
346
+ break;
347
+ case "color":
348
+ setOpenSettings(dragType);
349
+ break;
350
+ default:
351
+ return;
352
+ }
353
+ const omitValues = ["color", "delete"];
354
+ if (!omitValues.includes(value)) {
355
+ resetSelection();
356
+ }
357
+ };
358
+ const onClose = () => {
359
+ setOpenSettings(false);
360
+ };
361
+ const onSave = data => {
362
+ const updateData = {
363
+ ...data
364
+ };
365
+ delete updateData.children;
366
+ delete updateData.type;
367
+ table.updateTableStyle(updateData, {
368
+ ...tableProps
369
+ });
370
+ onClose();
371
+ };
372
+ const commonDragBtnProps = {
373
+ anchorEl: cellRef,
374
+ handleToolAction,
375
+ customProps,
376
+ dndProps,
377
+ resetSelection
378
+ };
379
+ return /*#__PURE__*/_jsxs(_Fragment, {
380
+ children: [/*#__PURE__*/_jsxs("td", {
381
+ ...element.attr,
382
+ ...attributes,
383
+ className: `editor-table-cell ${hasSelected ? "selection" : ""}`,
384
+ style: {
385
+ position: "relative",
386
+ background: bgColor || entireBgColor,
387
+ border: cellBorderColor ? `3px solid ${cellBorderColor}` : "1px solid #E0E0E0",
388
+ fontFamily: entireFontFamily || "inherit",
389
+ fontWeight: entireFontWeight || "inherit",
390
+ fontSize: entireTextSize || "inherit",
391
+ color: entireTextColor || "inherit",
392
+ cursor: "text",
393
+ ...(sizeProps || {})
394
+ },
395
+ ...tbProps,
396
+ "data-cell": path.toString(),
397
+ children: [isFirstRow && currentDraggingType === "col" ? /*#__PURE__*/_jsx(Droppable, {
398
+ ...dndProps,
399
+ dragType: currentDraggingType,
400
+ tableDOM: tableDOM
401
+ }) : null, isFirstColumn && currentDraggingType === "row" ? /*#__PURE__*/_jsx(Droppable, {
402
+ ...dndProps,
403
+ dragType: currentDraggingType,
404
+ tableDOM: tableDOM
405
+ }) : null, children, isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
406
+ classes: classes,
407
+ onMouseDown: onMouseDown,
408
+ height: tableDOM.getBoundingClientRect()?.height
409
+ }) : null, hasSelected && !readOnly ? /*#__PURE__*/_jsx("div", {
410
+ className: "selection-area-tc",
411
+ contentEditable: false
412
+ }) : null, showColDrag || isColDragging ? /*#__PURE__*/_jsx(DragButton, {
413
+ ...commonDragBtnProps,
414
+ placement: "top",
415
+ dragType: "col",
416
+ onDrag: onColDrag,
417
+ hideDelete: rowProps?.children?.length <= 1
418
+ }) : null, showRowDrag || isRowDragging ? /*#__PURE__*/_jsx(DragButton, {
419
+ ...commonDragBtnProps,
420
+ dragType: "row",
421
+ onDrag: onRowDrag,
422
+ hideDelete: parentProps?.children?.length <= 1,
423
+ className: dragRowBtnCls
424
+ }) : null]
425
+ }), openSettings ? /*#__PURE__*/_jsx(TablePopup, {
426
+ element: tableProps?.styleProps || {},
427
+ customProps: customProps,
428
+ onSave: onSave,
429
+ onClose: onClose,
430
+ styleType: openSettings
431
+ }) : null]
194
432
  });
195
433
  };
196
434
  export default TableCell;
@@ -1,21 +1,27 @@
1
1
  import React from "react";
2
2
  import StyleBuilder from "../../common/StyleBuilder";
3
- import tableStyle from "../../common/StyleBuilder/tableStyle";
3
+ import tableStyle, { tableColumnStyle, tableRowStyle } from "../../common/StyleBuilder/tableStyle";
4
4
  import { jsx as _jsx } from "react/jsx-runtime";
5
+ const STYLE_TYPES = {
6
+ row: tableRowStyle,
7
+ col: tableColumnStyle
8
+ };
5
9
  const TablePopup = props => {
6
10
  const {
7
11
  element,
8
12
  onSave,
9
13
  onClose,
10
- customProps
14
+ customProps,
15
+ styleType
11
16
  } = props;
17
+ const styles = STYLE_TYPES[styleType] || tableStyle;
12
18
  return /*#__PURE__*/_jsx(StyleBuilder, {
13
19
  title: "Table",
14
20
  type: "gridStyle",
15
21
  element: element,
16
22
  onSave: onSave,
17
23
  onClose: onClose,
18
- renderTabs: tableStyle,
24
+ renderTabs: styles,
19
25
  customProps: customProps
20
26
  });
21
27
  };
@@ -10,7 +10,11 @@ const TableRow = props => {
10
10
  } = props;
11
11
  const {
12
12
  bgColor,
13
- borderColor
13
+ borderColor,
14
+ fontFamily,
15
+ fontWeight,
16
+ textSize,
17
+ textColor
14
18
  } = element;
15
19
  const editor = useSlateStatic();
16
20
  const path = ReactEditor.findPath(editor, element);
@@ -24,7 +28,11 @@ const TableRow = props => {
24
28
  ...attributes,
25
29
  style: {
26
30
  backgroundColor: bgColor,
27
- border: rowBorderColor ? `1px solid ${rowBorderColor}` : ""
31
+ border: rowBorderColor ? `1px solid ${rowBorderColor}` : "",
32
+ fontFamily,
33
+ fontWeight,
34
+ fontSize: textSize,
35
+ color: textColor
28
36
  },
29
37
  children: children
30
38
  });
@@ -0,0 +1,101 @@
1
+ import CustomSelect from "../AI/CustomSelect";
2
+ import Styles from "../AI/Styles";
3
+ import { CloseIcon, DeleteIcon } from "../../assets/svg/AIIcons";
4
+ import { AboveArrow, BelowArrow, DuplicateIcon, LeftArrow, PaintIcon, RightArrow } from "../../assets/svg/TableIcons";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ const wholeTableTools = [{
7
+ group: "",
8
+ groupLabel: "",
9
+ options: [{
10
+ label: "Duplicate",
11
+ value: "duplicate",
12
+ Icon: DuplicateIcon
13
+ }, {
14
+ label: "Delete",
15
+ value: "delete",
16
+ Icon: DeleteIcon
17
+ }]
18
+ }];
19
+ const insertColOptions = [{
20
+ label: "Insert Right",
21
+ value: "insertRight",
22
+ Icon: RightArrow
23
+ }, {
24
+ label: "Insert Left",
25
+ value: "insertLeft",
26
+ Icon: LeftArrow
27
+ }];
28
+ const insertRowOptions = [{
29
+ label: "Insert Above",
30
+ value: "insertAbove",
31
+ Icon: AboveArrow,
32
+ replace: false
33
+ }, {
34
+ label: "Insert Below",
35
+ value: "insertBelow",
36
+ Icon: BelowArrow,
37
+ replace: false
38
+ }];
39
+ function getTools(dragType, hideDelete) {
40
+ const insertOptions = dragType === "col" ? insertColOptions : insertRowOptions;
41
+ const deleteOption = hideDelete ? [] : [{
42
+ label: "Delete",
43
+ value: "delete",
44
+ Icon: DeleteIcon,
45
+ replace: false
46
+ }];
47
+ let tools = [{
48
+ group: "",
49
+ groupLabel: "",
50
+ options: [{
51
+ label: "Color",
52
+ value: "color",
53
+ Icon: PaintIcon
54
+ }, {
55
+ label: "Duplicate",
56
+ value: "duplicate",
57
+ Icon: DuplicateIcon
58
+ }, ...insertOptions, {
59
+ label: "Clear Contents",
60
+ value: "clear",
61
+ Icon: CloseIcon
62
+ }, ...deleteOption]
63
+ }];
64
+ return tools;
65
+ }
66
+ export function TableToolOnDrag({
67
+ theme,
68
+ dragType,
69
+ handleToolAction,
70
+ hideDelete
71
+ }) {
72
+ const classes = Styles(theme);
73
+ const tools = getTools(dragType, hideDelete);
74
+ return /*#__PURE__*/_jsx(CustomSelect, {
75
+ classes: classes,
76
+ show: true,
77
+ options: tools,
78
+ onSend: (value, option) => {
79
+ handleToolAction(value, option, dragType);
80
+ },
81
+ btnProps: {
82
+ onMouseDown: e => e.stopPropagation(),
83
+ onMouseUp: e => e.stopPropagation()
84
+ }
85
+ });
86
+ }
87
+ function TableTool({
88
+ theme,
89
+ handleToolAction
90
+ }) {
91
+ const classes = Styles(theme);
92
+ return /*#__PURE__*/_jsx(CustomSelect, {
93
+ classes: classes,
94
+ show: true,
95
+ options: wholeTableTools,
96
+ onSend: (value, option) => {
97
+ handleToolAction(value, option);
98
+ }
99
+ });
100
+ }
101
+ export default TableTool;