@ansible/ansible-ui-framework 0.0.246 → 0.0.248
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/useInMemoryView.js +102 -0
- package/cjs/useTableItems.js +27 -9
- package/mjs/useInMemoryView.d.ts +15 -0
- package/mjs/useInMemoryView.js +60 -0
- package/mjs/useTableItems.d.ts +3 -2
- package/mjs/useTableItems.js +7 -0
- package/package.json +1 -1
@@ -0,0 +1,102 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
3
|
+
__assign = Object.assign || function(t) {
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
+
s = arguments[i];
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
+
t[p] = s[p];
|
8
|
+
}
|
9
|
+
return t;
|
10
|
+
};
|
11
|
+
return __assign.apply(this, arguments);
|
12
|
+
};
|
13
|
+
var __values = (this && this.__values) || function(o) {
|
14
|
+
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
|
15
|
+
if (m) return m.call(o);
|
16
|
+
if (o && typeof o.length === "number") return {
|
17
|
+
next: function () {
|
18
|
+
if (o && i >= o.length) o = void 0;
|
19
|
+
return { value: o && o[i++], done: !o };
|
20
|
+
}
|
21
|
+
};
|
22
|
+
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
23
|
+
};
|
24
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
25
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
26
|
+
};
|
27
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
28
|
+
exports.useInMemoryView = void 0;
|
29
|
+
var get_value_1 = __importDefault(require("get-value"));
|
30
|
+
var react_1 = require("react");
|
31
|
+
var useTableItems_1 = require("./useTableItems");
|
32
|
+
var useView_1 = require("./useView");
|
33
|
+
var compare_1 = require("./utils/compare");
|
34
|
+
function useInMemoryView(options) {
|
35
|
+
var items = options.items, keyFn = options.keyFn, tableColumns = options.tableColumns, toolbarFilters = options.toolbarFilters, disableQueryString = options.disableQueryString;
|
36
|
+
var view = (0, useView_1.useView)({
|
37
|
+
sort: tableColumns && tableColumns.length ? tableColumns[0].sort : undefined,
|
38
|
+
}, disableQueryString);
|
39
|
+
var page = view.page, perPage = view.perPage, sort = view.sort, sortDirection = view.sortDirection, filters = view.filters;
|
40
|
+
var sorted = (0, useTableItems_1.useSorted)(items !== null && items !== void 0 ? items : []);
|
41
|
+
var setSort = sorted.setSort;
|
42
|
+
(0, react_1.useEffect)(function () {
|
43
|
+
return setSort({
|
44
|
+
id: sort,
|
45
|
+
sortFn: function (l, r) {
|
46
|
+
var lv = (0, get_value_1.default)(l, sort);
|
47
|
+
var rv = (0, get_value_1.default)(r, sort);
|
48
|
+
return (0, compare_1.compareUnknowns)(lv, rv);
|
49
|
+
},
|
50
|
+
direction: sortDirection,
|
51
|
+
});
|
52
|
+
}, [sort, sortDirection, setSort]);
|
53
|
+
var filtered = (0, useTableItems_1.useFiltered)(sorted.sorted, keyFn);
|
54
|
+
var setFilterFn = filtered.setFilterFn;
|
55
|
+
(0, react_1.useEffect)(function () {
|
56
|
+
if (Object.keys(filters).length === 0) {
|
57
|
+
setFilterFn(undefined);
|
58
|
+
}
|
59
|
+
else {
|
60
|
+
setFilterFn(function (item) {
|
61
|
+
var _loop_1 = function (key) {
|
62
|
+
var e_1, _a;
|
63
|
+
var toolbarFilter = toolbarFilters === null || toolbarFilters === void 0 ? void 0 : toolbarFilters.find(function (filter) { return filter.key === key; });
|
64
|
+
if (toolbarFilter) {
|
65
|
+
var value = (0, get_value_1.default)(item, toolbarFilter.query);
|
66
|
+
if (typeof value === 'string') {
|
67
|
+
try {
|
68
|
+
for (var _b = (e_1 = void 0, __values(filters[key])), _c = _b.next(); !_c.done; _c = _b.next()) {
|
69
|
+
var filterValue = _c.value;
|
70
|
+
if (value.toLowerCase().includes(filterValue.toLowerCase()))
|
71
|
+
return { value: true };
|
72
|
+
}
|
73
|
+
}
|
74
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
75
|
+
finally {
|
76
|
+
try {
|
77
|
+
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
78
|
+
}
|
79
|
+
finally { if (e_1) throw e_1.error; }
|
80
|
+
}
|
81
|
+
}
|
82
|
+
}
|
83
|
+
};
|
84
|
+
for (var key in filters) {
|
85
|
+
var state_1 = _loop_1(key);
|
86
|
+
if (typeof state_1 === "object")
|
87
|
+
return state_1.value;
|
88
|
+
}
|
89
|
+
return false;
|
90
|
+
});
|
91
|
+
}
|
92
|
+
}, [filters, setFilterFn, toolbarFilters]);
|
93
|
+
var paged = (0, useTableItems_1.usePaged)(filtered.filtered);
|
94
|
+
var setPage = paged.setPage, setPerPage = paged.setPerPage;
|
95
|
+
(0, react_1.useEffect)(function () { return setPage(page); }, [page, paged, setPage]);
|
96
|
+
(0, react_1.useEffect)(function () { return setPerPage(perPage); }, [perPage, paged, setPerPage]);
|
97
|
+
var selection = (0, useTableItems_1.useSelectedInMemory)(items !== null && items !== void 0 ? items : [], keyFn);
|
98
|
+
return (0, react_1.useMemo)(function () {
|
99
|
+
return __assign(__assign({ itemCount: items ? filtered.filtered.length : 0, pageItems: items ? paged.paged : undefined }, view), selection);
|
100
|
+
}, [filtered.filtered.length, items, paged.paged, selection, view]);
|
101
|
+
}
|
102
|
+
exports.useInMemoryView = useInMemoryView;
|
package/cjs/useTableItems.js
CHANGED
@@ -287,27 +287,43 @@ function useSelectedInMemory(items, keyFn) {
|
|
287
287
|
return selectedMap;
|
288
288
|
});
|
289
289
|
}, [keyFn]);
|
290
|
+
var unselectItems = (0, react_1.useCallback)(function (items) {
|
291
|
+
var e_4, _a;
|
292
|
+
try {
|
293
|
+
for (var items_3 = __values(items), items_3_1 = items_3.next(); !items_3_1.done; items_3_1 = items_3.next()) {
|
294
|
+
var item = items_3_1.value;
|
295
|
+
unselectItem(item);
|
296
|
+
}
|
297
|
+
}
|
298
|
+
catch (e_4_1) { e_4 = { error: e_4_1 }; }
|
299
|
+
finally {
|
300
|
+
try {
|
301
|
+
if (items_3_1 && !items_3_1.done && (_a = items_3.return)) _a.call(items_3);
|
302
|
+
}
|
303
|
+
finally { if (e_4) throw e_4.error; }
|
304
|
+
}
|
305
|
+
}, [unselectItem]);
|
290
306
|
var isSelected = (0, react_1.useCallback)(function (item) {
|
291
307
|
var itemKey = keyFn(item);
|
292
308
|
return selectedMap[itemKey] !== undefined;
|
293
309
|
}, [keyFn, selectedMap]);
|
294
310
|
var selectItems = (0, react_1.useCallback)(function (items) {
|
295
311
|
setSelectedMap(function (selectedMap) {
|
296
|
-
var
|
312
|
+
var e_5, _a;
|
297
313
|
selectedMap = __assign({}, selectedMap);
|
298
314
|
try {
|
299
|
-
for (var
|
300
|
-
var item =
|
315
|
+
for (var items_4 = __values(items), items_4_1 = items_4.next(); !items_4_1.done; items_4_1 = items_4.next()) {
|
316
|
+
var item = items_4_1.value;
|
301
317
|
var itemKey = keyFn(item);
|
302
318
|
selectedMap[itemKey] = item;
|
303
319
|
}
|
304
320
|
}
|
305
|
-
catch (
|
321
|
+
catch (e_5_1) { e_5 = { error: e_5_1 }; }
|
306
322
|
finally {
|
307
323
|
try {
|
308
|
-
if (
|
324
|
+
if (items_4_1 && !items_4_1.done && (_a = items_4.return)) _a.call(items_4);
|
309
325
|
}
|
310
|
-
finally { if (
|
326
|
+
finally { if (e_5) throw e_5.error; }
|
311
327
|
}
|
312
328
|
return selectedMap;
|
313
329
|
});
|
@@ -335,6 +351,7 @@ function useSelectedInMemory(items, keyFn) {
|
|
335
351
|
unselectAll: unselectAll,
|
336
352
|
allSelected: allSelected,
|
337
353
|
keyFn: keyFn,
|
354
|
+
unselectItems: unselectItems,
|
338
355
|
}); }, [
|
339
356
|
allSelected,
|
340
357
|
isSelected,
|
@@ -345,6 +362,7 @@ function useSelectedInMemory(items, keyFn) {
|
|
345
362
|
selectedItems,
|
346
363
|
unselectAll,
|
347
364
|
unselectItem,
|
365
|
+
unselectItems,
|
348
366
|
]);
|
349
367
|
}
|
350
368
|
exports.useSelectedInMemory = useSelectedInMemory;
|
@@ -451,7 +469,7 @@ function usePaged(source) {
|
|
451
469
|
var _c = __read((0, react_1.useState)(10), 2), perPage = _c[0], setPerPage = _c[1];
|
452
470
|
(0, react_1.useEffect)(function () {
|
453
471
|
setPaged(function (paged) {
|
454
|
-
var
|
472
|
+
var e_6, _a;
|
455
473
|
var newPaged = source.slice((page - 1) * perPage, page * perPage);
|
456
474
|
if (paged.length !== newPaged.length) {
|
457
475
|
return newPaged;
|
@@ -465,12 +483,12 @@ function usePaged(source) {
|
|
465
483
|
}
|
466
484
|
}
|
467
485
|
}
|
468
|
-
catch (
|
486
|
+
catch (e_6_1) { e_6 = { error: e_6_1 }; }
|
469
487
|
finally {
|
470
488
|
try {
|
471
489
|
if (newPaged_1_1 && !newPaged_1_1.done && (_a = newPaged_1.return)) _a.call(newPaged_1);
|
472
490
|
}
|
473
|
-
finally { if (
|
491
|
+
finally { if (e_6) throw e_6.error; }
|
474
492
|
}
|
475
493
|
return paged;
|
476
494
|
});
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import { ITableColumn } from './PageTable';
|
2
|
+
import { IToolbarFilter } from './PageToolbar';
|
3
|
+
import { ISelected } from './useTableItems';
|
4
|
+
import { IView } from './useView';
|
5
|
+
export declare type IInMemoryView<T extends object> = IView & ISelected<T> & {
|
6
|
+
itemCount: number | undefined;
|
7
|
+
pageItems: T[] | undefined;
|
8
|
+
};
|
9
|
+
export declare function useInMemoryView<T extends object>(options: {
|
10
|
+
items: T[] | undefined;
|
11
|
+
tableColumns?: ITableColumn<T>[];
|
12
|
+
toolbarFilters?: IToolbarFilter[];
|
13
|
+
disableQueryString?: boolean;
|
14
|
+
keyFn: (item: T) => string | number;
|
15
|
+
}): IInMemoryView<T>;
|
@@ -0,0 +1,60 @@
|
|
1
|
+
import getValue from 'get-value';
|
2
|
+
import { useEffect, useMemo } from 'react';
|
3
|
+
import { useFiltered, usePaged, useSelectedInMemory, useSorted } from './useTableItems';
|
4
|
+
import { useView } from './useView';
|
5
|
+
import { compareUnknowns } from './utils/compare';
|
6
|
+
export function useInMemoryView(options) {
|
7
|
+
const { items, keyFn, tableColumns, toolbarFilters, disableQueryString } = options;
|
8
|
+
const view = useView({
|
9
|
+
sort: tableColumns && tableColumns.length ? tableColumns[0].sort : undefined,
|
10
|
+
}, disableQueryString);
|
11
|
+
const { page, perPage, sort, sortDirection, filters } = view;
|
12
|
+
const sorted = useSorted(items ?? []);
|
13
|
+
const { setSort } = sorted;
|
14
|
+
useEffect(() => setSort({
|
15
|
+
id: sort,
|
16
|
+
sortFn: (l, r) => {
|
17
|
+
const lv = getValue(l, sort);
|
18
|
+
const rv = getValue(r, sort);
|
19
|
+
return compareUnknowns(lv, rv);
|
20
|
+
},
|
21
|
+
direction: sortDirection,
|
22
|
+
}), [sort, sortDirection, setSort]);
|
23
|
+
const filtered = useFiltered(sorted.sorted, keyFn);
|
24
|
+
const { setFilterFn } = filtered;
|
25
|
+
useEffect(() => {
|
26
|
+
if (Object.keys(filters).length === 0) {
|
27
|
+
setFilterFn(undefined);
|
28
|
+
}
|
29
|
+
else {
|
30
|
+
setFilterFn((item) => {
|
31
|
+
for (const key in filters) {
|
32
|
+
const toolbarFilter = toolbarFilters?.find((filter) => filter.key === key);
|
33
|
+
if (toolbarFilter) {
|
34
|
+
const value = getValue(item, toolbarFilter.query);
|
35
|
+
if (typeof value === 'string') {
|
36
|
+
for (const filterValue of filters[key]) {
|
37
|
+
if (value.toLowerCase().includes(filterValue.toLowerCase()))
|
38
|
+
return true;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
}
|
42
|
+
}
|
43
|
+
return false;
|
44
|
+
});
|
45
|
+
}
|
46
|
+
}, [filters, setFilterFn, toolbarFilters]);
|
47
|
+
const paged = usePaged(filtered.filtered);
|
48
|
+
const { setPage, setPerPage } = paged;
|
49
|
+
useEffect(() => setPage(page), [page, paged, setPage]);
|
50
|
+
useEffect(() => setPerPage(perPage), [perPage, paged, setPerPage]);
|
51
|
+
const selection = useSelectedInMemory(items ?? [], keyFn);
|
52
|
+
return useMemo(() => {
|
53
|
+
return {
|
54
|
+
itemCount: items ? filtered.filtered.length : 0,
|
55
|
+
pageItems: items ? paged.paged : undefined,
|
56
|
+
...view,
|
57
|
+
...selection,
|
58
|
+
};
|
59
|
+
}, [filtered.filtered.length, items, paged.paged, selection, view]);
|
60
|
+
}
|
package/mjs/useTableItems.d.ts
CHANGED
@@ -14,7 +14,7 @@ export declare function useTableItems<T extends object>(items: T[], keyFn: (item
|
|
14
14
|
selectItem: (item: T) => void;
|
15
15
|
selectPage: () => void;
|
16
16
|
selectedItems: T[];
|
17
|
-
setFilterFn: (filterFn: (item: T) => boolean) => void;
|
17
|
+
setFilterFn: (filterFn: ((item: T) => boolean) | undefined) => void;
|
18
18
|
setPage: import("react").Dispatch<import("react").SetStateAction<number>>;
|
19
19
|
setPerPage: import("react").Dispatch<import("react").SetStateAction<number>>;
|
20
20
|
setSearch: ((search: string) => void) & {
|
@@ -52,6 +52,7 @@ export declare function useSelectedInMemory<T extends object>(items: T[], keyFn:
|
|
52
52
|
unselectAll: () => void;
|
53
53
|
allSelected: boolean;
|
54
54
|
keyFn: (item: T) => string | number;
|
55
|
+
unselectItems: (items: T[]) => void;
|
55
56
|
};
|
56
57
|
export interface ISort<T extends object> {
|
57
58
|
id: string;
|
@@ -65,7 +66,7 @@ export declare function useSorted<T extends object>(items: T[]): {
|
|
65
66
|
};
|
66
67
|
export declare function useFiltered<T extends object>(items: T[], keyFn: (item: T) => string | number): {
|
67
68
|
filtered: T[];
|
68
|
-
setFilterFn: (filterFn: (item: T) => boolean) => void;
|
69
|
+
setFilterFn: (filterFn: ((item: T) => boolean) | undefined) => void;
|
69
70
|
};
|
70
71
|
export declare function usePaged<T extends object>(source: T[]): {
|
71
72
|
paged: T[];
|
package/mjs/useTableItems.js
CHANGED
@@ -199,6 +199,11 @@ export function useSelectedInMemory(items, keyFn) {
|
|
199
199
|
return selectedMap;
|
200
200
|
});
|
201
201
|
}, [keyFn]);
|
202
|
+
const unselectItems = useCallback((items) => {
|
203
|
+
for (const item of items) {
|
204
|
+
unselectItem(item);
|
205
|
+
}
|
206
|
+
}, [unselectItem]);
|
202
207
|
const isSelected = useCallback((item) => {
|
203
208
|
const itemKey = keyFn(item);
|
204
209
|
return selectedMap[itemKey] !== undefined;
|
@@ -236,6 +241,7 @@ export function useSelectedInMemory(items, keyFn) {
|
|
236
241
|
unselectAll,
|
237
242
|
allSelected,
|
238
243
|
keyFn,
|
244
|
+
unselectItems,
|
239
245
|
}), [
|
240
246
|
allSelected,
|
241
247
|
isSelected,
|
@@ -246,6 +252,7 @@ export function useSelectedInMemory(items, keyFn) {
|
|
246
252
|
selectedItems,
|
247
253
|
unselectAll,
|
248
254
|
unselectItem,
|
255
|
+
unselectItems,
|
249
256
|
]);
|
250
257
|
}
|
251
258
|
export function useSorted(items) {
|
package/package.json
CHANGED