pixel-react 1.10.4 → 1.10.6

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.
Files changed (153) hide show
  1. package/lib/ComponentProps/TreeNodeProps.d.ts +2 -1
  2. package/lib/components/AddResourceButton/AddResourceButton.d.ts +4 -0
  3. package/lib/components/AddResourceButton/ArrowsButton/ArrowsButton.d.ts +1 -1
  4. package/lib/components/AddResourceButton/index.d.ts +1 -1
  5. package/lib/components/AddResourceButton/type.d.ts +2 -0
  6. package/lib/components/BrowserTabs/BrowserTabs.d.ts +5 -0
  7. package/lib/components/BrowserTabs/index.d.ts +1 -0
  8. package/lib/components/BrowserTabs/types.d.ts +64 -0
  9. package/lib/components/ConnectingBranch/data.d.ts +62 -64
  10. package/lib/components/ConnectingBranch/types.d.ts +28 -7
  11. package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +6 -1
  12. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +3 -0
  13. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +15 -1
  14. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +5 -0
  15. package/lib/components/Excel/Types.d.ts +1 -0
  16. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  17. package/lib/components/MenuOption/types.d.ts +1 -0
  18. package/lib/components/MiniModal/types.d.ts +2 -1
  19. package/lib/components/Select/components/types.d.ts +6 -1
  20. package/lib/components/Select/types.d.ts +17 -0
  21. package/lib/components/Table/Table.d.ts +1 -1
  22. package/lib/components/Table/Types.d.ts +1 -0
  23. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  24. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  25. package/lib/components/TableTree/types.d.ts +4 -3
  26. package/lib/index.d.ts +127 -13
  27. package/lib/index.esm.js +992 -462
  28. package/lib/index.esm.js.map +1 -1
  29. package/lib/index.js +993 -462
  30. package/lib/index.js.map +1 -1
  31. package/lib/tsconfig.tsbuildinfo +1 -1
  32. package/package.json +1 -1
  33. package/src/ComponentProps/TreeNodeProps.ts +2 -1
  34. package/src/assets/Themes/BaseTheme.scss +1 -2
  35. package/src/assets/Themes/DarkTheme.scss +0 -1
  36. package/src/assets/styles/_mixins.scss +19 -0
  37. package/src/components/AddResourceButton/{AddButton.scss → AddResourceButton.scss} +1 -0
  38. package/src/components/AddResourceButton/{AddButton.stories.tsx → AddResourceButton.stories.tsx} +4 -4
  39. package/src/components/AddResourceButton/{AddButton.tsx → AddResourceButton.tsx} +25 -10
  40. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.scss +1 -2
  41. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +16 -9
  42. package/src/components/AddResourceButton/index.ts +1 -1
  43. package/src/components/AddResourceButton/type.ts +2 -0
  44. package/src/components/BrowserTabs/BrowserTabs.scss +75 -0
  45. package/src/components/BrowserTabs/BrowserTabs.stories.tsx +366 -0
  46. package/src/components/BrowserTabs/BrowserTabs.tsx +128 -0
  47. package/src/components/BrowserTabs/index.ts +1 -0
  48. package/src/components/BrowserTabs/types.ts +73 -0
  49. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +54 -39
  50. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +3 -2
  51. package/src/components/ConnectingBranch/ConnectingBranch.tsx +28 -24
  52. package/src/components/ConnectingBranch/data.tsx +207 -213
  53. package/src/components/ConnectingBranch/types.ts +26 -17
  54. package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +1 -1
  55. package/src/components/Excel/ExcelFile/ExcelFile.scss +4 -0
  56. package/src/components/Excel/ExcelFile/ExcelFile.tsx +35 -16
  57. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +14 -3
  58. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataEditor.tsx +1 -0
  59. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +16 -5
  60. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +12 -1
  61. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +31 -5
  62. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +30 -0
  63. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +47 -0
  64. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +4 -4
  65. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +6 -0
  66. package/src/components/Excel/ExcelFile.stories.tsx +10 -2
  67. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +11 -11
  68. package/src/components/Excel/Types.ts +1 -0
  69. package/src/components/Excel/dataConversion.ts +17 -19
  70. package/src/components/MenuOption/MenuOption.tsx +4 -0
  71. package/src/components/MenuOption/types.ts +1 -0
  72. package/src/components/MiniModal/MiniModal.scss +8 -0
  73. package/src/components/MiniModal/MiniModal.stories.tsx +60 -0
  74. package/src/components/MiniModal/types.ts +2 -1
  75. package/src/components/Select/Select.stories.tsx +43 -1
  76. package/src/components/Select/Select.tsx +16 -1
  77. package/src/components/Select/components/Dropdown.scss +41 -1
  78. package/src/components/Select/components/Dropdown.tsx +52 -6
  79. package/src/components/Select/components/types.ts +7 -2
  80. package/src/components/Select/types.ts +22 -0
  81. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +8 -2
  82. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +1 -1
  83. package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.scss +14 -0
  84. package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx +6 -11
  85. package/src/components/Table/Table.stories.tsx +1 -1
  86. package/src/components/Table/Table.tsx +55 -4
  87. package/src/components/Table/Types.ts +4 -1
  88. package/src/components/TableTree/Components/TableCell.tsx +25 -10
  89. package/src/components/TableTree/Components/TableHead.tsx +5 -5
  90. package/src/components/TableTree/Components/TableRow.tsx +27 -24
  91. package/src/components/TableTree/TableTree.scss +89 -69
  92. package/src/components/TableTree/TableTree.stories.tsx +66 -2
  93. package/src/components/TableTree/types.ts +4 -3
  94. package/src/index.ts +2 -0
  95. package/src/utils/getTreeDetails/getTreeDetails.ts +8 -7
  96. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
  97. package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
  98. package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
  99. package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
  100. package/lib/components/Button/Button.stories.d.ts +0 -12
  101. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
  102. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
  103. package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
  104. package/lib/components/Chip/Chip.stories.d.ts +0 -14
  105. package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
  106. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
  107. package/lib/components/Drawer/Drawer.stories.d.ts +0 -7
  108. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
  109. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
  110. package/lib/components/Form/Form.stories.d.ts +0 -6
  111. package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
  112. package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
  113. package/lib/components/Icon/Icon.stories.d.ts +0 -7
  114. package/lib/components/IconButton/IconButton.stories.d.ts +0 -6
  115. package/lib/components/Input/Input.stories.d.ts +0 -9
  116. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
  117. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
  118. package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -15
  119. package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -9
  120. package/lib/components/Modal/Modal.stories.d.ts +0 -7
  121. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -9
  122. package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
  123. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -8
  124. package/lib/components/Search/Search.stories.d.ts +0 -6
  125. package/lib/components/Select/Select.stories.d.ts +0 -13
  126. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
  127. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -15
  128. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +0 -4
  129. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +0 -3
  130. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +0 -4
  131. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +0 -3
  132. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
  133. package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
  134. package/lib/components/Table/Table.stories.d.ts +0 -11
  135. package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
  136. package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
  137. package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
  138. package/lib/components/ThemeProvider/CustomThemeProvider.d.ts +0 -8
  139. package/lib/components/Toast/Toast.stories.d.ts +0 -6
  140. package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
  141. package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
  142. package/lib/components/Typography/Typography.stories.d.ts +0 -10
  143. package/lib/hooks/useCustomThemeProvider.d.ts +0 -11
  144. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
  145. package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
  146. package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
  147. package/lib/utils/debounce/debounce.stories.d.ts +0 -6
  148. package/lib/utils/ffID/ffID.stories.d.ts +0 -6
  149. package/lib/utils/find/findAndInsert.d.ts +0 -7
  150. package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
  151. package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
  152. package/lib/utils/throttle/throttle.stories.d.ts +0 -6
  153. package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
