@bbl-digital/snorre 3.0.13 → 3.0.14
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
CHANGED
@@ -31850,25 +31850,22 @@
|
|
31850
31850
|
const [inputDirty, setInputDirty] = React.useState(false);
|
31851
31851
|
const debouncedValue = useDebounce(value, props.debounceDelay ?? 0);
|
31852
31852
|
const [inputValues, setInputValues] = React.useState(props.values);
|
31853
|
+
const labelKey = props.labelFromValues ?? 'label';
|
31853
31854
|
|
31854
31855
|
const handleValueClick = value => {
|
31855
31856
|
props.onSelectItem?.(value);
|
31856
|
-
|
31857
|
-
if (props.fuzzy) {
|
31858
|
-
setValueChanged(value[props.labelFromValues ?? 'label']);
|
31859
|
-
}
|
31860
|
-
|
31857
|
+
if (props.fuzzy) setValueChanged(value[labelKey]);
|
31861
31858
|
setShowValues(false);
|
31862
31859
|
};
|
31863
31860
|
|
31864
31861
|
const clearSelectedItem = () => handleValueClick({
|
31865
|
-
[
|
31862
|
+
[labelKey]: '',
|
31866
31863
|
[props.keyFromValues ?? 'key']: ''
|
31867
31864
|
});
|
31868
31865
|
|
31869
31866
|
const onInputChange = e => {
|
31870
31867
|
setInputDirty(true);
|
31871
|
-
if (
|
31868
|
+
if (renderedValues) setHighlightedIndex(0);
|
31872
31869
|
setValueChanged(e.target.value); // Should not use onChange whenever we have fuzzy search on
|
31873
31870
|
|
31874
31871
|
if (props.fuzzy) {
|
@@ -31880,23 +31877,18 @@
|
|
31880
31877
|
};
|
31881
31878
|
|
31882
31879
|
const handleOnInputClick = () => {
|
31883
|
-
if (
|
31880
|
+
if (renderedValues?.length) setHighlightedIndex(0);
|
31884
31881
|
setShowValues(true);
|
31885
31882
|
};
|
31886
31883
|
|
31887
31884
|
const onFuzzyBlur = e => {
|
31888
|
-
// If the value
|
31889
|
-
// we should revert back the input value to the original value
|
31890
|
-
if (e.target.value === props.value) {
|
31891
|
-
return;
|
31892
|
-
} // If target value is the same as a value from the values array, we should set the value for the user
|
31893
|
-
|
31885
|
+
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
|
31894
31886
|
|
31895
31887
|
if (inputValues?.length) {
|
31896
|
-
const valueInInputValues = inputValues.find(item => item[
|
31888
|
+
const valueInInputValues = inputValues.find(item => item[labelKey].length && item[labelKey].toLowerCase() === e.target.value.toLowerCase());
|
31897
31889
|
|
31898
31890
|
if (valueInInputValues) {
|
31899
|
-
const val = valueInInputValues[
|
31891
|
+
const val = valueInInputValues[labelKey];
|
31900
31892
|
setValueChanged(val);
|
31901
31893
|
handleValueClick(valueInInputValues);
|
31902
31894
|
return;
|
@@ -31914,7 +31906,7 @@
|
|
31914
31906
|
|
31915
31907
|
if (props.fuzzy) {
|
31916
31908
|
const fuzzyOptions = {
|
31917
|
-
keys: [
|
31909
|
+
keys: [labelKey]
|
31918
31910
|
};
|
31919
31911
|
return matchSorter.matchSorter(props.values, value ?? '', fuzzyOptions);
|
31920
31912
|
}
|
@@ -31944,11 +31936,11 @@
|
|
31944
31936
|
});
|
31945
31937
|
}
|
31946
31938
|
|
31947
|
-
if (highlightedIndex === null || !
|
31939
|
+
if (highlightedIndex === null || !renderedValues?.length) {
|
31948
31940
|
return;
|
31949
31941
|
}
|
31950
31942
|
|
31951
|
-
const item =
|
31943
|
+
const item = renderedValues[highlightedIndex];
|
31952
31944
|
handleValueClick(item);
|
31953
31945
|
setShowValues(false);
|
31954
31946
|
};
|
@@ -31958,7 +31950,7 @@
|
|
31958
31950
|
e.stopPropagation();
|
31959
31951
|
if (!showValues) return;
|
31960
31952
|
|
31961
|
-
if (highlightedIndex === null || !
|
31953
|
+
if (highlightedIndex === null || !renderedValues?.length) {
|
31962
31954
|
return;
|
31963
31955
|
}
|
31964
31956
|
|
@@ -31978,13 +31970,13 @@
|
|
31978
31970
|
e.preventDefault();
|
31979
31971
|
e.stopPropagation();
|
31980
31972
|
|
31981
|
-
if (highlightedIndex === null || !
|
31973
|
+
if (highlightedIndex === null || !renderedValues?.length) {
|
31982
31974
|
return;
|
31983
31975
|
}
|
31984
31976
|
|
31985
31977
|
const newHighlightIndex = highlightedIndex + 1;
|
31986
31978
|
|
31987
|
-
if (newHighlightIndex ===
|
31979
|
+
if (newHighlightIndex === renderedValues.length) {
|
31988
31980
|
setHighlightedIndex(null);
|
31989
31981
|
setShowValues(false);
|
31990
31982
|
return;
|
@@ -32012,7 +32004,7 @@
|
|
32012
32004
|
key
|
32013
32005
|
} = e;
|
32014
32006
|
|
32015
|
-
if (showValues &&
|
32007
|
+
if (showValues && renderedValues?.length) {
|
32016
32008
|
setHighlightedIndex(0);
|
32017
32009
|
} else {
|
32018
32010
|
setHighlightedIndex(null);
|
@@ -10,25 +10,22 @@ const useAutocomplete = props => {
|
|
10
10
|
const [inputDirty, setInputDirty] = useState(false);
|
11
11
|
const debouncedValue = useDebounce(value, props.debounceDelay ?? 0);
|
12
12
|
const [inputValues, setInputValues] = useState(props.values);
|
13
|
+
const labelKey = props.labelFromValues ?? 'label';
|
13
14
|
|
14
15
|
const handleValueClick = value => {
|
15
16
|
props.onSelectItem?.(value);
|
16
|
-
|
17
|
-
if (props.fuzzy) {
|
18
|
-
setValueChanged(value[props.labelFromValues ?? 'label']);
|
19
|
-
}
|
20
|
-
|
17
|
+
if (props.fuzzy) setValueChanged(value[labelKey]);
|
21
18
|
setShowValues(false);
|
22
19
|
};
|
23
20
|
|
24
21
|
const clearSelectedItem = () => handleValueClick({
|
25
|
-
[
|
22
|
+
[labelKey]: '',
|
26
23
|
[props.keyFromValues ?? 'key']: ''
|
27
24
|
});
|
28
25
|
|
29
26
|
const onInputChange = e => {
|
30
27
|
setInputDirty(true);
|
31
|
-
if (
|
28
|
+
if (renderedValues) setHighlightedIndex(0);
|
32
29
|
setValueChanged(e.target.value); // Should not use onChange whenever we have fuzzy search on
|
33
30
|
|
34
31
|
if (props.fuzzy) {
|
@@ -40,23 +37,18 @@ const useAutocomplete = props => {
|
|
40
37
|
};
|
41
38
|
|
42
39
|
const handleOnInputClick = () => {
|
43
|
-
if (
|
40
|
+
if (renderedValues?.length) setHighlightedIndex(0);
|
44
41
|
setShowValues(true);
|
45
42
|
};
|
46
43
|
|
47
44
|
const onFuzzyBlur = e => {
|
48
|
-
// If the value
|
49
|
-
// we should revert back the input value to the original value
|
50
|
-
if (e.target.value === props.value) {
|
51
|
-
return;
|
52
|
-
} // If target value is the same as a value from the values array, we should set the value for the user
|
53
|
-
|
45
|
+
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
|
54
46
|
|
55
47
|
if (inputValues?.length) {
|
56
|
-
const valueInInputValues = inputValues.find(item => item[
|
48
|
+
const valueInInputValues = inputValues.find(item => item[labelKey].length && item[labelKey].toLowerCase() === e.target.value.toLowerCase());
|
57
49
|
|
58
50
|
if (valueInInputValues) {
|
59
|
-
const val = valueInInputValues[
|
51
|
+
const val = valueInInputValues[labelKey];
|
60
52
|
setValueChanged(val);
|
61
53
|
handleValueClick(valueInInputValues);
|
62
54
|
return;
|
@@ -74,7 +66,7 @@ const useAutocomplete = props => {
|
|
74
66
|
|
75
67
|
if (props.fuzzy) {
|
76
68
|
const fuzzyOptions = {
|
77
|
-
keys: [
|
69
|
+
keys: [labelKey]
|
78
70
|
};
|
79
71
|
return matchSorter(props.values, value ?? '', fuzzyOptions);
|
80
72
|
}
|
@@ -104,11 +96,11 @@ const useAutocomplete = props => {
|
|
104
96
|
});
|
105
97
|
}
|
106
98
|
|
107
|
-
if (highlightedIndex === null || !
|
99
|
+
if (highlightedIndex === null || !renderedValues?.length) {
|
108
100
|
return;
|
109
101
|
}
|
110
102
|
|
111
|
-
const item =
|
103
|
+
const item = renderedValues[highlightedIndex];
|
112
104
|
handleValueClick(item);
|
113
105
|
setShowValues(false);
|
114
106
|
};
|
@@ -118,7 +110,7 @@ const useAutocomplete = props => {
|
|
118
110
|
e.stopPropagation();
|
119
111
|
if (!showValues) return;
|
120
112
|
|
121
|
-
if (highlightedIndex === null || !
|
113
|
+
if (highlightedIndex === null || !renderedValues?.length) {
|
122
114
|
return;
|
123
115
|
}
|
124
116
|
|
@@ -138,13 +130,13 @@ const useAutocomplete = props => {
|
|
138
130
|
e.preventDefault();
|
139
131
|
e.stopPropagation();
|
140
132
|
|
141
|
-
if (highlightedIndex === null || !
|
133
|
+
if (highlightedIndex === null || !renderedValues?.length) {
|
142
134
|
return;
|
143
135
|
}
|
144
136
|
|
145
137
|
const newHighlightIndex = highlightedIndex + 1;
|
146
138
|
|
147
|
-
if (newHighlightIndex ===
|
139
|
+
if (newHighlightIndex === renderedValues.length) {
|
148
140
|
setHighlightedIndex(null);
|
149
141
|
setShowValues(false);
|
150
142
|
return;
|
@@ -172,7 +164,7 @@ const useAutocomplete = props => {
|
|
172
164
|
key
|
173
165
|
} = e;
|
174
166
|
|
175
|
-
if (showValues &&
|
167
|
+
if (showValues && renderedValues?.length) {
|
176
168
|
setHighlightedIndex(0);
|
177
169
|
} else {
|
178
170
|
setHighlightedIndex(null);
|
@@ -1 +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;;;;;;
|
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;;;;;;uBA2BV,MAAM,WAAW,CAAC,gBAAgB,CAAC;yBA6IjC,mBAAmB,CAAC,gBAAgB,CAAC;+BAZ/B,mBAAmB,CAAC,gBAAgB,CAAC;;qBA7G/C,gBAAgB,CAAC,gBAAgB,EAAE,OAAO,CAAC;;;;;;CAuMpE,CAAA;AAED,eAAe,eAAe,CAAA"}
|
@@ -10,25 +10,22 @@ const useAutocomplete = props => {
|
|
10
10
|
const [inputDirty, setInputDirty] = useState(false);
|
11
11
|
const debouncedValue = useDebounce(value, props.debounceDelay ?? 0);
|
12
12
|
const [inputValues, setInputValues] = useState(props.values);
|
13
|
+
const labelKey = props.labelFromValues ?? 'label';
|
13
14
|
|
14
15
|
const handleValueClick = value => {
|
15
16
|
props.onSelectItem?.(value);
|
16
|
-
|
17
|
-
if (props.fuzzy) {
|
18
|
-
setValueChanged(value[props.labelFromValues ?? 'label']);
|
19
|
-
}
|
20
|
-
|
17
|
+
if (props.fuzzy) setValueChanged(value[labelKey]);
|
21
18
|
setShowValues(false);
|
22
19
|
};
|
23
20
|
|
24
21
|
const clearSelectedItem = () => handleValueClick({
|
25
|
-
[
|
22
|
+
[labelKey]: '',
|
26
23
|
[props.keyFromValues ?? 'key']: ''
|
27
24
|
});
|
28
25
|
|
29
26
|
const onInputChange = e => {
|
30
27
|
setInputDirty(true);
|
31
|
-
if (
|
28
|
+
if (renderedValues) setHighlightedIndex(0);
|
32
29
|
setValueChanged(e.target.value); // Should not use onChange whenever we have fuzzy search on
|
33
30
|
|
34
31
|
if (props.fuzzy) {
|
@@ -40,23 +37,18 @@ const useAutocomplete = props => {
|
|
40
37
|
};
|
41
38
|
|
42
39
|
const handleOnInputClick = () => {
|
43
|
-
if (
|
40
|
+
if (renderedValues?.length) setHighlightedIndex(0);
|
44
41
|
setShowValues(true);
|
45
42
|
};
|
46
43
|
|
47
44
|
const onFuzzyBlur = e => {
|
48
|
-
// If the value
|
49
|
-
// we should revert back the input value to the original value
|
50
|
-
if (e.target.value === props.value) {
|
51
|
-
return;
|
52
|
-
} // If target value is the same as a value from the values array, we should set the value for the user
|
53
|
-
|
45
|
+
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
|
54
46
|
|
55
47
|
if (inputValues?.length) {
|
56
|
-
const valueInInputValues = inputValues.find(item => item[
|
48
|
+
const valueInInputValues = inputValues.find(item => item[labelKey].length && item[labelKey].toLowerCase() === e.target.value.toLowerCase());
|
57
49
|
|
58
50
|
if (valueInInputValues) {
|
59
|
-
const val = valueInInputValues[
|
51
|
+
const val = valueInInputValues[labelKey];
|
60
52
|
setValueChanged(val);
|
61
53
|
handleValueClick(valueInInputValues);
|
62
54
|
return;
|
@@ -74,7 +66,7 @@ const useAutocomplete = props => {
|
|
74
66
|
|
75
67
|
if (props.fuzzy) {
|
76
68
|
const fuzzyOptions = {
|
77
|
-
keys: [
|
69
|
+
keys: [labelKey]
|
78
70
|
};
|
79
71
|
return matchSorter(props.values, value ?? '', fuzzyOptions);
|
80
72
|
}
|
@@ -104,11 +96,11 @@ const useAutocomplete = props => {
|
|
104
96
|
});
|
105
97
|
}
|
106
98
|
|
107
|
-
if (highlightedIndex === null || !
|
99
|
+
if (highlightedIndex === null || !renderedValues?.length) {
|
108
100
|
return;
|
109
101
|
}
|
110
102
|
|
111
|
-
const item =
|
103
|
+
const item = renderedValues[highlightedIndex];
|
112
104
|
handleValueClick(item);
|
113
105
|
setShowValues(false);
|
114
106
|
};
|
@@ -118,7 +110,7 @@ const useAutocomplete = props => {
|
|
118
110
|
e.stopPropagation();
|
119
111
|
if (!showValues) return;
|
120
112
|
|
121
|
-
if (highlightedIndex === null || !
|
113
|
+
if (highlightedIndex === null || !renderedValues?.length) {
|
122
114
|
return;
|
123
115
|
}
|
124
116
|
|
@@ -138,13 +130,13 @@ const useAutocomplete = props => {
|
|
138
130
|
e.preventDefault();
|
139
131
|
e.stopPropagation();
|
140
132
|
|
141
|
-
if (highlightedIndex === null || !
|
133
|
+
if (highlightedIndex === null || !renderedValues?.length) {
|
142
134
|
return;
|
143
135
|
}
|
144
136
|
|
145
137
|
const newHighlightIndex = highlightedIndex + 1;
|
146
138
|
|
147
|
-
if (newHighlightIndex ===
|
139
|
+
if (newHighlightIndex === renderedValues.length) {
|
148
140
|
setHighlightedIndex(null);
|
149
141
|
setShowValues(false);
|
150
142
|
return;
|
@@ -172,7 +164,7 @@ const useAutocomplete = props => {
|
|
172
164
|
key
|
173
165
|
} = e;
|
174
166
|
|
175
|
-
if (showValues &&
|
167
|
+
if (showValues && renderedValues?.length) {
|
176
168
|
setHighlightedIndex(0);
|
177
169
|
} else {
|
178
170
|
setHighlightedIndex(null);
|