@bbl-digital/snorre 3.0.4 → 3.0.8
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/dist/bundle.js +204 -96
- package/esm/core/Autocomplete/hooks/useAutocomplete.js +242 -0
- package/esm/core/Autocomplete/hooks/useHandleDimentions.js +19 -0
- package/esm/core/Autocomplete/index.d.js +1 -0
- package/esm/core/Autocomplete/index.interfaces.js +1 -0
- package/esm/core/Autocomplete/index.js +50 -184
- package/esm/core/Autocomplete/styles.js +30 -25
- package/esm/core/DatepickerRange/YearMonthForm.js +56 -0
- package/lib/core/Autocomplete/hooks/useAutocomplete.d.ts +21 -0
- package/lib/core/Autocomplete/hooks/useAutocomplete.d.ts.map +1 -0
- package/lib/core/Autocomplete/hooks/useAutocomplete.js +242 -0
- package/lib/core/Autocomplete/hooks/useHandleDimentions.d.ts +8 -0
- package/lib/core/Autocomplete/hooks/useHandleDimentions.d.ts.map +1 -0
- package/lib/core/Autocomplete/hooks/useHandleDimentions.js +19 -0
- package/lib/core/Autocomplete/index.d.js +1 -0
- package/lib/core/Autocomplete/index.d.ts +2 -74
- package/lib/core/Autocomplete/index.d.ts.map +1 -1
- package/lib/core/Autocomplete/index.interfaces.d.ts +81 -0
- package/lib/core/Autocomplete/index.interfaces.d.ts.map +1 -0
- package/lib/core/Autocomplete/index.interfaces.js +1 -0
- package/lib/core/Autocomplete/index.js +50 -184
- package/lib/core/Autocomplete/styles.d.ts +18 -1
- package/lib/core/Autocomplete/styles.d.ts.map +1 -1
- package/lib/core/Autocomplete/styles.js +30 -25
- package/lib/core/DatepickerRange/YearMonthForm.d.ts +10 -0
- package/lib/core/DatepickerRange/YearMonthForm.d.ts.map +1 -0
- package/lib/core/DatepickerRange/YearMonthForm.js +56 -0
- package/package.json +2 -1
- package/esm/enums/ModifierKey.js +0 -13
- package/lib/enums/ModifierKey.d.ts +0 -12
- package/lib/enums/ModifierKey.d.ts.map +0 -1
- package/lib/enums/ModifierKey.js +0 -13
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { MONTHS } from '../../utils/dates';
|
|
3
|
+
import { StyledSelect, Div } from './styles';
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
|
+
|
|
7
|
+
const YearMonthForm = ({
|
|
8
|
+
onChange,
|
|
9
|
+
date,
|
|
10
|
+
fromDate,
|
|
11
|
+
toDate
|
|
12
|
+
}) => {
|
|
13
|
+
const months = MONTHS;
|
|
14
|
+
const years = [];
|
|
15
|
+
|
|
16
|
+
for (let i = fromDate.getFullYear(); i <= toDate.getFullYear(); i += 1) {
|
|
17
|
+
years.push(i);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
const changeMonth = e => {
|
|
21
|
+
let newDate = date;
|
|
22
|
+
newDate.setMonth(e.target.value);
|
|
23
|
+
if (newDate > toDate) newDate = toDate;
|
|
24
|
+
onChange(newDate);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
const changeYear = e => {
|
|
28
|
+
let newDate = date;
|
|
29
|
+
newDate.setFullYear(e.target.value);
|
|
30
|
+
if (newDate > toDate) newDate = toDate;
|
|
31
|
+
onChange(newDate);
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
return /*#__PURE__*/_jsxs(Div, {
|
|
35
|
+
className: "DayPicker-Caption",
|
|
36
|
+
children: [/*#__PURE__*/_jsx(StyledSelect, {
|
|
37
|
+
name: "month",
|
|
38
|
+
onChange: changeMonth,
|
|
39
|
+
value: date.getMonth(),
|
|
40
|
+
children: months.map((month, i) => /*#__PURE__*/_jsx("option", {
|
|
41
|
+
value: i,
|
|
42
|
+
children: month
|
|
43
|
+
}, month))
|
|
44
|
+
}), /*#__PURE__*/_jsx(StyledSelect, {
|
|
45
|
+
name: "year",
|
|
46
|
+
onChange: changeYear,
|
|
47
|
+
value: date.getFullYear(),
|
|
48
|
+
children: years.map(year => /*#__PURE__*/_jsx("option", {
|
|
49
|
+
value: year,
|
|
50
|
+
children: year
|
|
51
|
+
}, year))
|
|
52
|
+
})]
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
export default YearMonthForm;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { IProps, IValuesProps } from '../index.interfaces';
|
|
3
|
+
declare const useAutocomplete: (props: IProps) => {
|
|
4
|
+
setShowValues: import("react").Dispatch<import("react").SetStateAction<boolean>>;
|
|
5
|
+
handleClear: () => void;
|
|
6
|
+
handleValueClick: (value: {
|
|
7
|
+
[x: string]: any;
|
|
8
|
+
}) => void;
|
|
9
|
+
onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
10
|
+
handleOnKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
11
|
+
handleCustomOnKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
12
|
+
handleOnInputClick: () => void;
|
|
13
|
+
onFuzzyBlur: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
|
|
14
|
+
onFuzzyFocus: () => void;
|
|
15
|
+
value: string;
|
|
16
|
+
highlightedIndex: number | null;
|
|
17
|
+
showValues: boolean;
|
|
18
|
+
renderedValues: IValuesProps[];
|
|
19
|
+
};
|
|
20
|
+
export default useAutocomplete;
|
|
21
|
+
//# sourceMappingURL=useAutocomplete.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useAutocomplete.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/Autocomplete/hooks/useAutocomplete.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAE1D,QAAA,MAAM,eAAe,UAAW,MAAM;;;;;;uBAuBV,MAAM,WAAW,CAAC,gBAAgB,CAAC;yBAwJjC,mBAAmB,CAAC,gBAAgB,CAAC;+BAZ/B,mBAAmB,CAAC,gBAAgB,CAAC;;qBA3H/C,gBAAgB,CAAC,gBAAgB,EAAE,OAAO,CAAC;;;;;;CAqNpE,CAAA;AAED,eAAe,eAAe,CAAA"}
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
/* eslint-disable react-hooks/exhaustive-deps */
|
|
2
|
+
import { matchSorter } from 'match-sorter';
|
|
3
|
+
import { useEffect, useMemo, useState } from 'react';
|
|
4
|
+
import { useDebounce } from '../../utils/debounce';
|
|
5
|
+
|
|
6
|
+
const useAutocomplete = props => {
|
|
7
|
+
const [showValues, setShowValues] = useState(!!props.isOpen);
|
|
8
|
+
const [highlightedIndex, setHighlightedIndex] = useState(null);
|
|
9
|
+
const [value, setValueChanged] = useState(props.value ?? '');
|
|
10
|
+
const [inputDirty, setInputDirty] = useState(false);
|
|
11
|
+
const debouncedValue = useDebounce(value, props.debounceDelay ?? 0);
|
|
12
|
+
const [inputValues, setInputValues] = useState(props.values);
|
|
13
|
+
|
|
14
|
+
const handleValueClick = value => {
|
|
15
|
+
props.onSelectItem?.(value);
|
|
16
|
+
setShowValues(false);
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const clearSelectedItem = () => handleValueClick({
|
|
20
|
+
[props.labelFromValues ?? 'label']: '',
|
|
21
|
+
[props.keyFromValues ?? 'key']: ''
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
const onInputChange = e => {
|
|
25
|
+
setInputDirty(true);
|
|
26
|
+
if (inputValues) setHighlightedIndex(0);
|
|
27
|
+
setValueChanged(e.target.value); // Should not use onChange whenever we have fuzzy search on
|
|
28
|
+
|
|
29
|
+
if (props.fuzzy) return;
|
|
30
|
+
if (props.onChange) props.onChange(e);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
const handleOnInputClick = () => {
|
|
34
|
+
if (inputValues?.length) setHighlightedIndex(0);
|
|
35
|
+
setShowValues(true);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
const onFuzzyBlur = e => {
|
|
39
|
+
// If the value of the input is changed, and does not match the value of the values array,
|
|
40
|
+
// we should revert back the input value to the original value
|
|
41
|
+
//What
|
|
42
|
+
// if (!e.target.value.length) clearSelectedItem()
|
|
43
|
+
if (e.target.value === props.value) return; // If target value is the same as a value from the values array, we should set the value for the user
|
|
44
|
+
|
|
45
|
+
if (inputValues?.length) {
|
|
46
|
+
const valueInInputValues = inputValues.find(item => item[props.labelFromValues ?? 'label'].length && item[props.labelFromValues ?? 'label'].toLowerCase() === e.target.value.toLowerCase());
|
|
47
|
+
|
|
48
|
+
if (valueInInputValues) {
|
|
49
|
+
const val = valueInInputValues[props.labelFromValues ?? 'label'];
|
|
50
|
+
setValueChanged(val);
|
|
51
|
+
handleValueClick(valueInInputValues);
|
|
52
|
+
return;
|
|
53
|
+
} // Otherwise we should return to the original input value
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
setValueChanged(props.value ?? '');
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
const onFuzzyFocus = () => {
|
|
61
|
+
setValueChanged('');
|
|
62
|
+
if (props.values?.length) setShowValues(true);
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
const renderedValues = useMemo(() => {
|
|
66
|
+
if (!props.values?.length) return [];
|
|
67
|
+
|
|
68
|
+
if (props.fuzzy) {
|
|
69
|
+
const fuzzyOptions = {
|
|
70
|
+
keys: [props.labelFromValues ?? 'label']
|
|
71
|
+
};
|
|
72
|
+
setShowValues(Boolean(value));
|
|
73
|
+
return matchSorter(props.values, value ?? '', fuzzyOptions);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
return props.values;
|
|
77
|
+
}, [value]);
|
|
78
|
+
|
|
79
|
+
const handleEscape = () => {
|
|
80
|
+
setShowValues(false);
|
|
81
|
+
setHighlightedIndex(null);
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
const handleClear = () => {
|
|
85
|
+
clearSelectedItem();
|
|
86
|
+
handleEscape();
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
const handleEnter = e => {
|
|
90
|
+
e.preventDefault();
|
|
91
|
+
e.stopPropagation();
|
|
92
|
+
if (!showValues) return;
|
|
93
|
+
|
|
94
|
+
if (!inputValues?.length) {
|
|
95
|
+
// If there is no autocomplete value in the list, send object with just { value }
|
|
96
|
+
handleValueClick({
|
|
97
|
+
value
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
if (highlightedIndex === null || !inputValues?.length) {
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
const item = inputValues[highlightedIndex];
|
|
106
|
+
handleValueClick(item);
|
|
107
|
+
setShowValues(false);
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
const handleUp = e => {
|
|
111
|
+
e.preventDefault();
|
|
112
|
+
e.stopPropagation();
|
|
113
|
+
if (!showValues) return;
|
|
114
|
+
|
|
115
|
+
if (highlightedIndex === null || !inputValues?.length) {
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
const newHighlightIndex = highlightedIndex - 1;
|
|
120
|
+
|
|
121
|
+
if (newHighlightIndex < 0) {
|
|
122
|
+
setHighlightedIndex(null);
|
|
123
|
+
setShowValues(false);
|
|
124
|
+
return;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
setHighlightedIndex(newHighlightIndex);
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
const handleDown = e => {
|
|
131
|
+
if (!showValues) return;
|
|
132
|
+
e.preventDefault();
|
|
133
|
+
e.stopPropagation();
|
|
134
|
+
|
|
135
|
+
if (highlightedIndex === null || !inputValues?.length) {
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
const newHighlightIndex = highlightedIndex + 1;
|
|
140
|
+
|
|
141
|
+
if (newHighlightIndex === inputValues.length) {
|
|
142
|
+
setHighlightedIndex(null);
|
|
143
|
+
setShowValues(false);
|
|
144
|
+
return;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
setHighlightedIndex(newHighlightIndex);
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
const handleCustomOnKeyDown = e => {
|
|
151
|
+
const {
|
|
152
|
+
key
|
|
153
|
+
} = e;
|
|
154
|
+
|
|
155
|
+
if (key === 'Escape') {
|
|
156
|
+
handleEscape();
|
|
157
|
+
return;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
props.onKeyDown?.(e);
|
|
161
|
+
}; // Makes it possible to navigate using keyboard shortcuts
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
const handleOnKeyDown = e => {
|
|
165
|
+
const {
|
|
166
|
+
key
|
|
167
|
+
} = e;
|
|
168
|
+
|
|
169
|
+
if (showValues && inputValues?.length) {
|
|
170
|
+
setHighlightedIndex(0);
|
|
171
|
+
} else {
|
|
172
|
+
setHighlightedIndex(null);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
switch (key) {
|
|
176
|
+
case 'Enter':
|
|
177
|
+
handleEnter(e);
|
|
178
|
+
break;
|
|
179
|
+
|
|
180
|
+
case 'ArrowUp':
|
|
181
|
+
handleUp(e);
|
|
182
|
+
break;
|
|
183
|
+
|
|
184
|
+
case 'ArrowDown':
|
|
185
|
+
case 'Tab':
|
|
186
|
+
handleDown(e);
|
|
187
|
+
break;
|
|
188
|
+
|
|
189
|
+
case 'Escape':
|
|
190
|
+
handleEscape();
|
|
191
|
+
break;
|
|
192
|
+
|
|
193
|
+
default:
|
|
194
|
+
break;
|
|
195
|
+
}
|
|
196
|
+
}; // Handle debounce
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
useEffect(() => {
|
|
200
|
+
const handleDebounceChange = value => {
|
|
201
|
+
if (props.onDebounceChange && inputDirty) {
|
|
202
|
+
props.onDebounceChange(value);
|
|
203
|
+
}
|
|
204
|
+
};
|
|
205
|
+
|
|
206
|
+
handleDebounceChange(debouncedValue);
|
|
207
|
+
}, [debouncedValue]); // Change local open state if props.isOpen changes
|
|
208
|
+
|
|
209
|
+
useEffect(() => {
|
|
210
|
+
setShowValues(!!props.isOpen);
|
|
211
|
+
}, [props.isOpen]); // Update local values state if props.values changes
|
|
212
|
+
|
|
213
|
+
useEffect(() => {
|
|
214
|
+
setInputValues(props.values);
|
|
215
|
+
}, [props.values]); // Update local value if props.value changes
|
|
216
|
+
|
|
217
|
+
useEffect(() => {
|
|
218
|
+
const value = props.value ?? '';
|
|
219
|
+
setValueChanged(value);
|
|
220
|
+
}, [props.value]);
|
|
221
|
+
useEffect(() => {
|
|
222
|
+
if (!props.openCustomValueInputOnKeyPress) return;
|
|
223
|
+
if (value.length) setShowValues(true);
|
|
224
|
+
}, [value]);
|
|
225
|
+
return {
|
|
226
|
+
setShowValues,
|
|
227
|
+
handleClear,
|
|
228
|
+
handleValueClick,
|
|
229
|
+
onInputChange,
|
|
230
|
+
handleOnKeyDown,
|
|
231
|
+
handleCustomOnKeyDown,
|
|
232
|
+
handleOnInputClick,
|
|
233
|
+
onFuzzyBlur,
|
|
234
|
+
onFuzzyFocus,
|
|
235
|
+
value,
|
|
236
|
+
highlightedIndex,
|
|
237
|
+
showValues,
|
|
238
|
+
renderedValues
|
|
239
|
+
};
|
|
240
|
+
};
|
|
241
|
+
|
|
242
|
+
export default useAutocomplete;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useHandleDimentions.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/Autocomplete/hooks/useHandleDimentions.ts"],"names":[],"mappings":";AAEA,QAAA,MAAM,mBAAmB;;;;CAaxB,CAAA;AAED,eAAe,mBAAmB,CAAA"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { createRef, useEffect, useState } from 'react';
|
|
2
|
+
|
|
3
|
+
const useHandleDimentions = () => {
|
|
4
|
+
const [height, setHeight] = useState(0);
|
|
5
|
+
const [width, setWidth] = useState(0);
|
|
6
|
+
const dimentionsRef = /*#__PURE__*/createRef();
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
const rect = dimentionsRef.current?.getBoundingClientRect();
|
|
9
|
+
setHeight(rect?.height || 0);
|
|
10
|
+
setWidth(rect?.width || 0); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
11
|
+
}, [dimentionsRef.current]);
|
|
12
|
+
return {
|
|
13
|
+
height,
|
|
14
|
+
width,
|
|
15
|
+
dimentionsRef
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export default useHandleDimentions;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,78 +1,6 @@
|
|
|
1
1
|
/** @jsxImportSource @emotion/react */
|
|
2
|
-
import React, { ForwardedRef
|
|
3
|
-
import {
|
|
4
|
-
interface IProps {
|
|
5
|
-
/** Input label */
|
|
6
|
-
label?: string;
|
|
7
|
-
/** Secondary label placed on the top right of the autocomplete */
|
|
8
|
-
labelSecondary?: ReactNode;
|
|
9
|
-
/** Autofocus */
|
|
10
|
-
focus?: boolean;
|
|
11
|
-
/** Placeholder text */
|
|
12
|
-
placeholder?: string;
|
|
13
|
-
/** Default value. */
|
|
14
|
-
value?: string;
|
|
15
|
-
/** Disabled. */
|
|
16
|
-
disabled?: boolean;
|
|
17
|
-
/** Callback fired when blur. */
|
|
18
|
-
onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
19
|
-
/** Callback fired when focus. */
|
|
20
|
-
onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
21
|
-
/** Callback fired when the value changes. */
|
|
22
|
-
onChange?: (e: React.ChangeEvent<HTMLInputElement>, reason?: string) => void;
|
|
23
|
-
/** Children. */
|
|
24
|
-
children?: ReactNode;
|
|
25
|
-
/** Include if input field should include debound effect after typing. Specifices delay in ms */
|
|
26
|
-
debounceDelay?: number;
|
|
27
|
-
/** Sends up the value from a option click */
|
|
28
|
-
onSelectItem?: (value: {
|
|
29
|
-
[x: string]: any;
|
|
30
|
-
}) => void;
|
|
31
|
-
/** Callback when using debounce. */
|
|
32
|
-
onDebounceChange?: (value: string) => void;
|
|
33
|
-
/** A button instead of standard label, requires to set a label */
|
|
34
|
-
onLabelClick?: (e: React.MouseEvent) => void;
|
|
35
|
-
/** Custom on key down handler */
|
|
36
|
-
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
37
|
-
/** Specify override styling */
|
|
38
|
-
css?: SerializedStyles;
|
|
39
|
-
/** Input name */
|
|
40
|
-
name?: string;
|
|
41
|
-
/** Validation on input */
|
|
42
|
-
validation?: boolean;
|
|
43
|
-
/** Invalid message */
|
|
44
|
-
invalidMessage?: string;
|
|
45
|
-
/** Activates invalid styling for custom external validation */
|
|
46
|
-
invalid?: boolean;
|
|
47
|
-
/** Set the height of the input, border comes in addition to height */
|
|
48
|
-
height?: string;
|
|
49
|
-
/** Sets a spinner on the input */
|
|
50
|
-
loading?: boolean;
|
|
51
|
-
/** Sets actions on the end of the input field */
|
|
52
|
-
actions: ReactNode;
|
|
53
|
-
/** Renders options shown under input */
|
|
54
|
-
renderOptions?: ReactNode[] | ReactNode;
|
|
55
|
-
/** Places values dynamically to the input field, defaults to being placed under the input field */
|
|
56
|
-
dynamicallyPlaceInput?: boolean;
|
|
57
|
-
/** Renders a custom input list */
|
|
58
|
-
renderCustomValueInput?: ReactNode;
|
|
59
|
-
/** Open custom value input when starting to write */
|
|
60
|
-
openCustomValueInputOnKeyPress?: boolean;
|
|
61
|
-
/** Values to list out */
|
|
62
|
-
values?: {
|
|
63
|
-
key: string;
|
|
64
|
-
value: string;
|
|
65
|
-
[x: string]: string;
|
|
66
|
-
}[];
|
|
67
|
-
/** Gets specific value as label from values property */
|
|
68
|
-
labelFromValues?: string;
|
|
69
|
-
/** Gets specific value as key from values property */
|
|
70
|
-
keyFromValues?: string;
|
|
71
|
-
/** Max width of the input values */
|
|
72
|
-
inputValuesMaxWidth?: number;
|
|
73
|
-
/** Custom open for showing values */
|
|
74
|
-
isOpen?: boolean;
|
|
75
|
-
}
|
|
2
|
+
import React, { ForwardedRef } from 'react';
|
|
3
|
+
import { IProps } from './index.interfaces';
|
|
76
4
|
export declare type Ref = ForwardedRef<HTMLInputElement>;
|
|
77
5
|
declare const Autocomplete: React.FC<IProps>;
|
|
78
6
|
export default Autocomplete;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Autocomplete/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAa,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Autocomplete/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAa,YAAY,EAAE,MAAM,OAAO,CAAA;AAQtD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAG3C,oBAAY,GAAG,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAA;AAEhD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAqLjC,CAAA;AAEF,eAAe,YAAY,CAAA"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { SerializedStyles } from '@emotion/react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
export interface IValuesProps {
|
|
4
|
+
/** The default key name is key */
|
|
5
|
+
/** The default display name is label */
|
|
6
|
+
/** When setting any other than label/key as default, use labelFromValues and keyFromValues for this */
|
|
7
|
+
[x: string]: string;
|
|
8
|
+
}
|
|
9
|
+
export interface IProps {
|
|
10
|
+
/** Input label */
|
|
11
|
+
label?: string;
|
|
12
|
+
/** Secondary label placed on the top right of the autocomplete */
|
|
13
|
+
labelSecondary?: ReactNode;
|
|
14
|
+
/** Autofocus */
|
|
15
|
+
focus?: boolean;
|
|
16
|
+
/** Placeholder text */
|
|
17
|
+
placeholder?: string;
|
|
18
|
+
/** Default value. */
|
|
19
|
+
value?: string;
|
|
20
|
+
/** Disabled. */
|
|
21
|
+
disabled?: boolean;
|
|
22
|
+
/** Callback fired when blur. */
|
|
23
|
+
onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
24
|
+
/** Callback fired when focus. */
|
|
25
|
+
onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
26
|
+
/** Callback fired when the value changes. */
|
|
27
|
+
onChange?: (e: React.ChangeEvent<HTMLInputElement>, reason?: string) => void;
|
|
28
|
+
/** Children. */
|
|
29
|
+
children?: ReactNode;
|
|
30
|
+
/** Include if input field should include debound effect after typing. Specifices delay in ms */
|
|
31
|
+
debounceDelay?: number;
|
|
32
|
+
/** Sends up the value from a option click */
|
|
33
|
+
onSelectItem?: (value: {
|
|
34
|
+
[x: string]: any;
|
|
35
|
+
}) => void;
|
|
36
|
+
/** Callback when using debounce. */
|
|
37
|
+
onDebounceChange?: (value: string) => void;
|
|
38
|
+
/** A button instead of standard label, requires to set a label */
|
|
39
|
+
onLabelClick?: (e: React.MouseEvent) => void;
|
|
40
|
+
/** Custom on key down handler */
|
|
41
|
+
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
42
|
+
/** Specify override styling */
|
|
43
|
+
css?: SerializedStyles;
|
|
44
|
+
/** Input name */
|
|
45
|
+
name?: string;
|
|
46
|
+
/** Validation on input */
|
|
47
|
+
validation?: boolean;
|
|
48
|
+
/** Invalid message */
|
|
49
|
+
invalidMessage?: string;
|
|
50
|
+
/** Activates invalid styling for custom external validation */
|
|
51
|
+
invalid?: boolean;
|
|
52
|
+
/** Set the height of the input, border comes in addition to height */
|
|
53
|
+
height?: string;
|
|
54
|
+
/** Sets a spinner on the input */
|
|
55
|
+
loading?: boolean;
|
|
56
|
+
/** Sets actions on the end of the input field */
|
|
57
|
+
actions?: ReactNode;
|
|
58
|
+
/** Renders options shown under input */
|
|
59
|
+
renderOptions?: ReactNode[] | ReactNode;
|
|
60
|
+
/** Places values dynamically to the input field, defaults to being placed under the input field */
|
|
61
|
+
dynamicallyPlaceInput?: boolean;
|
|
62
|
+
/** Renders a custom input list */
|
|
63
|
+
renderCustomValueInput?: ReactNode;
|
|
64
|
+
/** Open custom value input when starting to write */
|
|
65
|
+
openCustomValueInputOnKeyPress?: boolean;
|
|
66
|
+
/** Values to list out */
|
|
67
|
+
values?: IValuesProps[];
|
|
68
|
+
/** Gets specific value as label from values property */
|
|
69
|
+
labelFromValues?: string;
|
|
70
|
+
/** Gets specific value as key from values property */
|
|
71
|
+
keyFromValues?: string;
|
|
72
|
+
/** Max width of the input values */
|
|
73
|
+
inputValuesMaxWidth?: number;
|
|
74
|
+
/** Custom open for showing values */
|
|
75
|
+
isOpen?: boolean;
|
|
76
|
+
/** Has fuzzy search */
|
|
77
|
+
fuzzy?: boolean;
|
|
78
|
+
/** Has clear button */
|
|
79
|
+
clear?: boolean;
|
|
80
|
+
}
|
|
81
|
+
//# sourceMappingURL=index.interfaces.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.interfaces.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Autocomplete/index.interfaces.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|