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.
Files changed (147) hide show
  1. package/lib/components/Charts/LineChart/types.d.ts +1 -0
  2. package/lib/components/Chip/types.d.ts +1 -1
  3. package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
  4. package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
  5. package/lib/components/ConditionalDropdown/index.d.ts +1 -0
  6. package/lib/components/ConditionalDropdown/types.d.ts +145 -0
  7. package/lib/components/DownloadClient/type.d.ts +19 -27
  8. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
  9. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
  11. package/lib/components/LabelEditTextField/types.d.ts +1 -0
  12. package/lib/components/MachineInputField/types.d.ts +1 -0
  13. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  14. package/lib/components/MenuOption/types.d.ts +2 -1
  15. package/lib/components/MiniModal/types.d.ts +1 -0
  16. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  17. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  18. package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
  19. package/lib/components/NLPInput/NlpInput.d.ts +2 -2
  20. package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
  21. package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
  22. package/lib/components/NLPInput/sampleData.d.ts +104 -0
  23. package/lib/components/NLPInput/types.d.ts +80 -0
  24. package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
  25. package/lib/components/ProgressBar/index.d.ts +1 -0
  26. package/lib/components/ProgressBar/types.d.ts +12 -0
  27. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  28. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
  29. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  30. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
  31. package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
  32. package/lib/components/TableTree/TableTree.d.ts +2 -2
  33. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  34. package/lib/components/TableTree/types.d.ts +1 -1
  35. package/lib/hooks/useIntersectionObserver.d.ts +9 -0
  36. package/lib/index.d.ts +112 -59
  37. package/lib/index.esm.js +1251 -662
  38. package/lib/index.esm.js.map +1 -1
  39. package/lib/index.js +1252 -662
  40. package/lib/index.js.map +1 -1
  41. package/lib/tsconfig.tsbuildinfo +1 -1
  42. package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
  43. package/lib/utils/getSequentialPayload/types.d.ts +1 -0
  44. package/package.json +1 -1
  45. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
  46. package/src/assets/Themes/BaseTheme.scss +20 -2
  47. package/src/assets/Themes/DarkTheme.scss +19 -2
  48. package/src/assets/icons/ai_search.svg +9 -0
  49. package/src/assets/icons/help_icon.svg +10 -0
  50. package/src/assets/icons/ios_icon.svg +11 -0
  51. package/src/assets/icons/plus_round_icon.svg +38 -0
  52. package/src/assets/icons/tick_icon.svg +2 -2
  53. package/src/assets/styles/_colors.scss +1 -1
  54. package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
  55. package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
  56. package/src/components/Charts/LineChart/LineChart.tsx +10 -1
  57. package/src/components/Charts/LineChart/types.ts +1 -0
  58. package/src/components/Checkbox/Checkbox.scss +3 -1
  59. package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
  60. package/src/components/Checkbox/Checkbox.tsx +3 -4
  61. package/src/components/Chip/Chip.scss +15 -5
  62. package/src/components/Chip/Chip.stories.tsx +10 -1
  63. package/src/components/Chip/Chip.tsx +5 -1
  64. package/src/components/Chip/types.ts +1 -1
  65. package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
  66. package/src/components/{AddVariables/AddVariables.stories.tsx → ConditionalDropdown/ConditionalDropdown.stories.tsx} +75 -10
  67. package/src/components/{AddVariables/AddVariables.tsx → ConditionalDropdown/ConditionalDropdown.tsx} +63 -33
  68. package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
  69. package/src/components/ConditionalDropdown/index.ts +1 -0
  70. package/src/components/{AddVariables → ConditionalDropdown}/types.ts +62 -5
  71. package/src/components/DownloadClient/DownloadClient.scss +51 -64
  72. package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
  73. package/src/components/DownloadClient/DownloadClient.tsx +60 -51
  74. package/src/components/DownloadClient/type.ts +32 -40
  75. package/src/components/EditTextField/EditTextField.scss +1 -1
  76. package/src/components/EditTextField/EditTextField.tsx +14 -20
  77. package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
  78. package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
  79. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
  80. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
  81. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
  82. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
  83. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
  84. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
  85. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
  86. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
  87. package/src/components/Excel/ExcelFile.stories.tsx +4 -4
  88. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
  89. package/src/components/Excel/dataConversion.ts +43 -20
  90. package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
  91. package/src/components/FileDropzone/FileDropzone.tsx +24 -4
  92. package/src/components/Form/Forms.tsx +0 -2
  93. package/src/components/Icon/iconList.ts +9 -0
  94. package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
  95. package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
  96. package/src/components/LabelEditTextField/types.ts +1 -0
  97. package/src/components/MachineInputField/MachineInputField.scss +1 -5
  98. package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
  99. package/src/components/MachineInputField/MachineInputField.tsx +14 -14
  100. package/src/components/MachineInputField/types.ts +2 -0
  101. package/src/components/MenuOption/MenuOption.scss +7 -7
  102. package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
  103. package/src/components/MenuOption/MenuOption.tsx +9 -13
  104. package/src/components/MenuOption/types.ts +3 -2
  105. package/src/components/MiniModal/MiniModal.scss +0 -1
  106. package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
  107. package/src/components/MiniModal/MiniModal.tsx +3 -1
  108. package/src/components/MiniModal/types.ts +1 -0
  109. package/src/components/MultiSelect/Dropdown.scss +3 -4
  110. package/src/components/MultiSelect/Dropdown.tsx +34 -7
  111. package/src/components/MultiSelect/MultiSelect.scss +1 -0
  112. package/src/components/MultiSelect/MultiSelect.tsx +3 -0
  113. package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
  114. package/src/components/MultiSelect/dropdownTypes.ts +2 -0
  115. package/src/components/NLPInput/NLPInput.scss +77 -21
  116. package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
  117. package/src/components/NLPInput/NlpInput.tsx +95 -59
  118. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
  119. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
  120. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
  121. package/src/components/NLPInput/sampleData.ts +162 -0
  122. package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
  123. package/src/components/ProgressBar/ProgressBar.scss +46 -0
  124. package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
  125. package/src/components/ProgressBar/ProgressBar.tsx +61 -0
  126. package/src/components/ProgressBar/index.ts +1 -0
  127. package/src/components/ProgressBar/types.ts +12 -0
  128. package/src/components/Search/Search.tsx +9 -1
  129. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
  130. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
  131. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
  132. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
  133. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
  134. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
  135. package/src/components/SequentialConnectingBranch/types.ts +7 -5
  136. package/src/components/Table/Table.scss +1 -0
  137. package/src/components/TableTree/Components/TableBody.tsx +3 -1
  138. package/src/components/TableTree/TableTree.stories.tsx +4 -7
  139. package/src/components/TableTree/TableTree.tsx +27 -181
  140. package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
  141. package/src/components/TableTree/data.ts +45 -0
  142. package/src/components/TableTree/types.ts +4 -4
  143. package/src/hooks/useIntersectionObserver.tsx +56 -0
  144. package/src/index.ts +4 -2
  145. package/src/utils/functionCheck/functionCheck.ts +8 -0
  146. package/src/utils/getSequentialPayload/types.ts +1 -0
  147. 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-overlay {
6
- width: 378px;
7
- height: 217px;
3
+ .ff-download-client-wrapper {
8
4
  position: absolute;
9
- @include center-content;
10
- z-index: 9999;
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-container {
13
- width: 370px;
12
+ .ff-download-client-header-wrapper {
13
+ position: relative;
14
14
  @include center-content;
15
- flex-direction: column;
16
- border-radius: 8px;
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-header {
22
- width: 100%;
23
- @include center-content;
24
- justify-content: space-between;
25
- padding: 7px 4px;
26
- margin-bottom: 8px;
27
- border-radius: 4px 4px 0 0;
28
- background-color: var(--download-client-header-bg-color);
29
- box-sizing: border-box;
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
- .ff-header-arrow {
32
- content: "";
33
- display: block;
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
- .ff-download-client-content {
48
- width: 100%;
49
- @include center-content;
50
- flex-direction: column;
51
- padding-left: 8px;
52
- padding-right: 24px;
53
- gap: 8px;
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
- .ff-download-client-actions {
63
- width: 240px;
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
- gap: 12px;
66
- margin-bottom: 17px;
67
- .ff-icons-container {
68
- @include center-content;
69
- width: 64px;
70
- height: 64px;
71
- border-radius: 8px;
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
- onClickWindows: () =>{},
19
- onClickLinux: () =>{},
20
- onClickMac: () =>{},
21
- top: '100px',
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
- onClickWindows,
10
- onClickLinux,
11
- onClickMac,
12
- top = '10px',
13
- left = '10px',
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 className="ff-download-client-overlay" style={{ top, left }}>
34
- <div className="ff-download-client-container">
35
- <div className="ff-download-client-header">
36
- <div className="ff-header-arrow"></div>
37
- <Typography
38
- color="var(--table-header-text-color)"
39
- fontWeight="semi-bold"
40
- >
41
- {title}
42
- </Typography>
43
- <div onClick={onClose}>
44
- <Icon name="close" width={12} height={12} />
45
- </div>
46
- </div>
47
- <div className="ff-download-client-content">
48
- <div className="ff-download-install">
49
- <Typography
50
- fontWeight="semi-bold"
51
- color="var(--download-client-content-text-color)"
52
- >
53
- {description}
54
- </Typography>
55
- </div>
56
- <div className="ff-choose-os">
57
- <Typography
58
- fontWeight="semi-bold"
59
- color="var(--download-client-choose-os-text-color)"
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
- {chooseOSText}
62
- </Typography>
63
- </div>
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
- * Title of the popup.
4
- */
5
- title: string;
6
-
7
- /**
8
- * Description or body text of the popup.
9
- */
10
- description: string;
11
-
12
- /**
13
- * Callback for when the "Cancel" icon is clicked.
14
- */
15
- onCancel: () => void;
16
-
17
- /**
18
- * Callback for when the "Download for Windows" icon is clicked.
19
- */
20
- onDownloadWindows: () => void;
21
-
22
- /**
23
- * Callback for when the "Download for macOS" icon is clicked.
24
- */
25
- onDownloadMac: () => void;
26
-
27
- /**
28
- * Optional flag to control whether to display icons for download actions instead of buttons.
29
- * Defaults to `false` for buttons.
30
- */
31
- showIcons?: boolean;
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
+ }
@@ -9,7 +9,7 @@
9
9
  .display-text-container {
10
10
  display: flex;
11
11
  align-items: center;
12
- gap: 8px;
12
+ gap: 5px;
13
13
 
14
14
  .edit-button {
15
15
  padding: 4px 8px;
@@ -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 = '300px',
42
- height = '22px',
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
- <input
100
- type="text"
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={`ff-text-field ${
104
- showError && isEditing
105
- ? 'ff-text-field-error-border'
106
- : 'ff-text-field-border'
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: 60px;
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
- padding: 4px 6px;
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 { convertStyleToBackend, convertStyleToFrontend } from '../dataConversion';
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) => {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(--text-color)',
54
+ color: 'var(--input-hover-border-color)',
50
55
  backgroundColor: 'var(--drawer-footer-bg)',
51
- borderColor: 'var(--toggle-strip-color)',
52
- textDecoration: 'none',
53
- textDecorationStyle: 'solid',
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
- .map((cell, index) => {
180
- if (cell && cell.value !== null) {
181
- return {
182
- value: cell.value,
183
- styles: convertStyleToBackend(cell.style ?? {}),
184
- };
185
- } else if (cell && cell.type || index <= lastIndex) {
186
- return { value: '', styles: convertStyleToBackend(cell?.style ?? {}) };
187
- }
188
- return null;
189
- })
190
- .filter((cell) => cell !== null);
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 && first && !isDotDragging) {
70
+ if (dragging) {
73
71
  setCellDimensions(point, getOffsetRect(event.currentTarget));
74
72
  select(point);
75
73
  }
76
74
  },
77
- [setCellDimensions, select, dragging, point, first, isDotDragging]
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
  };