@ansible/ansible-ui-framework 0.0.393 → 0.0.395
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/cjs/PageForm/Inputs/PageFormWatch.d.ts +5 -0
- package/cjs/PageForm/Inputs/PageFormWatch.js +11 -0
- package/cjs/PageTable/PageTable.js +3 -5
- package/cjs/PageTable/PageTableCard.js +12 -3
- package/cjs/PageTable/PageTableList.js +2 -2
- package/docs/guides/PageTableGuide.md +4 -4
- package/package.json +1 -1
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PageFormWatch = void 0;
|
|
4
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
var react_hook_form_1 = require("react-hook-form");
|
|
6
|
+
function PageFormWatch(props) {
|
|
7
|
+
var control = (0, react_hook_form_1.useFormContext)().control;
|
|
8
|
+
var value = (0, react_hook_form_1.useWatch)({ control: control, name: props.watch });
|
|
9
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children(value) });
|
|
10
|
+
}
|
|
11
|
+
exports.PageFormWatch = PageFormWatch;
|
|
@@ -97,12 +97,10 @@ function PageTable(props) {
|
|
|
97
97
|
return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
|
98
98
|
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
|
99
99
|
height: '100%',
|
|
100
|
-
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.small, style: {
|
|
101
|
-
paddingTop: 64,
|
|
102
|
-
} }, { 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 })] })) })));
|
|
100
|
+
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.small, style: { paddingTop: 48 } }, { 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 })] })) })));
|
|
103
101
|
}
|
|
104
102
|
if (itemCount === 0 && Object.keys(filters !== null && filters !== void 0 ? filters : {}).length === 0) {
|
|
105
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop:
|
|
103
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 48 } }, { 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 })))] })) }));
|
|
106
104
|
}
|
|
107
105
|
if (itemCount === undefined) {
|
|
108
106
|
return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: true, variant: "light" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Bullseye, { children: (0, jsx_runtime_1.jsx)(react_core_1.Spinner, {}) }) })));
|
|
@@ -149,7 +147,7 @@ function PageTableView(props) {
|
|
|
149
147
|
? 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)); })
|
|
150
148
|
: pageItems === undefined
|
|
151
149
|
? new Array(Math.min(perPage, itemCount)).fill(0).map(function (_, index) { return ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, { children: [showSelect && (0, jsx_runtime_1.jsx)(react_table_1.Td, {}), (0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ colSpan: tableColumns.length }, { 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)); })
|
|
152
|
-
: pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item, rowIndex) { return ((0, jsx_runtime_1.jsx)(TableRow, { columns: tableColumns, item: item, isItemSelected: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), selectItem: selectItem, unselectItem: unselectItem, rowActions: rowActions, rowIndex: rowIndex, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, unselectAll: unselectAll, onSelect: onSelect }, keyFn ? keyFn(item) : rowIndex)); }) })] })), itemCount === 0 && ((0, jsx_runtime_1.
|
|
150
|
+
: pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item, rowIndex) { return ((0, jsx_runtime_1.jsx)(TableRow, { columns: tableColumns, item: item, isItemSelected: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), selectItem: selectItem, unselectItem: unselectItem, rowActions: rowActions, rowIndex: rowIndex, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, unselectAll: unselectAll, onSelect: onSelect }, keyFn ? keyFn(item) : rowIndex)); }) })] })), itemCount === 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.SearchIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: t('No results found') })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: t('No results match this filter criteria. Adjust your filters and try again.') }), clearAllFilters && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateSecondaryActions, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: clearAllFilters }, { children: t('Clear all filters') })) }))] })))] })));
|
|
153
151
|
}
|
|
154
152
|
function TableHead(props) {
|
|
155
153
|
var columns = props.tableColumns, itemActions = props.rowActions, sort = props.sort, setSort = props.setSort, sortDirection = props.sortDirection, setSortDirection = props.setSortDirection, showSelect = props.showSelect, onSelect = props.onSelect;
|
|
@@ -138,21 +138,30 @@ function useColumnsToTableCardFn(columns, keyFn) {
|
|
|
138
138
|
return (0, react_1.useMemo)(function () {
|
|
139
139
|
return function (item) {
|
|
140
140
|
var _a, _b;
|
|
141
|
+
var hasDescription = descriptionColumn && (!descriptionColumn.value || descriptionColumn.value(item));
|
|
141
142
|
var pageTableCard = {
|
|
142
143
|
id: keyFn(item),
|
|
143
144
|
icon: (_a = nameColumn === null || nameColumn === void 0 ? void 0 : nameColumn.icon) === null || _a === void 0 ? void 0 : _a.call(nameColumn, item),
|
|
144
145
|
title: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: nameColumn, item: item }),
|
|
145
146
|
subtitle: subtitleColumn && (!subtitleColumn.value || subtitleColumn.value(item)) && ((0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: subtitleColumn, item: item })),
|
|
146
|
-
cardBody: ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: [
|
|
147
|
+
cardBody: ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: [hasDescription && ((0, jsx_runtime_1.jsx)(Details_1.Detail, { children: descriptionColumn.type === 'description' ? ((0, jsx_runtime_1.jsx)("div", { children: descriptionColumn.value(item) })) : ((0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: descriptionColumn, item: item })) }, descriptionColumn.id)), cardColumns
|
|
147
148
|
.filter(function (column) { return !column.value || column.value(item); })
|
|
148
149
|
.map(function (column) { return ((0, jsx_runtime_1.jsx)(Details_1.Detail, __assign({ label: column.header }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }) }), column.id)); }), countColumns.length > 0 && ((0, jsx_runtime_1.jsx)(Details_1.Detail, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { display: 'flex', gap: 16, marginTop: 8, flexWrap: 'wrap' } }, { children: countColumns.map(function (column, i) { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', gap: 6, alignItems: 'baseline' } }, { children: [(0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }), (0, jsx_runtime_1.jsx)("small", __assign({ style: { opacity: 0.7 } }, { children: column.header }))] }), i)); }) })) }))] })) })),
|
|
149
150
|
labels: labelColumn && ((_b = labelColumn.value(item)) === null || _b === void 0 ? void 0 : _b.map(function (label) { return ({ label: label }); })),
|
|
150
151
|
};
|
|
151
|
-
if (!
|
|
152
|
+
if (!hasDescription && cardColumns.length === 0 && countColumns.length === 0) {
|
|
152
153
|
pageTableCard.cardBody = undefined;
|
|
153
154
|
}
|
|
154
155
|
return pageTableCard;
|
|
155
156
|
};
|
|
156
|
-
}, [
|
|
157
|
+
}, [
|
|
158
|
+
cardColumns,
|
|
159
|
+
countColumns,
|
|
160
|
+
descriptionColumn,
|
|
161
|
+
labelColumn,
|
|
162
|
+
nameColumn,
|
|
163
|
+
subtitleColumn,
|
|
164
|
+
keyFn,
|
|
165
|
+
]);
|
|
157
166
|
}
|
|
158
167
|
exports.useColumnsToTableCardFn = useColumnsToTableCardFn;
|
|
@@ -121,7 +121,7 @@ function useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unsel
|
|
|
121
121
|
(!descriptionColumn.value || descriptionColumn.value(item)) && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionListGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: descriptionColumn, item: item }) }) }, descriptionColumn.header)), primaryColumns.map(function (column) {
|
|
122
122
|
if (column.value && !column.value(item))
|
|
123
123
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
124
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm,
|
|
124
|
+
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, __assign({ style: { whiteSpace: 'nowrap' } }, { children: column.header })), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }) })] }, column.header));
|
|
125
125
|
}), countColumns.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionListGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
|
126
126
|
display: 'flex',
|
|
127
127
|
gap: 16,
|
|
@@ -131,7 +131,7 @@ function useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unsel
|
|
|
131
131
|
secondaryColumns.length > 0 ? ((0, jsx_runtime_1.jsx)(react_core_1.DataListCell, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: secondaryColumns.map(function (column) {
|
|
132
132
|
if (column.value && !column.value(item))
|
|
133
133
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
134
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm,
|
|
134
|
+
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, __assign({ style: { whiteSpace: 'nowrap' } }, { children: column.header })), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }) })] }, column.header));
|
|
135
135
|
}) })) }, "secondary")) : null,
|
|
136
136
|
] }), rowActions && ((0, jsx_runtime_1.jsx)(react_core_1.DataListAction, __assign({ "aria-labelledby": "check-action-item1 check-action-action1", id: "check-action-action1", "aria-label": "Actions", isPlainButtonAction: true, style: { whiteSpace: 'nowrap' } }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: rowActions, position: react_core_1.DropdownPosition.right, selectedItem: item, iconOnly: true }) })))] }) }), key));
|
|
137
137
|
}, [
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
Each table uses a view using a React hook. The view handles the state for the table. Sorting, filtering, pagination, etc...
|
|
8
8
|
|
|
9
9
|
```tsx
|
|
10
|
-
const view = useView()
|
|
10
|
+
const view = useView();
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
For different backends, the view can be wrapped to make a specific view hook for the API.
|
|
@@ -44,7 +44,7 @@ The PageTable component takes in the properties from the view and shows a table
|
|
|
44
44
|
|
|
45
45
|
```tsx
|
|
46
46
|
export function Users() {
|
|
47
|
-
const view = useMyApiView<IUser>({ url: '/api/users' })
|
|
47
|
+
const view = useMyApiView<IUser>({ url: '/api/users' });
|
|
48
48
|
const tableColumns = useMemo<ITableColumn<IUser>[]>(
|
|
49
49
|
() => [
|
|
50
50
|
{
|
|
@@ -54,7 +54,7 @@ export function Users() {
|
|
|
54
54
|
},
|
|
55
55
|
],
|
|
56
56
|
[]
|
|
57
|
-
)
|
|
57
|
+
);
|
|
58
58
|
return (
|
|
59
59
|
<PageLayout>
|
|
60
60
|
<PageHeader title="Users" />
|
|
@@ -62,7 +62,7 @@ export function Users() {
|
|
|
62
62
|
<PageTable<IUser> tableColumns={tableColumns} {...view} />
|
|
63
63
|
</PageBody>
|
|
64
64
|
</PageLayout>
|
|
65
|
-
)
|
|
65
|
+
);
|
|
66
66
|
}
|
|
67
67
|
```
|
|
68
68
|
|