@ansible/ansible-ui-framework 0.0.578 → 0.0.580
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/PageActions/PageDropdownAction.d.ts +2 -1
- package/cjs/PageActions/PageDropdownAction.js +6 -4
- package/cjs/PageActions/PagePinnedActions.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 -2
- package/cjs/PageTable/PageToolbar.d.ts +1 -0
- package/cjs/PageTable/PageToolbar.js +6 -2
- package/package.json +1 -1
@@ -1,4 +1,4 @@
|
|
1
|
-
import { DropdownPosition } from '@patternfly/react-core';
|
1
|
+
import { ButtonVariant, DropdownPosition } from '@patternfly/react-core';
|
2
2
|
import { ComponentClass, FunctionComponent } from 'react';
|
3
3
|
import { IPageAction } from './PageAction';
|
4
4
|
export declare function PageDropdownAction<T extends object>(props: {
|
@@ -12,5 +12,6 @@ export declare function PageDropdownAction<T extends object>(props: {
|
|
12
12
|
position?: DropdownPosition;
|
13
13
|
iconOnly?: boolean;
|
14
14
|
onOpen?: (open: boolean) => void;
|
15
|
+
variant?: ButtonVariant;
|
15
16
|
}): JSX.Element;
|
16
17
|
export declare function filterActionSeperators<T extends object>(actions: IPageAction<T>[]): IPageAction<T>[];
|
@@ -45,7 +45,7 @@ var react_router_dom_1 = require("react-router-dom");
|
|
45
45
|
var PageActions_1 = require("./PageActions");
|
46
46
|
var PageActionType_1 = require("./PageActionType");
|
47
47
|
function PageDropdownAction(props) {
|
48
|
-
var label = props.label, icon = props.icon, selectedItems = props.selectedItems, selectedItem = props.selectedItem, iconOnly = props.iconOnly, isDisabled = props.isDisabled, tooltip = props.tooltip;
|
48
|
+
var label = props.label, icon = props.icon, selectedItems = props.selectedItems, selectedItem = props.selectedItem, iconOnly = props.iconOnly, isDisabled = props.isDisabled, tooltip = props.tooltip, variant = props.variant;
|
49
49
|
var actions = props.actions;
|
50
50
|
actions = actions.filter(function (action) { return !(0, PageActions_1.isHiddenAction)(action, selectedItem); });
|
51
51
|
actions = filterActionSeperators(actions);
|
@@ -62,8 +62,10 @@ function PageDropdownAction(props) {
|
|
62
62
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
63
63
|
var Icon = icon;
|
64
64
|
var toggleIcon = Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : label;
|
65
|
-
var isPrimary = hasBulkActions && !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length);
|
66
|
-
|
65
|
+
var isPrimary = variant === react_core_1.ButtonVariant.primary || (hasBulkActions && !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length));
|
66
|
+
/** Turn primary button to secondary if there are items selected */
|
67
|
+
var isSecondary = variant === react_core_1.ButtonVariant.primary && !hasBulkActions && !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length);
|
68
|
+
var Toggle = label || Icon ? ((0, jsx_runtime_1.jsx)(react_core_1.DropdownToggle, __assign({ id: "toggle-dropdown", isDisabled: isDisabled, onToggle: function () { return setDropdownOpen(!dropdownOpen); }, toggleVariant: isSecondary ? 'secondary' : isPrimary ? 'primary' : undefined, toggleIndicator: Icon && iconOnly ? null : undefined, style: isPrimary && !label ? { color: 'var(--pf-global--Color--light-100)' } : {}, icon: Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : undefined }, { children: iconOnly ? undefined : label }))) : ((0, jsx_runtime_1.jsx)(react_core_1.KebabToggle, __assign({ id: "toggle-kebab", isDisabled: isDisabled, onToggle: function () { return setDropdownOpen(!dropdownOpen); }, toggleVariant: isPrimary ? 'primary' : undefined, style: isPrimary && !label ? { color: 'var(--pf-global--Color--light-100)' } : {} }, { children: toggleIcon })));
|
67
69
|
var dropdown = ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { onSelect: function () { return setDropdownOpen(false); }, toggle: Toggle, isOpen: dropdownOpen, isPlain: !label || iconOnly, dropdownItems: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(PageDropdownActionItem, { action: action, selectedItems: selectedItems !== null && selectedItems !== void 0 ? selectedItems : [], selectedItem: selectedItem, hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: { zIndex: dropdownOpen ? 201 : undefined } }));
|
68
70
|
return tooltip && (iconOnly || isDisabled) ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: dropdown }))) : (__assign({}, dropdown));
|
69
71
|
}
|
@@ -106,7 +108,7 @@ function PageDropdownActionItem(props) {
|
|
106
108
|
var tooltip = action.label;
|
107
109
|
var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : '';
|
108
110
|
tooltip = isDisabled ? isDisabled : tooltip;
|
109
|
-
return ((0, jsx_runtime_1.jsx)(PageDropdownAction, { label: action.label, actions: action.options, selectedItem: selectedItem, isDisabled: Boolean(isDisabled), tooltip: tooltip }, action.label));
|
111
|
+
return ((0, jsx_runtime_1.jsx)(PageDropdownAction, { label: action.label, actions: action.options, selectedItem: selectedItem, isDisabled: Boolean(isDisabled), tooltip: tooltip, variant: action.variant }, action.label));
|
110
112
|
}
|
111
113
|
case PageActionType_1.PageActionType.seperator:
|
112
114
|
return (0, jsx_runtime_1.jsx)(react_core_1.DropdownSeparator, {}, "separator-".concat(index));
|
@@ -49,7 +49,7 @@ function PagePinnedAction(props) {
|
|
49
49
|
var tooltip = action.label;
|
50
50
|
var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : '';
|
51
51
|
tooltip = isDisabled ? isDisabled : tooltip;
|
52
|
-
return ((0, jsx_runtime_1.jsx)(PageDropdownAction_1.PageDropdownAction, { icon: action.icon, label: action.label, actions: action.options, selectedItem: selectedItem, selectedItems: selectedItems, iconOnly: props.iconOnly, position: react_core_1.DropdownPosition.right, isDisabled: Boolean(isDisabled), tooltip: props.iconOnly || isDisabled ? tooltip : undefined }));
|
52
|
+
return ((0, jsx_runtime_1.jsx)(PageDropdownAction_1.PageDropdownAction, { icon: action.icon, label: action.label, actions: action.options, selectedItem: selectedItem, selectedItems: selectedItems, iconOnly: props.iconOnly, position: react_core_1.DropdownPosition.right, isDisabled: Boolean(isDisabled), tooltip: props.iconOnly || isDisabled ? tooltip : undefined, variant: action.variant }));
|
53
53
|
}
|
54
54
|
}
|
55
55
|
}
|
@@ -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)
|