@@ -15,6 +15,8 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
15
15
  setContextMenu,
16
16
  deleteColumn,
17
17
  addColumnLeft,
18
+ addColumnRight,
19
+ columnContextEnable,
18
20
  data,
19
21
  }) => {
20
22
  const dispatch = useDispatch();
@@ -25,14 +27,23 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
25
27
 
26
28
  const options = [
27
29
  {
28
- label: 'Add Column',
29
- value: 'Add Column',
30
+ label: 'Add Column Left',
31
+ value: 'Add Column Left',
30
32
  iconName: 'plus_icon',
31
33
  action: () => {
32
34
  addColumnLeft(data);
33
35
  },
34
36
  disable: false,
35
37
  },
38
+ {
39
+ label: 'Add Column Right',
40
+ value: 'Add Column Right',
41
+ iconName: 'plus_icon',
42
+ action: () => {
43
+ addColumnRight(data);
44
+ },
45
+ disable: false,
46
+ },
36
47
  {
37
48
  label: 'Delete Column',
38
49
  value: 'Delete Column',
@@ -92,7 +103,7 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
92
103
  onSelect(column, event.shiftKey);
93
104
 
94
105
  setContextMenu({
95
- open: true,
106
+ open: columnContextEnable,
96
107
  position: {
97
108
  x: event.pageX,
98
109
  y: event.pageY,
@@ -32,6 +32,7 @@ const DataEditor: React.FC<Types.DataEditorProps> = ({ onChange, cell }) => {
32
32
  onChange={handleChange}
33
33
  value={value}
34
34
  autoFocus
35
+ disabled={cell?.isDisable}
35
36
  />
36
37
  </div>
37
38
  );
@@ -14,7 +14,9 @@ const RowIndicator: Types.RowIndicatorComponent = ({
14
14
  onSelect,
15
15
  setContextMenu,
16
16
  addRowTop,
17
+ addRowBottom,
17
18
  deleteRow,
19
+ rowContextEnable,
18
20
  data,
19
21
  }) => {
20
22
  const dispatch = useDispatch();
@@ -24,14 +26,23 @@ const RowIndicator: Types.RowIndicatorComponent = ({
24
26
 
25
27
  const options = [
26
28
  {
27
- label: 'Add Row',
28
- value: 'Add Row',
29
+ label: 'Add Row Top',
30
+ value: 'Add Row Top',
29
31
  iconName: 'plus_icon',
30
32
  action: () => {
31
33
  addRowTop(data);
32
34
  },
33
35
  disable: false,
34
36
  },
37
+ {
38
+ label: 'Add Row Bottom',
39
+ value: 'Add Row Bottom',
40
+ iconName: 'plus_icon',
41
+ action: () => {
42
+ addRowBottom(data);
43
+ },
44
+ disable: false,
45
+ },
35
46
  {
36
47
  label: 'Delete Row',
37
48
  value: 'Delete Row',
@@ -90,10 +101,10 @@ const RowIndicator: Types.RowIndicatorComponent = ({
90
101
  onSelect(row, event.shiftKey);
91
102
 
92
103
  setContextMenu({
93
- open: true,
104
+ open: rowContextEnable,
94
105
  position: {
95
- x: event.pageX ,
96
- y: event.pageY ,
106
+ x: event.pageX,
107
+ y: event.pageY,
97
108
  },
98
109
  options: options,
99
110
  });
@@ -12,6 +12,10 @@
12
12
  padding: 4px 8px;
13
13
  margin-bottom: 20px;
14
14
  }
15
+
16
+ .ff-excel-toolbar-container-hide {
17
+ display: none;
18
+ }
15
19
 
16
20
  .ff-excel-spreadsheet {
17
21
  --background-color: var(--drawer-footer-bg);
@@ -19,7 +23,7 @@
19
23
  --readonly-text-color: var(--toggle-strip-active);
20
24
  --outline-color: var(--toggle-strip-active);
21
25
  --outline-background-color: var(--overlay-bg);
22
- --border-color: var(--excel-sheet-border);
26
+ --border-color: var(--excel-header-border);
23
27
  --header-background-color: var(--excel-header-bg);
24
28
  --elevation: var(--brand-color);
25
29
 
@@ -39,6 +43,13 @@
39
43
  top: 59px;
40
44
  }
41
45
 
46
+ .ff-excel-header-hider-remover {
47
+ position: absolute;
48
+ background-color: var(--excel-header-border);
49
+ z-index: 500;
50
+ left: -1px;
51
+ }
52
+
42
53
  .ff-excel-header-column-hider {
43
54
  height: 34px;
44
55
  width: 100%;
@@ -101,6 +101,7 @@ export type Props<CellType extends Types.CellBase> = {
101
101
  setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
102
102
  /** Set your dynamic sheet Height*/
103
103
  sheetHeight: string;
104
+ toolbar?: 'show' | 'hide';
104
105
  contextOption?: {
105
106
  open: boolean;
106
107
  options: {
@@ -110,6 +111,8 @@ export type Props<CellType extends Types.CellBase> = {
110
111
  action: () => void;
111
112
  }[];
112
113
  };
114
+ columnContextEnable: boolean;
115
+ rowContextEnable: boolean;
113
116
  };
114
117
 
115
118
  /**
@@ -122,6 +125,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
122
125
  className,
123
126
  columnLabels,
124
127
  rowLabels,
128
+ toolbar,
125
129
  onKeyDown,
126
130
  Table = DefaultTable,
127
131
  Row = DefaultRow,
@@ -193,7 +197,9 @@ const Spreadsheet = <CellType extends Types.CellBase>(
193
197
  const setFormatePainter = useAction(Actions.formatePainter);
194
198
 
195
199
  const addRowTop = useAction(Actions.addRowTop);
200
+ const addRowBottom = useAction(Actions.addRowBottom);
196
201
  const addColumnLeft = useAction(Actions.addColumnLeft);
202
+ const addColumnRight = useAction(Actions.addColumnRight);
197
203
  const deleteRow = useAction(Actions.deleteRow);
198
204
  const deleteColumn = useAction(Actions.deleteColumn);
199
205
 
@@ -409,7 +415,9 @@ const Spreadsheet = <CellType extends Types.CellBase>(
409
415
  }
410
416
  deleteColumn={deleteColumn}
411
417
  addColumnLeft={addColumnLeft}
418
+ addColumnRight={addColumnRight}
412
419
  data={props.data}
420
+ columnContextEnable={props.columnContextEnable}
413
421
  />
414
422
  ) : (
415
423
  <ColumnIndicator
@@ -418,7 +426,9 @@ const Spreadsheet = <CellType extends Types.CellBase>(
418
426
  setContextMenu={props.setContextMenu}
419
427
  deleteColumn={deleteColumn}
420
428
  addColumnLeft={addColumnLeft}
429
+ addColumnRight={addColumnRight}
421
430
  data={props.data}
431
+ columnContextEnable={props.columnContextEnable}
422
432
  />
423
433
  )
424
434
  )}
@@ -431,8 +441,10 @@ const Spreadsheet = <CellType extends Types.CellBase>(
431
441
  label={rowNumber in rowLabels ? rowLabels[rowNumber] : null}
432
442
  row={rowNumber}
433
443
  addRowTop={addRowTop}
434
- setContextMenu={props.setContextMenu}
444
+ addRowBottom={addRowBottom}
435
445
  deleteRow={deleteRow}
446
+ setContextMenu={props.setContextMenu}
447
+ rowContextEnable={props.rowContextEnable}
436
448
  data={props.data}
437
449
  />
438
450
  ) : (
@@ -440,8 +452,10 @@ const Spreadsheet = <CellType extends Types.CellBase>(
440
452
  key={rowNumber}
441
453
  row={rowNumber}
442
454
  addRowTop={addRowTop}
443
- setContextMenu={props.setContextMenu}
455
+ addRowBottom={addRowBottom}
444
456
  deleteRow={deleteRow}
457
+ setContextMenu={props.setContextMenu}
458
+ rowContextEnable={props.rowContextEnable}
445
459
  data={props.data}
446
460
  />
447
461
  )}
@@ -489,10 +503,22 @@ const Spreadsheet = <CellType extends Types.CellBase>(
489
503
  const rootNode = React.useMemo(
490
504
  () => (
491
505
  <div className="ff-excel">
492
- <div className="ff-excel-header-hider ff-excel-header-column-hider"></div>
493
- <div className="ff-excel-header-hider ff-excel-header-row-hider"></div>
494
- <div className="ff-excel-toolbar-container">
506
+ <div
507
+ className={classNames('ff-excel-header-column-hider', {
508
+ 'ff-excel-header-hider-remover': toolbar === 'hide',
509
+ 'ff-excel-header-hider': toolbar !== 'hide',
510
+ })}
511
+ />
512
+ <div className="ff-excel-header-hider ff-excel-header-row-hider" />
513
+ <div
514
+ className={
515
+ toolbar === 'hide'
516
+ ? 'ff-excel-toolbar-container-hide'
517
+ : 'ff-excel-toolbar-container'
518
+ }
519
+ >
495
520
  <ExcelToolBar
521
+ toolbar={toolbar}
496
522
  onBold={onBold}
497
523
  onItalic={onItalic}
498
524
  setUnderlineType={setUnderlineType}
@@ -41,7 +41,9 @@ export const COLOR = 'COLOR';
41
41
  export const BACKGROUND_COLOR = 'BACKGROUND_COLOR';
42
42
  export const FORMATE_PAINTER = 'FORMATE_PAINTER';
43
43
  export const ADD_ROW_TOP = 'ADD_ROW_TOP';
44
+ export const ADD_ROW_BOTTOM = 'ADD_ROW_BOTTOM';
44
45
  export const ADD_COLUMN_LEFT = 'ADD_COLUMN_LEFT';
46
+ export const ADD_COLUMN_RIGHT = 'ADD_COLUMN_RIGHT';
45
47
  export const DELETE_ROW = 'DELETE_ROW';
46
48
  export const DELETE_COLUMN = 'DELETE_COLUMN';
47
49
  export const SET_ROW_HEIGHT = 'SET_ROW_HEIGHT';
@@ -253,6 +255,19 @@ export function addRowTop(data: Matrix<CellBase>): AddRowTop {
253
255
  payload: { data },
254
256
  };
255
257
  }
258
+ export type AddRowBottom = BaseAction<typeof ADD_ROW_BOTTOM> & {
259
+ payload: {
260
+ data: Matrix<CellBase>;
261
+ };
262
+ };
263
+
264
+ export function addRowBottom(data: Matrix<CellBase>): AddRowBottom {
265
+ return {
266
+ type: ADD_ROW_BOTTOM,
267
+ payload: { data },
268
+ };
269
+ }
270
+
256
271
  export type AddColumnLeft = BaseAction<typeof ADD_COLUMN_LEFT> & {
257
272
  payload: {
258
273
  data: Matrix<CellBase>;
@@ -266,6 +281,19 @@ export function addColumnLeft(data: Matrix<CellBase>): AddColumnLeft {
266
281
  };
267
282
  }
268
283
 
284
+ export type AddColumnRight = BaseAction<typeof ADD_COLUMN_RIGHT> & {
285
+ payload: {
286
+ data: Matrix<CellBase>;
287
+ };
288
+ };
289
+
290
+ export function addColumnRight(data: Matrix<CellBase>): AddColumnRight {
291
+ return {
292
+ type: ADD_COLUMN_RIGHT,
293
+ payload: { data },
294
+ };
295
+ }
296
+
269
297
  export type DeleteRow = BaseAction<typeof DELETE_ROW> & {
270
298
  payload: {
271
299
  data: Matrix<CellBase>;
@@ -566,7 +594,9 @@ export type Action =
566
594
  | BackgroundStyle
567
595
  | FormatePainterStyle
568
596
  | AddRowTop
597
+ | AddRowBottom
569
598
  | AddColumnLeft
599
+ | AddColumnRight
570
600
  | DeleteRow
571
601
  | DeleteColumn
572
602
  | SetRowHeight
@@ -97,6 +97,27 @@ export default function reducer(
97
97
  };
98
98
  }
99
99
 
100
+ case Actions.ADD_ROW_BOTTOM: {
101
+ let { selectedRow, selectedColumn, model } = state;
102
+ if (checkEmpty(selectedRow)) {
103
+ return state;
104
+ }
105
+ selectedRow = selectedRow as number;
106
+ let updatedData = [...model.data];
107
+ const newRow = Array(updatedData[0]?.length || 0).fill({
108
+ value: undefined,
109
+ });
110
+ updatedData.splice(selectedRow + 1, 0, newRow);
111
+ const updatedModel = new Model(model.createFormulaParser, updatedData);
112
+
113
+ return {
114
+ ...state,
115
+ model: updatedModel,
116
+ selectedRow: selectedRow + 1,
117
+ selectedColumn: selectedColumn,
118
+ };
119
+ }
120
+
100
121
  case Actions.ADD_COLUMN_LEFT: {
101
122
  let { selectedRow, selectedColumn, model } = state;
102
123
  if (checkEmpty(selectedColumn)) {
@@ -123,6 +144,32 @@ export default function reducer(
123
144
  };
124
145
  }
125
146
 
147
+ case Actions.ADD_COLUMN_RIGHT: {
148
+ let { selectedRow, selectedColumn, model } = state;
149
+ if (checkEmpty(selectedColumn)) {
150
+ return state;
151
+ }
152
+ selectedColumn = selectedColumn as number;
153
+ let updatedData = [...model.data];
154
+ updatedData = updatedData.map((row) => {
155
+ const newCell = { value: undefined };
156
+ return [
157
+ ...row.slice(0, selectedColumn + 1),
158
+ newCell,
159
+ ...row.slice(selectedColumn + 1),
160
+ ];
161
+ });
162
+
163
+ const updatedModel = new Model(model.createFormulaParser, updatedData);
164
+
165
+ return {
166
+ ...state,
167
+ model: updatedModel,
168
+ selectedRow: selectedRow,
169
+ selectedColumn: selectedColumn + 1,
170
+ };
171
+ }
172
+
126
173
  case Actions.DELETE_ROW: {
127
174
  let { selectedRow, selectedColumn, model } = state;
128
175
  if (checkEmpty(selectedRow)) {
@@ -218,10 +218,10 @@ export function applyBorderToCells(
218
218
  case 'border-none':
219
219
  updatedCell.style = {
220
220
  ...currentCell.style,
221
- borderRight: `1px solid var(--excel-sheet-border)`,
222
- borderLeft: `1px solid var(--excel-sheet-border)`,
223
- borderTop: `1px solid var(--excel-sheet-border)`,
224
- borderBottom: `1px solid var(--excel-sheet-border)`,
221
+ borderRight: `1px solid var(--excel-header-border)`,
222
+ borderLeft: `1px solid var(--excel-header-border)`,
223
+ borderTop: `1px solid var(--excel-header-border)`,
224
+ borderBottom: `1px solid var(--excel-header-border)`,
225
225
  };
226
226
  break;
227
227
  case 'border-right':
@@ -23,6 +23,7 @@ export type CellBase<Value = any> = {
23
23
  DataEditor?: DataEditorComponent<CellBase<Value>>;
24
24
  /** Custom component to render when the cell is viewed, if not defined would default to the component defined for the Spreadsheet */
25
25
  DataViewer?: DataViewerComponent<CellBase<Value>>;
26
+ isDisable?: boolean;
26
27
  };
27
28
 
28
29
  /**
@@ -195,6 +196,9 @@ export type RowIndicatorProps = {
195
196
 
196
197
  addRowTop: (data: MatrixValue.Matrix<CellBase>) => void;
197
198
 
199
+ addRowBottom: (data: MatrixValue.Matrix<CellBase>) => void;
200
+ rowContextEnable: boolean;
201
+
198
202
  data: MatrixValue.Matrix<CellBase>;
199
203
  };
200
204
 
@@ -236,6 +240,8 @@ export type ColumnIndicatorProps = {
236
240
 
237
241
  addColumnLeft: (data: MatrixValue.Matrix<CellBase>) => void;
238
242
 
243
+ addColumnRight: (data: MatrixValue.Matrix<CellBase>) => void;
244
+ columnContextEnable: boolean;
239
245
  data: MatrixValue.Matrix<CellBase>;
240
246
  };
241
247
 
@@ -55,6 +55,7 @@ export const Default: Story = {
55
55
  wrapText: false,
56
56
  },
57
57
  },
58
+ isDisable:true,
58
59
  },
59
60
  {
60
61
  value: 'Test Data 2',
@@ -134,7 +135,12 @@ export const Default: Story = {
134
135
  ],
135
136
  },
136
137
  ],
137
- toolbar: 'show',
138
+ toolbar: 'hide',
139
+ sheetBar: 'hide',
140
+ colCount: 10,
141
+ rowCount: 10,
142
+ columnContextEnable: true,
143
+ rowContextEnable: true,
138
144
  contextOption: {
139
145
  open: true,
140
146
  options: [
@@ -155,7 +161,9 @@ export const Default: Story = {
155
161
  contextHeightPositioning: -220,
156
162
  contextWidthPositioning: -180,
157
163
  sheetHeight: '300px',
158
- onSave: () => {},
164
+ onSave: (val) => {
165
+ console.log(val);
166
+ },
159
167
  },
160
168
  };
161
169
 
@@ -53,19 +53,19 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
53
53
 
54
54
  // Default style to Excel
55
55
  const basicStyle: React.CSSProperties = {
56
- color: 'var(--input-hover-border-color)',
57
- backgroundColor: 'var(--drawer-footer-bg)',
58
- borderColor: 'var(--excel-sheet-border)',
56
+ color: '#e42525', // Needed hexacode for backend
57
+ backgroundColor: '#e42525', // Needed hexacode for backend
58
+ borderColor: '#c9c9c9', // Needed hexacode for backend
59
59
  textDecoration: 'none solid',
60
- borderRight: `1px solid var(--excel-sheet-border)`,
61
- borderLeft: `1px solid var(--excel-sheet-border)`,
62
- borderTop: `1px solid var(--excel-sheet-border)`,
63
- borderBottom: `1px solid var(--excel-sheet-border)`,
60
+ borderRight: `1px solid var(--excel-header-border)`,
61
+ borderLeft: `1px solid var(--excel-header-border)`,
62
+ borderTop: `1px solid var(--excel-header-border)`,
63
+ borderBottom: `1px solid var(--excel-header-border)`,
64
64
  fontSize: '15px',
65
65
  fontWeight: 'normal',
66
66
  fontStyle: 'normal',
67
67
  fontFamily: 'Times New Roman',
68
- textAlign: 'center',
68
+ textAlign: 'left',
69
69
  };
70
70
 
71
71
  const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
@@ -103,9 +103,9 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
103
103
  value: '11',
104
104
  });
105
105
  const [colorContainer, setColorPicker] = useState<ColorContainer>({
106
- color: 'var(--error-light)',
107
- backgroundColor: 'var(--error-light)',
108
- borderColor: 'var(--input-hover-border-color)',
106
+ color: '#e42525', // Needed hexacode for backend
107
+ backgroundColor: '#e42525', // Needed hexacode for backend
108
+ borderColor: '#c9c9c9', // Needed hexacode for backend
109
109
  });
110
110
 
111
111
  const borderTypeIcon = [
@@ -33,6 +33,7 @@ interface WorkData {
33
33
  /** Styling options for the cell */
34
34
  styles: BackendStyle; //TODO remove 's' for Style
35
35
  type?: boolean;
36
+ isDisable?: boolean;
36
37
  }
37
38
 
38
39
  type BackendStyle = {
@@ -2,13 +2,13 @@ const getTextAlignment = (
2
2
  alignment: string
3
3
  ): 'left' | 'right' | 'center' | 'justify' => {
4
4
  switch (alignment.toLowerCase()) {
5
- case 'left':
5
+ case 'LEFT':
6
6
  return 'left';
7
- case 'right':
7
+ case 'RIGHT':
8
8
  return 'right';
9
- case 'center':
9
+ case 'CENTER':
10
10
  return 'center';
11
- case 'justify':
11
+ case 'JUSTIFY':
12
12
  return 'justify';
13
13
  default:
14
14
  return 'left';
@@ -40,15 +40,15 @@ const getTextAlignmentBack = (
40
40
  ): string => {
41
41
  switch (alignment) {
42
42
  case 'left':
43
- return 'left';
43
+ return 'LEFT';
44
44
  case 'right':
45
- return 'right';
45
+ return 'RIGHT';
46
46
  case 'center':
47
- return 'center';
47
+ return 'CENTER';
48
48
  case 'justify':
49
- return 'justify';
49
+ return 'JUSTIFY';
50
50
  default:
51
- return 'left';
51
+ return 'LEFT';
52
52
  }
53
53
  };
54
54
 
@@ -85,25 +85,25 @@ export function convertStyleToFrontend(
85
85
  borderTop =
86
86
  border.top === 'MEDIUM'
87
87
  ? '2px solid var(--input-hover-border-color)'
88
- : '1px solid var(--excel-sheet-border)';
88
+ : '1px solid var(--excel-header-border)';
89
89
  }
90
90
  if (border.right !== 'THIN') {
91
91
  borderRight =
92
92
  border.right === 'MEDIUM'
93
93
  ? '2px solid var(--input-hover-border-color)'
94
- : '1px solid var(--excel-sheet-border)';
94
+ : '1px solid var(--excel-header-border)';
95
95
  }
96
96
  if (border.bottom !== 'THIN') {
97
97
  borderBottom =
98
98
  border.bottom === 'MEDIUM'
99
99
  ? '2px solid var(--input-hover-border-color)'
100
- : '1px solid var(--excel-sheet-border)';
100
+ : '1px solid var(--excel-header-border)';
101
101
  }
102
102
  if (border.left !== 'THIN') {
103
103
  borderLeft =
104
104
  border.left === 'MEDIUM'
105
105
  ? '2px solid var(--input-hover-border-color)'
106
- : '1px solid var(--excel-sheet-border)';
106
+ : '1px solid var(--excel-header-border)';
107
107
  }
108
108
 
109
109
  return {
@@ -128,18 +128,16 @@ const getBorderStyle = (
128
128
  border: string | undefined
129
129
  ): 'NONE' | 'THIN' | 'MEDIUM' | 'THICK' => {
130
130
  if (!border || border === 'none') {
131
- return 'NONE';
131
+ return 'THIN';
132
132
  }
133
133
  if (
134
134
  border.includes('solid') ||
135
135
  border.includes('dashed') ||
136
136
  border.includes('dotted')
137
137
  ) {
138
- if (border.includes('2px') || border.includes('thin')) {
139
- return 'THIN';
140
- } else if (border.includes('3px') || border.includes('medium')) {
138
+ if (border.includes('2px') || border.includes('medium')) {
141
139
  return 'MEDIUM';
142
- } else if (border.includes('4px') || border.includes('thick')) {
140
+ } else if (border.includes('3px') || border.includes('medium')) {
143
141
  return 'THICK';
144
142
  }
145
143
  }
@@ -151,7 +149,7 @@ export const convertStyleToBackend = (
151
149
  ): BackendStyle => {
152
150
  return {
153
151
  name: frontendStyle.fontFamily || 'Arial',
154
- size: parseInt(frontendStyle.fontSize?.toString() || '11', 10),
152
+ size: parseInt(frontendStyle.fontSize?.toString() || '11', 11),
155
153
  bold: frontendStyle.fontWeight === 'bold',
156
154
  italic: frontendStyle.fontStyle === 'italic',
157
155
  underline: 'solid',
@@ -129,6 +129,7 @@ const MenuOption = ({
129
129
  dropdownPlacement = 'down',
130
130
  optionCardVariant,
131
131
  targetRef,
132
+ treeRowRef,
132
133
  }: MenuOptionProps) => {
133
134
  const [isClicked, setIsClicked] = useState(false);
134
135
  const menuRef = useRef<HTMLDivElement>(null);
@@ -148,6 +149,9 @@ const MenuOption = ({
148
149
  };
149
150
 
150
151
  const handleOptionClick = (option: OptionClick) => {
152
+ const actionContainer = treeRowRef?.current?.children[0]
153
+ ?.children[2] as HTMLElement;
154
+ actionContainer.classList.remove('table-row-add-button');
151
155
  onOptionClick(option);
152
156
  closeDropDown();
153
157
  };
@@ -209,6 +209,7 @@ interface MenuOptionProps {
209
209
  */
210
210
  optionCardVariant?: 'primary';
211
211
  targetRef?: string | React.RefObject<HTMLElement>;
212
+ treeRowRef?: React.RefObject<any | null>;
212
213
  }
213
214
 
214
215
  interface OptionProps {
@@ -167,3 +167,11 @@
167
167
  border: 2px solid var(--ff-mini-modal-box-shadow);
168
168
  border-radius: 4px;
169
169
  }
170
+ .ff-mini-modal-loop {
171
+ display: flex;
172
+ flex-wrap: wrap;
173
+ }
174
+ .ff-mini-modal-loop-div {
175
+ width: 500px;
176
+ height: 300px;
177
+ }