@ansible/ansible-ui-framework 0.0.577 → 0.0.579
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -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
|
}
|