@ansible/ansible-ui-framework 0.0.367 → 0.0.369
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/PageTable.d.ts +1 -1
- package/cjs/PageTableCard.js +3 -1
- package/cjs/PageTableCards.js +1 -1
- package/cjs/PageTableList.js +1 -1
- package/package.json +1 -1
package/cjs/PageTable.d.ts
CHANGED
@@ -49,7 +49,7 @@ export type PageTableProps<T extends object> = {
|
|
49
49
|
disableCardView?: boolean;
|
50
50
|
defaultTableView?: PageTableViewType;
|
51
51
|
disableBodyPadding?: boolean;
|
52
|
-
|
52
|
+
defaultSubtitle?: ReactNode;
|
53
53
|
};
|
54
54
|
/**
|
55
55
|
* The PageTable component is used for adding a table to a page.
|
package/cjs/PageTableCard.js
CHANGED
@@ -143,7 +143,9 @@ function useColumnsToTableCardFn(columns, keyFn) {
|
|
143
143
|
icon: (_a = nameColumn === null || nameColumn === void 0 ? void 0 : nameColumn.icon) === null || _a === void 0 ? void 0 : _a.call(nameColumn, item),
|
144
144
|
title: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: nameColumn, item: item }),
|
145
145
|
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: [descriptionColumn && (!descriptionColumn.value || descriptionColumn.value(item)) && ((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
|
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: [descriptionColumn && (!descriptionColumn.value || descriptionColumn.value(item)) && ((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
|
+
.filter(function (column) { return !column.value || column.value(item); })
|
148
|
+
.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)); }) })) }))] })) })),
|
147
149
|
labels: labelColumn && ((_b = labelColumn.value(item)) === null || _b === void 0 ? void 0 : _b.map(function (label) { return ({ label: label }); })),
|
148
150
|
};
|
149
151
|
if (!descriptionColumn && cardColumns.length === 0 && countColumns.length === 0) {
|
package/cjs/PageTableCards.js
CHANGED
@@ -18,7 +18,7 @@ var react_1 = require("react");
|
|
18
18
|
var Grid_1 = require("./components/Grid");
|
19
19
|
var PageTableCard_1 = require("./PageTableCard");
|
20
20
|
function PageTableCards(props) {
|
21
|
-
var keyFn = props.keyFn, items = props.pageItems, tableColumns = props.tableColumns, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, rowActions = props.rowActions, showSelect = props.showSelect, defaultCardSubtitle = props.
|
21
|
+
var keyFn = props.keyFn, items = props.pageItems, tableColumns = props.tableColumns, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, rowActions = props.rowActions, showSelect = props.showSelect, defaultCardSubtitle = props.defaultSubtitle;
|
22
22
|
var itemToCardFn = (0, PageTableCard_1.useColumnsToTableCardFn)(tableColumns, keyFn);
|
23
23
|
var catalogCards = (0, react_1.useMemo)(function () {
|
24
24
|
return ((0, jsx_runtime_1.jsx)(Grid_1.Grid, __assign({ size: 400 }, { children: items === null || items === void 0 ? void 0 : items.map(function (item) { return ((0, jsx_runtime_1.jsx)(PageTableCard_1.PageTableCard, { item: item, itemToCardFn: itemToCardFn, isSelected: isSelected, selectItem: selectItem, unselectItem: unselectItem, itemActions: rowActions, showSelect: showSelect, defaultCardSubtitle: defaultCardSubtitle }, keyFn(item))); }) })));
|
package/cjs/PageTableList.js
CHANGED
@@ -30,7 +30,7 @@ var IconWrapper_1 = require("./components/IconWrapper");
|
|
30
30
|
var PageTable_1 = require("./PageTable");
|
31
31
|
var TypedActions_1 = require("./TypedActions");
|
32
32
|
function PageTableList(props) {
|
33
|
-
var keyFn = props.keyFn, pageItems = props.pageItems, tableColumns = props.tableColumns, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, rowActions = props.rowActions, defaultCardSubtitle = props.
|
33
|
+
var keyFn = props.keyFn, pageItems = props.pageItems, tableColumns = props.tableColumns, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, rowActions = props.rowActions, defaultCardSubtitle = props.defaultSubtitle, showSelect = props.showSelect;
|
34
34
|
var columnsToDataList = useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unselectItem, rowActions, defaultCardSubtitle, showSelect);
|
35
35
|
return ((0, jsx_runtime_1.jsx)(react_core_1.DataList, __assign({ "aria-label": "TODO", style: { marginTop: -1, maxWidth: '100%', overflow: 'hidden' } }, { children: pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(columnsToDataList) })));
|
36
36
|
}
|