@ansible/ansible-ui-framework 0.0.579 → 0.0.581
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/BulkActionDialog.js +1 -1
- package/cjs/BulkConfirmationDialog.js +1 -1
- package/cjs/PageDashboard/PageDashboardChart.js +4 -1
- package/cjs/PageTable/PagePagination.d.ts +1 -0
- package/cjs/PageTable/PagePagination.js +1 -1
- package/cjs/PageTable/PageTable.js +2 -3
- package/cjs/PageTable/PageToolbar.d.ts +1 -0
- package/cjs/PageTable/PageToolbar.js +12 -3
- package/package.json +1 -1
package/cjs/BulkActionDialog.js
CHANGED
|
@@ -260,7 +260,7 @@ function BulkActionDialog(props) {
|
|
|
260
260
|
return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: { color: pfcolors_1.pfDanger } }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.ExclamationCircleIcon, {}), "\u00A0 ", statuses === null || statuses === void 0 ? void 0 : statuses[key]] })));
|
|
261
261
|
},
|
|
262
262
|
},
|
|
263
|
-
], false), keyFn: keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items", autoHidePagination: true }, "status") })) })), (0, jsx_runtime_1.jsx)(react_core_1.ModalBoxBody, __assign({ style: { paddingTop: 0 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Progress, { value: (progress / items.length) * 100, title: abortController.signal.aborted
|
|
263
|
+
], false), keyFn: keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items", autoHidePagination: true, disableBodyPadding: true }, "status") })) })), (0, jsx_runtime_1.jsx)(react_core_1.ModalBoxBody, __assign({ style: { paddingTop: 0 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Progress, { value: (progress / items.length) * 100, title: abortController.signal.aborted
|
|
264
264
|
? translations.canceledText
|
|
265
265
|
: error
|
|
266
266
|
? translations.errorText
|
|
@@ -101,7 +101,7 @@ function BulkConfirmationDialog(props) {
|
|
|
101
101
|
borderTop: 'thin solid var(--pf-global--BorderColor--100)',
|
|
102
102
|
} }, { children: [alertPrompts &&
|
|
103
103
|
alertPrompts.length > 0 &&
|
|
104
|
-
alertPrompts.map(function (alertPrompt, i) { return ((0, jsx_runtime_1.jsx)(react_core_1.Alert, { isInline: true, title: alertPrompt, variant: "warning" }, i)); }), (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: paged, itemCount: items.length, tableColumns: columnsForConfirmation, keyFn: keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items", autoHidePagination: true }, "items")] })), confirmText && actionableItems.length > 0 && ((0, jsx_runtime_1.jsx)("div", __assign({ style: { marginLeft: 32, height: 64, display: 'flex', alignItems: 'center' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { id: "confirm", label: confirmText, isChecked: confirmed, onChange: setConfirmed }) })))] }))) })));
|
|
104
|
+
alertPrompts.map(function (alertPrompt, i) { return ((0, jsx_runtime_1.jsx)(react_core_1.Alert, { isInline: true, title: alertPrompt, variant: "warning" }, i)); }), (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: paged, itemCount: items.length, tableColumns: columnsForConfirmation, keyFn: keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items", autoHidePagination: true, disableBodyPadding: true }, "items")] })), confirmText && actionableItems.length > 0 && ((0, jsx_runtime_1.jsx)("div", __assign({ style: { marginLeft: 32, height: 64, display: 'flex', alignItems: 'center' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { id: "confirm", label: confirmText, isChecked: confirmed, onChange: setConfirmed }) })))] }))) })));
|
|
105
105
|
}
|
|
106
106
|
function useBulkConfirmationDialog() {
|
|
107
107
|
var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];
|
|
@@ -46,6 +46,9 @@ function PageDashboardChart(props) {
|
|
|
46
46
|
}
|
|
47
47
|
return false;
|
|
48
48
|
});
|
|
49
|
-
return ((0, jsx_runtime_1.jsx)(PageChartContainer_1.PageChartContainer, { children: function (size) { return ((0, jsx_runtime_1.jsxs)(react_charts_1.Chart, __assign({ padding: { bottom: 27, left: 40, right:
|
|
49
|
+
return ((0, jsx_runtime_1.jsx)(PageChartContainer_1.PageChartContainer, { children: function (size) { return ((0, jsx_runtime_1.jsxs)(react_charts_1.Chart, __assign({ padding: { bottom: 27, left: 40, right: 20, top: 10 }, colorScale: groups.map(function (group) { return group.color; }), width: size.width, height: size.height, containerComponent: (0, jsx_runtime_1.jsx)(react_charts_1.ChartVoronoiContainer, { labels: function (point) {
|
|
50
|
+
var datum = point.datum;
|
|
51
|
+
return "".concat(datum.x, ": ").concat(datum.y);
|
|
52
|
+
} }) }, { children: [(0, jsx_runtime_1.jsx)(react_charts_1.ChartAxis, { fixLabelOverlap: true }), (0, jsx_runtime_1.jsx)(react_charts_1.ChartAxis, { dependentAxis: true, showGrid: true }), (0, jsx_runtime_1.jsx)(react_charts_1.ChartStack, { children: groups.map(function (group, index) { return ((0, jsx_runtime_1.jsx)(react_charts_1.ChartArea, { data: group.values.map(function (value) { return ({ x: value.label, y: value.value }); }), interpolation: "monotoneX" }, index)); }) })] }))); } }));
|
|
50
53
|
}
|
|
51
54
|
exports.PageDashboardChart = PageDashboardChart;
|
|
@@ -23,6 +23,6 @@ function PagePagination(props) {
|
|
|
23
23
|
var compact = !(0, useBreakPoint_1.useBreakpoint)('md');
|
|
24
24
|
return ((0, jsx_runtime_1.jsx)(react_core_1.Pagination, { variant: react_core_1.PaginationVariant.bottom, itemCount: props.itemCount, page: props.page, perPage: props.perPage, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: __assign(__assign({}, props.style), { boxShadow: 'none', zIndex: 301,
|
|
25
25
|
// marginTop: -1,
|
|
26
|
-
paddingTop: compact ? 4 : 6, paddingBottom: compact ? 4 : 6 }), className: "dark-2" }));
|
|
26
|
+
paddingTop: compact ? 4 : 6, paddingBottom: compact ? 4 : 6, borderTop: props.topBorder ? 'thin solid var(--pf-global--BorderColor--100)' : undefined }), className: "dark-2" }));
|
|
27
27
|
}
|
|
28
28
|
exports.PagePagination = PagePagination;
|
|
@@ -69,7 +69,6 @@ var PageToolbar_1 = require("./PageToolbar");
|
|
|
69
69
|
*/
|
|
70
70
|
function PageTable(props) {
|
|
71
71
|
var _a, _b;
|
|
72
|
-
// const { disableBodyPadding } = props
|
|
73
72
|
var toolbarActions = props.toolbarActions, filters = props.filters, error = props.error, itemCount = props.itemCount;
|
|
74
73
|
var _c = (0, PageColumnModal_1.useColumnModal)(props.tableColumns), openColumnModal = _c.openColumnModal, columnModal = _c.columnModal, managedColumns = _c.managedColumns;
|
|
75
74
|
var showSelect = props.showSelect ||
|
|
@@ -96,14 +95,14 @@ function PageTable(props) {
|
|
|
96
95
|
if (itemCount === undefined) {
|
|
97
96
|
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, {}) }) })));
|
|
98
97
|
}
|
|
99
|
-
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,
|
|
98
|
+
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, bottomBorder: true })), viewType === PageTableViewType_1.PageTableViewTypeE.Table && ((0, jsx_runtime_1.jsx)(PageBody_1.PageBody, { children: (0, jsx_runtime_1.jsx)(PageTableView, __assign({}, props, { tableColumns: managedColumns })) })), viewType === PageTableViewType_1.PageTableViewTypeE.List && ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ padding: { default: 'noPadding', md: 'padding' } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
|
100
99
|
borderLeft: usePadding
|
|
101
100
|
? 'thin solid var(--pf-global--BorderColor--100)'
|
|
102
101
|
: undefined,
|
|
103
102
|
borderRight: usePadding
|
|
104
103
|
? 'thin solid var(--pf-global--BorderColor--100)'
|
|
105
104
|
: undefined,
|
|
106
|
-
} }, { 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 || ((_b = props.itemCount) !== null && _b !== void 0 ? _b : 0) > props.perPage) && ((0, jsx_runtime_1.jsx)(PagePagination_1.PagePagination, __assign({}, props))), columnModal] }));
|
|
105
|
+
} }, { 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 || ((_b = props.itemCount) !== null && _b !== void 0 ? _b : 0) > props.perPage) && ((0, jsx_runtime_1.jsx)(PagePagination_1.PagePagination, __assign({}, props, { topBorder: true }))), columnModal] }));
|
|
107
106
|
}
|
|
108
107
|
exports.PageTable = PageTable;
|
|
109
108
|
function PageTableView(props) {
|
|
@@ -60,5 +60,6 @@ export type PagetableToolbarProps<T extends object> = {
|
|
|
60
60
|
disableListView?: boolean;
|
|
61
61
|
disableCardView?: boolean;
|
|
62
62
|
disableColumnManagement?: boolean;
|
|
63
|
+
bottomBorder?: boolean;
|
|
63
64
|
};
|
|
64
65
|
export declare function PageTableToolbar<T extends object>(props: PagetableToolbarProps<T>): JSX.Element;
|
|
@@ -74,7 +74,7 @@ function toolbarActionsHaveBulkActions(actions) {
|
|
|
74
74
|
exports.toolbarActionsHaveBulkActions = toolbarActionsHaveBulkActions;
|
|
75
75
|
function PageTableToolbar(props) {
|
|
76
76
|
var _a;
|
|
77
|
-
var itemCount = props.itemCount, page = props.page, perPage = props.perPage, setPage = props.setPage, setPerPage = props.setPerPage, toolbarFilters = props.toolbarFilters, selectedItems = props.selectedItems, filters = props.filters, setFilters = props.setFilters, clearAllFilters = props.clearAllFilters, openColumnModal = props.openColumnModal;
|
|
77
|
+
var itemCount = props.itemCount, page = props.page, perPage = props.perPage, setPage = props.setPage, setPerPage = props.setPerPage, toolbarFilters = props.toolbarFilters, selectedItems = props.selectedItems, filters = props.filters, setFilters = props.setFilters, clearAllFilters = props.clearAllFilters, openColumnModal = props.openColumnModal, bottomBorder = props.bottomBorder;
|
|
78
78
|
var sm = (0, useBreakPoint_1.useBreakpoint)('md');
|
|
79
79
|
var viewType = props.viewType, setViewType = props.setViewType;
|
|
80
80
|
var toolbarActions = props.toolbarActions;
|
|
@@ -104,7 +104,11 @@ function PageTableToolbar(props) {
|
|
|
104
104
|
if (itemCount === undefined) {
|
|
105
105
|
return ((0, jsx_runtime_1.jsx)(react_core_1.Toolbar, __assign({ className: "border-bottom dark-2", style: { paddingBottom: sm ? undefined : 8, paddingTop: sm ? undefined : 8 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarContent, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ style: { width: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "36px" }) })) }) })));
|
|
106
106
|
}
|
|
107
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.Toolbar, __assign({ clearAllFilters: clearAllFilters, className: "dark-2", style: {
|
|
107
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.Toolbar, __assign({ clearAllFilters: clearAllFilters, className: "dark-2", style: {
|
|
108
|
+
paddingBottom: sm ? undefined : 8,
|
|
109
|
+
paddingTop: sm ? undefined : 8,
|
|
110
|
+
borderBottom: bottomBorder ? 'thin solid var(--pf-global--BorderColor--100)' : undefined,
|
|
111
|
+
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "bulk-select" }, { children: (0, jsx_runtime_1.jsx)(BulkSelector_1.BulkSelector, __assign({}, props)) })) })), toolbarFilters && toolbarFilters.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, __assign({ toggleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "filter-group" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "filter", onSelect: function (_, v) { return setSeletedFilter(v.toString()); }, value: selectedFilter, placeholderText: "Select filter" }, { children: toolbarFilters.map(function (filter) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: filter.key }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' }, alignItems: { default: 'alignItemsCenter' }, flexWrap: { default: 'nowrap' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingLeft: 4, paddingRight: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: filter.label })] })) }), filter.key)); }) })) }), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(ToolbarFilterInput, { id: "filter-input", filter: toolbarFilters.find(function (filter) { return filter.key === selectedFilter; }), addFilter: function (value) {
|
|
108
112
|
var _a;
|
|
109
113
|
var values = filters === null || filters === void 0 ? void 0 : filters[selectedFilter];
|
|
110
114
|
if (!values)
|
|
@@ -183,7 +187,12 @@ function ToolbarTextFilter(props) {
|
|
|
183
187
|
var _a = __read((0, react_1.useState)(''), 2), value = _a[0], setValue = _a[1];
|
|
184
188
|
return ((0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.TextInputGroup, __assign({ style: { minWidth: 220 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextInputGroupMain, { id: props.id,
|
|
185
189
|
// ref={ref}
|
|
186
|
-
value: value, onChange: function (
|
|
190
|
+
value: value, onChange: function (e, v) {
|
|
191
|
+
if (typeof e === 'string')
|
|
192
|
+
setValue(e);
|
|
193
|
+
else
|
|
194
|
+
setValue(v);
|
|
195
|
+
}, onKeyUp: function (event) {
|
|
187
196
|
if (value && event.key === 'Enter') {
|
|
188
197
|
props.addFilter(value);
|
|
189
198
|
setValue('');
|