pixel-react 1.10.8 → 1.10.10-0
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/lib/components/AddResourceButton/AddResourceButton.d.ts +1 -1
- package/lib/components/AddResourceButton/ArrowsButton/ArrowsButton.d.ts +1 -1
- package/lib/components/AddResourceButton/type.d.ts +9 -0
- package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +62 -5
- package/lib/components/InputWithDropdown/types.d.ts +2 -0
- package/lib/components/variableSuggestionInputDropDown/OptionsDropdown.d.ts +5 -0
- package/lib/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.d.ts +4 -0
- package/lib/components/variableSuggestionInputDropDown/index.d.ts +1 -0
- package/lib/components/variableSuggestionInputDropDown/types.d.ts +150 -0
- package/lib/index.d.ts +204 -13
- package/lib/index.esm.js +146 -114
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +146 -114
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/assets/icons/module_icon.svg +3 -0
- package/src/components/AddResourceButton/AddResourceButton.stories.tsx +32 -16
- package/src/components/AddResourceButton/AddResourceButton.tsx +2 -0
- package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +2 -2
- package/src/components/AddResourceButton/type.ts +9 -0
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +1 -1
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx +1 -1
- package/src/components/AppHeader/AppHeader.scss +1 -1
- package/src/components/Editor/VariableDropdown.scss +0 -1
- package/src/components/Editor/VariableDropdown.tsx +9 -2
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +122 -54
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +0 -1
- package/src/components/Excel/ExcelFile.stories.tsx +1 -0
- package/src/components/FileDropzone/Dropzone.tsx +2 -1
- package/src/components/FileDropzone/FileDropzone.tsx +3 -5
- package/src/components/Icon/iconList.ts +6 -4
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +6 -2
- package/src/components/InputWithDropdown/types.ts +2 -0
- package/src/components/MenuOption/MenuOption.tsx +1 -1
- package/src/components/Select/components/Dropdown.scss +1 -0
- package/src/components/Table/Table.tsx +3 -1
- package/src/components/TableTree/TableTree.scss +15 -14
- package/src/components/TableTree/TableTree.stories.tsx +26 -12
- package/src/components/TableTree/TableTree.tsx +47 -23
- package/src/components/TableTree/data.ts +1 -1
- package/src/components/variableSuggestionInputDropDown/OptionsDropdown.tsx +51 -0
- package/src/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.scss +18 -0
- package/src/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.stories.tsx +155 -0
- package/src/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.tsx +244 -0
- package/src/components/variableSuggestionInputDropDown/index.ts +1 -0
- package/src/components/variableSuggestionInputDropDown/types.ts +166 -0
- package/src/index.ts +2 -0
- package/src/utils/TableCell/TableCell.ts +3 -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,
|
@@ -1,10 +1,13 @@
|
|
1
1
|
export const prepareData = (dataObj: any, columnObj: any) => {
|
2
2
|
let cellData = dataObj[columnObj.accessor];
|
3
3
|
if (columnObj.cell) {
|
4
|
+
const refId = dataObj._id || dataObj.id;
|
5
|
+
|
4
6
|
return columnObj.cell({
|
5
7
|
value: cellData,
|
6
8
|
row: dataObj,
|
7
9
|
column: columnObj.accessor,
|
10
|
+
...(refId && { refId }),
|
8
11
|
});
|
9
12
|
} else if (columnObj.accessor) {
|
10
13
|
return cellData;
|