pixel-react 1.6.9 → 1.7.1
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/components/Charts/LineChart/types.d.ts +1 -0
- package/lib/components/Chip/types.d.ts +1 -1
- package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
- package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
- package/lib/components/ConditionalDropdown/index.d.ts +1 -0
- package/lib/components/ConditionalDropdown/types.d.ts +145 -0
- package/lib/components/DownloadClient/type.d.ts +19 -27
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
- package/lib/components/LabelEditTextField/types.d.ts +1 -0
- package/lib/components/MachineInputField/types.d.ts +1 -0
- package/lib/components/MenuOption/MenuOption.d.ts +1 -1
- package/lib/components/MenuOption/types.d.ts +2 -1
- package/lib/components/MiniModal/types.d.ts +1 -0
- package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
- package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
- package/lib/components/NLPInput/NlpInput.d.ts +2 -2
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
- package/lib/components/NLPInput/sampleData.d.ts +104 -0
- package/lib/components/NLPInput/types.d.ts +80 -0
- package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
- package/lib/components/ProgressBar/index.d.ts +1 -0
- package/lib/components/ProgressBar/types.d.ts +12 -0
- package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
- package/lib/components/TableTree/TableTree.d.ts +2 -2
- package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
- package/lib/components/TableTree/types.d.ts +1 -1
- package/lib/hooks/useIntersectionObserver.d.ts +9 -0
- package/lib/index.d.ts +112 -59
- package/lib/index.esm.js +1251 -662
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1252 -662
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
- package/lib/utils/getSequentialPayload/types.d.ts +1 -0
- package/package.json +1 -1
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
- package/src/assets/Themes/BaseTheme.scss +20 -2
- package/src/assets/Themes/DarkTheme.scss +19 -2
- package/src/assets/icons/ai_search.svg +9 -0
- package/src/assets/icons/help_icon.svg +10 -0
- package/src/assets/icons/ios_icon.svg +11 -0
- package/src/assets/icons/plus_round_icon.svg +38 -0
- package/src/assets/icons/tick_icon.svg +2 -2
- package/src/assets/styles/_colors.scss +1 -1
- package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
- package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
- package/src/components/Charts/LineChart/LineChart.tsx +10 -1
- package/src/components/Charts/LineChart/types.ts +1 -0
- package/src/components/Checkbox/Checkbox.scss +3 -1
- package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
- package/src/components/Checkbox/Checkbox.tsx +3 -4
- package/src/components/Chip/Chip.scss +15 -5
- package/src/components/Chip/Chip.stories.tsx +10 -1
- package/src/components/Chip/Chip.tsx +5 -1
- package/src/components/Chip/types.ts +1 -1
- package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
- package/src/components/{AddVariables/AddVariables.stories.tsx → ConditionalDropdown/ConditionalDropdown.stories.tsx} +75 -10
- package/src/components/{AddVariables/AddVariables.tsx → ConditionalDropdown/ConditionalDropdown.tsx} +63 -33
- package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
- package/src/components/ConditionalDropdown/index.ts +1 -0
- package/src/components/{AddVariables → ConditionalDropdown}/types.ts +62 -5
- package/src/components/DownloadClient/DownloadClient.scss +51 -64
- package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
- package/src/components/DownloadClient/DownloadClient.tsx +60 -51
- package/src/components/DownloadClient/type.ts +32 -40
- package/src/components/EditTextField/EditTextField.scss +1 -1
- package/src/components/EditTextField/EditTextField.tsx +14 -20
- package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
- package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
- package/src/components/Excel/ExcelFile.stories.tsx +4 -4
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
- package/src/components/Excel/dataConversion.ts +43 -20
- package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
- package/src/components/FileDropzone/FileDropzone.tsx +24 -4
- package/src/components/Form/Forms.tsx +0 -2
- package/src/components/Icon/iconList.ts +9 -0
- package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
- package/src/components/LabelEditTextField/types.ts +1 -0
- package/src/components/MachineInputField/MachineInputField.scss +1 -5
- package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
- package/src/components/MachineInputField/MachineInputField.tsx +14 -14
- package/src/components/MachineInputField/types.ts +2 -0
- package/src/components/MenuOption/MenuOption.scss +7 -7
- package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
- package/src/components/MenuOption/MenuOption.tsx +9 -13
- package/src/components/MenuOption/types.ts +3 -2
- package/src/components/MiniModal/MiniModal.scss +0 -1
- package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
- package/src/components/MiniModal/MiniModal.tsx +3 -1
- package/src/components/MiniModal/types.ts +1 -0
- package/src/components/MultiSelect/Dropdown.scss +3 -4
- package/src/components/MultiSelect/Dropdown.tsx +34 -7
- package/src/components/MultiSelect/MultiSelect.scss +1 -0
- package/src/components/MultiSelect/MultiSelect.tsx +3 -0
- package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
- package/src/components/MultiSelect/dropdownTypes.ts +2 -0
- package/src/components/NLPInput/NLPInput.scss +77 -21
- package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
- package/src/components/NLPInput/NlpInput.tsx +95 -59
- package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
- package/src/components/NLPInput/sampleData.ts +162 -0
- package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
- package/src/components/ProgressBar/ProgressBar.scss +46 -0
- package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
- package/src/components/ProgressBar/ProgressBar.tsx +61 -0
- package/src/components/ProgressBar/index.ts +1 -0
- package/src/components/ProgressBar/types.ts +12 -0
- package/src/components/Search/Search.tsx +9 -1
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
- package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
- package/src/components/SequentialConnectingBranch/types.ts +7 -5
- package/src/components/Table/Table.scss +1 -0
- package/src/components/TableTree/Components/TableBody.tsx +3 -1
- package/src/components/TableTree/TableTree.stories.tsx +4 -7
- package/src/components/TableTree/TableTree.tsx +27 -181
- package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
- package/src/components/TableTree/data.ts +45 -0
- package/src/components/TableTree/types.ts +4 -4
- package/src/hooks/useIntersectionObserver.tsx +56 -0
- package/src/index.ts +4 -2
- package/src/utils/functionCheck/functionCheck.ts +8 -0
- package/src/utils/getSequentialPayload/types.ts +1 -0
- package/src/components/AddVariables/index.ts +0 -1
@@ -1,80 +1,67 @@
|
|
1
|
-
@use '../../assets/styles/colors' as *;
|
2
|
-
@use '../../assets/styles/fonts';
|
3
1
|
@use '../../assets/styles/mixins' as *;
|
4
2
|
|
5
|
-
.ff-download-client-
|
6
|
-
width: 378px;
|
7
|
-
height: 217px;
|
3
|
+
.ff-download-client-wrapper {
|
8
4
|
position: absolute;
|
9
|
-
|
10
|
-
|
5
|
+
height: 181px;
|
6
|
+
width: 368px;
|
7
|
+
border: 1px solid var(--download-client-border-color);
|
8
|
+
border-radius: 4px;
|
9
|
+
box-shadow: 0px 0px 8px 0px
|
10
|
+
var(--download-client-icon-container-box-shadow-color);
|
11
11
|
|
12
|
-
.ff-download-client-
|
13
|
-
|
12
|
+
.ff-download-client-header-wrapper {
|
13
|
+
position: relative;
|
14
14
|
@include center-content;
|
15
|
-
|
16
|
-
|
17
|
-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
18
|
-
border: 1px solid var(--download-client-border-color);
|
19
|
-
margin-left: 5px;
|
15
|
+
justify-content: space-between;
|
16
|
+
background-color: var(--download-client-header-bg-color);
|
20
17
|
|
21
|
-
.ff-download-client-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
18
|
+
.ff-download-client-hollow-triangle {
|
19
|
+
position: absolute;
|
20
|
+
height: 8px;
|
21
|
+
width: 8px;
|
22
|
+
border: 1px solid var(--download-client-border-color);
|
23
|
+
top: -6px;
|
24
|
+
right: 64px;
|
25
|
+
z-index: -1;
|
26
|
+
border-radius: 2px;
|
27
|
+
transform: rotate(45deg);
|
28
|
+
}
|
30
29
|
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
position: absolute;
|
35
|
-
top: 10px;
|
36
|
-
right: 70px;
|
37
|
-
width: 10px;
|
38
|
-
height: 10px;
|
39
|
-
background-color: var(--download-client-icon-container-bg-color) ;
|
40
|
-
transform: translateY(-50%) rotate(-45deg);
|
41
|
-
z-index: -999;
|
42
|
-
border: 1px solid var(--download-client-header-bg-color);
|
43
|
-
}
|
30
|
+
.ff-download-client-header-text {
|
31
|
+
margin-left: 4px;
|
32
|
+
}
|
44
33
|
|
34
|
+
.ff-download-client-close-icon {
|
35
|
+
cursor: pointer;
|
36
|
+
margin-right: 10px;
|
45
37
|
}
|
38
|
+
}
|
46
39
|
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
margin-bottom: 8px
|
55
|
-
color: var(--popup-text-color);
|
56
|
-
.ff-download-install,
|
57
|
-
.ff-choose-os {
|
58
|
-
padding: 4px 0;
|
59
|
-
}
|
40
|
+
.ff-download-client-content-text {
|
41
|
+
width: calc(100% - 16px);
|
42
|
+
height: 132px;
|
43
|
+
background-color: #fff;
|
44
|
+
padding: 8px;
|
45
|
+
|
46
|
+
.ff-download-client-description-text {
|
47
|
+
margin-bottom: 8px
|
60
48
|
}
|
61
49
|
|
62
|
-
|
63
|
-
|
50
|
+
}
|
51
|
+
|
52
|
+
.ff-download-client-os-wrapper {
|
53
|
+
@include center-content;
|
54
|
+
gap: 24px;
|
55
|
+
|
56
|
+
.ff-os-version-wrapper {
|
64
57
|
@include center-content;
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
border: 1px solid var(--download-client-icon-container-border-color);
|
73
|
-
background-color: var(--download-client-icon-container-bg-color);
|
74
|
-
cursor: pointer;
|
75
|
-
box-shadow: 0px 0px 10px 0px
|
76
|
-
var(--download-client-icon-container-box-shadow-color);
|
77
|
-
}
|
58
|
+
height: 64px;
|
59
|
+
width: 64px;
|
60
|
+
cursor: pointer;
|
61
|
+
border-radius: 8px;
|
62
|
+
border: 1px solid var(--download-client-icon-container-border-color);
|
63
|
+
box-shadow: 0px 0px 10px 0px
|
64
|
+
var(--download-client-icon-container-box-shadow-color);
|
78
65
|
}
|
79
66
|
}
|
80
67
|
}
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react';
|
2
2
|
import DownloadClient from './DownloadClient';
|
3
|
+
import './DownloadClient.scss';
|
3
4
|
|
4
5
|
const meta: Meta<typeof DownloadClient> = {
|
5
6
|
title: 'Components/DownloadClient',
|
@@ -14,12 +15,11 @@ type Story = StoryObj<typeof DownloadClient>;
|
|
14
15
|
|
15
16
|
export const Default: Story = {
|
16
17
|
args: {
|
17
|
-
onClose: () =>{},
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
left: '50px',
|
18
|
+
onClose: () => {},
|
19
|
+
top: '50%',
|
20
|
+
left: '50%',
|
21
|
+
className: 'ff-download-client-stories',
|
22
|
+
onClick: () => {},
|
23
23
|
},
|
24
24
|
};
|
25
25
|
|
@@ -6,17 +6,13 @@ import { DownloadClientProps } from './type';
|
|
6
6
|
|
7
7
|
const DownloadClient: React.FC<DownloadClientProps> = ({
|
8
8
|
onClose,
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
9
|
+
top = '100px',
|
10
|
+
left = '0px',
|
11
|
+
className,
|
12
|
+
description = 'Download and Install the fireflink client to run the script',
|
13
|
+
onClick = () => {},
|
14
|
+
optionZIndex = 10000001,
|
14
15
|
}) => {
|
15
|
-
const title = 'Download Client';
|
16
|
-
const description =
|
17
|
-
'Download and Install the fireflink client to run the script';
|
18
|
-
const chooseOSText = 'Choose OS';
|
19
|
-
|
20
16
|
useEffect(() => {
|
21
17
|
const handleCloseDownloadClient = (event: KeyboardEvent) => {
|
22
18
|
if (event.key === 'Escape') {
|
@@ -29,49 +25,62 @@ const DownloadClient: React.FC<DownloadClientProps> = ({
|
|
29
25
|
};
|
30
26
|
}, [onClose]);
|
31
27
|
|
28
|
+
const osVersion = ['windows', 'mac_icon', 'linux'];
|
29
|
+
|
32
30
|
return (
|
33
|
-
<div
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
31
|
+
<div
|
32
|
+
className={`ff-download-client-wrapper ${className}`}
|
33
|
+
style={{ top: top, left: left, zIndex: optionZIndex }}
|
34
|
+
>
|
35
|
+
<div className="ff-download-client-header-wrapper">
|
36
|
+
<div className="ff-download-client-hollow-triangle"></div>
|
37
|
+
<Typography
|
38
|
+
fontWeight="semi-bold"
|
39
|
+
lineHeight="32px"
|
40
|
+
className="ff-download-client-header-text"
|
41
|
+
>
|
42
|
+
Download client
|
43
|
+
</Typography>
|
44
|
+
<Icon
|
45
|
+
name="close"
|
46
|
+
color="var(--brand-color)"
|
47
|
+
className="ff-download-client-close-icon"
|
48
|
+
height={12}
|
49
|
+
width={12}
|
50
|
+
/>
|
51
|
+
</div>
|
52
|
+
|
53
|
+
<div className="ff-download-client-content-text">
|
54
|
+
<Typography
|
55
|
+
as="div"
|
56
|
+
color="var(--download-client-content-text-color)"
|
57
|
+
fontWeight="semi-bold"
|
58
|
+
textAlign="center"
|
59
|
+
lineHeight="26px"
|
60
|
+
>
|
61
|
+
{description}
|
62
|
+
</Typography>
|
63
|
+
<Typography
|
64
|
+
as="div"
|
65
|
+
className="ff-download-client-description-text"
|
66
|
+
textAlign="center"
|
67
|
+
fontWeight="medium"
|
68
|
+
lineHeight='26px'
|
69
|
+
>
|
70
|
+
Choose OS to Download
|
71
|
+
</Typography>
|
72
|
+
|
73
|
+
<div className="ff-download-client-os-wrapper">
|
74
|
+
{osVersion.map((os) => (
|
75
|
+
<div
|
76
|
+
className="ff-os-version-wrapper"
|
77
|
+
onClick={() => {
|
78
|
+
onClick(os === 'mac_icon' ? 'mac' : os);
|
79
|
+
}}
|
60
80
|
>
|
61
|
-
{
|
62
|
-
</
|
63
|
-
|
64
|
-
</div>
|
65
|
-
<div className="ff-download-client-actions">
|
66
|
-
<div className="ff-icons-container" onClick={onClickWindows}>
|
67
|
-
<Icon name="windows" width={32} height={38} />
|
68
|
-
</div>
|
69
|
-
<div className="ff-icons-container" onClick={onClickLinux}>
|
70
|
-
<Icon name="linux" width={32} height={38} />
|
71
|
-
</div>
|
72
|
-
<div className="ff-icons-container" onClick={onClickMac}>
|
73
|
-
<Icon name="mac_icon" width={32} height={38} />
|
74
|
-
</div>
|
81
|
+
<Icon name={os} height={36} width={36} />
|
82
|
+
</div>
|
83
|
+
))}
|
75
84
|
</div>
|
76
85
|
</div>
|
77
86
|
</div>
|
@@ -1,41 +1,33 @@
|
|
1
1
|
export interface DownloadClientProps {
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
export interface DownloadClientProps {
|
35
|
-
onClose?: () => void;
|
36
|
-
onClickWindows: () => void;
|
37
|
-
onClickLinux: () => void;
|
38
|
-
onClickMac: () => void;
|
39
|
-
top?: string;
|
40
|
-
left?: string;
|
41
|
-
}
|
2
|
+
/**
|
3
|
+
* Close dialog function to close the modal dialog
|
4
|
+
**/
|
5
|
+
onClose: () => void;
|
6
|
+
|
7
|
+
/**
|
8
|
+
* distance between modal dialog and parent from top
|
9
|
+
**/
|
10
|
+
top?: string;
|
11
|
+
|
12
|
+
/**
|
13
|
+
* distance between modal dialog and parent from left
|
14
|
+
**/
|
15
|
+
left?: string;
|
16
|
+
|
17
|
+
/**
|
18
|
+
* To be used custom properties for the modal dialog through className
|
19
|
+
**/
|
20
|
+
className?: string;
|
21
|
+
|
22
|
+
/**
|
23
|
+
* Description of the dialog box
|
24
|
+
**/
|
25
|
+
description?: string;
|
26
|
+
|
27
|
+
/**
|
28
|
+
* Download button function
|
29
|
+
**/
|
30
|
+
onClick?: (os: string) => void;
|
31
|
+
|
32
|
+
optionZIndex?: number;
|
33
|
+
}
|
@@ -6,6 +6,7 @@ import HighlightText from '../HighlightText';
|
|
6
6
|
import Icon from '../Icon';
|
7
7
|
import Tooltip from '../Tooltip';
|
8
8
|
import { capitalize } from '../../utils/capitalize/capitalize';
|
9
|
+
import Input from '../Input/Input';
|
9
10
|
|
10
11
|
const getErrorMessage = (
|
11
12
|
inputValue: string,
|
@@ -38,8 +39,8 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
38
39
|
cancelIcon,
|
39
40
|
editIcon,
|
40
41
|
dropdownData = [],
|
41
|
-
width = '
|
42
|
-
height = '
|
42
|
+
// width = '',
|
43
|
+
// height = '',
|
43
44
|
isOpen = false,
|
44
45
|
confirmAction,
|
45
46
|
onClick,
|
@@ -52,6 +53,7 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
52
53
|
);
|
53
54
|
const [showError, setShowError] = useState('');
|
54
55
|
const [isTextFieldModified, setIsTextFieldModified] = useState(false);
|
56
|
+
const isThrowingError = showError && isEditing ? true : false;
|
55
57
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
56
58
|
const cancelRef = useRef<HTMLDivElement | null>(null);
|
57
59
|
|
@@ -96,27 +98,19 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
96
98
|
{isEditing ? (
|
97
99
|
<div className="ff-label-text-field">
|
98
100
|
<div className="ff-label-text-field-without-dropdown">
|
99
|
-
<
|
100
|
-
|
101
|
+
<Input
|
102
|
+
name="input"
|
103
|
+
label={label ? label : ''}
|
104
|
+
disabled={false}
|
105
|
+
error={isThrowingError}
|
106
|
+
placeholder="Enter your name"
|
101
107
|
value={inputValue}
|
102
108
|
onChange={handleTextFieldChange}
|
103
|
-
className={`
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
} ${isTextFieldModified ? 'modified' : ''}`}
|
108
|
-
placeholder=" "
|
109
|
-
style={{ width, height }}
|
109
|
+
className={`
|
110
|
+
|
111
|
+
${isTextFieldModified ? 'modified' : ''}`}
|
112
|
+
type="text"
|
110
113
|
/>
|
111
|
-
<label
|
112
|
-
className={`ff-textfield-label ${
|
113
|
-
showError && isEditing
|
114
|
-
? 'ff-text-field-error-text'
|
115
|
-
: 'ff-text-field-text'
|
116
|
-
}`}
|
117
|
-
>
|
118
|
-
{label}
|
119
|
-
</label>
|
120
114
|
</div>
|
121
115
|
<div className="ff-icon-container">
|
122
116
|
{confirmIcon && (
|
@@ -18,7 +18,7 @@
|
|
18
18
|
// }
|
19
19
|
|
20
20
|
.ff-excel-sheet-bar {
|
21
|
-
margin-left:
|
21
|
+
margin-left: 48px;
|
22
22
|
display: flex;
|
23
23
|
height: 36px;
|
24
24
|
align-items: center;
|
@@ -27,7 +27,8 @@
|
|
27
27
|
box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);
|
28
28
|
|
29
29
|
.ff-excel-add-sheet-icon {
|
30
|
-
|
30
|
+
margin-top: 4px;
|
31
|
+
padding: 0px 6px;
|
31
32
|
}
|
32
33
|
.ff-excel-tab-container {
|
33
34
|
height: 36px;
|
@@ -9,7 +9,10 @@ import { toast } from '../../Toastify/Toastify';
|
|
9
9
|
import { ContextMenuState } from './ExcelFileComponents/types';
|
10
10
|
import ExcelContextMenu from '../ExcelContextMenu/ExcelContextMenu';
|
11
11
|
import Typography from '../../Typography';
|
12
|
-
import {
|
12
|
+
import {
|
13
|
+
convertStyleToBackend,
|
14
|
+
convertStyleToFrontend,
|
15
|
+
} from '../dataConversion';
|
13
16
|
import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
|
14
17
|
|
15
18
|
interface ExcelFileProps {
|
@@ -34,7 +37,9 @@ interface ExcelFileProps {
|
|
34
37
|
|
35
38
|
const ExcelFile: React.FC<ExcelFileProps> = ({
|
36
39
|
excelData,
|
37
|
-
onSave = (saveData) => {
|
40
|
+
onSave = (saveData) => {
|
41
|
+
saveData();
|
42
|
+
},
|
38
43
|
}) => {
|
39
44
|
const [sheetNames, setSheetNames] = useState<string[]>([]);
|
40
45
|
const [contextMenu, setContextMenu] = React.useState<ContextMenuState>({
|
@@ -46,11 +51,19 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
|
|
46
51
|
const EmptyRow: CellBase = {
|
47
52
|
value: '',
|
48
53
|
style: {
|
49
|
-
color: 'var(--
|
54
|
+
color: 'var(--input-hover-border-color)',
|
50
55
|
backgroundColor: 'var(--drawer-footer-bg)',
|
51
|
-
borderColor: 'var(--
|
52
|
-
textDecoration: 'none',
|
53
|
-
|
56
|
+
borderColor: 'var(--excel-sheet-border)',
|
57
|
+
textDecoration: 'none solid',
|
58
|
+
borderRight: `1px solid var(--excel-sheet-border)`,
|
59
|
+
borderLeft: `1px solid var(--excel-sheet-border)`,
|
60
|
+
borderTop: `1px solid var(--excel-sheet-border)`,
|
61
|
+
borderBottom: `1px solid var(--excel-sheet-border)`,
|
62
|
+
fontSize: '15px',
|
63
|
+
fontWeight: 'normal',
|
64
|
+
fontStyle: 'normal',
|
65
|
+
fontFamily: 'Times New Roman',
|
66
|
+
textAlign: 'center',
|
54
67
|
},
|
55
68
|
};
|
56
69
|
|
@@ -128,7 +141,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
|
|
128
141
|
}
|
129
142
|
spreadsheetData[rowIndex][colIndex] = {
|
130
143
|
value: checkVal(cell.value),
|
131
|
-
style: convertStyleToFrontend(cell?.style)
|
144
|
+
style: convertStyleToFrontend(cell?.style),
|
132
145
|
type: true,
|
133
146
|
};
|
134
147
|
}
|
@@ -153,7 +166,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
|
|
153
166
|
},
|
154
167
|
[onSave]
|
155
168
|
);
|
156
|
-
|
169
|
+
|
157
170
|
React.useEffect(() => {
|
158
171
|
document.addEventListener('keydown', handleSave);
|
159
172
|
return () => {
|
@@ -176,18 +189,21 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
|
|
176
189
|
}, -1);
|
177
190
|
|
178
191
|
const filteredRow = row
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
192
|
+
.map((cell, index) => {
|
193
|
+
if (cell && cell.value !== null) {
|
194
|
+
return {
|
195
|
+
value: cell.value,
|
196
|
+
styles: convertStyleToBackend(cell.style ?? {}),
|
197
|
+
};
|
198
|
+
} else if ((cell && cell.type) || index <= lastIndex) {
|
199
|
+
return {
|
200
|
+
value: '',
|
201
|
+
styles: convertStyleToBackend(cell?.style ?? {}),
|
202
|
+
};
|
203
|
+
}
|
204
|
+
return null;
|
205
|
+
})
|
206
|
+
.filter((cell) => cell !== null);
|
191
207
|
|
192
208
|
return filteredRow.length > 0 ? filteredRow : [];
|
193
209
|
}) || [];
|
@@ -208,7 +224,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
|
|
208
224
|
onSave(savedData);
|
209
225
|
toast.success('File saved successfully!');
|
210
226
|
};
|
211
|
-
|
227
|
+
|
212
228
|
const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
|
213
229
|
setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
|
214
230
|
onSaveWorksheetData();
|
@@ -21,6 +21,10 @@ const ActiveCell: React.FC<Props> = (props) => {
|
|
21
21
|
[dispatch]
|
22
22
|
);
|
23
23
|
const edit = React.useCallback(() => dispatch(Actions.edit()), [dispatch]);
|
24
|
+
const autoFill = React.useCallback(
|
25
|
+
(value: boolean) => dispatch(Actions.autoFill(value)),
|
26
|
+
[dispatch]
|
27
|
+
);
|
24
28
|
const commit = React.useCallback(
|
25
29
|
(changes: Types.CommitChanges<Types.CellBase>) =>
|
26
30
|
dispatch(Actions.commit(changes)),
|
@@ -103,6 +107,10 @@ const ActiveCell: React.FC<Props> = (props) => {
|
|
103
107
|
const DataEditor = (cell && cell.DataEditor) || props.DataEditor;
|
104
108
|
const readOnly = cell && cell.readOnly;
|
105
109
|
|
110
|
+
const handleMouseDown = React.useCallback(() => {
|
111
|
+
mode === 'view' ? autoFill(true) : autoFill(false);
|
112
|
+
}, [mode, autoFill]);
|
113
|
+
|
106
114
|
return hidden ? null : (
|
107
115
|
<div
|
108
116
|
ref={rootRef}
|
@@ -124,6 +132,10 @@ const ActiveCell: React.FC<Props> = (props) => {
|
|
124
132
|
exitEditMode={view}
|
125
133
|
/>
|
126
134
|
)}
|
135
|
+
<div
|
136
|
+
onMouseDown={handleMouseDown}
|
137
|
+
className="select_dot"
|
138
|
+
></div>
|
127
139
|
</div>
|
128
140
|
);
|
129
141
|
};
|
@@ -24,8 +24,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
|
|
24
24
|
setCellData,
|
25
25
|
setContextMenu,
|
26
26
|
}): React.ReactElement => {
|
27
|
-
const [isDotDragging, setIsDotDragging] = React.useState(false);
|
28
|
-
const [first, setFirst] = React.useState(true);
|
29
27
|
const rootRef = React.useRef<HTMLTableCellElement | null>(null);
|
30
28
|
const point = React.useMemo(
|
31
29
|
(): Point.Point => ({
|
@@ -69,37 +67,12 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
|
|
69
67
|
|
70
68
|
const handleMouseOver = React.useCallback(
|
71
69
|
(event: React.MouseEvent<HTMLTableCellElement>) => {
|
72
|
-
if (dragging
|
70
|
+
if (dragging) {
|
73
71
|
setCellDimensions(point, getOffsetRect(event.currentTarget));
|
74
72
|
select(point);
|
75
73
|
}
|
76
74
|
},
|
77
|
-
[setCellDimensions, select, dragging, point
|
78
|
-
);
|
79
|
-
|
80
|
-
const handleDotDown = React.useCallback(
|
81
|
-
(event: React.MouseEvent<HTMLTableCellElement>) => {
|
82
|
-
setIsDotDragging(true);
|
83
|
-
setCellDimensions(point, getOffsetRect(event.currentTarget));
|
84
|
-
|
85
|
-
if (event.shiftKey) {
|
86
|
-
select(point);
|
87
|
-
} else {
|
88
|
-
activate(point);
|
89
|
-
}
|
90
|
-
},
|
91
|
-
[setCellDimensions, point, select, activate]
|
92
|
-
);
|
93
|
-
|
94
|
-
const handleDotOver = React.useCallback(
|
95
|
-
(event: React.MouseEvent<HTMLTableCellElement>) => {
|
96
|
-
setFirst(false);
|
97
|
-
if (dragging && isDotDragging) {
|
98
|
-
setCellDimensions(point, getOffsetRect(event.currentTarget));
|
99
|
-
select(point);
|
100
|
-
}
|
101
|
-
},
|
102
|
-
[setCellDimensions, select, dragging, point, isDotDragging]
|
75
|
+
[setCellDimensions, select, dragging, point]
|
103
76
|
);
|
104
77
|
|
105
78
|
const contextClick = React.useCallback(
|
@@ -153,11 +126,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
|
|
153
126
|
evaluatedCell={evaluatedData}
|
154
127
|
setCellData={setCellData}
|
155
128
|
/>
|
156
|
-
<div
|
157
|
-
// className="Selection_dot" TODO
|
158
|
-
onMouseOver={handleDotOver}
|
159
|
-
onMouseDown={handleDotDown}
|
160
|
-
></div>
|
161
129
|
</td>
|
162
130
|
);
|
163
131
|
};
|