pixel-react 1.8.3 → 1.8.5
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/.yarn/install-state.gz +0 -0
- package/lib/1fb4472b34e4fe07.css +1 -0
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -0
- package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
- package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
- package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
- package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
- package/lib/components/Button/Button.stories.d.ts +13 -0
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +3 -0
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
- package/lib/components/Charts/LineChart/types.d.ts +1 -0
- package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
- package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
- package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
- package/lib/components/Chip/Chip.stories.d.ts +14 -0
- package/lib/components/ConditionalDropdown/types.d.ts +4 -0
- package/lib/components/DatePicker/DatePicker.stories.d.ts +9 -0
- package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +6 -0
- package/lib/components/Drawer/Drawer.stories.d.ts +12 -0
- package/lib/components/Drawer/Types.d.ts +4 -0
- package/lib/components/Excel/ExcelContextMenu/ExcelContextMenu.d.ts +4 -0
- package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +10 -4
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.d.ts +10 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.d.ts +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +9 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +0 -2
- package/lib/components/Excel/Types.d.ts +14 -10
- package/lib/components/ExcelFile/ColorBarselector/ColorBarSelector.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
- package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
- package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
- package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
- package/lib/components/ExcelFile/Types.d.ts +129 -0
- package/lib/components/ExcelFile/index.d.ts +1 -0
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
- package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
- package/lib/components/Form/Form.stories.d.ts +7 -0
- package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
- package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
- package/lib/components/Icon/Icon.stories.d.ts +8 -0
- package/lib/components/IconButton/IconButton.stories.d.ts +7 -0
- package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
- package/lib/components/Input/Input.stories.d.ts +9 -0
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +9 -0
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +11 -0
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
- package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
- package/lib/components/MenuOption/MenuOption.stories.d.ts +16 -0
- package/lib/components/MiniModal/MiniModal.stories.d.ts +10 -0
- package/lib/components/Modal/Modal.stories.d.ts +7 -0
- package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +10 -0
- package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
- package/lib/components/Paper/Paper.stories.d.ts +11 -0
- package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +9 -0
- package/lib/components/Search/Search.stories.d.ts +6 -0
- package/lib/components/Select/Select.stories.d.ts +13 -0
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +17 -0
- package/lib/components/Select/components/types.d.ts +3 -2
- package/lib/components/Select/types.d.ts +10 -2
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
- package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
- package/lib/components/Table/Table.stories.d.ts +13 -0
- package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
- package/lib/components/Tabs/Tabs.stories.d.ts +9 -0
- package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
- package/lib/components/Toast/Toast.stories.d.ts +6 -0
- package/lib/components/Toastify/Toastify.stories.d.ts +6 -0
- package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
- package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
- package/lib/components/Typography/Typography.stories.d.ts +10 -0
- package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
- package/lib/index.d.ts +47 -6
- package/lib/index.esm.js +5088 -2119
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +5097 -2118
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
- package/lib/utils/compareArrays/compareArrays.stories.d.ts +6 -0
- package/lib/utils/compareObjects/compareObjects.stories.d.ts +6 -0
- package/lib/utils/debounce/debounce.stories.d.ts +6 -0
- package/lib/utils/ffID/ffID.stories.d.ts +6 -0
- package/lib/utils/find/findAndInsert.d.ts +7 -0
- package/lib/utils/find/findAndInsert.stories.d.ts +7 -0
- package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
- package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
- package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
- package/lib/utils/keyBoardActionUtil/UseKeyboardActions.d.ts +2 -0
- package/lib/utils/keyBoardActionUtil/types.d.ts +4 -0
- package/lib/utils/throttle/throttle.stories.d.ts +6 -0
- package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
- package/lib/validations/regex.d.ts +5 -1
- package/package.json +6 -1
- package/src/assets/Themes/BaseTheme.scss +1 -0
- package/src/assets/Themes/DarkTheme.scss +1 -1
- package/src/assets/icons/external_user.svg +13 -0
- package/src/assets/icons/group_user.svg +12 -0
- package/src/assets/icons/single_user.svg +12 -0
- package/src/assets/icons/unfollow_icon.svg +3 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +38 -6
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +10 -4
- package/src/components/Charts/DashboardDonutChart/types.ts +4 -1
- package/src/components/Charts/LineChart/LineChart.stories.tsx +27 -88
- package/src/components/Charts/LineChart/LineChart.tsx +138 -42
- package/src/components/Charts/LineChart/types.ts +1 -0
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +3 -3
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +47 -43
- package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +1 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +2 -1
- package/src/components/ConditionalDropdown/types.ts +4 -0
- package/src/components/Drawer/Drawer.stories.tsx +1 -0
- package/src/components/Drawer/Drawer.tsx +5 -1
- package/src/components/Drawer/Types.ts +4 -0
- package/src/components/Editor/Editor.scss +23 -18
- package/src/components/Editor/Editor.tsx +2 -2
- package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +1 -1
- package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx +6 -2
- package/src/components/Excel/ExcelFile/ExcelFile.scss +45 -41
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +33 -11
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +29 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +0 -36
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +2 -2
- package/src/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.tsx +1 -40
- package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +2 -2
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +3 -3
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +12 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +3 -2
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +0 -3
- package/src/components/Excel/ExcelFile.stories.tsx +20 -28
- package/src/components/Excel/Types.ts +17 -15
- package/src/components/Icon/iconList.ts +8 -0
- package/src/components/Modal/Modal.stories.tsx +7 -0
- package/src/components/Modal/Modal.tsx +17 -20
- package/src/components/Select/Select.stories.tsx +85 -0
- package/src/components/Select/Select.tsx +10 -2
- package/src/components/Select/components/Dropdown.tsx +23 -15
- package/src/components/Select/components/types.ts +3 -2
- package/src/components/Select/types.ts +12 -2
- package/src/index.ts +20 -0
- package/src/utils/keyBoardActionUtil/UseKeyboardAction.stories.tsx +53 -0
- package/src/utils/keyBoardActionUtil/UseKeyboardActions.tsx +20 -0
- package/src/utils/keyBoardActionUtil/types.ts +4 -0
- package/src/validations/regex.stories.tsx +24 -0
- package/src/validations/regex.ts +15 -0
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/TableTree/TableTree copy.d.ts +0 -25
- package/src/assets/images/photo.png +0 -0
- /package/lib/components/{Excel → ExcelFile}/ContextMenu/ContextMenu.d.ts +0 -0
@@ -19,6 +19,7 @@ const Drawer: FC<DrawerProps> = ({
|
|
19
19
|
leftSecondaryButtonProps = {},
|
20
20
|
showEditButton = false,
|
21
21
|
onEdit = () => {},
|
22
|
+
onCollapse = () => {},
|
22
23
|
overlay = false,
|
23
24
|
isFooterRequired = true,
|
24
25
|
footerContent = null,
|
@@ -48,7 +49,10 @@ const Drawer: FC<DrawerProps> = ({
|
|
48
49
|
handleEsc(onClose);
|
49
50
|
|
50
51
|
const toggleExpand = () => {
|
51
|
-
setIsExpanded((prev) =>
|
52
|
+
setIsExpanded((prev) => {
|
53
|
+
onCollapse(!prev);
|
54
|
+
return !prev;
|
55
|
+
});
|
52
56
|
};
|
53
57
|
|
54
58
|
const onCancel = () => {
|
@@ -1,16 +1,13 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
border-bottom: 1px dashed var(--ff-editor-border-color);
|
7
|
-
border-left: 1px solid var(--ff-editor-border-color);
|
1
|
+
@mixin folding-icon-styles($color: var(--base-bg-color), $zIndex: 999999, $opacity: 1) {
|
2
|
+
color: $color !important;
|
3
|
+
fill: $color !important;
|
4
|
+
z-index: $zIndex !important;
|
5
|
+
opacity: $opacity !important;
|
8
6
|
}
|
9
7
|
|
10
8
|
/* Style for the line number gutter */
|
11
9
|
.monaco-editor .margin {
|
12
10
|
background-color: var(--ff-editor-gutter-color) !important;
|
13
|
-
width: 32px !important;
|
14
11
|
}
|
15
12
|
|
16
13
|
/* Style for the line numbers */
|
@@ -34,10 +31,6 @@
|
|
34
31
|
width: 100% !important;
|
35
32
|
}
|
36
33
|
|
37
|
-
.monaco-scrollable-element {
|
38
|
-
left: 32px !important;
|
39
|
-
}
|
40
|
-
|
41
34
|
.monaco-editor .current-line-background {
|
42
35
|
background-color: var(--ff-editor-line-bg) !important;
|
43
36
|
}
|
@@ -46,11 +39,23 @@
|
|
46
39
|
display: flex;
|
47
40
|
flex-direction: column;
|
48
41
|
gap: 10px;
|
49
|
-
.
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
42
|
+
.monaco-editor {
|
43
|
+
border-radius: 6px;
|
44
|
+
border-top: 1px solid var(--ff-editor-border-color);
|
45
|
+
border-right: 1px dashed var(--ff-editor-border-color);
|
46
|
+
border-bottom: 1px dashed var(--ff-editor-border-color);
|
47
|
+
border-left: 1px solid var(--ff-editor-border-color);
|
48
|
+
}
|
49
|
+
.monaco-editor .cldr.codicon.codicon-folding-collapsed,
|
50
|
+
.monaco-editor .cldr.codicon.codicon-folding-expanded,
|
51
|
+
.monaco-editor .cldr.codicon.codicon-folding-manual-collapsed,
|
52
|
+
.monaco-editor .cldr.codicon.codicon-folding-manual-expanded {
|
53
|
+
@include folding-icon-styles()
|
54
|
+
}
|
55
|
+
.monaco-editor .cldr.codicon.codicon-folding-expanded {
|
56
|
+
@include folding-icon-styles()
|
57
|
+
}
|
58
|
+
.cldr.codicon.codicon-folding-manual-collapsed {
|
59
|
+
@include folding-icon-styles()
|
55
60
|
}
|
56
61
|
}
|
@@ -218,8 +218,8 @@ const Editor = forwardRef<any, EditorProps>(
|
|
218
218
|
return (
|
219
219
|
<div style={{ width, height }} className="ff-editor-container">
|
220
220
|
<MonacoEditor
|
221
|
-
height=
|
222
|
-
width=
|
221
|
+
height={height}
|
222
|
+
width={width}
|
223
223
|
language={language}
|
224
224
|
value={value}
|
225
225
|
options={{
|
@@ -5,13 +5,17 @@ import { ContextMenuState } from '../ExcelFile/ExcelFileComponents/types';
|
|
5
5
|
|
6
6
|
type ExcelContextMenuProps = {
|
7
7
|
contextMenu: ContextMenuState;
|
8
|
+
position: { x: number; y: number };
|
8
9
|
};
|
9
10
|
|
10
|
-
const ExcelContextMenu: React.FC<ExcelContextMenuProps> = ({
|
11
|
+
const ExcelContextMenu: React.FC<ExcelContextMenuProps> = ({
|
12
|
+
contextMenu,
|
13
|
+
position,
|
14
|
+
}) => {
|
11
15
|
return (
|
12
16
|
<div
|
13
17
|
className="ff-excel-menu"
|
14
|
-
style={{ left:
|
18
|
+
style={{ left: position.x, top: position.y }}
|
15
19
|
>
|
16
20
|
{contextMenu.options.map((option) => (
|
17
21
|
<div
|
@@ -1,55 +1,59 @@
|
|
1
|
-
.ff-excel
|
1
|
+
.ff-excel {
|
2
2
|
position: relative;
|
3
|
-
top: 0;
|
4
|
-
}
|
5
|
-
|
6
|
-
.ff-excel-sheet-bar {
|
7
|
-
position: static;
|
8
|
-
max-width: 100%;
|
9
|
-
margin-left: 60px;
|
10
|
-
display: flex;
|
11
|
-
height: 36px;
|
12
|
-
align-items: center;
|
13
|
-
color: var(--brand2-color);
|
14
|
-
box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);
|
15
3
|
|
16
|
-
.ff-excel-
|
4
|
+
.ff-excel-sheet {
|
17
5
|
position: relative;
|
18
|
-
background-color: var(--tab-bg-color);
|
19
|
-
display: flex;
|
20
|
-
align-items: center;
|
21
|
-
justify-content: center;
|
22
|
-
width: 40px;
|
23
6
|
top: 0;
|
24
|
-
left: 0px;
|
25
|
-
height: 100%;
|
26
|
-
|
27
|
-
.ff-excel-add-sheet-icon {
|
28
|
-
padding: 8px 10px;
|
29
|
-
}
|
30
7
|
}
|
31
8
|
|
32
|
-
.ff-excel-
|
33
|
-
|
9
|
+
.ff-excel-sheet-bar {
|
10
|
+
position: static;
|
11
|
+
max-width: 100%;
|
12
|
+
margin-left: 60px;
|
34
13
|
display: flex;
|
35
|
-
|
14
|
+
height: 36px;
|
36
15
|
align-items: center;
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
cursor: pointer;
|
16
|
+
color: var(--brand2-color);
|
17
|
+
box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);
|
18
|
+
|
19
|
+
.ff-excel-add-sheet-set {
|
20
|
+
position: relative;
|
21
|
+
background-color: var(--tab-bg-color);
|
44
22
|
display: flex;
|
45
|
-
|
46
|
-
|
47
|
-
|
23
|
+
align-items: center;
|
24
|
+
justify-content: center;
|
25
|
+
width: 40px;
|
26
|
+
top: 0;
|
27
|
+
left: 0px;
|
28
|
+
height: 100%;
|
29
|
+
|
30
|
+
.ff-excel-add-sheet-icon {
|
31
|
+
padding: 8px 10px;
|
48
32
|
}
|
33
|
+
}
|
34
|
+
|
35
|
+
.ff-excel-tab-container {
|
36
|
+
height: 36px;
|
37
|
+
display: flex;
|
38
|
+
overflow-x: auto;
|
39
|
+
align-items: center;
|
40
|
+
scrollbar-width: none;
|
41
|
+
|
42
|
+
.ff-excel-tab-list {
|
43
|
+
margin-top: 2px;
|
44
|
+
padding: 10px 9px;
|
45
|
+
min-width: max-content;
|
46
|
+
cursor: pointer;
|
47
|
+
display: flex;
|
48
|
+
background-color: var(--hover-color);
|
49
|
+
&.active {
|
50
|
+
background-color: var(--excel-sheet-button-color);
|
51
|
+
}
|
49
52
|
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
+
&:focus {
|
54
|
+
outline: none;
|
55
|
+
text-decoration: none;
|
56
|
+
}
|
53
57
|
}
|
54
58
|
}
|
55
59
|
}
|
@@ -23,24 +23,32 @@ interface ExcelFileProps {
|
|
23
23
|
|
24
24
|
/** Optional: Provide context menu options for actions like right-click */
|
25
25
|
contextOption?: {
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
26
|
+
open: boolean;
|
27
|
+
options: {
|
28
|
+
label: string;
|
29
|
+
value: string;
|
30
|
+
iconName: string;
|
31
|
+
action: () => void;
|
32
|
+
}[];
|
33
|
+
};
|
30
34
|
|
31
35
|
/** Controls whether the toolbar is shown, disabled, or hidden */
|
32
36
|
toolbar?: 'show' | 'disable' | 'hide';
|
33
37
|
|
34
38
|
/** Callback function to save the Excel data */
|
35
39
|
onSave?: (saveData: any) => void;
|
36
|
-
|
40
|
+
contextHeightPositioning?: number;
|
41
|
+
contextWidthPositioning?: number;
|
37
42
|
/** Set your dynamic sheet Height*/
|
38
43
|
sheetHeight?: string;
|
39
44
|
}
|
40
45
|
|
41
46
|
const ExcelFile: React.FC<ExcelFileProps> = ({
|
42
47
|
excelData,
|
48
|
+
contextOption,
|
43
49
|
sheetHeight = '100%',
|
50
|
+
contextHeightPositioning = 0,
|
51
|
+
contextWidthPositioning = 0,
|
44
52
|
onSave = (saveData) => {
|
45
53
|
saveData();
|
46
54
|
},
|
@@ -84,6 +92,11 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
|
|
84
92
|
Matrix.Matrix<CellBase>
|
85
93
|
>([[EmptyRow]]);
|
86
94
|
|
95
|
+
const [position, setPosition] = useState<{ x: number; y: number }>({
|
96
|
+
x: 0,
|
97
|
+
y: 0,
|
98
|
+
});
|
99
|
+
|
87
100
|
const pageRef = useRef<string>('');
|
88
101
|
const sheetRef = useRef<HTMLDivElement | null>(null);
|
89
102
|
|
@@ -226,7 +239,6 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
|
|
226
239
|
}),
|
227
240
|
};
|
228
241
|
onSave(savedData);
|
229
|
-
toast.success('File saved successfully!');
|
230
242
|
};
|
231
243
|
|
232
244
|
const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
|
@@ -430,21 +442,29 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
|
|
430
442
|
setContextMenu({
|
431
443
|
open: true,
|
432
444
|
position: {
|
433
|
-
x: event.pageX
|
434
|
-
y: event.pageY
|
445
|
+
x: event.pageX,
|
446
|
+
y: event.pageY,
|
435
447
|
},
|
436
448
|
options: options,
|
437
449
|
});
|
438
450
|
};
|
451
|
+
const setContextPosition = (event: React.MouseEvent) => {
|
452
|
+
event.preventDefault();
|
453
|
+
setPosition({
|
454
|
+
x: event.pageX + contextWidthPositioning,
|
455
|
+
y: event.pageY + contextHeightPositioning,
|
456
|
+
});
|
457
|
+
};
|
439
458
|
|
440
459
|
return (
|
441
460
|
<>
|
442
461
|
{sheetNames.length > 0 && (
|
443
|
-
|
462
|
+
<div className="ff-excel" onContextMenu={setContextPosition}>
|
444
463
|
<div ref={sheetRef} className="ff-excel-sheet">
|
445
464
|
<Spreadsheet
|
446
465
|
sheetHeight={sheetHeight}
|
447
466
|
setContextMenu={setContextMenu}
|
467
|
+
contextOption={contextOption}
|
448
468
|
data={selectedSheetData}
|
449
469
|
onEvaluatedDataChange={onEvaluateChange}
|
450
470
|
/>
|
@@ -501,9 +521,11 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
|
|
501
521
|
))}
|
502
522
|
</div>
|
503
523
|
</div>
|
504
|
-
{contextMenu.open &&
|
524
|
+
{contextMenu.open && (
|
525
|
+
<ExcelContextMenu contextMenu={contextMenu} position={position} />
|
526
|
+
)}
|
505
527
|
<Toastify />
|
506
|
-
|
528
|
+
</div>
|
507
529
|
)}
|
508
530
|
</>
|
509
531
|
);
|
@@ -10,6 +10,17 @@ import * as Matrix from './matrix';
|
|
10
10
|
|
11
11
|
type Props = {
|
12
12
|
DataEditor: Types.DataEditorComponent;
|
13
|
+
setContextMenu:React.Dispatch<React.SetStateAction<ContextMenuState>>;
|
14
|
+
contextOption?: {
|
15
|
+
open: boolean;
|
16
|
+
options: {
|
17
|
+
label: string;
|
18
|
+
value: string;
|
19
|
+
iconName: string;
|
20
|
+
action: () => void;
|
21
|
+
}[];
|
22
|
+
};
|
23
|
+
|
13
24
|
};
|
14
25
|
|
15
26
|
const ActiveCell: React.FC<Props> = (props) => {
|
@@ -53,7 +64,7 @@ const ActiveCell: React.FC<Props> = (props) => {
|
|
53
64
|
width: (dimensionValue?.width ?? 0) + 1,
|
54
65
|
};
|
55
66
|
return dimensionValue;
|
56
|
-
})
|
67
|
+
});``
|
57
68
|
|
58
69
|
const hidden = React.useMemo(
|
59
70
|
() => !active || !dimensions,
|
@@ -126,6 +137,22 @@ const ActiveCell: React.FC<Props> = (props) => {
|
|
126
137
|
}
|
127
138
|
}, [activate, autoFill, active]);
|
128
139
|
|
140
|
+
const contextClick = React.useCallback(
|
141
|
+
(event: React.MouseEvent) => {
|
142
|
+
event.preventDefault();
|
143
|
+
|
144
|
+
props.setContextMenu({
|
145
|
+
open: props.contextOption?.open ?? false,
|
146
|
+
position: {
|
147
|
+
x: event.pageX - 450,
|
148
|
+
y: event.pageY - 260,
|
149
|
+
},
|
150
|
+
options: props.contextOption?.options || [],
|
151
|
+
});
|
152
|
+
},
|
153
|
+
[props]
|
154
|
+
);
|
155
|
+
|
129
156
|
return hidden ? null : (
|
130
157
|
<div
|
131
158
|
ref={rootRef}
|
@@ -134,6 +161,7 @@ const ActiveCell: React.FC<Props> = (props) => {
|
|
134
161
|
`ff-spreadsheet-active-cell--${mode}`
|
135
162
|
)}
|
136
163
|
style={dimensions}
|
164
|
+
onContextMenu={contextClick}
|
137
165
|
onClick={mode === 'view' && !readOnly ? edit : undefined}
|
138
166
|
tabIndex={0}
|
139
167
|
>
|
@@ -22,7 +22,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
|
|
22
22
|
activate,
|
23
23
|
setCellDimensions,
|
24
24
|
setCellData,
|
25
|
-
setContextMenu,
|
26
25
|
}): React.ReactElement => {
|
27
26
|
const rootRef = React.useRef<HTMLTableCellElement | null>(null);
|
28
27
|
const point = React.useMemo(
|
@@ -33,23 +32,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
|
|
33
32
|
[row, column]
|
34
33
|
);
|
35
34
|
|
36
|
-
let options = [
|
37
|
-
{
|
38
|
-
label: 'Get data from Header',
|
39
|
-
value: 'Get data from Header',
|
40
|
-
iconName: 'success',
|
41
|
-
disable: false,
|
42
|
-
action: () => {},
|
43
|
-
},
|
44
|
-
{
|
45
|
-
label: 'Get Cell Value',
|
46
|
-
value: 'Get Cell Value',
|
47
|
-
iconName: 'success',
|
48
|
-
disable: false,
|
49
|
-
action: () => {},
|
50
|
-
},
|
51
|
-
];
|
52
|
-
|
53
35
|
const handleMouseDown = React.useCallback(
|
54
36
|
(event: React.MouseEvent<HTMLTableCellElement>) => {
|
55
37
|
if (mode === 'view') {
|
@@ -75,22 +57,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
|
|
75
57
|
[setCellDimensions, select, dragging, point]
|
76
58
|
);
|
77
59
|
|
78
|
-
const contextClick = React.useCallback(
|
79
|
-
(event: React.MouseEvent) => {
|
80
|
-
event.preventDefault();
|
81
|
-
select(point);
|
82
|
-
setContextMenu({
|
83
|
-
open: true,
|
84
|
-
position: {
|
85
|
-
x: event.pageX - 50,
|
86
|
-
y: event.pageY - 260,
|
87
|
-
},
|
88
|
-
options: options,
|
89
|
-
});
|
90
|
-
},
|
91
|
-
[setContextMenu, select, point]
|
92
|
-
);
|
93
|
-
|
94
60
|
React.useEffect(() => {
|
95
61
|
const root = rootRef.current;
|
96
62
|
if (selected && root) {
|
@@ -115,12 +81,10 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
|
|
115
81
|
})}
|
116
82
|
onMouseEnter={handleMouseOver}
|
117
83
|
onMouseDown={handleMouseDown}
|
118
|
-
onContextMenu={contextClick}
|
119
84
|
tabIndex={0}
|
120
85
|
>
|
121
86
|
<DataViewer
|
122
87
|
row={row}
|
123
|
-
setContextMenu={setContextMenu}
|
124
88
|
column={column}
|
125
89
|
cell={data}
|
126
90
|
evaluatedCell={evaluatedData}
|
@@ -10,54 +10,15 @@ export const FALSE_TEXT = 'FALSE';
|
|
10
10
|
const DataViewer = <Cell extends Types.CellBase<Value>, Value>({
|
11
11
|
cell,
|
12
12
|
evaluatedCell,
|
13
|
-
setContextMenu,//Todo
|
14
13
|
}: Types.DataViewerProps<Cell>): React.ReactElement => {
|
15
|
-
|
16
14
|
const value = getValue(cell, evaluatedCell);
|
17
15
|
|
18
|
-
const options = [
|
19
|
-
{
|
20
|
-
label: 'Dynamic Cell One',
|
21
|
-
value: 'Dynamic Cell One',
|
22
|
-
iconName: 'plus_icon',
|
23
|
-
action: () => {
|
24
|
-
},
|
25
|
-
disable: false,
|
26
|
-
},
|
27
|
-
{
|
28
|
-
label: 'Dynamic Cell Two',
|
29
|
-
value: 'Dynamic Cell Two',
|
30
|
-
iconName: 'plus_icon',
|
31
|
-
action: () => {
|
32
|
-
},
|
33
|
-
disable: false,
|
34
|
-
},
|
35
|
-
];
|
36
|
-
|
37
|
-
const contextClick = React.useCallback(
|
38
|
-
(event: React.MouseEvent) => {
|
39
|
-
event.preventDefault();
|
40
|
-
|
41
|
-
setContextMenu({
|
42
|
-
open: true,
|
43
|
-
position: {
|
44
|
-
x: event.pageX - 50,
|
45
|
-
y: event.pageY - 260,
|
46
|
-
},
|
47
|
-
options: options,
|
48
|
-
});
|
49
|
-
},
|
50
|
-
[ setContextMenu]
|
51
|
-
);
|
52
|
-
|
53
16
|
return typeof value === 'boolean' ? (
|
54
|
-
<span
|
55
|
-
className="ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean">
|
17
|
+
<span className="ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean">
|
56
18
|
{convertBooleanToText(value)}
|
57
19
|
</span>
|
58
20
|
) : (
|
59
21
|
<span
|
60
|
-
onContextMenu={contextClick}
|
61
22
|
className={classNames('ff-spreadsheet-data-viewer', {
|
62
23
|
'ff-spreadsheet-data-viewer--preserve-breaks': hasLineBreaker(value),
|
63
24
|
})}
|
@@ -51,7 +51,7 @@
|
|
51
51
|
|
52
52
|
.ff-spreadsheet-active-cell {
|
53
53
|
position: absolute;
|
54
|
-
border:
|
54
|
+
border: 2px solid var(--outline-color);
|
55
55
|
box-sizing: border-box;
|
56
56
|
z-index: 100;
|
57
57
|
}
|
@@ -188,7 +188,7 @@
|
|
188
188
|
|
189
189
|
.ff-spreadsheet-floating-rect--selected {
|
190
190
|
background: var(--outline-background-color);
|
191
|
-
border:
|
191
|
+
border: 2px var(--outline-color) solid;
|
192
192
|
}
|
193
193
|
|
194
194
|
.ff-spreadsheet-floating-rect--dragging {
|
@@ -196,6 +196,6 @@
|
|
196
196
|
}
|
197
197
|
|
198
198
|
.ff-spreadsheet-floating-rect--copied {
|
199
|
-
border:
|
199
|
+
border: 2px var(--outline-color) dashed;
|
200
200
|
}
|
201
201
|
}
|
@@ -101,6 +101,15 @@ 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
|
+
contextOption?: {
|
105
|
+
open: boolean;
|
106
|
+
options: {
|
107
|
+
label: string;
|
108
|
+
value: string;
|
109
|
+
iconName: string;
|
110
|
+
action: () => void;
|
111
|
+
}[];
|
112
|
+
};
|
104
113
|
};
|
105
114
|
|
106
115
|
/**
|
@@ -123,6 +132,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
123
132
|
onSelect = () => {},
|
124
133
|
onActivate = () => {},
|
125
134
|
onEvaluatedDataChange = () => {},
|
135
|
+
contextOption,
|
126
136
|
} = props;
|
127
137
|
type State = Types.StoreState<CellType>;
|
128
138
|
|
@@ -440,7 +450,6 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
440
450
|
key={columnNumber}
|
441
451
|
row={rowNumber}
|
442
452
|
column={columnNumber}
|
443
|
-
setContextMenu={props.setContextMenu}
|
444
453
|
// @ts-ignore
|
445
454
|
DataViewer={DataViewer}
|
446
455
|
/>
|
@@ -468,6 +477,8 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
468
477
|
const activeCellNode = React.useMemo(
|
469
478
|
() => (
|
470
479
|
<ActiveCell
|
480
|
+
contextOption={contextOption}
|
481
|
+
setContextMenu={props.setContextMenu}
|
471
482
|
// @ts-ignore
|
472
483
|
DataEditor={DataEditor}
|
473
484
|
/>
|
@@ -190,10 +190,10 @@ export function applyBorderToCells(
|
|
190
190
|
return currentData;
|
191
191
|
}
|
192
192
|
|
193
|
-
const { start, end } = selectedRange;
|
194
|
-
|
195
193
|
let updatedData = currentData;
|
196
194
|
|
195
|
+
const { start, end } = selectedRange;
|
196
|
+
|
197
197
|
for (let row = start.row; row <= end.row; row++) {
|
198
198
|
for (let col = start.column; col <= end.column; col++) {
|
199
199
|
const currentCell = Matrix.get({ row, column: col }, updatedData);
|
@@ -229,6 +229,7 @@ export function applyBorderToCells(
|
|
229
229
|
borderRight: `2px solid ${color}`,
|
230
230
|
};
|
231
231
|
break;
|
232
|
+
|
232
233
|
case 'border-left':
|
233
234
|
updatedCell.style = {
|
234
235
|
...currentCell.style,
|
@@ -116,8 +116,6 @@ export type CellComponentProps<Cell extends CellBase = CellBase> = {
|
|
116
116
|
setCellDimensions: (point: Point, dimensions: Dimensions) => void;
|
117
117
|
/** Set data of the cell */
|
118
118
|
setCellData: (cell: Cell) => void;
|
119
|
-
|
120
|
-
setContextMenu: React.Dispatch<React.SetStateAction<ContextMenuState>>;
|
121
119
|
};
|
122
120
|
|
123
121
|
/** Type of the Spreadsheet Cell component */
|
@@ -134,7 +132,6 @@ export type DataViewerProps<Cell extends CellBase = CellBase> =
|
|
134
132
|
DataComponentProps<Cell> & {
|
135
133
|
/** Set data of the cell */
|
136
134
|
setCellData: (cell: Cell) => void;
|
137
|
-
setContextMenu: React.Dispatch<React.SetStateAction<ContextMenuState>>;
|
138
135
|
evaluatedCell: Cell | undefined;
|
139
136
|
};
|
140
137
|
|