@ansible/ansible-ui-framework 0.0.349 → 0.0.351
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/PageTable.d.ts +1 -0
- package/cjs/PageTable.js +18 -14
- package/cjs/useInMemoryView.d.ts +2 -0
- package/cjs/useInMemoryView.js +4 -4
- package/cjs/useTableItems.d.ts +2 -2
- package/cjs/useTableItems.js +15 -11
- package/package.json +1 -1
package/cjs/PageTable.d.ts
CHANGED
package/cjs/PageTable.js
CHANGED
@@ -73,7 +73,7 @@ function PageTable(props) {
|
|
73
73
|
var _a;
|
74
74
|
var disableBodyPadding = props.disableBodyPadding;
|
75
75
|
disableBodyPadding = true;
|
76
|
-
var toolbarActions = props.toolbarActions;
|
76
|
+
var toolbarActions = props.toolbarActions, filters = props.filters, error = props.error, itemCount = props.itemCount;
|
77
77
|
var _b = (0, PageColumnModal_1.useColumnModal)(props.tableColumns), openColumnModal = _b.openColumnModal, columnModal = _b.columnModal, managedColumns = _b.managedColumns;
|
78
78
|
var showSelect = (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return TypedActions_1.TypedActionType.bulk === toolbarAction.type; })) !==
|
79
79
|
undefined;
|
@@ -88,11 +88,26 @@ function PageTable(props) {
|
|
88
88
|
? PageTableViewType_1.PageTableViewTypeE.List
|
89
89
|
: PageTableViewType_1.PageTableViewTypeE.Cards);
|
90
90
|
}), 2), viewType = _c[0], setViewType = _c[1];
|
91
|
+
var settings = (0, Settings_1.useSettings)();
|
92
|
+
if (error) {
|
93
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
94
|
+
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
95
|
+
height: '100%',
|
96
|
+
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.small, style: {
|
97
|
+
paddingTop: 64,
|
98
|
+
} }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.ExclamationCircleIcon, color: "var(--pf-global--danger-color--100)" }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: props.errorStateTitle })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: error.message })] })) })));
|
99
|
+
}
|
100
|
+
if (itemCount === 0 && Object.keys(filters !== null && filters !== void 0 ? filters : {}).length === 0) {
|
101
|
+
return ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 64 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.PlusCircleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4", size: "lg" }, { children: props.emptyStateTitle })), props.emptyStateDescription && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: props.emptyStateButtonClick }, { children: props.emptyStateButtonText })))] })));
|
102
|
+
}
|
103
|
+
if (itemCount === undefined) {
|
104
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "100%" }) })));
|
105
|
+
}
|
91
106
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PageToolbar_1.PageTableToolbar, __assign({}, props, { openColumnModal: openColumnModal, showSelect: showSelect, viewType: viewType, setViewType: setViewType })), viewType === PageTableViewType_1.PageTableViewTypeE.Table && ((0, jsx_runtime_1.jsx)(PageBody_1.PageBody, __assign({ disablePadding: disableBodyPadding }, { children: (0, jsx_runtime_1.jsx)(PageTableView, __assign({}, props, { tableColumns: managedColumns })) }))), viewType === PageTableViewType_1.PageTableViewTypeE.List && ((0, jsx_runtime_1.jsx)(PageBody_1.PageBody, __assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(PageTableList_1.PageTableList, __assign({}, props, { showSelect: showSelect })) }) }))), viewType === PageTableViewType_1.PageTableViewTypeE.Cards && ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(PageTableCards_1.PageTableCards, __assign({}, props, { showSelect: showSelect })) })), (!props.autoHidePagination || ((_a = props.itemCount) !== null && _a !== void 0 ? _a : 0) > props.perPage) && ((0, jsx_runtime_1.jsx)(PagePagination_1.PagePagination, __assign({}, props))), columnModal] }));
|
92
107
|
}
|
93
108
|
exports.PageTable = PageTable;
|
94
109
|
function PageTableView(props) {
|
95
|
-
var tableColumns = props.tableColumns, pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, keyFn = props.keyFn, rowActions = props.rowActions, toolbarActions = props.toolbarActions, itemCount = props.itemCount, perPage = props.perPage, clearAllFilters = props.clearAllFilters,
|
110
|
+
var tableColumns = props.tableColumns, pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, keyFn = props.keyFn, rowActions = props.rowActions, toolbarActions = props.toolbarActions, itemCount = props.itemCount, perPage = props.perPage, clearAllFilters = props.clearAllFilters, onSelect = props.onSelect, unselectAll = props.unselectAll;
|
96
111
|
var t = props.t;
|
97
112
|
t = t ? t : function (t) { return t; };
|
98
113
|
var showSelect = props.showSelect ||
|
@@ -119,17 +134,6 @@ function PageTableView(props) {
|
|
119
134
|
(0, resize_observer_1.default)(containerRef, function () { return updateScroll(containerRef.current); });
|
120
135
|
(0, react_1.useEffect)(function () { return updateScroll(containerRef.current); }, [updateScroll]);
|
121
136
|
var settings = (0, Settings_1.useSettings)();
|
122
|
-
if (error) {
|
123
|
-
return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
124
|
-
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
125
|
-
height: '100%',
|
126
|
-
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.small, style: {
|
127
|
-
paddingTop: 64,
|
128
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.ExclamationCircleIcon, color: "var(--pf-global--danger-color--100)" }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: props.errorStateTitle })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: error.message })] })) })));
|
129
|
-
}
|
130
|
-
if (itemCount === 0 && Object.keys(filters !== null && filters !== void 0 ? filters : {}).length === 0) {
|
131
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 64 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.PlusCircleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4", size: "lg" }, { children: props.emptyStateTitle })), props.emptyStateDescription && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: props.emptyStateButtonClick }, { children: props.emptyStateButtonText })))] })));
|
132
|
-
}
|
133
137
|
return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "pf-c-scroll-inner-wrapper", style: { height: '100%', marginBottom: -1 }, ref: containerRef, onScroll: onScroll }, { children: [(0, jsx_runtime_1.jsxs)(react_table_1.TableComposable, __assign({ "aria-label": "Simple table", variant: props.compact ? 'compact' : settings.tableLayout === 'compact' ? 'compact' : undefined, gridBreakPoint: "", isStickyHeader: true }, { children: [itemCount === undefined ? ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsx)(react_table_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_table_1.Th, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, {}) }) }) })) : ((0, jsx_runtime_1.jsx)(TableHead, __assign({}, props, { showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, tableColumns: tableColumns, onSelect: onSelect }))), (0, jsx_runtime_1.jsx)(react_table_1.Tbody, { children: itemCount === undefined
|
134
138
|
? new Array(perPage).fill(0).map(function (_, index) { return ((0, jsx_runtime_1.jsx)(react_table_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_table_1.Td, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { paddingTop: 5, paddingBottom: 5 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "27px" }) })) }) }, index)); })
|
135
139
|
: pageItems === undefined
|
@@ -170,7 +174,7 @@ function TableHead(props) {
|
|
170
174
|
backgroundColor: settings.theme === 'dark'
|
171
175
|
? 'var(--pf-global--BackgroundColor--300)'
|
172
176
|
: undefined,
|
173
|
-
width:
|
177
|
+
width: column.isIdColumn ? '0%' : undefined,
|
174
178
|
}, sort: getColumnSort(index, column) }, { children: column.header }), column.header));
|
175
179
|
}), itemActions !== undefined && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ style: {
|
176
180
|
paddingRight: 8,
|
package/cjs/useInMemoryView.d.ts
CHANGED
@@ -5,6 +5,7 @@ import { IView } from './useView';
|
|
5
5
|
export type IInMemoryView<T extends object> = IView & ISelected<T> & {
|
6
6
|
itemCount: number | undefined;
|
7
7
|
pageItems: T[] | undefined;
|
8
|
+
error: Error | undefined;
|
8
9
|
};
|
9
10
|
export declare function useInMemoryView<T extends object>(options: {
|
10
11
|
items: T[] | undefined;
|
@@ -12,4 +13,5 @@ export declare function useInMemoryView<T extends object>(options: {
|
|
12
13
|
toolbarFilters?: IToolbarFilter[];
|
13
14
|
disableQueryString?: boolean;
|
14
15
|
keyFn: (item: T) => string | number;
|
16
|
+
error?: Error;
|
15
17
|
}): IInMemoryView<T>;
|
package/cjs/useInMemoryView.js
CHANGED
@@ -37,7 +37,7 @@ function useInMemoryView(options) {
|
|
37
37
|
sort: tableColumns && tableColumns.length ? tableColumns[0].sort : undefined,
|
38
38
|
}, disableQueryString);
|
39
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
|
40
|
+
var sorted = (0, useTableItems_1.useSorted)(items);
|
41
41
|
var setSort = sorted.setSort;
|
42
42
|
(0, react_1.useEffect)(function () {
|
43
43
|
return setSort({
|
@@ -94,9 +94,9 @@ function useInMemoryView(options) {
|
|
94
94
|
var setPage = paged.setPage, setPerPage = paged.setPerPage;
|
95
95
|
(0, react_1.useEffect)(function () { return setPage(page); }, [page, paged, setPage]);
|
96
96
|
(0, react_1.useEffect)(function () { return setPerPage(perPage); }, [perPage, paged, setPerPage]);
|
97
|
-
var selection = (0, useTableItems_1.useSelectedInMemory)(items
|
97
|
+
var selection = (0, useTableItems_1.useSelectedInMemory)(items, keyFn);
|
98
98
|
return (0, react_1.useMemo)(function () {
|
99
|
-
return __assign(__assign({ itemCount: items ? filtered.filtered.length :
|
100
|
-
}, [filtered.filtered.length, items, paged.paged, selection, view]);
|
99
|
+
return __assign(__assign({ itemCount: items ? filtered.filtered.length : undefined, pageItems: items ? paged.paged : undefined, error: options.error }, view), selection);
|
100
|
+
}, [filtered.filtered.length, items, options.error, paged.paged, selection, view]);
|
101
101
|
}
|
102
102
|
exports.useInMemoryView = useInMemoryView;
|
package/cjs/useTableItems.d.ts
CHANGED
@@ -42,7 +42,7 @@ export interface ISelected<T extends object> {
|
|
42
42
|
keyFn: (item: T) => string | number;
|
43
43
|
}
|
44
44
|
export declare function useSelected<T extends object>(items: T[], keyFn: (item: T) => string | number): ISelected<T>;
|
45
|
-
export declare function useSelectedInMemory<T extends object>(items: T[], keyFn: (item: T) => string | number): {
|
45
|
+
export declare function useSelectedInMemory<T extends object>(items: T[] | undefined, keyFn: (item: T) => string | number): {
|
46
46
|
selectedItems: T[];
|
47
47
|
selectItem: (item: T) => void;
|
48
48
|
unselectItem: (item: T) => void;
|
@@ -59,7 +59,7 @@ export interface ISort<T extends object> {
|
|
59
59
|
sortFn: (l: T, r: T) => number;
|
60
60
|
direction: 'asc' | 'desc';
|
61
61
|
}
|
62
|
-
export declare function useSorted<T extends object>(items: T[]): {
|
62
|
+
export declare function useSorted<T extends object>(items: T[] | undefined): {
|
63
63
|
sorted: T[];
|
64
64
|
sort: ISort<T> | undefined;
|
65
65
|
setSort: import("react").Dispatch<import("react").SetStateAction<ISort<T> | undefined>>;
|
package/cjs/useTableItems.js
CHANGED
@@ -230,15 +230,17 @@ function useSelectedInMemory(items, keyFn) {
|
|
230
230
|
setSelectedMap(function (selectedMap) {
|
231
231
|
var e_3, _a;
|
232
232
|
var changed = false;
|
233
|
-
var itemsKeys = items
|
234
|
-
|
235
|
-
itemsKeys
|
236
|
-
|
237
|
-
|
238
|
-
selectedMap[key]
|
239
|
-
|
240
|
-
|
241
|
-
|
233
|
+
var itemsKeys = !items
|
234
|
+
? {}
|
235
|
+
: items.reduce(function (itemsKeys, item) {
|
236
|
+
var key = keyFn(item);
|
237
|
+
itemsKeys[key] = item;
|
238
|
+
if (selectedMap[key] && selectedMap[key] !== item) {
|
239
|
+
changed = true;
|
240
|
+
selectedMap[key] = item;
|
241
|
+
}
|
242
|
+
return itemsKeys;
|
243
|
+
}, {});
|
242
244
|
var removeKeyMap = {};
|
243
245
|
for (var key in selectedMap) {
|
244
246
|
if (!itemsKeys[key]) {
|
@@ -329,7 +331,7 @@ function useSelectedInMemory(items, keyFn) {
|
|
329
331
|
});
|
330
332
|
}, [keyFn]);
|
331
333
|
var selectAll = (0, react_1.useCallback)(function () {
|
332
|
-
selectItems(items);
|
334
|
+
selectItems(items !== null && items !== void 0 ? items : []);
|
333
335
|
}, [items, selectItems]);
|
334
336
|
var unselectAll = (0, react_1.useCallback)(function () {
|
335
337
|
setSelectedMap(function (selectedMap) {
|
@@ -340,7 +342,7 @@ function useSelectedInMemory(items, keyFn) {
|
|
340
342
|
});
|
341
343
|
}, []);
|
342
344
|
var selectedItems = (0, react_1.useMemo)(function () { return Object.values(selectedMap); }, [selectedMap]);
|
343
|
-
var allSelected = (0, react_1.useMemo)(function () { return selectedItems.length === items.length; }, [items
|
345
|
+
var allSelected = (0, react_1.useMemo)(function () { var _a; return (_a = selectedItems.length === (items === null || items === void 0 ? void 0 : items.length)) !== null && _a !== void 0 ? _a : 0; }, [items, selectedItems.length]);
|
344
346
|
return (0, react_1.useMemo)(function () { return ({
|
345
347
|
selectedItems: selectedItems,
|
346
348
|
selectItem: selectItem,
|
@@ -370,6 +372,8 @@ function useSorted(items) {
|
|
370
372
|
var _a = __read((0, react_1.useState)(), 2), sort = _a[0], setSort = _a[1];
|
371
373
|
var _b = sort !== null && sort !== void 0 ? sort : {}, direction = _b.direction, sortFn = _b.sortFn;
|
372
374
|
var sorted = (0, react_1.useMemo)(function () {
|
375
|
+
if (!items)
|
376
|
+
return [];
|
373
377
|
if (sortFn) {
|
374
378
|
if (direction === 'asc') {
|
375
379
|
return __spreadArray([], __read(items.sort(sortFn)), false);
|