@ansible/ansible-ui-framework 0.0.579 → 0.0.580
Sign up to get free protection for your applications and to get access to all the features.
- 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 -2
- package/cjs/PageTable/PageToolbar.d.ts +1 -0
- package/cjs/PageTable/PageToolbar.js +6 -2
- package/package.json +1 -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;
|
|
@@ -96,14 +96,14 @@ function PageTable(props) {
|
|
|
96
96
|
if (itemCount === undefined) {
|
|
97
97
|
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
98
|
}
|
|
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,
|
|
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, 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
100
|
borderLeft: usePadding
|
|
101
101
|
? 'thin solid var(--pf-global--BorderColor--100)'
|
|
102
102
|
: undefined,
|
|
103
103
|
borderRight: usePadding
|
|
104
104
|
? 'thin solid var(--pf-global--BorderColor--100)'
|
|
105
105
|
: 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] }));
|
|
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, { topBorder: true }))), columnModal] }));
|
|
107
107
|
}
|
|
108
108
|
exports.PageTable = PageTable;
|
|
109
109
|
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)
|