@ansible/ansible-ui-framework 0.0.354 → 0.0.356
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -33,6 +33,7 @@ export type ITypedSingleAction<T extends object> = ITypedActionCommon & {
|
|
|
33
33
|
type: TypedActionType.single;
|
|
34
34
|
variant?: ButtonVariant;
|
|
35
35
|
onClick: (item: T) => void;
|
|
36
|
+
isDisabled?: (item: T) => string;
|
|
36
37
|
};
|
|
37
38
|
export type ITypedDropdownAction<T extends object> = ITypedActionCommon & {
|
|
38
39
|
type: TypedActionType.dropdown;
|
|
@@ -41,6 +41,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
41
41
|
var react_core_1 = require("@patternfly/react-core");
|
|
42
42
|
var react_icons_1 = require("@patternfly/react-icons");
|
|
43
43
|
var react_1 = require("react");
|
|
44
|
+
var IconWrapper_1 = require("../components/IconWrapper");
|
|
45
|
+
var pfcolors_1 = require("../components/pfcolors");
|
|
44
46
|
var useBreakPoint_1 = require("../components/useBreakPoint");
|
|
45
47
|
var TypedActionsButtons_1 = require("./TypedActionsButtons");
|
|
46
48
|
var TypedActionType;
|
|
@@ -76,8 +78,9 @@ function DropdownActionItem(props) {
|
|
|
76
78
|
if (!Icon && hasIcons)
|
|
77
79
|
Icon = TransparentIcon;
|
|
78
80
|
var tooltip = action.tooltip;
|
|
79
|
-
var isDisabled = false;
|
|
80
|
-
|
|
81
|
+
var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : false;
|
|
82
|
+
tooltip = isDisabled ? isDisabled : tooltip;
|
|
83
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ onClick: function () { return selectedItem && action.onClick(selectedItem); }, isAriaDisabled: Boolean(isDisabled), icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, style: {
|
|
81
84
|
color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
|
|
82
85
|
} }, { children: action.label })) }), action.label));
|
|
83
86
|
}
|
|
@@ -217,10 +220,15 @@ function useTypedActionsToTableActions(props) {
|
|
|
217
220
|
}
|
|
218
221
|
case TypedActionType.single: {
|
|
219
222
|
var Icon = buttonAction.icon;
|
|
223
|
+
var tooltip = buttonAction.tooltip;
|
|
224
|
+
var isDisabled_1 = buttonAction.isDisabled !== undefined && props.item
|
|
225
|
+
? buttonAction.isDisabled(props.item)
|
|
226
|
+
: false;
|
|
227
|
+
tooltip = isDisabled_1 ? isDisabled_1 : tooltip;
|
|
220
228
|
return {
|
|
221
|
-
title: ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [Icon && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(Icon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: buttonAction.label })] }))),
|
|
222
|
-
onClick: function () {
|
|
223
|
-
buttonAction.onClick(props.item);
|
|
229
|
+
title: ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true, style: { cursor: isDisabled_1 ? 'default' : 'pointer' } }, { children: [Icon && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ color: isDisabled_1 ? pfcolors_1.PFColorE.Disabled : undefined }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) })) })), (0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ style: { color: isDisabled_1 ? pfcolors_1.pfDisabled : undefined } }, { children: buttonAction.label }))] })) }), buttonAction.label)),
|
|
230
|
+
onClick: function (event) {
|
|
231
|
+
isDisabled_1 ? event.stopPropagation() : buttonAction.onClick(props.item);
|
|
224
232
|
},
|
|
225
233
|
};
|
|
226
234
|
}
|
|
@@ -91,7 +91,8 @@ function ActionSingleButton(props) {
|
|
|
91
91
|
var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
|
|
92
92
|
var Icon = action.icon;
|
|
93
93
|
var tooltip = ((_a = action.tooltip) !== null && _a !== void 0 ? _a : props.iconOnly) ? props.action.label : undefined;
|
|
94
|
-
var isDisabled = false;
|
|
94
|
+
var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : false;
|
|
95
|
+
tooltip = isDisabled ? isDisabled : tooltip;
|
|
95
96
|
var variant = (_b = action.variant) !== null && _b !== void 0 ? _b : react_core_1.ButtonVariant.secondary;
|
|
96
97
|
if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
|
|
97
98
|
variant = react_core_1.ButtonVariant.secondary;
|
|
@@ -102,5 +103,5 @@ function ActionSingleButton(props) {
|
|
|
102
103
|
if (props.iconOnly) {
|
|
103
104
|
variant = react_core_1.ButtonVariant.plain;
|
|
104
105
|
}
|
|
105
|
-
return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: variant, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { marginLeft: -4, paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: isDisabled, onClick: function () { return selectedItem && action.onClick(selectedItem); }, isDanger: action.isDanger }, { children: props.iconOnly && Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : action.shortLabel ? action.shortLabel : action.label })) })) }));
|
|
106
|
+
return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: variant, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { marginLeft: -4, paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: Boolean(isDisabled), onClick: function () { return selectedItem && action.onClick(selectedItem); }, isDanger: action.isDanger }, { children: props.iconOnly && Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : action.shortLabel ? action.shortLabel : action.label })) })) }));
|
|
106
107
|
}
|