@ansible/ansible-ui-framework 0.0.352 → 0.0.353

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. package/cjs/PageTable.d.ts +1 -1
  2. package/cjs/PageTable.js +1 -2
  3. package/cjs/PageTableCard.js +15 -2
  4. package/cjs/PageTableList.js +2 -2
  5. package/package.json +1 -1
package/cjs/PageTable.d.ts CHANGED
@@ -87,7 +87,7 @@ export interface ITableColumn<T extends object> {
87
87
  * @deprecated The method should not be used
88
88
  */
89
89
  sortFn?: (l: T, r: T) => number;
90
- card?: 'description' | 'hidden';
90
+ card?: 'description' | 'hidden' | 'count';
91
91
  list?: 'primary' | 'secondary';
92
92
  hideLabel?: boolean;
93
93
  primary?: boolean;
package/cjs/PageTable.js CHANGED
@@ -72,7 +72,6 @@ exports.TablePage = TablePage;
72
72
  function PageTable(props) {
73
73
  var _a;
74
74
  var disableBodyPadding = props.disableBodyPadding;
75
- disableBodyPadding = true;
76
75
  var toolbarActions = props.toolbarActions, filters = props.filters, error = props.error, itemCount = props.itemCount;
77
76
  var _b = (0, PageColumnModal_1.useColumnModal)(props.tableColumns), openColumnModal = _b.openColumnModal, columnModal = _b.columnModal, managedColumns = _b.managedColumns;
78
77
  var showSelect = (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return TypedActions_1.TypedActionType.bulk === toolbarAction.type; })) !==
@@ -103,7 +102,7 @@ function PageTable(props) {
103
102
  if (itemCount === undefined) {
104
103
  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, {}) }) })));
105
104
  }
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] }));
105
+ 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, { 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] }));
107
106
  }
108
107
  exports.PageTable = PageTable;
109
108
  function PageTableView(props) {
package/cjs/PageTableCard.js CHANGED
@@ -61,6 +61,8 @@ function useColumnsToTableCardFn(columns, keyFn) {
61
61
  var cardData = (0, react_1.useMemo)(function () {
62
62
  var _a;
63
63
  var cols = columns.filter(function (column) { return column.card !== 'hidden'; });
64
+ var countColumns = cols.filter(function (column) { return column.card === 'count'; });
65
+ cols = cols.filter(function (column) { return column.card !== 'count'; });
64
66
  var nameColumn = (_a = cols.find(function (column) { return column.primary; })) !== null && _a !== void 0 ? _a : cols[0];
65
67
  cols = cols.filter(function (column) { return column !== nameColumn; });
66
68
  var descriptionColumn = cols.find(function (column) { return column.card === 'description'; });
@@ -70,6 +72,7 @@ function useColumnsToTableCardFn(columns, keyFn) {
70
72
  return {
71
73
  nameColumn: nameColumn,
72
74
  descriptionColumn: descriptionColumn,
75
+ countColumns: countColumns,
73
76
  columns: cols,
74
77
  };
75
78
  }, [columns]);
@@ -80,10 +83,20 @@ function useColumnsToTableCardFn(columns, keyFn) {
80
83
  id: keyFn(item),
81
84
  title: (_a = cardData.nameColumn) === null || _a === void 0 ? void 0 : _a.cell(item),
82
85
  description: (_b = cardData.descriptionColumn) === null || _b === void 0 ? void 0 : _b.cell(item),
83
- cardBody: ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: cardData.columns.map(function (column) { return ((0, jsx_runtime_1.jsx)(Details_1.Detail, __assign({ label: column.hideLabel ? undefined : column.header }, { children: column.cell(item) }), column.id)); }) })) })),
86
+ cardBody: ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: [cardData.columns.map(function (column) { return ((0, jsx_runtime_1.jsx)(Details_1.Detail, __assign({ label: column.hideLabel ? undefined : column.header }, { children: column.cell(item) }), column.id)); }), cardData.countColumns.length > 0 && ((0, jsx_runtime_1.jsx)(Details_1.Detail, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { display: 'flex', gap: 16 } }, { children: cardData.countColumns.map(function (column, i) { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', gap: 6, alignItems: 'baseline' } }, { children: [column.cell(item), (0, jsx_runtime_1.jsx)("small", __assign({ style: { opacity: 0.7 } }, { children: column.header }))] }), i)); }) })) }))] })) })),
87
+ // labels: [{ label: 'hhh' }],
84
88
  };
89
+ if (cardData.columns.length === 0 && cardData.countColumns.length === 0) {
90
+ pageTableCard.cardBody = undefined;
91
+ }
85
92
  return pageTableCard;
86
93
  };
87
- }, [cardData.columns, cardData.descriptionColumn, cardData.nameColumn, keyFn]);
94
+ }, [
95
+ cardData.columns,
96
+ cardData.countColumns,
97
+ cardData.descriptionColumn,
98
+ cardData.nameColumn,
99
+ keyFn,
100
+ ]);
88
101
  }
89
102
  exports.useColumnsToTableCardFn = useColumnsToTableCardFn;
package/cjs/PageTableList.js CHANGED
@@ -52,12 +52,12 @@ function useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unsel
52
52
  var key = keyFn(item);
53
53
  var isItemSelected = isSelected === null || isSelected === void 0 ? void 0 : isSelected(item);
54
54
  return ((0, jsx_runtime_1.jsx)(react_core_1.DataListItem, __assign({ "aria-labelledby": "data-list-".concat(key), isExpanded: isItemSelected }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DataListItemRow, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.DataListCheck, { "aria-labelledby": "data-list-check-".concat(key), name: "data-list-check-".concat(key), isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onClick: function () { return onSelectClick(item); } })), (0, jsx_runtime_1.jsx)(react_core_1.DataListItemCells, { dataListCells: [
55
- (0, jsx_runtime_1.jsx)(react_core_1.DataListCell, __assign({ width: 5 }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.Stack, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", style: { marginTop: -4 } }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ id: "data-list-".concat(key) }, { children: (_a = data.nameColumn) === null || _a === void 0 ? void 0 : _a.cell(item) })) })), data.descriptionColumn ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: data.descriptionColumn.cell(item) }))) : (defaultCardSubtitle && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: defaultCardSubtitle }))))] }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: data.columns.map(function (column) {
55
+ (0, jsx_runtime_1.jsx)(react_core_1.DataListCell, __assign({ width: 5 }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.Stack, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", style: { marginTop: -4 } }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ id: "data-list-".concat(key) }, { children: (_a = data.nameColumn) === null || _a === void 0 ? void 0 : _a.cell(item) })) })), data.descriptionColumn ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: data.descriptionColumn.cell(item) }))) : (defaultCardSubtitle && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: defaultCardSubtitle }))))] }), data.columns.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: data.columns.map(function (column) {
56
56
  var value = column.cell(item);
57
57
  if (!value)
58
58
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
59
59
  return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [!column.hideLabel && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: (0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7, whiteSpace: 'nowrap' } }, { children: column.header })) })), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: column.cell(item) })] }, column.header));
60
- }) }))] })) }) }), "primary"),
60
+ }) })))] })) }) }), "primary"),
61
61
  data.secondary.length > 0 ? ((0, jsx_runtime_1.jsx)(react_core_1.DataListCell, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: data.secondary.map(function (column) {
62
62
  var value = column.cell(item);
63
63
  if (!value)
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ansible/ansible-ui-framework",
3
3
  "description": "A framework for building applications using PatternFly.",
4
- "version": "0.0.352",
4
+ "version": "0.0.353",
5
5
  "author": "Red Hat",
6
6
  "license": "MIT",
7
7
  "repository": {