pixel-react 1.10.9 → 1.10.10-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/lib/components/AddResourceButton/AddResourceButton.d.ts +1 -1
  2. package/lib/components/AddResourceButton/ArrowsButton/ArrowsButton.d.ts +1 -1
  3. package/lib/components/AddResourceButton/type.d.ts +9 -0
  4. package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +62 -5
  5. package/lib/components/InputWithDropdown/types.d.ts +2 -0
  6. package/lib/components/variableSuggestionInputDropDown/OptionsDropdown.d.ts +5 -0
  7. package/lib/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.d.ts +4 -0
  8. package/lib/components/variableSuggestionInputDropDown/index.d.ts +1 -0
  9. package/lib/components/variableSuggestionInputDropDown/types.d.ts +150 -0
  10. package/lib/index.d.ts +204 -13
  11. package/lib/index.esm.js +165 -109
  12. package/lib/index.esm.js.map +1 -1
  13. package/lib/index.js +165 -109
  14. package/lib/index.js.map +1 -1
  15. package/lib/tsconfig.tsbuildinfo +1 -1
  16. package/package.json +1 -1
  17. package/src/assets/icons/module_icon.svg +3 -0
  18. package/src/components/AddResourceButton/AddResourceButton.stories.tsx +32 -16
  19. package/src/components/AddResourceButton/AddResourceButton.tsx +2 -0
  20. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +2 -1
  21. package/src/components/AddResourceButton/type.ts +9 -0
  22. package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +1 -1
  23. package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx +1 -1
  24. package/src/components/AppHeader/AppHeader.scss +1 -1
  25. package/src/components/Editor/VariableDropdown.scss +0 -1
  26. package/src/components/Editor/VariableDropdown.tsx +9 -2
  27. package/src/components/Excel/ExcelFile/ExcelFile.tsx +122 -54
  28. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +0 -1
  29. package/src/components/Excel/ExcelFile.stories.tsx +1 -0
  30. package/src/components/FileDropzone/Dropzone.tsx +2 -1
  31. package/src/components/FileDropzone/FileDropzone.tsx +3 -5
  32. package/src/components/Icon/iconList.ts +6 -4
  33. package/src/components/InputWithDropdown/InputWithDropdown.tsx +6 -2
  34. package/src/components/InputWithDropdown/types.ts +2 -0
  35. package/src/components/Select/components/Dropdown.scss +1 -0
  36. package/src/components/TableTree/TableTree.stories.tsx +27 -12
  37. package/src/components/TableTree/TableTree.tsx +82 -22
  38. package/src/components/TableTree/data.ts +1 -1
  39. package/src/components/variableSuggestionInputDropDown/OptionsDropdown.tsx +51 -0
  40. package/src/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.scss +18 -0
  41. package/src/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.stories.tsx +155 -0
  42. package/src/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.tsx +244 -0
  43. package/src/components/variableSuggestionInputDropDown/index.ts +1 -0
  44. package/src/components/variableSuggestionInputDropDown/types.ts +166 -0
  45. package/src/index.ts +2 -0
