pixel-react 1.8.0 → 1.8.2
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/components/Accordion/Accordion.d.ts +1 -1
- package/lib/components/Accordion/types.d.ts +4 -0
- package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +1 -2
- package/lib/components/ConditionalDropdown/types.d.ts +3 -3
- package/lib/components/LabelEditTextField/types.d.ts +1 -1
- package/lib/components/ScriptSwitchButton/ScriptSwitchButton.d.ts +9 -0
- package/lib/components/ScriptSwitchButton/index.d.ts +1 -0
- package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
- package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
- package/lib/components/TableTree/TableTree copy.d.ts +25 -0
- package/lib/components/TableTree/data.d.ts +48 -8
- package/lib/components/TableTree/types.d.ts +2 -2
- package/lib/index.d.ts +64 -7
- package/lib/index.esm.js +536 -324
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +581 -323
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/validations/regex.d.ts +46 -0
- package/package.json +2 -2
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
- package/src/assets/Themes/BaseTheme.scss +1 -1
- package/src/assets/Themes/BlueTheme.scss +1 -1
- package/src/assets/Themes/DarkTheme.scss +1 -1
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/components/Accordion/Accordion.stories.tsx +13 -0
- package/src/components/Accordion/Accordion.tsx +2 -1
- package/src/components/Accordion/types.ts +4 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +8 -5
- package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +133 -135
- package/src/components/ConditionalDropdown/types.ts +8 -8
- package/src/components/DatePicker/DatePicker.scss +310 -0
- package/src/components/LabelEditTextField/LabelEditTextField.scss +4 -0
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +14 -7
- package/src/components/LabelEditTextField/types.ts +1 -1
- package/src/components/ScriptSwitchButton/ScriptSwitchButton.scss +33 -0
- package/src/components/ScriptSwitchButton/ScriptSwitchButton.stories.tsx +48 -0
- package/src/components/ScriptSwitchButton/ScriptSwitchButton.tsx +65 -0
- package/src/components/ScriptSwitchButton/index.ts +1 -0
- package/src/components/TableTree/Components/TableBody.tsx +3 -3
- package/src/components/TableTree/Components/TableCell.tsx +7 -7
- package/src/components/TableTree/Components/TableRow.tsx +2 -2
- package/src/components/TableTree/TableTree.scss +2 -3
- package/src/components/TableTree/data.ts +43 -12
- package/src/components/TableTree/types.ts +2 -2
- package/src/index.ts +95 -1
- package/src/validations/regex.stories.tsx +362 -0
- package/src/validations/regex.ts +194 -0
- package/lib/1fb4472b34e4fe07.css +0 -1
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
- package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
- package/lib/components/AddButton/AddButton.d.ts +0 -5
- package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
- package/lib/components/AddButton/index.d.ts +0 -1
- package/lib/components/AddButton/types.d.ts +0 -4
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
- package/lib/components/AddVariables/AddVariables.d.ts +0 -5
- package/lib/components/AddVariables/index.d.ts +0 -1
- package/lib/components/AddVariables/types.d.ts +0 -35
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
- package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
- package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
- package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
- package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
- package/lib/components/Button/Button.stories.d.ts +0 -13
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
- package/lib/components/Charts/PieChart/PieChart.stories.d.ts +0 -7
- package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
- package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
- package/lib/components/Chip/Chip.stories.d.ts +0 -14
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
- package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
- package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
- package/lib/components/Drawer/Drawer.stories.d.ts +0 -12
- package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
- package/lib/components/Editor/Editor.stories.d.ts +0 -6
- package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
- package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +0 -8
- package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
- package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
- package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
- package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
- package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
- package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
- package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
- package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
- package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
- package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
- package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
- package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
- package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
- package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
- package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
- package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
- package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
- package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
- package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
- package/lib/components/ExcelFile/Types.d.ts +0 -129
- package/lib/components/ExcelFile/index.d.ts +0 -1
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
- package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
- package/lib/components/Form/Form.stories.d.ts +0 -7
- package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
- package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
- package/lib/components/Icon/Icon.stories.d.ts +0 -8
- package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
- package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
- package/lib/components/Input/Input.stories.d.ts +0 -9
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -13
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
- package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
- package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
- package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
- package/lib/components/Modal/Modal.stories.d.ts +0 -7
- package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -11
- package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
- package/lib/components/Paper/Paper.stories.d.ts +0 -11
- package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
- package/lib/components/Search/Search.stories.d.ts +0 -6
- package/lib/components/Select/Select.stories.d.ts +0 -14
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
- package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
- package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
- package/lib/components/Table/Table.stories.d.ts +0 -13
- package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
- package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
- package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
- package/lib/components/Toast/Toast.stories.d.ts +0 -6
- package/lib/components/Toastify/Toastify.stories.d.ts +0 -6
- package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
- package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
- package/lib/components/Typography/Typography.stories.d.ts +0 -10
- package/lib/components/VariableInput/VariableInput.stories.d.ts +0 -6
- package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
- package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
- package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
- package/lib/utils/debounce/debounce.stories.d.ts +0 -6
- package/lib/utils/ffID/ffID.stories.d.ts +0 -6
- package/lib/utils/find/findAndInsert.d.ts +0 -7
- package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
- package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +0 -7
- package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
- package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
- package/lib/utils/throttle/throttle.stories.d.ts +0 -6
- package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
@@ -7,6 +7,7 @@ import Icon from '../Icon';
|
|
7
7
|
import Tooltip from '../Tooltip';
|
8
8
|
import Input from '../Input/Input';
|
9
9
|
import Select from '../Select/Select';
|
10
|
+
import useEscapeKey from '../../hooks/keyboardevents/useEscKeyEvent.js';
|
10
11
|
|
11
12
|
const getErrorMessage = (
|
12
13
|
inputValue: string,
|
@@ -45,17 +46,19 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
45
46
|
tooltip,
|
46
47
|
}) => {
|
47
48
|
const [isEditing, setIsEditing] = useState(isOpen ?? false);
|
48
|
-
const [inputValue, setInputValue] = useState(text);
|
49
|
+
const [inputValue, setInputValue] = useState(text ?? '');
|
49
50
|
const [dropdownValue, setDropdownValue] = useState(
|
50
51
|
dropdownData[0]?.value ?? ''
|
51
52
|
);
|
52
53
|
const [showError, setShowError] = useState('');
|
54
|
+
const [disabled, isDisabled] = useState(true);
|
53
55
|
const [isTextFieldModified, setIsTextFieldModified] = useState(false);
|
54
56
|
const isThrowingError = showError && isEditing ? true : false;
|
55
57
|
|
56
58
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
57
|
-
const cancelRef = useRef<HTMLDivElement | null>(null);
|
59
|
+
const cancelRef = useRef<HTMLDivElement | null>(null);
|
58
60
|
const [clickTimeout, setClickTimeout] = useState<number | null>(null);
|
61
|
+
const handleEsc = useEscapeKey('Escape');
|
59
62
|
useEffect(() => {
|
60
63
|
return () => {
|
61
64
|
if (clickTimeout) {
|
@@ -107,7 +110,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
107
110
|
};
|
108
111
|
|
109
112
|
const handleCancel = () => {
|
110
|
-
setInputValue(text);
|
113
|
+
setInputValue(text ?? '');
|
111
114
|
setDropdownValue(dropdownData[0]?.value ?? '');
|
112
115
|
setIsEditing(false);
|
113
116
|
setShowError('');
|
@@ -117,6 +120,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
117
120
|
const handleTextFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
118
121
|
const newValue = e.target.value;
|
119
122
|
setInputValue(newValue);
|
123
|
+
isDisabled(false);
|
120
124
|
if (newValue.length === 0 || newValue.trim().length === 0) {
|
121
125
|
setShowError('Please type any text.');
|
122
126
|
} else if (newValue.length < 3) {
|
@@ -138,9 +142,9 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
138
142
|
if (
|
139
143
|
containerRef.current &&
|
140
144
|
!containerRef.current.contains(e.target as Node) &&
|
141
|
-
cancelRef.current !== e.target
|
145
|
+
cancelRef.current !== e.target
|
142
146
|
) {
|
143
|
-
const errorMessage = getErrorMessage(inputValue, text, customError);
|
147
|
+
const errorMessage = getErrorMessage(inputValue, text ?? '', customError);
|
144
148
|
|
145
149
|
if (errorMessage && isEditing) {
|
146
150
|
setShowError(errorMessage);
|
@@ -157,7 +161,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
157
161
|
document.removeEventListener('click', handleBlur);
|
158
162
|
};
|
159
163
|
}, [inputValue]);
|
160
|
-
|
164
|
+
handleEsc(handleCancel);
|
161
165
|
return (
|
162
166
|
<div className="ff-label-edit-text-field" ref={containerRef}>
|
163
167
|
{isEditing ? (
|
@@ -212,7 +216,10 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
212
216
|
height={20}
|
213
217
|
width={20}
|
214
218
|
name={confirmIcon.name}
|
215
|
-
|
219
|
+
disabled={disabled}
|
220
|
+
className={`${
|
221
|
+
disabled ? 'disabled-confirm-icon' : 'confirm-icon'
|
222
|
+
}`}
|
216
223
|
onClick={handleConfirm}
|
217
224
|
/>
|
218
225
|
)}
|
@@ -16,7 +16,7 @@ export interface LabelEditTextFieldTypes {
|
|
16
16
|
/** Label text displayed above the input field. */
|
17
17
|
label?: string;
|
18
18
|
/** Initial text displayed in the input field. */
|
19
|
-
text
|
19
|
+
text?: string;
|
20
20
|
/** Text to be highlighted within the displayed text, if provided. */
|
21
21
|
highlightText?: string;
|
22
22
|
/** Custom error message to be displayed, if applicable. */
|
@@ -0,0 +1,33 @@
|
|
1
|
+
/* Container Styling */
|
2
|
+
.ff-script-switch-container {
|
3
|
+
display: flex;
|
4
|
+
background-color: var(--base-bg-color);
|
5
|
+
height: 24px;
|
6
|
+
width: 48px;
|
7
|
+
border-radius: 6px;
|
8
|
+
border: 1px solid var(--border-color);
|
9
|
+
align-items: center;
|
10
|
+
justify-content: center;
|
11
|
+
|
12
|
+
/* Button Styling */
|
13
|
+
.ff-script-switch-button {
|
14
|
+
padding: 0.1px;
|
15
|
+
border: none;
|
16
|
+
border-radius: 4px;
|
17
|
+
cursor: pointer;
|
18
|
+
outline: none;
|
19
|
+
transition: all 0.3s ease;
|
20
|
+
|
21
|
+
/* Button Hover Effect */
|
22
|
+
&:hover {
|
23
|
+
background-color: var(--hover-color);
|
24
|
+
color: var(--brand-color);
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
/* Active Button */
|
29
|
+
.ff-script-switch-button.active {
|
30
|
+
background-color: var(--ff-line-number-bg);
|
31
|
+
color: var(--base-bg-color);
|
32
|
+
}
|
33
|
+
}
|
@@ -0,0 +1,48 @@
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import React, { useState } from 'react';
|
3
|
+
import ScriptSwitchButton from './ScriptSwitchButton';
|
4
|
+
|
5
|
+
const meta: Meta<typeof ScriptSwitchButton> = {
|
6
|
+
title: 'Components/ScriptSwitchButton',
|
7
|
+
component: ScriptSwitchButton,
|
8
|
+
tags: ['autodocs'],
|
9
|
+
argTypes: {
|
10
|
+
selected: {
|
11
|
+
control: { type: 'radio' },
|
12
|
+
options: ['Automation', 'Manual'],
|
13
|
+
},
|
14
|
+
},
|
15
|
+
};
|
16
|
+
|
17
|
+
export default meta;
|
18
|
+
|
19
|
+
type Story = StoryObj<typeof ScriptSwitchButton>;
|
20
|
+
|
21
|
+
export const Default: Story = {
|
22
|
+
args: {
|
23
|
+
selected: 'Automation',
|
24
|
+
tabList: ['Automation', 'Manual'],
|
25
|
+
handleClick: () => {},
|
26
|
+
},
|
27
|
+
};
|
28
|
+
|
29
|
+
export const Switch: Story = {
|
30
|
+
render: () => {
|
31
|
+
const [selected, setSelected] = useState<string>('Automation');
|
32
|
+
const handleChange = (selectedSwitch: string) => {
|
33
|
+
if (selectedSwitch.includes('Automation')) {
|
34
|
+
!selectedSwitch.includes('Add') && setSelected(selectedSwitch);
|
35
|
+
} else {
|
36
|
+
!selectedSwitch.includes('Add') && setSelected(selectedSwitch);
|
37
|
+
}
|
38
|
+
};
|
39
|
+
|
40
|
+
return (
|
41
|
+
<ScriptSwitchButton
|
42
|
+
selected={selected}
|
43
|
+
tabList={['Automation', 'Manual']}
|
44
|
+
handleClick={handleChange}
|
45
|
+
/>
|
46
|
+
);
|
47
|
+
},
|
48
|
+
};
|
@@ -0,0 +1,65 @@
|
|
1
|
+
import React, { type JSX } from 'react';
|
2
|
+
import './ScriptSwitchButton.scss';
|
3
|
+
import Icon from '../Icon';
|
4
|
+
import Tooltip from '../Tooltip';
|
5
|
+
|
6
|
+
interface ScriptSwitchButtonProps {
|
7
|
+
handleClick: (selected: string) => void;
|
8
|
+
selected: string;
|
9
|
+
tabList: Array<'Automation' | 'Manual'>;
|
10
|
+
}
|
11
|
+
|
12
|
+
const ScriptSwitchButton: React.FC<ScriptSwitchButtonProps> = ({
|
13
|
+
selected = 'text',
|
14
|
+
handleClick,
|
15
|
+
tabList, // ['Automation' , 'Manual']
|
16
|
+
}): JSX.Element => {
|
17
|
+
const isAutomation = tabList?.includes('Automation');
|
18
|
+
const isManual = tabList?.includes('Manual');
|
19
|
+
|
20
|
+
return (
|
21
|
+
<div className="ff-script-switch-container">
|
22
|
+
<Tooltip
|
23
|
+
title={isAutomation ? 'Automation' : 'Add Automation'}
|
24
|
+
zIndex={1000}
|
25
|
+
>
|
26
|
+
<div
|
27
|
+
className={`ff-script-switch-button ${
|
28
|
+
selected === 'Automation' ? 'active' : ''
|
29
|
+
}`}
|
30
|
+
onClick={() =>
|
31
|
+
handleClick(isAutomation ? 'Automation' : 'Add Automation')
|
32
|
+
}
|
33
|
+
>
|
34
|
+
<Icon
|
35
|
+
name={isAutomation ? 'automation_testcase' : 'add_testcase'}
|
36
|
+
color={
|
37
|
+
selected === 'Automation'
|
38
|
+
? 'var(--primary-button-text-color)'
|
39
|
+
: 'var(--description-text)'
|
40
|
+
}
|
41
|
+
/>
|
42
|
+
</div>
|
43
|
+
</Tooltip>
|
44
|
+
<Tooltip title={isManual ? 'Manual' : 'Add Manual'} zIndex={1000}>
|
45
|
+
<div
|
46
|
+
className={`ff-script-switch-button ${
|
47
|
+
selected === 'Manual' ? 'active' : ''
|
48
|
+
}`}
|
49
|
+
onClick={() => handleClick(isManual ? 'Manual' : 'Add Manual')}
|
50
|
+
>
|
51
|
+
<Icon
|
52
|
+
name={isManual ? 'manual_testcase' : 'add_testcase'}
|
53
|
+
color={
|
54
|
+
selected === 'Manual'
|
55
|
+
? 'var(--primary-button-text-color)'
|
56
|
+
: 'var(--description-text)'
|
57
|
+
}
|
58
|
+
/>
|
59
|
+
</div>
|
60
|
+
</Tooltip>
|
61
|
+
</div>
|
62
|
+
);
|
63
|
+
};
|
64
|
+
|
65
|
+
export default ScriptSwitchButton;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './ScriptSwitchButton';
|
@@ -12,10 +12,10 @@ const TableBody = React.memo(
|
|
12
12
|
onToggleExpand,
|
13
13
|
onCheckBoxChange,
|
14
14
|
}: TableBodyProps) => (
|
15
|
-
<tbody>
|
15
|
+
<tbody className='ff-table-tree-body'>
|
16
16
|
<tr id="ff-table-tree-first-node" />
|
17
17
|
{flattenedTreeData?.map(
|
18
|
-
({ node, level,
|
18
|
+
({ node, level, parentSiblings = [], isLast = false }) => {
|
19
19
|
return (
|
20
20
|
<TableRow
|
21
21
|
key={node.id}
|
@@ -27,7 +27,7 @@ const TableBody = React.memo(
|
|
27
27
|
onRowClick={onRowClick}
|
28
28
|
onToggleExpand={onToggleExpand}
|
29
29
|
onCheckBoxChange={onCheckBoxChange}
|
30
|
-
|
30
|
+
parentSiblings={parentSiblings}
|
31
31
|
isLast={isLast}
|
32
32
|
/>
|
33
33
|
);
|
@@ -7,15 +7,15 @@ import React from 'react';
|
|
7
7
|
|
8
8
|
const renderSpaces = (
|
9
9
|
level: number,
|
10
|
-
|
10
|
+
parentSiblings: boolean[],
|
11
11
|
isLast?: boolean | undefined
|
12
12
|
) => (
|
13
13
|
<div className="tree-table-space-container">
|
14
|
-
{
|
14
|
+
{parentSiblings.reverse().map((line, i) => (
|
15
15
|
<span
|
16
16
|
key={i}
|
17
|
-
className={`tree-table-space-block ${
|
18
|
-
isLast && i ===
|
17
|
+
className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
|
18
|
+
isLast && i === level-1 ? 'last-node' : ''
|
19
19
|
}`}
|
20
20
|
/>
|
21
21
|
))}
|
@@ -31,12 +31,12 @@ const TableCell = React.memo(
|
|
31
31
|
select,
|
32
32
|
onCheckBoxChange,
|
33
33
|
onToggleExpand,
|
34
|
-
|
34
|
+
parentSiblings,
|
35
35
|
isLast,
|
36
36
|
}: TableCellProps) => (
|
37
37
|
<td>
|
38
|
-
{col.isTree && renderSpaces(level + 1,
|
39
|
-
<div className=
|
38
|
+
{col.isTree && renderSpaces(level + 1, parentSiblings, isLast)}
|
39
|
+
<div className="tree-title-container">
|
40
40
|
{col.isTree && (
|
41
41
|
<span
|
42
42
|
className={`tree-table-space-block last-block ${
|
@@ -12,7 +12,7 @@ const TableRow = React.memo(
|
|
12
12
|
onRowClick,
|
13
13
|
onToggleExpand,
|
14
14
|
onCheckBoxChange,
|
15
|
-
|
15
|
+
parentSiblings,
|
16
16
|
isLast,
|
17
17
|
}: TableRowProps) => (
|
18
18
|
<tr
|
@@ -30,7 +30,7 @@ const TableRow = React.memo(
|
|
30
30
|
select={select}
|
31
31
|
onCheckBoxChange={onCheckBoxChange}
|
32
32
|
onToggleExpand={onToggleExpand}
|
33
|
-
|
33
|
+
parentSiblings={parentSiblings}
|
34
34
|
isLast={isLast}
|
35
35
|
/>
|
36
36
|
))}
|
@@ -98,9 +98,8 @@
|
|
98
98
|
width: 100%;
|
99
99
|
}
|
100
100
|
|
101
|
-
|
101
|
+
.ff-table-tree-body {
|
102
102
|
overflow: scroll;
|
103
|
-
height: 300px;
|
104
103
|
}
|
105
104
|
|
106
105
|
.tree-table {
|
@@ -209,7 +208,7 @@ tr:after {
|
|
209
208
|
|
210
209
|
.tree-table-space-container {
|
211
210
|
display: inline-flex;
|
212
|
-
flex-direction: row-reverse;
|
211
|
+
// flex-direction: row-reverse;
|
213
212
|
}
|
214
213
|
|
215
214
|
.tree-title-container {
|
@@ -28,8 +28,8 @@ const data = [
|
|
28
28
|
id: 'MOD1001', // Unique ID
|
29
29
|
},
|
30
30
|
level: 0,
|
31
|
-
lines: 1,
|
32
31
|
isLast: true,
|
32
|
+
parentSiblings: [true],
|
33
33
|
},
|
34
34
|
{
|
35
35
|
node: {
|
@@ -59,7 +59,7 @@ const data = [
|
|
59
59
|
parentId: 'MOD1001', // Root has no parent
|
60
60
|
id: 'MOD1002', // Unique ID
|
61
61
|
},
|
62
|
-
|
62
|
+
parentSiblings: [true, false],
|
63
63
|
lines: 1,
|
64
64
|
},
|
65
65
|
{
|
@@ -76,8 +76,7 @@ const data = [
|
|
76
76
|
id: 'MOD1003', // Unique ID
|
77
77
|
},
|
78
78
|
level: 1,
|
79
|
-
|
80
|
-
isLast: true,
|
79
|
+
parentSiblings: [true, false],
|
81
80
|
},
|
82
81
|
{
|
83
82
|
node: {
|
@@ -109,7 +108,7 @@ const data = [
|
|
109
108
|
id: 'MOD1004', // Unique ID
|
110
109
|
},
|
111
110
|
level: 2,
|
112
|
-
|
111
|
+
parentSiblings: [true, true, false],
|
113
112
|
},
|
114
113
|
{
|
115
114
|
node: {
|
@@ -140,7 +139,7 @@ const data = [
|
|
140
139
|
id: 'MOD1101', // Unique ID
|
141
140
|
},
|
142
141
|
level: 3,
|
143
|
-
|
142
|
+
parentSiblings: [true, true, true, false],
|
144
143
|
},
|
145
144
|
{
|
146
145
|
node: {
|
@@ -171,7 +170,7 @@ const data = [
|
|
171
170
|
id: 'MOD1102', // Unique ID
|
172
171
|
},
|
173
172
|
level: 3,
|
174
|
-
|
173
|
+
parentSiblings: [true, true, true, false],
|
175
174
|
},
|
176
175
|
{
|
177
176
|
node: {
|
@@ -202,7 +201,7 @@ const data = [
|
|
202
201
|
id: 'MOD1103', // Unique ID
|
203
202
|
},
|
204
203
|
level: 3,
|
205
|
-
|
204
|
+
parentSiblings: [true, true, true, false],
|
206
205
|
isLast: true,
|
207
206
|
},
|
208
207
|
{
|
@@ -235,7 +234,7 @@ const data = [
|
|
235
234
|
id: 'MOD1005', // Unique ID
|
236
235
|
},
|
237
236
|
level: 2,
|
238
|
-
|
237
|
+
parentSiblings: [true, true, false],
|
239
238
|
isLast: true,
|
240
239
|
},
|
241
240
|
{
|
@@ -267,7 +266,7 @@ const data = [
|
|
267
266
|
id: 'MOD1201', // Unique ID
|
268
267
|
},
|
269
268
|
level: 3,
|
270
|
-
|
269
|
+
parentSiblings: [true, false, true, false],
|
271
270
|
},
|
272
271
|
{
|
273
272
|
node: {
|
@@ -298,7 +297,7 @@ const data = [
|
|
298
297
|
id: 'MOD1202', // Unique ID
|
299
298
|
},
|
300
299
|
level: 3,
|
301
|
-
|
300
|
+
parentSiblings: [true, false, true, false],
|
302
301
|
},
|
303
302
|
{
|
304
303
|
node: {
|
@@ -329,7 +328,39 @@ const data = [
|
|
329
328
|
id: 'MOD1203', // Unique ID
|
330
329
|
},
|
331
330
|
level: 3,
|
332
|
-
|
331
|
+
parentSiblings: [true, false, true, false],
|
332
|
+
isLast: true,
|
333
|
+
},
|
334
|
+
{
|
335
|
+
node: {
|
336
|
+
subModuleCount: 15,
|
337
|
+
title: 'mod3',
|
338
|
+
scriptCount: 0,
|
339
|
+
path: '/Root',
|
340
|
+
expanded: true,
|
341
|
+
modifiedOn: '19-12-2023 15:32',
|
342
|
+
children: false,
|
343
|
+
lastExecutionOrder: 3,
|
344
|
+
imported: false,
|
345
|
+
modifiedBy: '--',
|
346
|
+
moduleCountWithScript: 1,
|
347
|
+
state: 'NEW',
|
348
|
+
key: 'MOD1001',
|
349
|
+
ver: 1,
|
350
|
+
hierarchy: 0,
|
351
|
+
assigneeCount: 0,
|
352
|
+
searchKey: '/MOD1001111110000000000',
|
353
|
+
modifiedByUname: '--',
|
354
|
+
executionOrder: 0,
|
355
|
+
createdByUname: 'Shivaprasad',
|
356
|
+
folder: true,
|
357
|
+
moduleLevelScriptCount: 0,
|
358
|
+
name: 'Root Module111',
|
359
|
+
parentId: 'MOD1001', // Root has no parent
|
360
|
+
id: 'MOD100222', // Unique ID
|
361
|
+
},
|
362
|
+
level: 1,
|
363
|
+
parentSiblings: [true, false],
|
333
364
|
isLast: true,
|
334
365
|
},
|
335
366
|
];
|
@@ -17,7 +17,7 @@ export interface TableCellProps {
|
|
17
17
|
select: string | null;
|
18
18
|
onCheckBoxChange: (type: string, node: any) => void;
|
19
19
|
onToggleExpand: (node: any) => void;
|
20
|
-
|
20
|
+
parentSiblings: boolean[];
|
21
21
|
isLast: boolean | undefined;
|
22
22
|
}
|
23
23
|
|
@@ -44,7 +44,7 @@ export interface TableRowProps {
|
|
44
44
|
onRowClick: (e: any, node: any) => void;
|
45
45
|
onToggleExpand: (node: any) => void;
|
46
46
|
onCheckBoxChange: (type: string, node: any) => void;
|
47
|
-
|
47
|
+
parentSiblings: boolean[];
|
48
48
|
isLast: boolean | undefined;
|
49
49
|
}
|
50
50
|
|
package/src/index.ts
CHANGED
@@ -72,6 +72,7 @@ import CreateVariableSlider from './components/CreateVariable/CreateVariableSlid
|
|
72
72
|
import TableWithAccordion from './components/TableWithAccordion/TableWithAccordion';
|
73
73
|
import ProgressBar from './components/ProgressBar';
|
74
74
|
import ChooseFile from './components/ChooseFile/ChooseFile';
|
75
|
+
import ScriptSwitchButton from './components/ScriptSwitchButton';
|
75
76
|
|
76
77
|
// Utils imports
|
77
78
|
import { checkEmpty } from './utils/checkEmpty/checkEmpty';
|
@@ -101,6 +102,53 @@ import FormatString from './utils/FormatString/FormatString';
|
|
101
102
|
import ConditionalDropdown from './components/ConditionalDropdown/ConditionalDropdown';
|
102
103
|
import { hasDuplicateFile } from './utils/checkDuplicates/checkDuplicates';
|
103
104
|
import PhoneInputField from './components/PhoneInput';
|
105
|
+
import {
|
106
|
+
EMAIL_REGEX,
|
107
|
+
URL_REGEX,
|
108
|
+
PHONE_REGEX,
|
109
|
+
POSTAL_CODE_REGEX,
|
110
|
+
IPV4_REGEX,
|
111
|
+
IPV6_REGEX,
|
112
|
+
HEX_COLOR_REGEX,
|
113
|
+
PASSWORD_SIMPLE_REGEX,
|
114
|
+
PASSWORD_COMPLEX_REGEX,
|
115
|
+
ALPHABET_ONLY_REGEX,
|
116
|
+
NUMBERS_ONLY_REGEX,
|
117
|
+
ALPHANUMERIC_REGEX,
|
118
|
+
DATE_REGEX,
|
119
|
+
TIME_REGEX,
|
120
|
+
FILE_EXTENSION_REGEX,
|
121
|
+
MAC_ADDRESS_REGEX,
|
122
|
+
CREDIT_CARD_REGEX,
|
123
|
+
SSN_REGEX,
|
124
|
+
UUID_REGEX,
|
125
|
+
HTML_TAG_REGEX,
|
126
|
+
WHITESPACE_REGEX,
|
127
|
+
US_ZIP_CODE_REGEX,
|
128
|
+
USERNAME_REGEX,
|
129
|
+
INDIAN_PHONE_REGEX,
|
130
|
+
INDIAN_PIN_CODE_REGEX,
|
131
|
+
GSTIN_REGEX,
|
132
|
+
PAN_CARD_REGEX,
|
133
|
+
AADHAAR_REGEX,
|
134
|
+
VEHICLE_REGISTRATION_REGEX,
|
135
|
+
INDIAN_CURRENCY_REGEX,
|
136
|
+
INTERNATIONAL_PHONE_REGEX,
|
137
|
+
INDIAN_PASSPORT_REGEX,
|
138
|
+
DRIVING_LICENSE_REGEX,
|
139
|
+
USERNAME_SPECIAL_REGEX,
|
140
|
+
DECIMAL_NUMBER_REGEX,
|
141
|
+
HTML_ATTRIBUTE_REGEX,
|
142
|
+
RGB_COLOR_REGEX,
|
143
|
+
HSL_COLOR_REGEX,
|
144
|
+
BASE64_REGEX,
|
145
|
+
BINARY_NUMBER_REGEX,
|
146
|
+
HEXADECIMAL_NUMBER_REGEX,
|
147
|
+
ROMAN_NUMERALS_REGEX,
|
148
|
+
CURRENCY_GENERIC_REGEX,
|
149
|
+
LINKEDIN_PROFILE_REGEX,
|
150
|
+
TWITTER_HANDLE_REGEX,
|
151
|
+
} from './validations/regex';
|
104
152
|
|
105
153
|
export {
|
106
154
|
Button,
|
@@ -186,7 +234,8 @@ export {
|
|
186
234
|
TableWithAccordion,
|
187
235
|
ProgressBar,
|
188
236
|
ChooseFile,
|
189
|
-
|
237
|
+
ScriptSwitchButton,
|
238
|
+
|
190
239
|
// utils exports
|
191
240
|
checkEmpty,
|
192
241
|
getExtension,
|
@@ -205,4 +254,49 @@ export {
|
|
205
254
|
useFileDropzone,
|
206
255
|
FormatString,
|
207
256
|
hasDuplicateFile,
|
257
|
+
EMAIL_REGEX,
|
258
|
+
URL_REGEX,
|
259
|
+
PHONE_REGEX,
|
260
|
+
POSTAL_CODE_REGEX,
|
261
|
+
IPV4_REGEX,
|
262
|
+
IPV6_REGEX,
|
263
|
+
HEX_COLOR_REGEX,
|
264
|
+
PASSWORD_SIMPLE_REGEX,
|
265
|
+
PASSWORD_COMPLEX_REGEX,
|
266
|
+
ALPHABET_ONLY_REGEX,
|
267
|
+
NUMBERS_ONLY_REGEX,
|
268
|
+
ALPHANUMERIC_REGEX,
|
269
|
+
DATE_REGEX,
|
270
|
+
TIME_REGEX,
|
271
|
+
FILE_EXTENSION_REGEX,
|
272
|
+
MAC_ADDRESS_REGEX,
|
273
|
+
CREDIT_CARD_REGEX,
|
274
|
+
SSN_REGEX,
|
275
|
+
UUID_REGEX,
|
276
|
+
HTML_TAG_REGEX,
|
277
|
+
WHITESPACE_REGEX,
|
278
|
+
US_ZIP_CODE_REGEX,
|
279
|
+
USERNAME_REGEX,
|
280
|
+
INDIAN_PHONE_REGEX,
|
281
|
+
INDIAN_PIN_CODE_REGEX,
|
282
|
+
GSTIN_REGEX,
|
283
|
+
PAN_CARD_REGEX,
|
284
|
+
AADHAAR_REGEX,
|
285
|
+
VEHICLE_REGISTRATION_REGEX,
|
286
|
+
INDIAN_CURRENCY_REGEX,
|
287
|
+
INTERNATIONAL_PHONE_REGEX,
|
288
|
+
INDIAN_PASSPORT_REGEX,
|
289
|
+
DRIVING_LICENSE_REGEX,
|
290
|
+
USERNAME_SPECIAL_REGEX,
|
291
|
+
DECIMAL_NUMBER_REGEX,
|
292
|
+
HTML_ATTRIBUTE_REGEX,
|
293
|
+
RGB_COLOR_REGEX,
|
294
|
+
HSL_COLOR_REGEX,
|
295
|
+
BASE64_REGEX,
|
296
|
+
BINARY_NUMBER_REGEX,
|
297
|
+
HEXADECIMAL_NUMBER_REGEX,
|
298
|
+
ROMAN_NUMERALS_REGEX,
|
299
|
+
CURRENCY_GENERIC_REGEX,
|
300
|
+
LINKEDIN_PROFILE_REGEX,
|
301
|
+
TWITTER_HANDLE_REGEX,
|
208
302
|
};
|