zavadil-react-common 1.2.92 → 1.2.95
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/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +6 -1
- package/src/component/forms/AutocompleteSelect.tsx +66 -36
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {useCallback, useEffect, useMemo, useState} from "react";
|
|
1
|
+
import {useCallback, useEffect, useMemo, useRef, useState} from "react";
|
|
2
2
|
import {CancellablePromise, EntityBase} from "zavadil-ts-common";
|
|
3
3
|
import TextInputWithReset from "./TextInputWithReset";
|
|
4
4
|
import {Dropdown} from "react-bootstrap";
|
|
@@ -15,6 +15,7 @@ export function AutocompleteSelect<T extends EntityBase>({selected, disabled, la
|
|
|
15
15
|
const [searchPromise, setSearchPromise] = useState<CancellablePromise>();
|
|
16
16
|
const [searchText, setSearchText] = useState<string>();
|
|
17
17
|
const [itemSelection, setItemSelection] = useState<Array<T>>();
|
|
18
|
+
const blurTimeout = useRef<number>();
|
|
18
19
|
|
|
19
20
|
const finalLabelGetter = useCallback(
|
|
20
21
|
(item: T) => {
|
|
@@ -30,6 +31,38 @@ export function AutocompleteSelect<T extends EntityBase>({selected, disabled, la
|
|
|
30
31
|
[selected]
|
|
31
32
|
);
|
|
32
33
|
|
|
34
|
+
const userLeftControl = useCallback(
|
|
35
|
+
() => {
|
|
36
|
+
console.log('user left control');
|
|
37
|
+
if (itemSelection) {
|
|
38
|
+
setItemSelection(undefined);
|
|
39
|
+
setSearchText(selected ? finalLabelGetter(selected) : '');
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
[onChange, itemSelection, selected, finalLabelGetter]
|
|
43
|
+
);
|
|
44
|
+
|
|
45
|
+
const startBlur = useCallback(
|
|
46
|
+
() => {
|
|
47
|
+
blurTimeout.current = window.setTimeout(
|
|
48
|
+
() => {
|
|
49
|
+
userLeftControl();
|
|
50
|
+
},
|
|
51
|
+
100
|
|
52
|
+
);
|
|
53
|
+
},
|
|
54
|
+
[blurTimeout]
|
|
55
|
+
);
|
|
56
|
+
|
|
57
|
+
const cancelBlur = useCallback(
|
|
58
|
+
() => {
|
|
59
|
+
if (blurTimeout.current) {
|
|
60
|
+
clearTimeout(blurTimeout.current);
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
[blurTimeout]
|
|
64
|
+
);
|
|
65
|
+
|
|
33
66
|
useEffect(
|
|
34
67
|
() => {
|
|
35
68
|
setSearchText(selected ? finalLabelGetter(selected) : '');
|
|
@@ -68,16 +101,6 @@ export function AutocompleteSelect<T extends EntityBase>({selected, disabled, la
|
|
|
68
101
|
[searchPromise, onSearch]
|
|
69
102
|
);
|
|
70
103
|
|
|
71
|
-
const userLeftControl = useCallback(
|
|
72
|
-
() => {
|
|
73
|
-
console.log('user left control');
|
|
74
|
-
if (itemSelection) {
|
|
75
|
-
setItemSelection(undefined);
|
|
76
|
-
setSearchText(selected ? finalLabelGetter(selected) : '');
|
|
77
|
-
}
|
|
78
|
-
},
|
|
79
|
-
[onChange, itemSelection, selected, finalLabelGetter]
|
|
80
|
-
);
|
|
81
104
|
|
|
82
105
|
const userSelectedItem = useCallback(
|
|
83
106
|
(item: T) => {
|
|
@@ -89,30 +112,37 @@ export function AutocompleteSelect<T extends EntityBase>({selected, disabled, la
|
|
|
89
112
|
);
|
|
90
113
|
|
|
91
114
|
return (
|
|
92
|
-
<
|
|
93
|
-
<
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
(
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
115
|
+
<div onBlur={startBlur} onFocus={cancelBlur}>
|
|
116
|
+
<Dropdown defaultShow={false} show={itemSelection !== null}>
|
|
117
|
+
<TextInputWithReset
|
|
118
|
+
disabled={disabled}
|
|
119
|
+
value={searchText}
|
|
120
|
+
onChange={userChangedText}
|
|
121
|
+
onReset={reset}
|
|
122
|
+
className={finalCss}
|
|
123
|
+
/>
|
|
124
|
+
{
|
|
125
|
+
itemSelection &&
|
|
126
|
+
<Dropdown.Menu>
|
|
127
|
+
{
|
|
128
|
+
itemSelection.map(
|
|
129
|
+
(item) => <Dropdown.Item
|
|
130
|
+
key={item.id}
|
|
131
|
+
onClick={
|
|
132
|
+
(e) => {
|
|
133
|
+
cancelBlur();
|
|
134
|
+
userSelectedItem(item);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
active={item.id === selected?.id}
|
|
138
|
+
>
|
|
139
|
+
{finalLabelGetter(item)}
|
|
140
|
+
</Dropdown.Item>
|
|
141
|
+
)
|
|
142
|
+
}
|
|
143
|
+
</Dropdown.Menu>
|
|
144
|
+
}
|
|
145
|
+
</Dropdown>
|
|
146
|
+
</div>
|
|
117
147
|
);
|
|
118
148
|
}
|