@@ -0,0 +1,244 @@
1
+ import {
2
+ useState,
3
+ useEffect,
4
+ forwardRef,
5
+ useImperativeHandle,
6
+ useRef,
7
+ } from 'react';
8
+ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
9
+ import VariableDropdown from '../Editor/VariableDropdown';
10
+ import Icon from '../Icon';
11
+ import Input from '../Input';
12
+ import { VariableSuggestionInputDropDownProps, dynamicObject } from './types';
13
+ import './VariableSuggestionInputDropDown.scss';
14
+ import OptionsDropdown from './OptionsDropdown';
15
+
16
+ const VariableSuggestionInputDropDown = forwardRef<
17
+ HTMLInputElement,
18
+ VariableSuggestionInputDropDownProps
19
+ >(
20
+ (
21
+ {
22
+ label = '',
23
+ hashInputValue = '',
24
+ setHashInputValue,
25
+ variableList = [],
26
+ placeholder = 'Enter text',
27
+ onChange,
28
+ onCreateVariableClick,
29
+ value = '',
30
+ dropdownWidth = '100%',
31
+ isHash = false,
32
+ dataFiles = [],
33
+ showAddVariableIcon = true,
34
+ helperText = '',
35
+ error,
36
+ autoComplete = 'off',
37
+ required = false,
38
+ formProps = {},
39
+ ...props
40
+ },
41
+ ref
42
+ ) => {
43
+ const [showDropdown, setShowDropdown] = useState<boolean>(false);
44
+ const [isDropdownClicked, setIsDropdownClicked] = useState(false);
45
+ const [isFocused, setIsFocused] = useState(false);
46
+ const [cursorPosition, setCursorPosition] = useState<number | null>(null);
47
+ const [findCursor, setFindCursor] = useState(0);
48
+ const [showCreateVariableIcon, setShowCreateVariableIcon] =
49
+ useState<boolean>(false);
50
+ const [filteredOptions, setFilteredOptions] = useState<dynamicObject[]>([]);
51
+
52
+ const inputRef = useRef<HTMLInputElement>(null);
53
+
54
+ useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
55
+
56
+ useEffect(() => {
57
+ if (cursorPosition !== null && inputRef.current) {
58
+ inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
59
+ inputRef.current.focus();
60
+ }
61
+ }, [cursorPosition]);
62
+
63
+ useEffect(() => {
64
+ if (isHash) {
65
+ setShowDropdown(value.startsWith('#'));
66
+ } else {
67
+ setShowCreateVariableIcon(!value?.includes('$'));
68
+ }
69
+ if (value.startsWith('#') && isHash) {
70
+ const searchQuery = value.slice(1).toLowerCase();
71
+ const filtered = dataFiles.filter((file) =>
72
+ file.name.toLowerCase().includes(searchQuery)
73
+ );
74
+ setFilteredOptions(filtered);
75
+ setShowDropdown(true);
76
+ }
77
+ }, [value]);
78
+ const updateCursorPosition = () => {
79
+ if (inputRef.current) {
80
+ setFindCursor(inputRef.current.selectionStart || 0);
81
+ }
82
+ };
83
+
84
+ const handleClick = updateCursorPosition;
85
+ const handleKeyUp = updateCursorPosition;
86
+
87
+ useEffect(() => {
88
+ if (inputRef.current) {
89
+ setFindCursor(inputRef.current.selectionStart || 0);
90
+ }
91
+ }, [value]);
92
+
93
+ const handleDropdownClick = (item: dynamicObject) => {
94
+ if (inputRef.current) {
95
+ const { selectionStart, selectionEnd } = inputRef.current;
96
+ const dollarSyntax = `${item.name}`;
97
+
98
+ let newValue;
99
+ if (isHash && value[0] === '#') {
100
+ newValue = item.name + value.slice(selectionEnd || 1);
101
+ } else {
102
+ newValue = item.name;
103
+ }
104
+
105
+ if (onChange) {
106
+ const event = {
107
+ target: {
108
+ value: newValue,
109
+ },
110
+ } as React.ChangeEvent<HTMLInputElement>;
111
+ onChange(event);
112
+ }
113
+ inputRef.current.value = newValue;
114
+ setHashInputValue?.(item);
115
+ setCursorPosition((selectionStart || 0) + dollarSyntax.length);
116
+ setShowDropdown(false);
117
+ setIsDropdownClicked(true);
118
+ }
119
+ };
120
+
121
+ function getDropdownState(
122
+ input: string,
123
+ cursorPosit: number,
124
+ variableList: dynamicObject[]
125
+ ): { showDropdown: boolean; searchString: string } {
126
+ let showDropdown = false;
127
+ let searchString = '';
128
+ const checkifCursorPositionhasCloseCurly = value[cursorPosit - 1] === '}';
129
+ if (cursorPosit < 0 || cursorPosit > input.length) {
130
+ return { showDropdown, searchString };
131
+ }
132
+
133
+ const lastDollarBeforeCursor = input.lastIndexOf('$', cursorPosit - 1);
134
+ const nextDollarAfterCursor = input.indexOf('$', cursorPosit);
135
+
136
+ if (lastDollarBeforeCursor !== -1) {
137
+ if (cursorPosit === lastDollarBeforeCursor + 1) {
138
+ showDropdown = true;
139
+ searchString = '';
140
+ } else {
141
+ searchString = input.slice(
142
+ lastDollarBeforeCursor + 1,
143
+ nextDollarAfterCursor === -1 ? undefined : nextDollarAfterCursor
144
+ );
145
+
146
+ if (cursorPosit > lastDollarBeforeCursor + 1) {
147
+ searchString = input.slice(lastDollarBeforeCursor + 1, cursorPosit);
148
+ }
149
+ showDropdown = true;
150
+ }
151
+ if (isDropdownClicked && checkifCursorPositionhasCloseCurly) {
152
+ showDropdown = false;
153
+ }
154
+
155
+ if (/[{}]/.test(searchString) || cursorPosit === 0) {
156
+ showDropdown = false;
157
+ searchString = '';
158
+ }
159
+
160
+ if (searchString) {
161
+ const isInVariableList = variableList.some((file) =>
162
+ file.name.toLowerCase().includes(searchString.toLowerCase())
163
+ );
164
+ if (!isInVariableList) {
165
+ variableList = [];
166
+ }
167
+ }
168
+ }
169
+
170
+ return { showDropdown, searchString };
171
+ }
172
+
173
+ const result = getDropdownState(value, findCursor, variableList);
174
+
175
+ const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
176
+ {
177
+ if (
178
+ !e.relatedTarget ||
179
+ !e.relatedTarget.closest('.dropdown-container')
180
+ ) {
181
+ setIsFocused(false);
182
+ }
183
+ }
184
+ };
185
+ return (
186
+ <div className="ff-add-variable-container">
187
+ <div className="ff-add-variable-input">
188
+ <Input
189
+ {...props}
190
+ name="add_variable"
191
+ ref={inputRef}
192
+ type="text"
193
+ value={value}
194
+ onChange={onChange}
195
+ variant="primary"
196
+ label={label}
197
+ placeholder={placeholder}
198
+ onClick={handleClick}
199
+ onKeyUp={handleKeyUp}
200
+ onFocus={() => setIsFocused(true)}
201
+ onBlur={(e) => handleBlur(e)}
202
+ autoComplete={autoComplete}
203
+ helperText={helperText}
204
+ error={error}
205
+ required={required}
206
+ {...formProps}
207
+ />
208
+ {!checkEmpty(value) &&
209
+ !isHash &&
210
+ showCreateVariableIcon &&
211
+ showAddVariableIcon && (
212
+ <Icon
213
+ onClick={onCreateVariableClick}
214
+ name="add_variable"
215
+ width={24}
216
+ height={24}
217
+ hoverEffect
218
+ />
219
+ )}
220
+ </div>
221
+ {result?.showDropdown && isFocused && (
222
+ <VariableDropdown
223
+ position="absolute"
224
+ width={dropdownWidth}
225
+ optionsList={variableList.filter((file) =>
226
+ file.name.toLowerCase().includes(result?.searchString)
227
+ )}
228
+ onSelectVariable={handleDropdownClick}
229
+ />
230
+ )}
231
+ {showDropdown && isHash && (
232
+ <OptionsDropdown
233
+ position="relative"
234
+ width={dropdownWidth}
235
+ filteredOptions={filteredOptions}
236
+ onSelectVariable={handleDropdownClick}
237
+ />
238
+ )}
239
+ </div>
240
+ );
241
+ }
242
+ );
243
+
244
+ export default VariableSuggestionInputDropDown;
@@ -0,0 +1 @@
1
+ export { default } from './VariableSuggestionInputDropDown';
@@ -0,0 +1,166 @@
1
+ import { dropdownPositionType } from '../Editor/types';
2
+
3
+ export type dynamicObject = {
4
+ [key: string]: any;
5
+ };
6
+
7
+ export type TestDataObject = {
8
+ _id: string;
9
+ name: string;
10
+ actualPath: string;
11
+ searchKey: string;
12
+ parentId: string;
13
+ };
14
+
15
+ export interface VariableSuggestionInputDropDownProps {
16
+ /**
17
+ * Label for the field
18
+ */
19
+ label?: string;
20
+
21
+ /**
22
+ * Value in the input should stored in this state
23
+ */
24
+ hashInputValue?: TestDataObject | dynamicObject;
25
+
26
+ /**
27
+ * Function storing and updating the inputValue state
28
+ */
29
+ setHashInputValue?: (value: File | dynamicObject | null) => void;
30
+
31
+ /**
32
+ * List of variables
33
+ */
34
+ variableList?: dynamicObject[];
35
+ /**
36
+ * Place holder for the input field
37
+ */
38
+ placeholder?: string;
39
+ /**
40
+ * Function to handle input change
41
+ * @param value
42
+ * @returns
43
+ */
44
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
45
+ /**
46
+ * Function to handle create variable icon click
47
+ */
48
+ onCreateVariableClick?: () => void;
49
+ /**
50
+ * Width of the dropdown
51
+ */
52
+ dropdownWidth?: string;
53
+ /**
54
+ * Name | name of the input field
55
+ */
56
+ name?: string;
57
+ /**
58
+ * value | input field value
59
+ */
60
+ value?: string;
61
+ /**
62
+ * variants to set color/style of the input field
63
+ */
64
+ variant?: 'default' | 'primary';
65
+ /**
66
+ * type to set color/style of the input field
67
+ */
68
+ type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
69
+ /**
70
+ * error | If true, error message will be displayed
71
+ */
72
+ error?: boolean;
73
+ /**
74
+ * helperText | error, success, warning message to be shown
75
+ */
76
+ helperText?: string;
77
+ /**
78
+ * to disable the input field
79
+ */
80
+ disabled?: boolean;
81
+ /**
82
+ * if true, input field will be mandatory
83
+ */
84
+ required?: boolean;
85
+ /**
86
+ * classnames to style the input field
87
+ */
88
+ className?: string;
89
+ /**
90
+ * noBorder prop 'true' removes border of input
91
+ */
92
+ noBorder?: boolean;
93
+
94
+ onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
95
+
96
+ onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
97
+
98
+ onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
99
+ /**
100
+ * id to select the input field uniquely
101
+ */
102
+ id?: string;
103
+ /**
104
+ * if on, suggestion popup will be displayed
105
+ */
106
+ autoComplete?: 'on' | 'off';
107
+ /**
108
+ * minimum and maximum values for the number type input field and their functions
109
+ */
110
+ minValue?: number;
111
+ maxValue?: number;
112
+ /**
113
+ * background of the input field prop
114
+ */
115
+ transparentBackground?: boolean;
116
+ /**
117
+ * size for the input field
118
+ */
119
+ size?: 'small' | 'medium';
120
+ /**
121
+ * isLabelRequired for the input field without label,showing placeholder
122
+ */
123
+ isLabelRequired?: boolean;
124
+
125
+ /**
126
+ * If true, dropdown opens when '#' is entered at the first position.
127
+ */
128
+ isHash?: boolean;
129
+ /**
130
+ * Options for the dropdown when `isHash` is true.
131
+ */
132
+ dataFiles?: dynamicObject[];
133
+ /**
134
+ * a boolean prop to show add variable icon or not.
135
+ */
136
+ showAddVariableIcon?: boolean;
137
+
138
+ formProps?: Record<string, any>;
139
+ }
140
+
141
+ export interface OptionsDropdownProps {
142
+ /**
143
+ * Position whether absoloute or relative
144
+ */
145
+ position: 'absolute' | 'relative';
146
+
147
+ /**
148
+ * Dropdown width
149
+ */
150
+ width: string;
151
+
152
+ /**
153
+ * chars entered to search in Input :
154
+ */
155
+ filteredOptions?: dynamicObject[];
156
+
157
+ /**
158
+ * Function to handle click on variable
159
+ */
160
+ onSelectVariable: (variable: object) => void;
161
+
162
+ /**
163
+ * Dropdown postion used for dropdown placement
164
+ */
165
+ dropdownPosition?: dropdownPositionType;
166
+ }
package/src/index.ts CHANGED
@@ -112,6 +112,7 @@ import { getTreeDetails } from './utils/getTreeDetails/getTreeDetails';
112
112
  import { handleTreeNodeSect } from './utils/handleTreeNodeSelect/handleTreeNodeSelect';
113
113
 
114
114
  import { TreeNodeProps } from './ComponentProps/TreeNodeProps';
115
+ import { VariableSuggestionInputDropDownProps } from './components/variableSuggestionInputDropDown/types';
115
116
 
116
117
  import {
117
118
  EMAIL_REGEX,
@@ -262,6 +263,7 @@ export {
262
263
  ChooseFile,
263
264
  ScriptSwitchButton,
264
265
  MobileSkin,
266
+ VariableSuggestionInputDropDownProps,
265
267
 
266
268
  // utils exports
267
269
  checkEmpty,