@ansible/ansible-ui-framework 0.0.367 → 0.0.369
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/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
|
}
|