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
@@ -133,34 +133,26 @@ export const Default: Story = {
|
|
133
133
|
],
|
134
134
|
},
|
135
135
|
toolbar: 'show',
|
136
|
-
contextOption:
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
},
|
157
|
-
{
|
158
|
-
name: 'fifth option',
|
159
|
-
title: 'Custom Option 2',
|
160
|
-
action: () => {},
|
161
|
-
},
|
162
|
-
],
|
163
|
-
sheetHeight:"300px",
|
136
|
+
contextOption: {
|
137
|
+
open: true,
|
138
|
+
options: [
|
139
|
+
{
|
140
|
+
label: 'Get data from Header',
|
141
|
+
value: 'Get data from Header',
|
142
|
+
iconName: 'success',
|
143
|
+
action: () => {},
|
144
|
+
},
|
145
|
+
{
|
146
|
+
label: 'Get Cell Value',
|
147
|
+
value: 'Get Cell Value',
|
148
|
+
iconName: 'success',
|
149
|
+
action: () => {},
|
150
|
+
},
|
151
|
+
],
|
152
|
+
},
|
153
|
+
contextHeightPositioning: -220,
|
154
|
+
contextWidthPositioning: -180,
|
155
|
+
sheetHeight: '300px',
|
164
156
|
onSave: () => {},
|
165
157
|
},
|
166
158
|
};
|
@@ -43,7 +43,7 @@ type BackendStyle = {
|
|
43
43
|
color: string;
|
44
44
|
backgroundColor: string;
|
45
45
|
borderColor: string;
|
46
|
-
underline:string;
|
46
|
+
underline: string;
|
47
47
|
border: {
|
48
48
|
top: string;
|
49
49
|
bottom: string;
|
@@ -79,20 +79,6 @@ interface ContextOption {
|
|
79
79
|
value: ContextAction[];
|
80
80
|
}
|
81
81
|
|
82
|
-
interface ContextMenuState {
|
83
|
-
/** Whether the context menu is visible */
|
84
|
-
visible: boolean;
|
85
|
-
|
86
|
-
/** X-coordinate position for the context menu */
|
87
|
-
x: number;
|
88
|
-
|
89
|
-
/** Y-coordinate position for the context menu */
|
90
|
-
y: number;
|
91
|
-
|
92
|
-
/** Type of the context menu ('cell', 'row', 'column', or 'sheet_options') */
|
93
|
-
type: 'cell' | 'row' | 'column' | 'sheet_options' | null;
|
94
|
-
}
|
95
|
-
|
96
82
|
interface SelectedCell {
|
97
83
|
/** The row index of the selected cell */
|
98
84
|
row: number;
|
@@ -112,6 +98,22 @@ interface ColorContainer {
|
|
112
98
|
borderColor: string;
|
113
99
|
}
|
114
100
|
|
101
|
+
interface ContextMenuState {
|
102
|
+
open: boolean;
|
103
|
+
position: {
|
104
|
+
x: number;
|
105
|
+
y: number;
|
106
|
+
};
|
107
|
+
options: optionsType[];
|
108
|
+
}
|
109
|
+
|
110
|
+
interface optionsType {
|
111
|
+
label: string;
|
112
|
+
value: string;
|
113
|
+
iconName: string;
|
114
|
+
action: () => void;
|
115
|
+
}
|
116
|
+
|
115
117
|
interface SelectedValue {
|
116
118
|
/** The value inside the selected cell */
|
117
119
|
value: string;
|
@@ -253,6 +253,10 @@ import suitesIcon from '../../assets/icons/suites_icon.svg?react';
|
|
253
253
|
import executionsIcon from '../../assets/icons/executions_icon.svg?react';
|
254
254
|
import ImportIcon from '../../assets/icons/import_icon.svg?react';
|
255
255
|
import Settings from '../../assets/icons/settings.svg?react';
|
256
|
+
import UnfollowIcon from '../../assets/icons/unfollow_icon.svg?react';
|
257
|
+
import ExternalUser from '../../assets/icons/external_user.svg?react';
|
258
|
+
import SingleUser from '../../assets/icons/single_user.svg?react';
|
259
|
+
import GroupUser from '../../assets/icons/group_user.svg?react';
|
256
260
|
import TestFreshersLogo from '../../assets/icons/test_freshers_logo.svg?react';
|
257
261
|
|
258
262
|
Components['success'] = ToastSuccessIcon;
|
@@ -503,5 +507,9 @@ Components['suites_icon'] = suitesIcon;
|
|
503
507
|
Components['import_icon'] = ImportIcon;
|
504
508
|
Components['settings'] = Settings;
|
505
509
|
Components['test_freshers_logo']=TestFreshersLogo;
|
510
|
+
Components['unfollow_icon']=UnfollowIcon
|
511
|
+
Components['external_user'] = ExternalUser;
|
512
|
+
Components['single_user'] = SingleUser;
|
513
|
+
Components['group_user'] = GroupUser;
|
506
514
|
|
507
515
|
export default Components;
|
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
|
|
3
3
|
import type { Meta, StoryObj } from '@storybook/react';
|
4
4
|
import Modal from './Modal';
|
5
5
|
import Button from '../Button';
|
6
|
+
import { useKeyboardActions } from '../../utils/keyBoardActionUtil/UseKeyboardActions';
|
6
7
|
|
7
8
|
const meta: Meta<typeof Modal> = {
|
8
9
|
title: 'Components/Modal',
|
@@ -34,6 +35,12 @@ export const DefaultModalStory: Story = {
|
|
34
35
|
export const Controlled: Story = {
|
35
36
|
render: () => {
|
36
37
|
const [openModal, setModal] = useState(false);
|
38
|
+
useKeyboardActions([
|
39
|
+
{
|
40
|
+
key: 'Enter',
|
41
|
+
action: () => alert('Enter key was pressed.'),
|
42
|
+
},
|
43
|
+
]);
|
37
44
|
return (
|
38
45
|
<>
|
39
46
|
<Button
|
@@ -1,9 +1,10 @@
|
|
1
|
-
import React, { useContext
|
1
|
+
import React, { useContext } from 'react';
|
2
2
|
import { createPortal } from 'react-dom';
|
3
3
|
import './modal.scss';
|
4
4
|
import { ModalProps } from './types';
|
5
5
|
import { ThemeContext } from '../ThemeProvider/ThemeProvider';
|
6
6
|
import classNames from 'classnames';
|
7
|
+
import { useKeyboardActions } from '../../utils/keyBoardActionUtil/UseKeyboardActions';
|
7
8
|
|
8
9
|
const Modal: React.FC<ModalProps> = ({
|
9
10
|
isOpen,
|
@@ -26,27 +27,23 @@ const Modal: React.FC<ModalProps> = ({
|
|
26
27
|
border = '',
|
27
28
|
background='',
|
28
29
|
}) => {
|
29
|
-
useEffect(() => {
|
30
|
-
const handleKeyDown = (e: KeyboardEvent) => {
|
31
|
-
if (e.key === 'Escape' && shouldCloseOnEsc) {
|
32
|
-
onClose();
|
33
|
-
}
|
34
|
-
};
|
35
30
|
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
}
|
47
|
-
};
|
48
|
-
}, [isOpen, onClose, ariaHideApp, shouldCloseOnEsc]);
|
31
|
+
useKeyboardActions(
|
32
|
+
shouldCloseOnEsc && isOpen
|
33
|
+
? [
|
34
|
+
{
|
35
|
+
key: 'Escape',
|
36
|
+
action: onClose,
|
37
|
+
},
|
38
|
+
]
|
39
|
+
: []
|
40
|
+
);
|
49
41
|
|
42
|
+
if (!isOpen) return null;
|
43
|
+
|
44
|
+
if (ariaHideApp) {
|
45
|
+
document.body.style.overflow = isOpen ? 'hidden' : '';
|
46
|
+
}
|
50
47
|
if (!isOpen) return null;
|
51
48
|
const themeContext = useContext(ThemeContext);
|
52
49
|
const currentTheme = themeContext?.currentTheme;
|
@@ -352,4 +352,89 @@ export const IconOptionSelection: Story = {
|
|
352
352
|
},
|
353
353
|
};
|
354
354
|
|
355
|
+
export const SelectWithPlaceHolder: Story = {
|
356
|
+
render: () => {
|
357
|
+
const optionsList = [
|
358
|
+
{
|
359
|
+
label: 'fire-flink-LIC4900-onPrem',
|
360
|
+
value: 'fire-flink-LIC4900-onPrem',
|
361
|
+
},
|
362
|
+
{
|
363
|
+
label: 'fire-flink-LIC3179',
|
364
|
+
value: 'fire-flink-LIC3179',
|
365
|
+
},
|
366
|
+
{
|
367
|
+
label: 'fire-flink-LIC4937',
|
368
|
+
value: 'fire-flink-LIC4937',
|
369
|
+
},
|
370
|
+
{
|
371
|
+
label: 'fire-flink-LIC4999',
|
372
|
+
value: 'fire-flink-LIC4999',
|
373
|
+
},
|
374
|
+
];
|
375
|
+
|
376
|
+
const [selectedOption, setSelectedOption] = useState<Option>({
|
377
|
+
label: '',
|
378
|
+
value: '',
|
379
|
+
});
|
380
|
+
|
381
|
+
const handleChange = (option: Option) => {
|
382
|
+
setSelectedOption(option);
|
383
|
+
};
|
384
|
+
|
385
|
+
return (
|
386
|
+
<Select
|
387
|
+
optionsList={optionsList}
|
388
|
+
selectedOption={selectedOption}
|
389
|
+
onChange={handleChange}
|
390
|
+
placeHolder="Search"
|
391
|
+
showLabel={false}
|
392
|
+
label="test"
|
393
|
+
/>
|
394
|
+
);
|
395
|
+
},
|
396
|
+
};
|
397
|
+
|
398
|
+
export const SelectWithToolTip: Story = {
|
399
|
+
render: () => {
|
400
|
+
const optionsList = [
|
401
|
+
{
|
402
|
+
label: 'fire-flink-LIC4900-onPrem',
|
403
|
+
value: 'fire-flink-LIC4900-onPrem',
|
404
|
+
},
|
405
|
+
{
|
406
|
+
label: 'fire-flink-LIC3179',
|
407
|
+
value: 'fire-flink-LIC3179',
|
408
|
+
},
|
409
|
+
{
|
410
|
+
label: 'fire-flink-LIC4937',
|
411
|
+
value: 'fire-flink-LIC4937',
|
412
|
+
},
|
413
|
+
{
|
414
|
+
label: 'fire-flink-LIC4999',
|
415
|
+
value: 'fire-flink-LIC4999',
|
416
|
+
},
|
417
|
+
];
|
418
|
+
|
419
|
+
const [selectedOption, setSelectedOption] = useState<Option>({
|
420
|
+
label: '',
|
421
|
+
value: '',
|
422
|
+
});
|
423
|
+
|
424
|
+
const handleChange = (option: Option) => {
|
425
|
+
setSelectedOption(option);
|
426
|
+
};
|
427
|
+
|
428
|
+
return (
|
429
|
+
<Select
|
430
|
+
optionsList={optionsList}
|
431
|
+
selectedOption={selectedOption}
|
432
|
+
onChange={handleChange}
|
433
|
+
label="Select Option"
|
434
|
+
showToolTip={true}
|
435
|
+
/>
|
436
|
+
);
|
437
|
+
},
|
438
|
+
};
|
439
|
+
|
355
440
|
export default meta;
|
@@ -2,7 +2,7 @@ import { ChangeEvent, FC, useEffect, useRef, useState } from 'react';
|
|
2
2
|
import './Select.scss';
|
3
3
|
import Icon from '../Icon';
|
4
4
|
import Typography from '../Typography';
|
5
|
-
import {
|
5
|
+
import { DropdownPosition, Option, SelectProps } from './types';
|
6
6
|
import classNames from 'classnames';
|
7
7
|
import { createPortal } from 'react-dom';
|
8
8
|
import Dropdown from './components/Dropdown';
|
@@ -31,6 +31,8 @@ const Select: FC<SelectProps> = ({
|
|
31
31
|
onBlur = () => {},
|
32
32
|
disableInput = false,
|
33
33
|
showIcon = false,
|
34
|
+
placeHolder = '',
|
35
|
+
showToolTip = false,
|
34
36
|
}) => {
|
35
37
|
const selectWidth = typeof width === 'number' ? `${width}px` : width;
|
36
38
|
|
@@ -41,7 +43,7 @@ const Select: FC<SelectProps> = ({
|
|
41
43
|
});
|
42
44
|
const { searchedText, searchedIcon } = searchedOption;
|
43
45
|
const [selectOptionList, setSelectOptionList] = useState<Option[] | []>([]);
|
44
|
-
const [dropdownPosition, setDropdownPosition] = useState<
|
46
|
+
const [dropdownPosition, setDropdownPosition] = useState<DropdownPosition>({
|
45
47
|
positionX: 0,
|
46
48
|
positionY: 0,
|
47
49
|
width: 0,
|
@@ -170,6 +172,10 @@ const Select: FC<SelectProps> = ({
|
|
170
172
|
setSelectOptionList(optionsList);
|
171
173
|
}, [optionsList]);
|
172
174
|
|
175
|
+
if (showLabel) {
|
176
|
+
placeHolder = '';
|
177
|
+
}
|
178
|
+
|
173
179
|
return (
|
174
180
|
<div
|
175
181
|
className={`ff-select-wrapper ${className}`}
|
@@ -206,6 +212,7 @@ const Select: FC<SelectProps> = ({
|
|
206
212
|
disabled={disabled}
|
207
213
|
onChange={handleChange}
|
208
214
|
readOnly={disableInput}
|
215
|
+
placeholder={placeHolder}
|
209
216
|
/>
|
210
217
|
{optionsRequired && (
|
211
218
|
<div
|
@@ -266,6 +273,7 @@ const Select: FC<SelectProps> = ({
|
|
266
273
|
heightFromTop={height}
|
267
274
|
selectedOption={searchedText}
|
268
275
|
showIcon={showIcon}
|
276
|
+
showToolTip={showToolTip}
|
269
277
|
/>,
|
270
278
|
document.body
|
271
279
|
)}
|
@@ -12,6 +12,7 @@ import {
|
|
12
12
|
} from '../../../utils/getSelectOptionValue/getSelectOptionValue';
|
13
13
|
import useClickOutside from '../../../hooks/useClickOutside';
|
14
14
|
import Icon from '../../Icon';
|
15
|
+
import Tooltip from '../../Tooltip';
|
15
16
|
|
16
17
|
const Dropdown: FC<DropdownProps> = ({
|
17
18
|
options = [],
|
@@ -26,6 +27,7 @@ const Dropdown: FC<DropdownProps> = ({
|
|
26
27
|
selectedOption,
|
27
28
|
valueAccessor,
|
28
29
|
showIcon = false,
|
30
|
+
showToolTip = false,
|
29
31
|
}) => {
|
30
32
|
const themeContext = useContext(ThemeContext);
|
31
33
|
const currentTheme = themeContext?.currentTheme;
|
@@ -72,22 +74,28 @@ const Dropdown: FC<DropdownProps> = ({
|
|
72
74
|
return label;
|
73
75
|
}
|
74
76
|
return (
|
75
|
-
<
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
className={classNames({
|
80
|
-
'ff-select-dropdown-icon-container': showIcon,
|
81
|
-
})}
|
77
|
+
<Tooltip
|
78
|
+
placement="bottom"
|
79
|
+
title={showToolTip ? label : ''}
|
80
|
+
zIndex={optionZIndex + 1}
|
82
81
|
>
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
82
|
+
<Typography
|
83
|
+
as="div"
|
84
|
+
lineHeight="30px"
|
85
|
+
color="var(--ff-select-text-color)"
|
86
|
+
className={classNames({
|
87
|
+
'ff-select-dropdown-icon-container': showIcon,
|
88
|
+
})}
|
89
|
+
>
|
90
|
+
{showIcon && (
|
91
|
+
<Icon
|
92
|
+
name={icon}
|
93
|
+
className="ff-select-dropdown-icon-container__icon"
|
94
|
+
/>
|
95
|
+
)}
|
96
|
+
{label}
|
97
|
+
</Typography>
|
98
|
+
</Tooltip>
|
91
99
|
);
|
92
100
|
};
|
93
101
|
|
@@ -1,9 +1,9 @@
|
|
1
|
-
import {
|
1
|
+
import { DropdownPosition, Option } from '../types';
|
2
2
|
import { RefObject } from 'react';
|
3
3
|
|
4
4
|
export interface DropdownProps {
|
5
5
|
options: Option[];
|
6
|
-
dropdownPosition:
|
6
|
+
dropdownPosition: DropdownPosition;
|
7
7
|
optionZIndex: number;
|
8
8
|
labelAccessor?: string;
|
9
9
|
valueAccessor?: string;
|
@@ -14,6 +14,7 @@ export interface DropdownProps {
|
|
14
14
|
heightFromTop: number;
|
15
15
|
selectedOption?: Option;
|
16
16
|
showIcon?: boolean;
|
17
|
+
showToolTip?: boolean
|
17
18
|
}
|
18
19
|
|
19
20
|
export const dropdownDefaultCSSData = {
|
@@ -108,9 +108,19 @@ export interface SelectProps {
|
|
108
108
|
* Provide the icon name for the select
|
109
109
|
*/
|
110
110
|
iconName?: string;
|
111
|
+
|
112
|
+
/**
|
113
|
+
* Provide the placehoder for the select
|
114
|
+
*/
|
115
|
+
placeHolder?: string;
|
116
|
+
|
117
|
+
/**
|
118
|
+
* Provide the boolean value if tooltip is reuired or not
|
119
|
+
*/
|
120
|
+
showToolTip?: boolean
|
111
121
|
}
|
112
122
|
|
113
|
-
export interface
|
123
|
+
export interface DropdownPosition {
|
114
124
|
positionX: number;
|
115
125
|
positionY: number;
|
116
126
|
width: number;
|
@@ -124,7 +134,7 @@ export interface SelectState {
|
|
124
134
|
showOptions: boolean;
|
125
135
|
options: Option[];
|
126
136
|
option: string;
|
127
|
-
dropdownPosition:
|
137
|
+
dropdownPosition: DropdownPosition;
|
128
138
|
}
|
129
139
|
|
130
140
|
type OptionValue = any;
|
package/src/index.ts
CHANGED
@@ -102,6 +102,7 @@ import FormatString from './utils/FormatString/FormatString';
|
|
102
102
|
import ConditionalDropdown from './components/ConditionalDropdown/ConditionalDropdown';
|
103
103
|
import { hasDuplicateFile } from './utils/checkDuplicates/checkDuplicates';
|
104
104
|
import PhoneInputField from './components/PhoneInput';
|
105
|
+
import { useKeyboardActions } from './utils/keyBoardActionUtil/UseKeyboardActions';
|
105
106
|
import {
|
106
107
|
EMAIL_REGEX,
|
107
108
|
URL_REGEX,
|
@@ -148,6 +149,15 @@ import {
|
|
148
149
|
CURRENCY_GENERIC_REGEX,
|
149
150
|
LINKEDIN_PROFILE_REGEX,
|
150
151
|
TWITTER_HANDLE_REGEX,
|
152
|
+
UNIT_REGEX,
|
153
|
+
NUMBER_REGEX,
|
154
|
+
MEMORY_VALIDATION_REGEX,
|
155
|
+
STEP_GROUP_NAME_REGEX,
|
156
|
+
NLP_DESCRIPTION_REGEX,
|
157
|
+
FILE_NAME_REGEX,
|
158
|
+
ELEMENTS_TRAILING_SPACE_REGEX,
|
159
|
+
ELEMENTS_WHITE_SPACE_REGEX,
|
160
|
+
PARAMETER_ALPHANUMERIC_REGEX,
|
151
161
|
} from './validations/regex';
|
152
162
|
|
153
163
|
export {
|
@@ -254,6 +264,7 @@ export {
|
|
254
264
|
useFileDropzone,
|
255
265
|
FormatString,
|
256
266
|
hasDuplicateFile,
|
267
|
+
useKeyboardActions,
|
257
268
|
EMAIL_REGEX,
|
258
269
|
URL_REGEX,
|
259
270
|
PHONE_REGEX,
|
@@ -299,4 +310,13 @@ export {
|
|
299
310
|
CURRENCY_GENERIC_REGEX,
|
300
311
|
LINKEDIN_PROFILE_REGEX,
|
301
312
|
TWITTER_HANDLE_REGEX,
|
313
|
+
UNIT_REGEX,
|
314
|
+
NUMBER_REGEX,
|
315
|
+
MEMORY_VALIDATION_REGEX,
|
316
|
+
STEP_GROUP_NAME_REGEX,
|
317
|
+
NLP_DESCRIPTION_REGEX,
|
318
|
+
FILE_NAME_REGEX,
|
319
|
+
ELEMENTS_TRAILING_SPACE_REGEX,
|
320
|
+
ELEMENTS_WHITE_SPACE_REGEX,
|
321
|
+
PARAMETER_ALPHANUMERIC_REGEX,
|
302
322
|
};
|
@@ -0,0 +1,53 @@
|
|
1
|
+
import React, { useState } from 'react';
|
2
|
+
import { Meta, StoryObj } from '@storybook/react';
|
3
|
+
import { useKeyboardActions } from './UseKeyboardActions';
|
4
|
+
|
5
|
+
// A demonstration component to showcase the `useKeyboardAction` utility
|
6
|
+
const UseKeyboardActionComponent: React.FC = () => {
|
7
|
+
const [message, setMessage] = useState<string>(
|
8
|
+
'Press Escape or Enter to see actions.'
|
9
|
+
);
|
10
|
+
|
11
|
+
// Registering keyboard actions using the `useKeyboardAction` utility
|
12
|
+
useKeyboardActions([
|
13
|
+
{
|
14
|
+
key: 'Escape',
|
15
|
+
action: () => setMessage('Escape key was pressed.'),
|
16
|
+
},
|
17
|
+
{
|
18
|
+
key: 'Enter',
|
19
|
+
action: () => setMessage('Enter key was pressed.'),
|
20
|
+
},
|
21
|
+
{
|
22
|
+
key: 'ArrowUp',
|
23
|
+
action: () => setMessage('ArrowUp key was pressed.'),
|
24
|
+
},
|
25
|
+
]);
|
26
|
+
|
27
|
+
return (
|
28
|
+
<div
|
29
|
+
style={{ textAlign: 'center', padding: '20px', border: '1px solid #ddd' }}
|
30
|
+
>
|
31
|
+
<h3>Keyboard Action Utility</h3>
|
32
|
+
<p>{message}</p>
|
33
|
+
<p>Try pressing Escape, Enter, or ArrowUp keys.</p>
|
34
|
+
</div>
|
35
|
+
);
|
36
|
+
};
|
37
|
+
|
38
|
+
// Meta configuration for the story
|
39
|
+
const meta: Meta<typeof UseKeyboardActionComponent> = {
|
40
|
+
title: 'Utils/UseKeyboardAction',
|
41
|
+
component: UseKeyboardActionComponent,
|
42
|
+
parameters: {
|
43
|
+
layout: 'centered',
|
44
|
+
},
|
45
|
+
tags: ['autodocs'],
|
46
|
+
};
|
47
|
+
|
48
|
+
export default meta;
|
49
|
+
|
50
|
+
type Story = StoryObj<typeof UseKeyboardActionComponent>;
|
51
|
+
|
52
|
+
// Default story for the component
|
53
|
+
export const Primary: Story = {};
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import { useEffect } from "react";
|
2
|
+
import { KeyboardAction } from "./types";
|
3
|
+
|
4
|
+
export const useKeyboardActions = (actions: KeyboardAction[]) => {
|
5
|
+
useEffect(() => {
|
6
|
+
const handleKeyDown = (event: KeyboardEvent) => {
|
7
|
+
actions.forEach(({ key, action }) => {
|
8
|
+
if (event.key === key) {
|
9
|
+
action();
|
10
|
+
}
|
11
|
+
});
|
12
|
+
};
|
13
|
+
|
14
|
+
window.addEventListener('keydown', handleKeyDown);
|
15
|
+
|
16
|
+
return () => {
|
17
|
+
window.removeEventListener('keydown', handleKeyDown);
|
18
|
+
};
|
19
|
+
}, [actions]);
|
20
|
+
};
|
@@ -13,6 +13,7 @@ import {
|
|
13
13
|
ALPHABET_ONLY_REGEX,
|
14
14
|
NUMBERS_ONLY_REGEX,
|
15
15
|
ALPHANUMERIC_REGEX,
|
16
|
+
ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
|
16
17
|
DATE_REGEX,
|
17
18
|
TIME_REGEX,
|
18
19
|
FILE_EXTENSION_REGEX,
|
@@ -46,6 +47,9 @@ import {
|
|
46
47
|
CURRENCY_GENERIC_REGEX,
|
47
48
|
LINKEDIN_PROFILE_REGEX,
|
48
49
|
TWITTER_HANDLE_REGEX,
|
50
|
+
NUMBER_REGEX,
|
51
|
+
UNIT_REGEX,
|
52
|
+
MEMORY_VALIDATION_REGEX,
|
49
53
|
STEP_GROUP_NAME_REGEX,
|
50
54
|
NLP_DESCRIPTION_REGEX,
|
51
55
|
FILE_NAME_REGEX,
|
@@ -125,6 +129,12 @@ export const Playground = () => {
|
|
125
129
|
regex: ALPHANUMERIC_REGEX,
|
126
130
|
description: 'Validates alphanumeric values (e.g. abc123)',
|
127
131
|
},
|
132
|
+
|
133
|
+
{
|
134
|
+
name: 'ALPHANUMERIC_WITH_ROUND_BRACES_REGEX',
|
135
|
+
regex: ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
|
136
|
+
description: 'Validates alphanumeric values with Underscore and RoundBraces Inclusive (e.g. abc123()_)',
|
137
|
+
},
|
128
138
|
{
|
129
139
|
name: 'DATE_REGEX',
|
130
140
|
regex: DATE_REGEX,
|
@@ -294,6 +304,20 @@ export const Playground = () => {
|
|
294
304
|
description: 'Validates Twitter handle (e.g. @username)',
|
295
305
|
},
|
296
306
|
{
|
307
|
+
name: 'NUMBER_REGEX',
|
308
|
+
regex: NUMBER_REGEX,
|
309
|
+
description: 'Validates a number (integer or float)',
|
310
|
+
},
|
311
|
+
{
|
312
|
+
name: 'UNIT_REGEX',
|
313
|
+
regex: UNIT_REGEX,
|
314
|
+
description: 'Validates a string of letters (unit)',
|
315
|
+
},
|
316
|
+
{
|
317
|
+
name: 'MEMORY_VALIDATION_REGEX',
|
318
|
+
regex: MEMORY_VALIDATION_REGEX,
|
319
|
+
description: 'Regular expression to match a number with an optional unit (GB, MB, or KB)',
|
320
|
+
},{
|
297
321
|
name: 'STEP_GROUP_NAME_REGEX',
|
298
322
|
regex: STEP_GROUP_NAME_REGEX,
|
299
323
|
description:
|
package/src/validations/regex.ts
CHANGED
@@ -38,6 +38,9 @@ const NUMBERS_ONLY_REGEX = /^\d+$/;
|
|
38
38
|
// Alphanumeric Validation
|
39
39
|
const ALPHANUMERIC_REGEX = /^[A-Za-z0-9]+$/;
|
40
40
|
|
41
|
+
//Alphanumeric Validation With Round Braces and Underscore Inclusive (Used to validate Manual and Automation Script Names )
|
42
|
+
const ALPHANUMERIC_WITH_ROUND_BRACES_REGEX = /^[a-zA-Z0-9-_() ]*$/;
|
43
|
+
|
41
44
|
// Date Validation (YYYY-MM-DD)
|
42
45
|
const DATE_REGEX = /^\d{4}-\d{2}-\d{2}$/;
|
43
46
|
|
@@ -145,6 +148,14 @@ const LINKEDIN_PROFILE_REGEX =
|
|
145
148
|
// Twitter Handle Validation
|
146
149
|
const TWITTER_HANDLE_REGEX = /^@?([a-zA-Z0-9_]{1,15})$/;
|
147
150
|
|
151
|
+
//Match a number (integer or float)
|
152
|
+
const NUMBER_REGEX = /([0-9\.]+)/;
|
153
|
+
|
154
|
+
//Match a string of letters (unit)
|
155
|
+
const UNIT_REGEX = /[a-zA-Z]+/;
|
156
|
+
|
157
|
+
//Regular expression to match a number with an optional unit (GB, MB, or KB)
|
158
|
+
const MEMORY_VALIDATION_REGEX = /^(\d+\.?\d*)\s*(GB|MB|KB)?$/i;
|
148
159
|
const STEP_GROUP_NAME_REGEX = /^[a-zA-Z0-9()\-_ ]+$/;
|
149
160
|
|
150
161
|
const NLP_DESCRIPTION_REGEX = /^[a-zA-Z0-9_$\s]*$/;
|
@@ -171,6 +182,7 @@ export {
|
|
171
182
|
ALPHABET_ONLY_REGEX,
|
172
183
|
NUMBERS_ONLY_REGEX,
|
173
184
|
ALPHANUMERIC_REGEX,
|
185
|
+
ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
|
174
186
|
DATE_REGEX,
|
175
187
|
TIME_REGEX,
|
176
188
|
FILE_EXTENSION_REGEX,
|
@@ -204,6 +216,9 @@ export {
|
|
204
216
|
CURRENCY_GENERIC_REGEX,
|
205
217
|
LINKEDIN_PROFILE_REGEX,
|
206
218
|
TWITTER_HANDLE_REGEX,
|
219
|
+
UNIT_REGEX,
|
220
|
+
NUMBER_REGEX,
|
221
|
+
MEMORY_VALIDATION_REGEX,
|
207
222
|
STEP_GROUP_NAME_REGEX,
|
208
223
|
NLP_DESCRIPTION_REGEX,
|
209
224
|
FILE_NAME_REGEX,
|
Binary file
|
Binary file
|
Binary file
|