@ansible/ansible-ui-framework 0.0.355 → 0.0.356
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -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
|
}
|