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.
- package/lib/ComponentProps/TreeNodeProps.d.ts +2 -1
- package/lib/components/AddResourceButton/AddResourceButton.d.ts +4 -0
- package/lib/components/AddResourceButton/ArrowsButton/ArrowsButton.d.ts +1 -1
- package/lib/components/AddResourceButton/index.d.ts +1 -1
- package/lib/components/AddResourceButton/type.d.ts +2 -0
- package/lib/components/BrowserTabs/BrowserTabs.d.ts +5 -0
- package/lib/components/BrowserTabs/index.d.ts +1 -0
- package/lib/components/BrowserTabs/types.d.ts +64 -0
- package/lib/components/ConnectingBranch/data.d.ts +62 -64
- package/lib/components/ConnectingBranch/types.d.ts +28 -7
- package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +6 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +3 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +15 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +5 -0
- package/lib/components/Excel/Types.d.ts +1 -0
- package/lib/components/MenuOption/MenuOption.d.ts +1 -1
- package/lib/components/MenuOption/types.d.ts +1 -0
- package/lib/components/MiniModal/types.d.ts +2 -1
- package/lib/components/Select/components/types.d.ts +6 -1
- package/lib/components/Select/types.d.ts +17 -0
- package/lib/components/Table/Table.d.ts +1 -1
- package/lib/components/Table/Types.d.ts +1 -0
- package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
- package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
- package/lib/components/TableTree/types.d.ts +4 -3
- package/lib/index.d.ts +127 -13
- package/lib/index.esm.js +992 -462
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +993 -462
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/ComponentProps/TreeNodeProps.ts +2 -1
- package/src/assets/Themes/BaseTheme.scss +1 -2
- package/src/assets/Themes/DarkTheme.scss +0 -1
- package/src/assets/styles/_mixins.scss +19 -0
- package/src/components/AddResourceButton/{AddButton.scss → AddResourceButton.scss} +1 -0
- package/src/components/AddResourceButton/{AddButton.stories.tsx → AddResourceButton.stories.tsx} +4 -4
- package/src/components/AddResourceButton/{AddButton.tsx → AddResourceButton.tsx} +25 -10
- package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.scss +1 -2
- package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +16 -9
- package/src/components/AddResourceButton/index.ts +1 -1
- package/src/components/AddResourceButton/type.ts +2 -0
- package/src/components/BrowserTabs/BrowserTabs.scss +75 -0
- package/src/components/BrowserTabs/BrowserTabs.stories.tsx +366 -0
- package/src/components/BrowserTabs/BrowserTabs.tsx +128 -0
- package/src/components/BrowserTabs/index.ts +1 -0
- package/src/components/BrowserTabs/types.ts +73 -0
- package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +54 -39
- package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +3 -2
- package/src/components/ConnectingBranch/ConnectingBranch.tsx +28 -24
- package/src/components/ConnectingBranch/data.tsx +207 -213
- package/src/components/ConnectingBranch/types.ts +26 -17
- package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +1 -1
- package/src/components/Excel/ExcelFile/ExcelFile.scss +4 -0
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +35 -16
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +14 -3
- package/src/components/Excel/ExcelFile/ExcelFileComponents/DataEditor.tsx +1 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +16 -5
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +12 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +31 -5
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +30 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +47 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +4 -4
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +6 -0
- package/src/components/Excel/ExcelFile.stories.tsx +10 -2
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +11 -11
- package/src/components/Excel/Types.ts +1 -0
- package/src/components/Excel/dataConversion.ts +17 -19
- package/src/components/MenuOption/MenuOption.tsx +4 -0
- package/src/components/MenuOption/types.ts +1 -0
- package/src/components/MiniModal/MiniModal.scss +8 -0
- package/src/components/MiniModal/MiniModal.stories.tsx +60 -0
- package/src/components/MiniModal/types.ts +2 -1
- package/src/components/Select/Select.stories.tsx +43 -1
- package/src/components/Select/Select.tsx +16 -1
- package/src/components/Select/components/Dropdown.scss +41 -1
- package/src/components/Select/components/Dropdown.tsx +52 -6
- package/src/components/Select/components/types.ts +7 -2
- package/src/components/Select/types.ts +22 -0
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +8 -2
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +1 -1
- package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.scss +14 -0
- package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx +6 -11
- package/src/components/Table/Table.stories.tsx +1 -1
- package/src/components/Table/Table.tsx +55 -4
- package/src/components/Table/Types.ts +4 -1
- package/src/components/TableTree/Components/TableCell.tsx +25 -10
- package/src/components/TableTree/Components/TableHead.tsx +5 -5
- package/src/components/TableTree/Components/TableRow.tsx +27 -24
- package/src/components/TableTree/TableTree.scss +89 -69
- package/src/components/TableTree/TableTree.stories.tsx +66 -2
- package/src/components/TableTree/types.ts +4 -3
- package/src/index.ts +2 -0
- package/src/utils/getTreeDetails/getTreeDetails.ts +8 -7
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
- package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
- package/lib/components/Button/Button.stories.d.ts +0 -12
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
- package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
- package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
- package/lib/components/Chip/Chip.stories.d.ts +0 -14
- package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
- package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
- package/lib/components/Drawer/Drawer.stories.d.ts +0 -7
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
- package/lib/components/Form/Form.stories.d.ts +0 -6
- package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
- package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
- package/lib/components/Icon/Icon.stories.d.ts +0 -7
- package/lib/components/IconButton/IconButton.stories.d.ts +0 -6
- package/lib/components/Input/Input.stories.d.ts +0 -9
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
- package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -15
- package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -9
- package/lib/components/Modal/Modal.stories.d.ts +0 -7
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -9
- package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -8
- package/lib/components/Search/Search.stories.d.ts +0 -6
- package/lib/components/Select/Select.stories.d.ts +0 -13
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -15
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +0 -4
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +0 -3
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +0 -4
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +0 -3
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
- package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
- package/lib/components/Table/Table.stories.d.ts +0 -11
- package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
- package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
- package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
- package/lib/components/ThemeProvider/CustomThemeProvider.d.ts +0 -8
- package/lib/components/Toast/Toast.stories.d.ts +0 -6
- package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
- package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
- package/lib/components/Typography/Typography.stories.d.ts +0 -10
- package/lib/hooks/useCustomThemeProvider.d.ts +0 -11
- package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
- package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
- package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
- package/lib/utils/debounce/debounce.stories.d.ts +0 -6
- package/lib/utils/ffID/ffID.stories.d.ts +0 -6
- package/lib/utils/find/findAndInsert.d.ts +0 -7
- package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
- package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
- package/lib/utils/throttle/throttle.stories.d.ts +0 -6
- 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:
|
106
|
+
open: columnContextEnable,
|
96
107
|
position: {
|
97
108
|
x: event.pageX,
|
98
109
|
y: event.pageY,
|
@@ -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:
|
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-
|
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
|
-
|
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
|
-
|
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
|
493
|
-
|
494
|
-
|
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-
|
222
|
-
borderLeft: `1px solid var(--excel-
|
223
|
-
borderTop: `1px solid var(--excel-
|
224
|
-
borderBottom: `1px solid var(--excel-
|
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: '
|
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: '
|
57
|
-
backgroundColor: '
|
58
|
-
borderColor: '
|
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-
|
61
|
-
borderLeft: `1px solid var(--excel-
|
62
|
-
borderTop: `1px solid var(--excel-
|
63
|
-
borderBottom: `1px solid var(--excel-
|
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: '
|
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: '
|
107
|
-
backgroundColor: '
|
108
|
-
borderColor: '
|
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 = [
|
@@ -2,13 +2,13 @@ const getTextAlignment = (
|
|
2
2
|
alignment: string
|
3
3
|
): 'left' | 'right' | 'center' | 'justify' => {
|
4
4
|
switch (alignment.toLowerCase()) {
|
5
|
-
case '
|
5
|
+
case 'LEFT':
|
6
6
|
return 'left';
|
7
|
-
case '
|
7
|
+
case 'RIGHT':
|
8
8
|
return 'right';
|
9
|
-
case '
|
9
|
+
case 'CENTER':
|
10
10
|
return 'center';
|
11
|
-
case '
|
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 '
|
43
|
+
return 'LEFT';
|
44
44
|
case 'right':
|
45
|
-
return '
|
45
|
+
return 'RIGHT';
|
46
46
|
case 'center':
|
47
|
-
return '
|
47
|
+
return 'CENTER';
|
48
48
|
case 'justify':
|
49
|
-
return '
|
49
|
+
return 'JUSTIFY';
|
50
50
|
default:
|
51
|
-
return '
|
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-
|
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-
|
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-
|
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-
|
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 '
|
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('
|
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('
|
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',
|
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
|
};
|