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
@@ -1,158 +1,156 @@
|
|
1
|
+
import {
|
2
|
+
useState,
|
3
|
+
useEffect,
|
4
|
+
forwardRef,
|
5
|
+
useImperativeHandle,
|
6
|
+
useRef,
|
7
|
+
} from 'react';
|
1
8
|
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
|
2
9
|
import VariableDropdown from '../Editor/VariableDropdown';
|
3
10
|
import Icon from '../Icon';
|
4
11
|
import Input from '../Input';
|
5
12
|
import { ConditionalDropdownProps, dynamicObject } from './types';
|
6
13
|
import './ConditionalDropdown.scss';
|
7
|
-
import React, { useState, useRef, useEffect } from 'react';
|
8
14
|
import OptionsDropdown from './OptionsDropdown';
|
9
15
|
|
10
|
-
const ConditionalDropdown
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
16
|
+
const ConditionalDropdown = forwardRef<
|
17
|
+
HTMLInputElement,
|
18
|
+
ConditionalDropdownProps
|
19
|
+
>(
|
20
|
+
(
|
21
|
+
{
|
22
|
+
label = '',
|
23
|
+
hashInputValue = '',
|
24
|
+
setHashInputValue,
|
25
|
+
variableList = [],
|
26
|
+
placeholder = 'Enter text',
|
27
|
+
onChange,
|
28
|
+
onCreateVariableClick,
|
29
|
+
value = '',
|
30
|
+
dropdownWidth = 'inherit',
|
31
|
+
isHash = false,
|
32
|
+
dataFiles = [],
|
33
|
+
...props
|
34
|
+
},
|
35
|
+
ref
|
36
|
+
) => {
|
37
|
+
const [showDropdown, setShowDropdown] = useState<boolean>(false);
|
38
|
+
const [cursorPosition, setCursorPosition] = useState<number | null>(null);
|
39
|
+
const [showCreateVariableIcon, setShowCreateVariableIcon] =
|
40
|
+
useState<boolean>(false);
|
41
|
+
const [filteredOptions, setFilteredOptions] = useState<dynamicObject[]>([]);
|
42
|
+
const inputRef = useRef<HTMLInputElement>(null);
|
31
43
|
|
32
|
-
|
33
|
-
|
34
|
-
inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
|
35
|
-
inputRef.current.focus();
|
36
|
-
}
|
37
|
-
}, [cursorPosition]);
|
44
|
+
// Expose the `inputRef` to the parent via `ref`
|
45
|
+
useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
|
38
46
|
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
setFilteredOptions(filtered);
|
47
|
-
setShowDropdown(filtered.length > 0);
|
48
|
-
} else if (!isHash) {
|
49
|
-
const newPayload = replaceVariablesWithIds(inputValue);
|
50
|
-
onChange?.(newPayload);
|
51
|
-
}
|
52
|
-
}, [inputValue]);
|
53
|
-
|
54
|
-
const replaceVariablesWithIds = (input: string): string => {
|
55
|
-
return input.replace(/\${.*?_(.*?)}/g, (_, variableName) => {
|
56
|
-
const foundVariable = variableList.find(
|
57
|
-
(varaible) => varaible.name === variableName.trim()
|
58
|
-
);
|
59
|
-
return foundVariable ? `\${${foundVariable.id}}` : `\${${variableName}}`;
|
60
|
-
});
|
61
|
-
};
|
62
|
-
|
63
|
-
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
64
|
-
const fieldValue = event.target.value;
|
65
|
-
setInputValue(fieldValue);
|
66
|
-
const cursorPos = inputRef.current?.selectionStart || 0;
|
67
|
-
const isDollarTyped = fieldValue[cursorPos - 1] === '$';
|
47
|
+
useEffect(() => {
|
48
|
+
if (cursorPosition !== null && inputRef.current) {
|
49
|
+
inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
|
50
|
+
inputRef.current.focus();
|
51
|
+
}
|
52
|
+
}, [cursorPosition]);
|
68
53
|
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
if (
|
73
|
-
setShowDropdown(
|
54
|
+
useEffect(() => {
|
55
|
+
const cursorPos = inputRef.current?.selectionStart || 0;
|
56
|
+
const isDollarTyped = value[cursorPos - 1] === '$';
|
57
|
+
if (isHash) {
|
58
|
+
setShowDropdown(value.startsWith('#'));
|
74
59
|
} else {
|
75
|
-
setShowDropdown(
|
60
|
+
setShowDropdown(isDollarTyped);
|
61
|
+
setShowCreateVariableIcon(!value?.includes('$'));
|
76
62
|
}
|
77
|
-
if (
|
78
|
-
|
79
|
-
|
80
|
-
|
63
|
+
if (value.startsWith('#') && isHash) {
|
64
|
+
const searchQuery = value.slice(1).toLowerCase();
|
65
|
+
const filtered = dataFiles.filter((file) =>
|
66
|
+
file.name.toLowerCase().includes(searchQuery)
|
67
|
+
);
|
68
|
+
setFilteredOptions(filtered);
|
69
|
+
setShowDropdown(filtered.length > 0);
|
81
70
|
}
|
82
|
-
}
|
83
|
-
};
|
71
|
+
}, [value]);
|
84
72
|
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
73
|
+
const handleDropdownClick = (item: dynamicObject) => {
|
74
|
+
if (inputRef.current) {
|
75
|
+
const { selectionStart, selectionEnd } = inputRef.current;
|
76
|
+
const dollarSyntax = `{${
|
77
|
+
item.type === 'LOCAL'
|
78
|
+
? 'LV'
|
79
|
+
: item.type === 'GLOBAL'
|
80
|
+
? 'GV'
|
81
|
+
: item.type === 'GROUP'
|
82
|
+
? 'SG'
|
83
|
+
: 'PEV'
|
84
|
+
}_${item.name}}`;
|
97
85
|
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
86
|
+
let newValue;
|
87
|
+
if (isHash && value[0] === '#') {
|
88
|
+
newValue = item.name + value.slice(selectionEnd || 1);
|
89
|
+
} else {
|
90
|
+
newValue =
|
91
|
+
value.slice(0, selectionStart || 0) +
|
92
|
+
dollarSyntax +
|
93
|
+
value.slice(selectionEnd || 0);
|
94
|
+
}
|
95
|
+
|
96
|
+
if (onChange) {
|
97
|
+
const event = {
|
98
|
+
target: {
|
99
|
+
value: newValue,
|
100
|
+
},
|
101
|
+
} as React.ChangeEvent<HTMLInputElement>;
|
102
|
+
onChange(event);
|
103
|
+
}
|
104
|
+
inputRef.current.value = newValue;
|
105
|
+
setHashInputValue?.(item);
|
106
|
+
setCursorPosition((selectionStart || 0) + dollarSyntax.length);
|
107
|
+
setShowDropdown(false);
|
106
108
|
}
|
107
|
-
|
108
|
-
setInputValue(newValue);
|
109
|
-
setCursorPosition((selectionStart || 0) + dollarSyntax.length);
|
110
|
-
setShowDropdown(false);
|
111
|
-
}
|
112
|
-
};
|
109
|
+
};
|
113
110
|
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
name="add_variable"
|
120
|
-
ref={inputRef}
|
121
|
-
type="text"
|
122
|
-
value={inputValue}
|
123
|
-
onChange={handleChange}
|
124
|
-
variant="primary"
|
125
|
-
label={label}
|
126
|
-
placeholder={placeholder}
|
127
|
-
/>
|
128
|
-
{!checkEmpty(value) && !isHash && showCreateVariableIcon && (
|
129
|
-
<Icon
|
130
|
-
onClick={onCreateVariableClick}
|
111
|
+
return (
|
112
|
+
<div className="ff-add-variable-container">
|
113
|
+
<div className="ff-add-variable-input">
|
114
|
+
<Input
|
115
|
+
{...props}
|
131
116
|
name="add_variable"
|
132
|
-
|
133
|
-
|
134
|
-
|
117
|
+
ref={inputRef}
|
118
|
+
type="text"
|
119
|
+
value={value}
|
120
|
+
onChange={onChange}
|
121
|
+
variant="primary"
|
122
|
+
label={label}
|
123
|
+
placeholder={placeholder}
|
135
124
|
/>
|
136
|
-
|
125
|
+
{!checkEmpty(value) && !isHash && showCreateVariableIcon && (
|
126
|
+
<Icon
|
127
|
+
onClick={onCreateVariableClick}
|
128
|
+
name="add_variable"
|
129
|
+
width={24}
|
130
|
+
height={24}
|
131
|
+
hoverEffect
|
132
|
+
/>
|
133
|
+
)}
|
134
|
+
</div>
|
135
|
+
{showDropdown &&
|
136
|
+
(isHash ? (
|
137
|
+
<OptionsDropdown
|
138
|
+
position="relative"
|
139
|
+
width={dropdownWidth}
|
140
|
+
filteredOptions={filteredOptions}
|
141
|
+
onSelectVariable={handleDropdownClick}
|
142
|
+
/>
|
143
|
+
) : (
|
144
|
+
<VariableDropdown
|
145
|
+
position="absolute"
|
146
|
+
width={dropdownWidth}
|
147
|
+
optionsList={variableList}
|
148
|
+
onSelectVariable={handleDropdownClick}
|
149
|
+
/>
|
150
|
+
))}
|
137
151
|
</div>
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
position="relative"
|
142
|
-
width={dropdownWidth}
|
143
|
-
filteredOptions={filteredOptions}
|
144
|
-
onSelectVariable={handleDropdownClick}
|
145
|
-
/>
|
146
|
-
) : (
|
147
|
-
<VariableDropdown
|
148
|
-
position="absolute"
|
149
|
-
width={dropdownWidth}
|
150
|
-
optionsList={variableList}
|
151
|
-
onSelectVariable={handleDropdownClick}
|
152
|
-
/>
|
153
|
-
))}
|
154
|
-
</div>
|
155
|
-
);
|
156
|
-
};
|
152
|
+
);
|
153
|
+
}
|
154
|
+
);
|
157
155
|
|
158
156
|
export default ConditionalDropdown;
|
@@ -26,7 +26,7 @@ export interface ConditionalDropdownProps {
|
|
26
26
|
/**
|
27
27
|
* Function storing and updating the inputValue state
|
28
28
|
*/
|
29
|
-
setHashInputValue?:(value: File |dynamicObject | null) => void;
|
29
|
+
setHashInputValue?: (value: File | dynamicObject | null) => void;
|
30
30
|
|
31
31
|
/**
|
32
32
|
* List of variables
|
@@ -41,7 +41,7 @@ export interface ConditionalDropdownProps {
|
|
41
41
|
* @param value
|
42
42
|
* @returns
|
43
43
|
*/
|
44
|
-
onChange?: (
|
44
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
45
45
|
/**
|
46
46
|
* Function to handle create variable icon click
|
47
47
|
*/
|
@@ -122,14 +122,14 @@ export interface ConditionalDropdownProps {
|
|
122
122
|
*/
|
123
123
|
isLabelRequired?: boolean;
|
124
124
|
|
125
|
-
|
125
|
+
/**
|
126
126
|
* If true, dropdown opens when '#' is entered at the first position.
|
127
127
|
*/
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
128
|
+
isHash?: boolean;
|
129
|
+
/**
|
130
|
+
* Options for the dropdown when `isHash` is true.
|
131
|
+
*/
|
132
|
+
dataFiles?: dynamicObject[];
|
133
133
|
}
|
134
134
|
|
135
135
|
export interface OptionsDropdownProps {
|
@@ -411,3 +411,313 @@
|
|
411
411
|
}
|
412
412
|
}
|
413
413
|
}
|
414
|
+
|
415
|
+
|
416
|
+
|
417
|
+
|
418
|
+
// Adding react day picker library node modules css here to get the css style available in platform
|
419
|
+
|
420
|
+
/* Variables declaration */
|
421
|
+
/* prettier-ignore */
|
422
|
+
.rdp-root {
|
423
|
+
--rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
|
424
|
+
--rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
|
425
|
+
--rdp-font-family: system-ui; /* The font family used by the calendar. Note that `inherit`does not work here. */
|
426
|
+
|
427
|
+
--rdp-day-font: inherit; /* The font used for the day cells. */
|
428
|
+
--rdp-day-height: 2.75rem; /* The height of the day cells. */
|
429
|
+
--rdp-day-width: 2.75rem; /* The width of the day cells. */
|
430
|
+
|
431
|
+
--rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
|
432
|
+
--rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
|
433
|
+
--rdp-day_button-height: var(--rdp-day-height); /* The height of the day cells. */
|
434
|
+
--rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */
|
435
|
+
|
436
|
+
--rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
|
437
|
+
--rdp-selected-font: bold large var(--rdp-font-family); /* The font of the selected days. */
|
438
|
+
--rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
|
439
|
+
--rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
|
440
|
+
--rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */
|
441
|
+
|
442
|
+
--rdp-dropdown-gap: 0.5rem;/* The gap between the dropdowns used in the month captons. */
|
443
|
+
|
444
|
+
--rdp-month_caption-font: bold larger var(--rdp-font-family); /* The font of the month caption. */
|
445
|
+
--rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */
|
446
|
+
|
447
|
+
--rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
|
448
|
+
--rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
|
449
|
+
--rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
|
450
|
+
--rdp-nav-height: 2.75rem; /* The height of the navigation bar. */
|
451
|
+
|
452
|
+
--rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
|
453
|
+
--rdp-range_middle-font: normal medium var(--rdp-font-family); /* The font for days in the middle of a range. */
|
454
|
+
--rdp-range_middle-foreground-color: white; /* The font for days in the middle of a range. */
|
455
|
+
--rdp-range_middle-color: inherit;/* The color of the range text. */
|
456
|
+
|
457
|
+
--rdp-range_start-color: white; /* The color of the range text. */
|
458
|
+
--rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */
|
459
|
+
--rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */
|
460
|
+
|
461
|
+
--rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%); /* Used for the background of the end of the selected range. */
|
462
|
+
--rdp-range_end-color: white;/* The color of the range text. */
|
463
|
+
--rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */
|
464
|
+
|
465
|
+
--rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
|
466
|
+
--rdp-week_number-border: 2px solid transparent; /* The border of the week number. */
|
467
|
+
--rdp-week_number-font: 400 small var(--rdp-font-family); /* The font of the week number cells. */
|
468
|
+
--rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
|
469
|
+
--rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
|
470
|
+
--rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
|
471
|
+
--rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */
|
472
|
+
|
473
|
+
--rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */
|
474
|
+
--rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
|
475
|
+
--rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
|
476
|
+
--rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
|
477
|
+
|
478
|
+
--rdp-gradient-direction: 90deg;
|
479
|
+
}
|
480
|
+
|
481
|
+
.rdp-root[dir="rtl"] {
|
482
|
+
--rdp-gradient-direction: -90deg;
|
483
|
+
}
|
484
|
+
|
485
|
+
/* Root of the component. */
|
486
|
+
.rdp-root {
|
487
|
+
position: relative; /* Required to position the navigation toolbar. */
|
488
|
+
box-sizing: border-box;
|
489
|
+
}
|
490
|
+
|
491
|
+
.rdp-root * {
|
492
|
+
box-sizing: border-box;
|
493
|
+
}
|
494
|
+
|
495
|
+
.rdp-day {
|
496
|
+
width: var(--rdp-day-width);
|
497
|
+
height: var(--rdp-day-height);
|
498
|
+
font: var(--rdp-day-font);
|
499
|
+
text-align: center;
|
500
|
+
}
|
501
|
+
|
502
|
+
.rdp-day_button {
|
503
|
+
background: none;
|
504
|
+
padding: 0;
|
505
|
+
margin: 0;
|
506
|
+
cursor: pointer;
|
507
|
+
font: inherit;
|
508
|
+
color: inherit;
|
509
|
+
justify-content: center;
|
510
|
+
align-items: center;
|
511
|
+
display: flex;
|
512
|
+
|
513
|
+
width: var(--rdp-day_button-width);
|
514
|
+
height: var(--rdp-day_button-height);
|
515
|
+
border: var(--rdp-day_button-border);
|
516
|
+
border-radius: var(--rdp-day_button-border-radius);
|
517
|
+
}
|
518
|
+
|
519
|
+
.rdp-day_button:disabled {
|
520
|
+
cursor: revert;
|
521
|
+
}
|
522
|
+
|
523
|
+
.rdp-caption_label {
|
524
|
+
z-index: 1;
|
525
|
+
|
526
|
+
position: relative;
|
527
|
+
display: inline-flex;
|
528
|
+
align-items: center;
|
529
|
+
|
530
|
+
white-space: nowrap;
|
531
|
+
border: 0;
|
532
|
+
}
|
533
|
+
|
534
|
+
.rdp-button_next,
|
535
|
+
.rdp-button_previous {
|
536
|
+
border: none;
|
537
|
+
background: none;
|
538
|
+
padding: 0;
|
539
|
+
margin: 0;
|
540
|
+
cursor: pointer;
|
541
|
+
font: inherit;
|
542
|
+
color: inherit;
|
543
|
+
-moz-appearance: none;
|
544
|
+
-webkit-appearance: none;
|
545
|
+
display: inline-flex;
|
546
|
+
align-items: center;
|
547
|
+
justify-content: center;
|
548
|
+
position: relative;
|
549
|
+
appearance: none;
|
550
|
+
|
551
|
+
width: var(--rdp-nav_button-width);
|
552
|
+
height: var(--rdp-nav_button-height);
|
553
|
+
}
|
554
|
+
|
555
|
+
.rdp-button_next:disabled,
|
556
|
+
.rdp-button_previous:disabled {
|
557
|
+
cursor: revert;
|
558
|
+
|
559
|
+
opacity: var(--rdp-nav_button-disabled-opacity);
|
560
|
+
}
|
561
|
+
|
562
|
+
.rdp-chevron {
|
563
|
+
display: inline-block;
|
564
|
+
fill: var(--rdp-accent-color);
|
565
|
+
}
|
566
|
+
|
567
|
+
.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
|
568
|
+
transform: rotate(180deg);
|
569
|
+
}
|
570
|
+
|
571
|
+
.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
|
572
|
+
transform: rotate(180deg);
|
573
|
+
transform-origin: 50%;
|
574
|
+
}
|
575
|
+
|
576
|
+
.rdp-dropdowns {
|
577
|
+
position: relative;
|
578
|
+
display: inline-flex;
|
579
|
+
align-items: center;
|
580
|
+
gap: var(--rdp-dropdown-gap);
|
581
|
+
}
|
582
|
+
.rdp-dropdown {
|
583
|
+
z-index: 2;
|
584
|
+
|
585
|
+
/* Reset */
|
586
|
+
opacity: 0;
|
587
|
+
appearance: none;
|
588
|
+
position: absolute;
|
589
|
+
inset-block-start: 0;
|
590
|
+
inset-block-end: 0;
|
591
|
+
inset-inline-start: 0;
|
592
|
+
width: 100%;
|
593
|
+
margin: 0;
|
594
|
+
padding: 0;
|
595
|
+
cursor: inherit;
|
596
|
+
border: none;
|
597
|
+
line-height: inherit;
|
598
|
+
}
|
599
|
+
|
600
|
+
.rdp-dropdown_root {
|
601
|
+
position: relative;
|
602
|
+
display: inline-flex;
|
603
|
+
align-items: center;
|
604
|
+
}
|
605
|
+
|
606
|
+
.rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
|
607
|
+
opacity: var(--rdp-disabled-opacity);
|
608
|
+
}
|
609
|
+
|
610
|
+
.rdp-month_caption {
|
611
|
+
display: flex;
|
612
|
+
align-content: center;
|
613
|
+
height: var(--rdp-nav-height);
|
614
|
+
font: var(--rdp-month_caption-font);
|
615
|
+
}
|
616
|
+
|
617
|
+
.rdp-months {
|
618
|
+
position: relative;
|
619
|
+
display: flex;
|
620
|
+
flex-wrap: wrap;
|
621
|
+
gap: var(--rdp-months-gap);
|
622
|
+
max-width: fit-content;
|
623
|
+
}
|
624
|
+
|
625
|
+
.rdp-month_grid {
|
626
|
+
border-collapse: collapse;
|
627
|
+
}
|
628
|
+
|
629
|
+
.rdp-nav {
|
630
|
+
position: absolute;
|
631
|
+
inset-block-start: 0;
|
632
|
+
inset-inline-end: 0;
|
633
|
+
|
634
|
+
display: flex;
|
635
|
+
align-items: center;
|
636
|
+
|
637
|
+
height: var(--rdp-nav-height);
|
638
|
+
}
|
639
|
+
|
640
|
+
.rdp-weekday {
|
641
|
+
opacity: var(--rdp-weekday-opacity);
|
642
|
+
padding: var(--rdp-weekday-padding);
|
643
|
+
font: var(--rdp-weekday-font);
|
644
|
+
text-align: var(--rdp-weekday-text-align);
|
645
|
+
text-transform: var(--rdp-weekday-text-transform);
|
646
|
+
}
|
647
|
+
|
648
|
+
.rdp-week_number {
|
649
|
+
opacity: var(--rdp-week_number-opacity);
|
650
|
+
font: var(--rdp-week_number-font);
|
651
|
+
height: var(--rdp-week_number-height);
|
652
|
+
width: var(--rdp-week_number-width);
|
653
|
+
border: var(--rdp-week_number-border);
|
654
|
+
border-radius: var(--rdp-week_number-border-radius);
|
655
|
+
text-align: var(--rdp-weeknumber-text-align);
|
656
|
+
}
|
657
|
+
|
658
|
+
/* DAY MODIFIERS */
|
659
|
+
.rdp-today:not(.rdp-outside) {
|
660
|
+
color: var(--rdp-today-color);
|
661
|
+
}
|
662
|
+
|
663
|
+
.rdp-selected {
|
664
|
+
font: var(--rdp-selected-font);
|
665
|
+
}
|
666
|
+
|
667
|
+
.rdp-selected .rdp-day_button {
|
668
|
+
border: var(--rdp-selected-border);
|
669
|
+
}
|
670
|
+
|
671
|
+
.rdp-outside {
|
672
|
+
opacity: var(--rdp-outside-opacity);
|
673
|
+
}
|
674
|
+
|
675
|
+
.rdp-disabled {
|
676
|
+
opacity: var(--rdp-disabled-opacity);
|
677
|
+
}
|
678
|
+
|
679
|
+
.rdp-hidden {
|
680
|
+
visibility: hidden;
|
681
|
+
color: var(--rdp-range_start-color);
|
682
|
+
}
|
683
|
+
|
684
|
+
.rdp-range_start {
|
685
|
+
background: var(--rdp-range_start-background);
|
686
|
+
}
|
687
|
+
|
688
|
+
.rdp-range_start .rdp-day_button {
|
689
|
+
background-color: var(--rdp-range_start-date-background-color);
|
690
|
+
color: var(--rdp-range_start-color);
|
691
|
+
}
|
692
|
+
|
693
|
+
.rdp-range_middle {
|
694
|
+
background-color: var(--rdp-range_middle-background-color);
|
695
|
+
font: var(--rdp-range_middle-font);
|
696
|
+
}
|
697
|
+
|
698
|
+
.rdp-range_middle .rdp-day_button {
|
699
|
+
border-color: transparent;
|
700
|
+
border: unset;
|
701
|
+
border-radius: unset;
|
702
|
+
color: var(--rdp-range_middle-color);
|
703
|
+
}
|
704
|
+
|
705
|
+
.rdp-range_end {
|
706
|
+
background: var(--rdp-range_end-background);
|
707
|
+
color: var(--rdp-range_end-color);
|
708
|
+
}
|
709
|
+
|
710
|
+
.rdp-range_end .rdp-day_button {
|
711
|
+
color: var(--rdp-range_start-color);
|
712
|
+
background-color: var(--rdp-range_end-date-background-color);
|
713
|
+
}
|
714
|
+
|
715
|
+
.rdp-range_start.rdp-range_end {
|
716
|
+
background: revert;
|
717
|
+
}
|
718
|
+
|
719
|
+
.rdp-focusable {
|
720
|
+
cursor: pointer;
|
721
|
+
}
|
722
|
+
|
723
|
+
|