@bbl-digital/snorre 3.0.4 → 3.0.8
Sign up to get free protection for your applications and to get access to all the features.
- 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 {};
|