@dhis2-ui/select 10.10.0 → 10.10.1
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/README.md +1 -1
- package/build/cjs/locales/en_US/translations.json +9 -0
- package/build/cjs/locales/fr/translations.json +2 -2
- package/build/cjs/locales/hi_IN/translations.json +7 -0
- package/build/cjs/locales/index.js +54 -50
- package/build/cjs/locales/zh/translations.json +3 -1
- package/build/cjs/locales/zh_CN/translations.json +1 -1
- package/build/cjs/simple-single-select/__stories__/WithServerSideFilteringDemo.js +236 -0
- package/build/cjs/simple-single-select/__stories__/WithSimpleFilteringDemo.js +62 -0
- package/build/cjs/simple-single-select/__stories__/simple-single-select-server-side-filtering/CustomDataProvider.js +94 -0
- package/build/cjs/simple-single-select/__stories__/simple-single-select-server-side-filtering/dataElements.js +3118 -0
- package/build/cjs/simple-single-select/__stories__/simple-single-select-server-side-filtering/index.js +12 -0
- package/build/cjs/simple-single-select/simple-single-select.prod.stories.js +14 -0
- package/build/es/locales/en_US/translations.json +9 -0
- package/build/es/locales/fr/translations.json +2 -2
- package/build/es/locales/hi_IN/translations.json +7 -0
- package/build/es/locales/index.js +4 -0
- package/build/es/locales/zh/translations.json +3 -1
- package/build/es/locales/zh_CN/translations.json +1 -1
- package/build/es/simple-single-select/__stories__/WithServerSideFilteringDemo.js +228 -0
- package/build/es/simple-single-select/__stories__/WithSimpleFilteringDemo.js +53 -0
- package/build/es/simple-single-select/__stories__/simple-single-select-server-side-filtering/CustomDataProvider.js +86 -0
- package/build/es/simple-single-select/__stories__/simple-single-select-server-side-filtering/dataElements.js +3112 -0
- package/build/es/simple-single-select/__stories__/simple-single-select-server-side-filtering/index.js +1 -0
- package/build/es/simple-single-select/simple-single-select.prod.stories.js +3 -1
- package/package.json +15 -15
package/README.md
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
> guide](https://github.com/dhis2/ui/blob/master/docs/getting-started.md)
|
|
6
6
|
> for more information.
|
|
7
7
|
|
|
8
|
-
For usage instructions see [the documentation for this component](https://
|
|
8
|
+
For usage instructions see [the documentation for this component](https://developers.dhis2.org/docs/ui/components/select).
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"Clear": "Effacer",
|
|
3
3
|
"No data found": "Aucune valeur trouvée",
|
|
4
|
-
"Type to filter options": "",
|
|
4
|
+
"Type to filter options": "Tapez pour filtrer les options",
|
|
5
5
|
"Loading options": "Chargement des options",
|
|
6
|
-
"No options found": ""
|
|
6
|
+
"No options found": "Pas d'options trouvées"
|
|
7
7
|
}
|
|
@@ -11,31 +11,33 @@ var _translations3 = _interopRequireDefault(require("./ckb/translations.json"));
|
|
|
11
11
|
var _translations4 = _interopRequireDefault(require("./cs/translations.json"));
|
|
12
12
|
var _translations5 = _interopRequireDefault(require("./da/translations.json"));
|
|
13
13
|
var _translations6 = _interopRequireDefault(require("./en/translations.json"));
|
|
14
|
-
var _translations7 = _interopRequireDefault(require("./
|
|
15
|
-
var _translations8 = _interopRequireDefault(require("./
|
|
16
|
-
var _translations9 = _interopRequireDefault(require("./
|
|
17
|
-
var _translations10 = _interopRequireDefault(require("./
|
|
18
|
-
var _translations11 = _interopRequireDefault(require("./
|
|
19
|
-
var _translations12 = _interopRequireDefault(require("./
|
|
20
|
-
var _translations13 = _interopRequireDefault(require("./
|
|
21
|
-
var _translations14 = _interopRequireDefault(require("./
|
|
22
|
-
var _translations15 = _interopRequireDefault(require("./
|
|
23
|
-
var _translations16 = _interopRequireDefault(require("./
|
|
24
|
-
var _translations17 = _interopRequireDefault(require("./
|
|
25
|
-
var _translations18 = _interopRequireDefault(require("./
|
|
26
|
-
var _translations19 = _interopRequireDefault(require("./
|
|
27
|
-
var _translations20 = _interopRequireDefault(require("./
|
|
28
|
-
var _translations21 = _interopRequireDefault(require("./
|
|
29
|
-
var _translations22 = _interopRequireDefault(require("./
|
|
30
|
-
var _translations23 = _interopRequireDefault(require("./
|
|
31
|
-
var _translations24 = _interopRequireDefault(require("./
|
|
32
|
-
var _translations25 = _interopRequireDefault(require("./
|
|
33
|
-
var _translations26 = _interopRequireDefault(require("./
|
|
34
|
-
var _translations27 = _interopRequireDefault(require("./
|
|
35
|
-
var _translations28 = _interopRequireDefault(require("./
|
|
36
|
-
var _translations29 = _interopRequireDefault(require("./
|
|
37
|
-
var _translations30 = _interopRequireDefault(require("./
|
|
38
|
-
var _translations31 = _interopRequireDefault(require("./
|
|
14
|
+
var _translations7 = _interopRequireDefault(require("./en_US/translations.json"));
|
|
15
|
+
var _translations8 = _interopRequireDefault(require("./es/translations.json"));
|
|
16
|
+
var _translations9 = _interopRequireDefault(require("./es_419/translations.json"));
|
|
17
|
+
var _translations10 = _interopRequireDefault(require("./fr/translations.json"));
|
|
18
|
+
var _translations11 = _interopRequireDefault(require("./hi_IN/translations.json"));
|
|
19
|
+
var _translations12 = _interopRequireDefault(require("./id/translations.json"));
|
|
20
|
+
var _translations13 = _interopRequireDefault(require("./km/translations.json"));
|
|
21
|
+
var _translations14 = _interopRequireDefault(require("./lo/translations.json"));
|
|
22
|
+
var _translations15 = _interopRequireDefault(require("./my/translations.json"));
|
|
23
|
+
var _translations16 = _interopRequireDefault(require("./nb/translations.json"));
|
|
24
|
+
var _translations17 = _interopRequireDefault(require("./nl/translations.json"));
|
|
25
|
+
var _translations18 = _interopRequireDefault(require("./prs/translations.json"));
|
|
26
|
+
var _translations19 = _interopRequireDefault(require("./ps/translations.json"));
|
|
27
|
+
var _translations20 = _interopRequireDefault(require("./pt/translations.json"));
|
|
28
|
+
var _translations21 = _interopRequireDefault(require("./pt_BR/translations.json"));
|
|
29
|
+
var _translations22 = _interopRequireDefault(require("./ru/translations.json"));
|
|
30
|
+
var _translations23 = _interopRequireDefault(require("./sv/translations.json"));
|
|
31
|
+
var _translations24 = _interopRequireDefault(require("./tet/translations.json"));
|
|
32
|
+
var _translations25 = _interopRequireDefault(require("./tg/translations.json"));
|
|
33
|
+
var _translations26 = _interopRequireDefault(require("./uk/translations.json"));
|
|
34
|
+
var _translations27 = _interopRequireDefault(require("./ur/translations.json"));
|
|
35
|
+
var _translations28 = _interopRequireDefault(require("./uz_Latn/translations.json"));
|
|
36
|
+
var _translations29 = _interopRequireDefault(require("./uz_UZ_Cyrl/translations.json"));
|
|
37
|
+
var _translations30 = _interopRequireDefault(require("./uz_UZ_Latn/translations.json"));
|
|
38
|
+
var _translations31 = _interopRequireDefault(require("./vi/translations.json"));
|
|
39
|
+
var _translations32 = _interopRequireDefault(require("./zh/translations.json"));
|
|
40
|
+
var _translations33 = _interopRequireDefault(require("./zh_CN/translations.json"));
|
|
39
41
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
40
42
|
//------------------------------------------------------------------------------
|
|
41
43
|
// <auto-generated>
|
|
@@ -53,29 +55,31 @@ _d2I18n.default.addResources('ckb', namespace, _translations3.default);
|
|
|
53
55
|
_d2I18n.default.addResources('cs', namespace, _translations4.default);
|
|
54
56
|
_d2I18n.default.addResources('da', namespace, _translations5.default);
|
|
55
57
|
_d2I18n.default.addResources('en', namespace, _translations6.default);
|
|
56
|
-
_d2I18n.default.addResources('
|
|
57
|
-
_d2I18n.default.addResources('
|
|
58
|
-
_d2I18n.default.addResources('
|
|
59
|
-
_d2I18n.default.addResources('
|
|
60
|
-
_d2I18n.default.addResources('
|
|
61
|
-
_d2I18n.default.addResources('
|
|
62
|
-
_d2I18n.default.addResources('
|
|
63
|
-
_d2I18n.default.addResources('
|
|
64
|
-
_d2I18n.default.addResources('
|
|
65
|
-
_d2I18n.default.addResources('
|
|
66
|
-
_d2I18n.default.addResources('
|
|
67
|
-
_d2I18n.default.addResources('
|
|
68
|
-
_d2I18n.default.addResources('
|
|
69
|
-
_d2I18n.default.addResources('
|
|
70
|
-
_d2I18n.default.addResources('
|
|
71
|
-
_d2I18n.default.addResources('
|
|
72
|
-
_d2I18n.default.addResources('
|
|
73
|
-
_d2I18n.default.addResources('
|
|
74
|
-
_d2I18n.default.addResources('
|
|
75
|
-
_d2I18n.default.addResources('
|
|
76
|
-
_d2I18n.default.addResources('
|
|
77
|
-
_d2I18n.default.addResources('
|
|
78
|
-
_d2I18n.default.addResources('
|
|
79
|
-
_d2I18n.default.addResources('
|
|
80
|
-
_d2I18n.default.addResources('
|
|
58
|
+
_d2I18n.default.addResources('en_US', namespace, _translations7.default);
|
|
59
|
+
_d2I18n.default.addResources('es', namespace, _translations8.default);
|
|
60
|
+
_d2I18n.default.addResources('es_419', namespace, _translations9.default);
|
|
61
|
+
_d2I18n.default.addResources('fr', namespace, _translations10.default);
|
|
62
|
+
_d2I18n.default.addResources('hi_IN', namespace, _translations11.default);
|
|
63
|
+
_d2I18n.default.addResources('id', namespace, _translations12.default);
|
|
64
|
+
_d2I18n.default.addResources('km', namespace, _translations13.default);
|
|
65
|
+
_d2I18n.default.addResources('lo', namespace, _translations14.default);
|
|
66
|
+
_d2I18n.default.addResources('my', namespace, _translations15.default);
|
|
67
|
+
_d2I18n.default.addResources('nb', namespace, _translations16.default);
|
|
68
|
+
_d2I18n.default.addResources('nl', namespace, _translations17.default);
|
|
69
|
+
_d2I18n.default.addResources('prs', namespace, _translations18.default);
|
|
70
|
+
_d2I18n.default.addResources('ps', namespace, _translations19.default);
|
|
71
|
+
_d2I18n.default.addResources('pt', namespace, _translations20.default);
|
|
72
|
+
_d2I18n.default.addResources('pt_BR', namespace, _translations21.default);
|
|
73
|
+
_d2I18n.default.addResources('ru', namespace, _translations22.default);
|
|
74
|
+
_d2I18n.default.addResources('sv', namespace, _translations23.default);
|
|
75
|
+
_d2I18n.default.addResources('tet', namespace, _translations24.default);
|
|
76
|
+
_d2I18n.default.addResources('tg', namespace, _translations25.default);
|
|
77
|
+
_d2I18n.default.addResources('uk', namespace, _translations26.default);
|
|
78
|
+
_d2I18n.default.addResources('ur', namespace, _translations27.default);
|
|
79
|
+
_d2I18n.default.addResources('uz_Latn', namespace, _translations28.default);
|
|
80
|
+
_d2I18n.default.addResources('uz_UZ_Cyrl', namespace, _translations29.default);
|
|
81
|
+
_d2I18n.default.addResources('uz_UZ_Latn', namespace, _translations30.default);
|
|
82
|
+
_d2I18n.default.addResources('vi', namespace, _translations31.default);
|
|
83
|
+
_d2I18n.default.addResources('zh', namespace, _translations32.default);
|
|
84
|
+
_d2I18n.default.addResources('zh_CN', namespace, _translations33.default);
|
|
81
85
|
var _default = exports.default = _d2I18n.default;
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.WithServerSideFilteringDemo = void 0;
|
|
7
|
+
var _appRuntime = require("@dhis2/app-runtime");
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _simpleSingleSelect = require("../simple-single-select.js");
|
|
10
|
+
var _index = require("./simple-single-select-server-side-filtering/index.js");
|
|
11
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
|
+
function dataElementToOption(_ref) {
|
|
14
|
+
let {
|
|
15
|
+
id,
|
|
16
|
+
displayName
|
|
17
|
+
} = _ref;
|
|
18
|
+
return {
|
|
19
|
+
value: id,
|
|
20
|
+
label: displayName
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
function useLoadDataElementQuery(options) {
|
|
24
|
+
return (0, _appRuntime.useDataQuery)({
|
|
25
|
+
result: {
|
|
26
|
+
resource: 'dataElements',
|
|
27
|
+
id: _ref2 => {
|
|
28
|
+
let {
|
|
29
|
+
id
|
|
30
|
+
} = _ref2;
|
|
31
|
+
return id;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}, {
|
|
35
|
+
...options,
|
|
36
|
+
lazy: true
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
function useLoadDataElementsQuery(options) {
|
|
40
|
+
return (0, _appRuntime.useDataQuery)({
|
|
41
|
+
result: {
|
|
42
|
+
resource: 'dataElements',
|
|
43
|
+
params: _ref3 => {
|
|
44
|
+
let {
|
|
45
|
+
page
|
|
46
|
+
} = _ref3;
|
|
47
|
+
return {
|
|
48
|
+
page,
|
|
49
|
+
pageSize: 10
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}, options);
|
|
54
|
+
}
|
|
55
|
+
function useLoadFilteredDataElementsQuery(customOptions) {
|
|
56
|
+
const engine = (0, _appRuntime.useDataEngine)();
|
|
57
|
+
const timeout = (0, _react.useRef)(null);
|
|
58
|
+
const abortController = (0, _react.useRef)();
|
|
59
|
+
const [loading, setLoading] = (0, _react.useState)(false);
|
|
60
|
+
const [error, setError] = (0, _react.useState)(null);
|
|
61
|
+
const refetch = (0, _react.useCallback)(_ref4 => {
|
|
62
|
+
let {
|
|
63
|
+
searchTerm,
|
|
64
|
+
page
|
|
65
|
+
} = _ref4;
|
|
66
|
+
if (timeout.current) {
|
|
67
|
+
var _abortController$curr;
|
|
68
|
+
clearTimeout(timeout.current);
|
|
69
|
+
(_abortController$curr = abortController.current) === null || _abortController$curr === void 0 ? void 0 : _abortController$curr.abort();
|
|
70
|
+
}
|
|
71
|
+
return new Promise((resolve, reject) => {
|
|
72
|
+
timeout.current = setTimeout(async () => {
|
|
73
|
+
try {
|
|
74
|
+
abortController.current = new AbortController();
|
|
75
|
+
setLoading(true);
|
|
76
|
+
const query = {
|
|
77
|
+
result: {
|
|
78
|
+
resource: 'dataElements',
|
|
79
|
+
params: {
|
|
80
|
+
filter: [`displayName:ilike:${searchTerm}`],
|
|
81
|
+
pageSize: 10,
|
|
82
|
+
page
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
const options = {
|
|
87
|
+
...customOptions,
|
|
88
|
+
signal: abortController.current.signal
|
|
89
|
+
};
|
|
90
|
+
try {
|
|
91
|
+
const result = await engine.query(query, options);
|
|
92
|
+
resolve(result);
|
|
93
|
+
} catch (e) {
|
|
94
|
+
setError(e);
|
|
95
|
+
}
|
|
96
|
+
abortController.current = null;
|
|
97
|
+
timeout.current = null;
|
|
98
|
+
setLoading(false);
|
|
99
|
+
} catch (e) {
|
|
100
|
+
reject(e);
|
|
101
|
+
}
|
|
102
|
+
}, 200);
|
|
103
|
+
});
|
|
104
|
+
}, [abortController, engine, customOptions]);
|
|
105
|
+
return {
|
|
106
|
+
loading,
|
|
107
|
+
error,
|
|
108
|
+
refetch
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
function ServerSideFilteringSelect() {
|
|
112
|
+
const [initializedSelectedLabel, setInitializedSelectedLabel] = (0, _react.useState)(false);
|
|
113
|
+
const [selectedOption, setSelectedOption] = (0, _react.useState)({
|
|
114
|
+
value: 'fbfJHSPpUQD',
|
|
115
|
+
label: 'Loading...'
|
|
116
|
+
});
|
|
117
|
+
const [loadedOptions, setLoadedOptions] = (0, _react.useState)([]);
|
|
118
|
+
const [defaultPager, setDefaultPager] = (0, _react.useState)({
|
|
119
|
+
page: 0,
|
|
120
|
+
pageSize: -1,
|
|
121
|
+
total: -1,
|
|
122
|
+
pageCount: -1
|
|
123
|
+
});
|
|
124
|
+
const [searchTerm, _setSearchTerm] = (0, _react.useState)('');
|
|
125
|
+
const [filteredOptions, setFilteredOptions] = (0, _react.useState)([]);
|
|
126
|
+
const [filterPager, setFilterPager] = (0, _react.useState)({
|
|
127
|
+
page: 0,
|
|
128
|
+
pageSize: -1,
|
|
129
|
+
total: -1,
|
|
130
|
+
pageCount: -1
|
|
131
|
+
});
|
|
132
|
+
const loadDataElementQuery = useLoadDataElementQuery({
|
|
133
|
+
onComplete: data => {
|
|
134
|
+
setSelectedOption(dataElementToOption(data.result.dataElements));
|
|
135
|
+
setInitializedSelectedLabel(true); // Done AFTER setting the option's label!
|
|
136
|
+
},
|
|
137
|
+
onError: () => {
|
|
138
|
+
setSelectedOption(option => ({
|
|
139
|
+
...option,
|
|
140
|
+
label: option.value
|
|
141
|
+
}));
|
|
142
|
+
setInitializedSelectedLabel(true); // Done AFTER setting the option's label!
|
|
143
|
+
}
|
|
144
|
+
});
|
|
145
|
+
const loadDataElementsQuery = useLoadDataElementsQuery({
|
|
146
|
+
onComplete: _ref5 => {
|
|
147
|
+
let {
|
|
148
|
+
result
|
|
149
|
+
} = _ref5;
|
|
150
|
+
setDefaultPager(result.pager);
|
|
151
|
+
setLoadedOptions(prevLoadedOptions => [...prevLoadedOptions, ...result.dataElements.map(dataElementToOption)]);
|
|
152
|
+
},
|
|
153
|
+
onError: () => {
|
|
154
|
+
setDefaultPager(prevPager => ({
|
|
155
|
+
...prevPager,
|
|
156
|
+
pageCount: prevPager.page,
|
|
157
|
+
total: loadedOptions.length
|
|
158
|
+
}));
|
|
159
|
+
}
|
|
160
|
+
});
|
|
161
|
+
const loadFilteredDataElementsQuery = useLoadFilteredDataElementsQuery({
|
|
162
|
+
onComplete: _ref6 => {
|
|
163
|
+
let {
|
|
164
|
+
result
|
|
165
|
+
} = _ref6;
|
|
166
|
+
setFilterPager(result.pager);
|
|
167
|
+
setFilteredOptions(prevFilteredOptions => {
|
|
168
|
+
const newOptions = result.dataElements.map(dataElementToOption);
|
|
169
|
+
return result.pager.page === 1 ? newOptions : [...prevFilteredOptions, ...newOptions];
|
|
170
|
+
});
|
|
171
|
+
},
|
|
172
|
+
onError: () => {
|
|
173
|
+
setFilterPager(prevPager => ({
|
|
174
|
+
...prevPager,
|
|
175
|
+
pageCount: prevPager.page,
|
|
176
|
+
total: filteredOptions.length
|
|
177
|
+
}));
|
|
178
|
+
}
|
|
179
|
+
});
|
|
180
|
+
const loadingOptions = loadDataElementsQuery.loading || loadFilteredDataElementsQuery.loading;
|
|
181
|
+
const options = searchTerm ? filteredOptions : loadedOptions;
|
|
182
|
+
const setSearchTerm = (0, _react.useCallback)(nextSearchTerm => {
|
|
183
|
+
_setSearchTerm(nextSearchTerm);
|
|
184
|
+
if (nextSearchTerm.trim()) {
|
|
185
|
+
loadFilteredDataElementsQuery.refetch({
|
|
186
|
+
page: 1,
|
|
187
|
+
searchTerm: nextSearchTerm
|
|
188
|
+
});
|
|
189
|
+
}
|
|
190
|
+
}, [loadFilteredDataElementsQuery.refetch]);
|
|
191
|
+
const loadNextPage = (0, _react.useCallback)(() => {
|
|
192
|
+
const pager = searchTerm ? filterPager : defaultPager;
|
|
193
|
+
if (pager.page === pager.pageCount || loadingOptions) {
|
|
194
|
+
return;
|
|
195
|
+
}
|
|
196
|
+
if (searchTerm) {
|
|
197
|
+
loadFilteredDataElementsQuery.refetch({
|
|
198
|
+
page: pager.page + 1,
|
|
199
|
+
searchTerm
|
|
200
|
+
});
|
|
201
|
+
} else {
|
|
202
|
+
loadDataElementsQuery.refetch({
|
|
203
|
+
page: pager.page + 1
|
|
204
|
+
});
|
|
205
|
+
}
|
|
206
|
+
}, [filterPager, defaultPager, searchTerm, loadingOptions, loadFilteredDataElementsQuery.refetch, loadDataElementsQuery.refetch]);
|
|
207
|
+
(0, _react.useEffect)(() => {
|
|
208
|
+
if (selectedOption !== null && selectedOption !== void 0 && selectedOption.value) {
|
|
209
|
+
loadDataElementQuery.refetch({
|
|
210
|
+
id: selectedOption.value
|
|
211
|
+
});
|
|
212
|
+
} else {
|
|
213
|
+
setInitializedSelectedLabel(true);
|
|
214
|
+
}
|
|
215
|
+
},
|
|
216
|
+
// Needs to run on initial render only!
|
|
217
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
218
|
+
[]);
|
|
219
|
+
return /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
|
|
220
|
+
name: "demo",
|
|
221
|
+
disabled: !initializedSelectedLabel,
|
|
222
|
+
loading: loadingOptions,
|
|
223
|
+
options: options,
|
|
224
|
+
selected: selectedOption,
|
|
225
|
+
filterable: true,
|
|
226
|
+
filterValue: searchTerm,
|
|
227
|
+
filterPlaceholder: "search for 'ART' or 'ANC'",
|
|
228
|
+
onFilterChange: setSearchTerm,
|
|
229
|
+
noMatchText: "No options were found",
|
|
230
|
+
empty: "Please use the search input to find data elements",
|
|
231
|
+
onChange: setSelectedOption,
|
|
232
|
+
onEndReached: loadNextPage
|
|
233
|
+
});
|
|
234
|
+
}
|
|
235
|
+
const Wrapper = () => /*#__PURE__*/_react.default.createElement(_index.CustomDataProvider, null, /*#__PURE__*/_react.default.createElement(ServerSideFilteringSelect, null));
|
|
236
|
+
exports.WithServerSideFilteringDemo = Wrapper;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.WithSimpleFilteringDemo = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _simpleSingleSelect = require("../simple-single-select.js");
|
|
9
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
10
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
11
|
+
const options = [{
|
|
12
|
+
label: 'No selection',
|
|
13
|
+
value: ''
|
|
14
|
+
}, {
|
|
15
|
+
label: 'ANC 1st visit',
|
|
16
|
+
value: 'anc_1st_visit'
|
|
17
|
+
}, {
|
|
18
|
+
label: 'ANC 2nd visit',
|
|
19
|
+
value: 'anc_2nd_visit'
|
|
20
|
+
}, {
|
|
21
|
+
label: 'ARI treated follow-up',
|
|
22
|
+
value: 'ari_treated_follow-up'
|
|
23
|
+
}, {
|
|
24
|
+
label: 'ARI treated with new',
|
|
25
|
+
value: 'ari_treated_with_new'
|
|
26
|
+
}];
|
|
27
|
+
function filterOptions(options, searchTerm) {
|
|
28
|
+
// If there is no search term, we want to return all options
|
|
29
|
+
if (!searchTerm) {
|
|
30
|
+
return options;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// We're transform both the label and the search term to
|
|
34
|
+
// lower-case strings so the search is case-insensitive
|
|
35
|
+
return options.filter(_ref => {
|
|
36
|
+
let {
|
|
37
|
+
label
|
|
38
|
+
} = _ref;
|
|
39
|
+
return label.toLowerCase().startsWith(searchTerm.toLowerCase());
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
const WithSimpleFilteringDemo = () => {
|
|
43
|
+
// Handle actual value changes
|
|
44
|
+
const [selected, setSelected] = (0, _react.useState)({
|
|
45
|
+
value: '',
|
|
46
|
+
label: 'No selection'
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
// Handle filtering
|
|
50
|
+
const [searchTerm, setSearchTerm] = (0, _react.useState)('');
|
|
51
|
+
const filteredOptions = (0, _react.useMemo)(() => filterOptions(options, searchTerm), [searchTerm]);
|
|
52
|
+
return /*#__PURE__*/_react.default.createElement(_simpleSingleSelect.SimpleSingleSelect, {
|
|
53
|
+
filterable: true,
|
|
54
|
+
filterValue: searchTerm,
|
|
55
|
+
idPrefix: "simple",
|
|
56
|
+
options: filteredOptions,
|
|
57
|
+
selected: selected,
|
|
58
|
+
onChange: setSelected,
|
|
59
|
+
onFilterChange: setSearchTerm
|
|
60
|
+
});
|
|
61
|
+
};
|
|
62
|
+
exports.WithSimpleFilteringDemo = WithSimpleFilteringDemo;
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.CustomDataProvider = void 0;
|
|
7
|
+
var _appRuntime = require("@dhis2/app-runtime");
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _dataElements = require("./dataElements.js");
|
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
+
/* eslint-disable react/prop-types */
|
|
12
|
+
|
|
13
|
+
function randomBetween(min, max) {
|
|
14
|
+
return Math.floor(Math.random() * (max - min + 1) + min);
|
|
15
|
+
}
|
|
16
|
+
const fakeNetworkDelay = _ref => {
|
|
17
|
+
let {
|
|
18
|
+
pager,
|
|
19
|
+
dataElements,
|
|
20
|
+
signal
|
|
21
|
+
} = _ref;
|
|
22
|
+
const delay = randomBetween(750, 1550);
|
|
23
|
+
const response = {
|
|
24
|
+
dataElements
|
|
25
|
+
};
|
|
26
|
+
if (pager) {
|
|
27
|
+
response.pager = pager;
|
|
28
|
+
}
|
|
29
|
+
return new Promise((resolve, reject) => {
|
|
30
|
+
const onAbort = () => {
|
|
31
|
+
clearTimeout(timeout);
|
|
32
|
+
reject('Aborted');
|
|
33
|
+
};
|
|
34
|
+
signal === null || signal === void 0 ? void 0 : signal.addEventListener('abort', onAbort);
|
|
35
|
+
const timeout = setTimeout(() => {
|
|
36
|
+
signal === null || signal === void 0 ? void 0 : signal.removeEventListener('abort', onAbort);
|
|
37
|
+
resolve(response);
|
|
38
|
+
}, delay);
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
const Provider = _ref2 => {
|
|
42
|
+
let {
|
|
43
|
+
children
|
|
44
|
+
} = _ref2;
|
|
45
|
+
const data = {
|
|
46
|
+
dataElements: (_, _ref3, _ref4) => {
|
|
47
|
+
let {
|
|
48
|
+
id,
|
|
49
|
+
params = {}
|
|
50
|
+
} = _ref3;
|
|
51
|
+
let {
|
|
52
|
+
signal
|
|
53
|
+
} = _ref4;
|
|
54
|
+
if (id) {
|
|
55
|
+
const dataElement = _dataElements.dataElements.find(curDE => id === curDE.id);
|
|
56
|
+
return fakeNetworkDelay({
|
|
57
|
+
dataElements: dataElement,
|
|
58
|
+
signal
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// Only this specific filter is supported by this server-mock
|
|
63
|
+
const searchTerm = params.filter ? params.filter[0].split(':')[2] : '';
|
|
64
|
+
const filteredDataElements = searchTerm ? _dataElements.dataElements.filter(_ref5 => {
|
|
65
|
+
let {
|
|
66
|
+
displayName
|
|
67
|
+
} = _ref5;
|
|
68
|
+
return displayName.startsWith(searchTerm);
|
|
69
|
+
}) : _dataElements.dataElements;
|
|
70
|
+
const page = params.page || 1;
|
|
71
|
+
const total = filteredDataElements.length;
|
|
72
|
+
const pageSize = params.pageSize || 50;
|
|
73
|
+
const pageCount = Math.ceil(total / pageSize);
|
|
74
|
+
const pager = {
|
|
75
|
+
page,
|
|
76
|
+
total,
|
|
77
|
+
pageSize,
|
|
78
|
+
pageCount
|
|
79
|
+
};
|
|
80
|
+
const start = (page - 1) * pageSize;
|
|
81
|
+
const end = start + pageSize;
|
|
82
|
+
const dataElements = filteredDataElements.slice(start, end);
|
|
83
|
+
return fakeNetworkDelay({
|
|
84
|
+
pager,
|
|
85
|
+
dataElements,
|
|
86
|
+
signal
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
return /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
|
|
91
|
+
data: data
|
|
92
|
+
}, children);
|
|
93
|
+
};
|
|
94
|
+
exports.CustomDataProvider = Provider;
|