@ansible/ansible-ui-framework 0.0.217 → 0.0.219
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/{TypedActions.js → TypedActions/TypedActions.js} +26 -98
- package/cjs/TypedActions/TypedActionsButtons.js +106 -0
- package/cjs/TypedActions/index.js +18 -0
- package/mjs/{TypedActions.d.ts → TypedActions/TypedActions.d.ts} +5 -13
- package/mjs/{TypedActions.js → TypedActions/TypedActions.js} +22 -92
- package/mjs/TypedActions/TypedActionsButtons.d.ts +16 -0
- package/mjs/TypedActions/TypedActionsButtons.js +87 -0
- package/mjs/TypedActions/index.d.ts +2 -0
- package/mjs/TypedActions/index.js +2 -0
- package/package.json +1 -1
@@ -36,12 +36,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
36
36
|
return to.concat(ar || Array.prototype.slice.call(from));
|
37
37
|
};
|
38
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
39
|
-
exports.useTypedActionsToTableActions = exports.TypedActions = exports.
|
39
|
+
exports.useTypedActionsToTableActions = exports.TypedActions = exports.DropdownActionItem = exports.TypedActionsDropdown = exports.TypedActionType = void 0;
|
40
40
|
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 useBreakPoint_1 = require("
|
44
|
+
var useBreakPoint_1 = require("../components/useBreakPoint");
|
45
|
+
var TypedActionsButtons_1 = require("./TypedActionsButtons");
|
45
46
|
var TypedActionType;
|
46
47
|
(function (TypedActionType) {
|
47
48
|
TypedActionType["seperator"] = "seperator";
|
@@ -64,110 +65,37 @@ function TypedActionsDropdown(props) {
|
|
64
65
|
? {
|
65
66
|
color: 'var(--pf-global--Color--light-100)',
|
66
67
|
}
|
67
|
-
: {} }, { children: label })), isOpen: dropdownOpen, isPlain: !label, dropdownItems: actions.map(function (action, index) {
|
68
|
-
switch (action.type) {
|
69
|
-
case TypedActionType.button:
|
70
|
-
case TypedActionType.bulk: {
|
71
|
-
var Icon = action.icon;
|
72
|
-
if (!Icon && hasIcons)
|
73
|
-
Icon = TransparentIcon;
|
74
|
-
var tooltip = action.tooltip;
|
75
|
-
var isDisabled = false;
|
76
|
-
if (action.type === TypedActionType.bulk && (!selectedItems || !selectedItems.length)) {
|
77
|
-
tooltip = 'No selections';
|
78
|
-
isDisabled = true;
|
79
|
-
}
|
80
|
-
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 action.onClick(selectedItems !== null && selectedItems !== void 0 ? selectedItems : []); }, isAriaDisabled: isDisabled, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined,
|
81
|
-
// style={{ color: 'var(--pf-global--primary-color--100)' }}
|
82
|
-
style: {
|
83
|
-
color: action.isDanger && !isDisabled
|
84
|
-
? 'var(--pf-global--danger-color--100)'
|
85
|
-
: undefined,
|
86
|
-
} }, { children: action.label })) }), action.label));
|
87
|
-
}
|
88
|
-
case TypedActionType.dropdown:
|
89
|
-
return ((0, jsx_runtime_1.jsx)(TypedActionsDropdown, { label: action.label, actions: action.options }, action.label));
|
90
|
-
case TypedActionType.seperator:
|
91
|
-
return (0, jsx_runtime_1.jsx)(react_core_1.DropdownSeparator, {}, "separator-".concat(index));
|
92
|
-
}
|
93
|
-
}), position: props.position, style: { zIndex: 201 } }));
|
68
|
+
: {} }, { children: label })), isOpen: dropdownOpen, isPlain: !label, dropdownItems: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(DropdownActionItem, { action: action, selectedItems: selectedItems !== null && selectedItems !== void 0 ? selectedItems : [], hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: { zIndex: 201 } }));
|
94
69
|
}
|
95
70
|
exports.TypedActionsDropdown = TypedActionsDropdown;
|
96
|
-
function
|
97
|
-
var
|
98
|
-
|
99
|
-
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
100
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.Split, __assign({ hasGutter: true }, { children: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(TypedActionButton, { action: action, selectedItems: selectedItems, wrapper: wrapper }, index)); }) })));
|
101
|
-
}
|
102
|
-
exports.TypedActionsButtons = TypedActionsButtons;
|
103
|
-
function TypedActionButton(props) {
|
104
|
-
var _a, _b, _c;
|
105
|
-
var action = props.action, selectedItems = props.selectedItems, selectedItem = props.selectedItem, wrapper = props.wrapper, noPrimary = props.noPrimary;
|
106
|
-
var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
|
71
|
+
function DropdownActionItem(props) {
|
72
|
+
var action = props.action, selectedItems = props.selectedItems, hasIcons = props.hasIcons, index = props.index;
|
73
|
+
// TODO case TypedActionType.single?
|
107
74
|
switch (action.type) {
|
108
|
-
case TypedActionType.
|
109
|
-
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
110
|
-
}
|
111
|
-
case TypedActionType.single: {
|
112
|
-
var Icon = action.icon;
|
113
|
-
var tooltip = action.tooltip;
|
114
|
-
var isDisabled = false;
|
115
|
-
var variant = (_a = action.variant) !== null && _a !== void 0 ? _a : react_core_1.ButtonVariant.secondary;
|
116
|
-
if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
|
117
|
-
variant = react_core_1.ButtonVariant.secondary;
|
118
|
-
}
|
119
|
-
if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
|
120
|
-
variant = react_core_1.ButtonVariant.danger;
|
121
|
-
}
|
122
|
-
if (props.iconOnly) {
|
123
|
-
variant = react_core_1.ButtonVariant.plain;
|
124
|
-
}
|
125
|
-
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) })) })) }));
|
126
|
-
}
|
75
|
+
case TypedActionType.button:
|
127
76
|
case TypedActionType.bulk: {
|
128
77
|
var Icon = action.icon;
|
78
|
+
if (!Icon && hasIcons)
|
79
|
+
Icon = TransparentIcon;
|
129
80
|
var tooltip = action.tooltip;
|
130
81
|
var isDisabled = false;
|
131
|
-
|
132
|
-
if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
|
133
|
-
variant = react_core_1.ButtonVariant.secondary;
|
134
|
-
}
|
135
|
-
if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
|
136
|
-
variant = react_core_1.ButtonVariant.danger;
|
137
|
-
}
|
138
|
-
if (!selectedItems || !selectedItems.length) {
|
82
|
+
if (action.type === TypedActionType.bulk && !selectedItems.length) {
|
139
83
|
tooltip = 'No selections';
|
140
84
|
isDisabled = true;
|
141
85
|
}
|
142
|
-
return ((0, jsx_runtime_1.jsx)(
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
case react_core_1.ButtonVariant.primary:
|
153
|
-
variant = react_core_1.ButtonVariant.secondary;
|
154
|
-
break;
|
155
|
-
}
|
156
|
-
}
|
157
|
-
if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
|
158
|
-
variant = react_core_1.ButtonVariant.secondary;
|
159
|
-
}
|
160
|
-
if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
|
161
|
-
variant = react_core_1.ButtonVariant.danger;
|
162
|
-
}
|
163
|
-
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, isDanger: action.isDanger, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: isDisabled, onClick: action.onClick }, { children: action.shortLabel ? action.shortLabel : action.label })) })) }));
|
164
|
-
}
|
165
|
-
case TypedActionType.dropdown: {
|
166
|
-
return ((0, jsx_runtime_1.jsx)(TypedActionsDropdown, { actions: action.options, label: action.label, isPrimary: action.variant === react_core_1.ButtonVariant.primary && !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) }));
|
167
|
-
}
|
86
|
+
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 action.onClick(selectedItems); }, isAriaDisabled: isDisabled, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, style: {
|
87
|
+
color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
|
88
|
+
} }, { children: action.label })) }), action.label));
|
89
|
+
}
|
90
|
+
case TypedActionType.dropdown:
|
91
|
+
return ((0, jsx_runtime_1.jsx)(TypedActionsDropdown, { label: action.label, actions: action.options }, action.label));
|
92
|
+
case TypedActionType.seperator:
|
93
|
+
return (0, jsx_runtime_1.jsx)(react_core_1.DropdownSeparator, {}, "separator-".concat(index));
|
94
|
+
default:
|
95
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
168
96
|
}
|
169
97
|
}
|
170
|
-
exports.
|
98
|
+
exports.DropdownActionItem = DropdownActionItem;
|
171
99
|
function TypedActions(props) {
|
172
100
|
var _a, _b;
|
173
101
|
var actions = props.actions;
|
@@ -200,7 +128,7 @@ function TypedActions(props) {
|
|
200
128
|
dropdownActions.pop();
|
201
129
|
return dropdownActions;
|
202
130
|
}, [collapseButtons, actions, isButtonAction]);
|
203
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(TypedActionsButtons, __assign({}, props, { actions: buttonActions })), (0, jsx_runtime_1.jsx)(TypedActionsDropdown, __assign({}, props, { actions: dropdownActions, position: props.position, isPrimary: !!((_b = props.selectedItems) === null || _b === void 0 ? void 0 : _b.length) }))] })));
|
131
|
+
return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(TypedActionsButtons_1.TypedActionsButtons, __assign({}, props, { actions: buttonActions })), (0, jsx_runtime_1.jsx)(TypedActionsDropdown, __assign({}, props, { actions: dropdownActions, position: props.position, isPrimary: !!((_b = props.selectedItems) === null || _b === void 0 ? void 0 : _b.length) }))] })));
|
204
132
|
}
|
205
133
|
exports.TypedActions = TypedActions;
|
206
134
|
var TransparentIcon = function () { return (0, jsx_runtime_1.jsx)(react_icons_1.CircleIcon, { style: { opacity: 0 } }); };
|
@@ -250,17 +178,17 @@ function useTypedActionsToTableActions(props) {
|
|
250
178
|
switch (buttonAction.type) {
|
251
179
|
case TypedActionType.button:
|
252
180
|
return {
|
253
|
-
title: (0, jsx_runtime_1.jsx)(TypedActionButton, { action: buttonAction }),
|
181
|
+
title: (0, jsx_runtime_1.jsx)(TypedActionsButtons_1.TypedActionButton, { action: buttonAction }),
|
254
182
|
isOutsideDropdown: true,
|
255
183
|
};
|
256
184
|
case TypedActionType.single:
|
257
185
|
return {
|
258
|
-
title: ((0, jsx_runtime_1.jsx)(TypedActionButton, { action: __assign(__assign({}, buttonAction), { tooltip: buttonAction.label }), selectedItem: props.item, iconOnly: true })),
|
186
|
+
title: ((0, jsx_runtime_1.jsx)(TypedActionsButtons_1.TypedActionButton, { action: __assign(__assign({}, buttonAction), { tooltip: buttonAction.label }), selectedItem: props.item, iconOnly: true })),
|
259
187
|
isOutsideDropdown: true,
|
260
188
|
};
|
261
189
|
case TypedActionType.bulk:
|
262
190
|
return {
|
263
|
-
title: ((0, jsx_runtime_1.jsx)(TypedActionButton, { action: buttonAction, selectedItems: props.item ? [props.item] : [] })),
|
191
|
+
title: ((0, jsx_runtime_1.jsx)(TypedActionsButtons_1.TypedActionButton, { action: buttonAction, selectedItems: props.item ? [props.item] : [] })),
|
264
192
|
isOutsideDropdown: true,
|
265
193
|
};
|
266
194
|
default:
|
@@ -0,0 +1,106 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
3
|
+
__assign = Object.assign || function(t) {
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
+
s = arguments[i];
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
+
t[p] = s[p];
|
8
|
+
}
|
9
|
+
return t;
|
10
|
+
};
|
11
|
+
return __assign.apply(this, arguments);
|
12
|
+
};
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
14
|
+
exports.TypedActionButton = exports.TypedActionsButtons = void 0;
|
15
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
|
+
var react_1 = require("react");
|
17
|
+
var react_core_1 = require("@patternfly/react-core");
|
18
|
+
var TypedActions_1 = require("./TypedActions");
|
19
|
+
function TypedActionsButtons(props) {
|
20
|
+
var actions = props.actions, selectedItems = props.selectedItems, wrapper = props.wrapper;
|
21
|
+
if (actions.length === 0)
|
22
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
23
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.Split, __assign({ hasGutter: true }, { children: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(TypedActionButton, { action: action, selectedItems: selectedItems, wrapper: wrapper }, index)); }) })));
|
24
|
+
}
|
25
|
+
exports.TypedActionsButtons = TypedActionsButtons;
|
26
|
+
function TypedActionButton(props) {
|
27
|
+
var action = props.action, selectedItems = props.selectedItems, selectedItem = props.selectedItem, wrapper = props.wrapper, noPrimary = props.noPrimary;
|
28
|
+
switch (action.type) {
|
29
|
+
case TypedActions_1.TypedActionType.seperator: {
|
30
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
31
|
+
}
|
32
|
+
case TypedActions_1.TypedActionType.single: {
|
33
|
+
return ((0, jsx_runtime_1.jsx)(ActionSingleButton, { action: action, selectedItem: selectedItem, noPrimary: noPrimary, iconOnly: props.iconOnly, wrapper: wrapper }));
|
34
|
+
}
|
35
|
+
case TypedActions_1.TypedActionType.bulk: {
|
36
|
+
return ((0, jsx_runtime_1.jsx)(ActionBulkButton, { action: action, selectedItems: selectedItems, noPrimary: noPrimary, wrapper: wrapper }));
|
37
|
+
}
|
38
|
+
case TypedActions_1.TypedActionType.button: {
|
39
|
+
return (0, jsx_runtime_1.jsx)(ActionButton, { action: action, noPrimary: noPrimary, wrapper: wrapper });
|
40
|
+
}
|
41
|
+
case TypedActions_1.TypedActionType.dropdown: {
|
42
|
+
return ((0, jsx_runtime_1.jsx)(TypedActions_1.TypedActionsDropdown, { actions: action.options, selectedItems: selectedItems, label: action.label, isPrimary: action.variant === react_core_1.ButtonVariant.primary && !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) }));
|
43
|
+
}
|
44
|
+
}
|
45
|
+
}
|
46
|
+
exports.TypedActionButton = TypedActionButton;
|
47
|
+
function ActionButton(props) {
|
48
|
+
var _a;
|
49
|
+
var action = props.action, selectedItems = props.selectedItems, noPrimary = props.noPrimary, wrapper = props.wrapper;
|
50
|
+
var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
|
51
|
+
var Icon = action.icon;
|
52
|
+
var tooltip = action.tooltip;
|
53
|
+
var isDisabled = false;
|
54
|
+
var variant = (_a = action.variant) !== null && _a !== void 0 ? _a : react_core_1.ButtonVariant.secondary;
|
55
|
+
if (selectedItems &&
|
56
|
+
selectedItems.length &&
|
57
|
+
[react_core_1.ButtonVariant.primary, react_core_1.ButtonVariant.danger].includes(variant)) {
|
58
|
+
variant = react_core_1.ButtonVariant.secondary;
|
59
|
+
}
|
60
|
+
if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
|
61
|
+
variant = react_core_1.ButtonVariant.secondary;
|
62
|
+
}
|
63
|
+
if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
|
64
|
+
variant = react_core_1.ButtonVariant.danger;
|
65
|
+
}
|
66
|
+
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, isDanger: action.isDanger, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: isDisabled, onClick: action.onClick }, { children: action.shortLabel ? action.shortLabel : action.label })) })) }));
|
67
|
+
}
|
68
|
+
function ActionBulkButton(props) {
|
69
|
+
var _a;
|
70
|
+
var action = props.action, noPrimary = props.noPrimary, selectedItems = props.selectedItems, wrapper = props.wrapper;
|
71
|
+
var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
|
72
|
+
var Icon = action.icon;
|
73
|
+
var tooltip = action.tooltip;
|
74
|
+
var isDisabled = false;
|
75
|
+
var variant = (_a = action.variant) !== null && _a !== void 0 ? _a : react_core_1.ButtonVariant.secondary;
|
76
|
+
if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
|
77
|
+
variant = react_core_1.ButtonVariant.secondary;
|
78
|
+
}
|
79
|
+
if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
|
80
|
+
variant = react_core_1.ButtonVariant.danger;
|
81
|
+
}
|
82
|
+
if (!selectedItems || !selectedItems.length) {
|
83
|
+
tooltip = 'No selections';
|
84
|
+
isDisabled = true;
|
85
|
+
}
|
86
|
+
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: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: isDisabled, onClick: function () { return action.onClick(selectedItems !== null && selectedItems !== void 0 ? selectedItems : []); }, isDanger: action.isDanger }, { children: action.shortLabel ? action.shortLabel : action.label })) })) }));
|
87
|
+
}
|
88
|
+
function ActionSingleButton(props) {
|
89
|
+
var _a;
|
90
|
+
var action = props.action, selectedItem = props.selectedItem, noPrimary = props.noPrimary, wrapper = props.wrapper;
|
91
|
+
var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
|
92
|
+
var Icon = action.icon;
|
93
|
+
var tooltip = action.tooltip;
|
94
|
+
var isDisabled = false;
|
95
|
+
var variant = (_a = action.variant) !== null && _a !== void 0 ? _a : react_core_1.ButtonVariant.secondary;
|
96
|
+
if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
|
97
|
+
variant = react_core_1.ButtonVariant.secondary;
|
98
|
+
}
|
99
|
+
if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
|
100
|
+
variant = react_core_1.ButtonVariant.danger;
|
101
|
+
}
|
102
|
+
if (props.iconOnly) {
|
103
|
+
variant = react_core_1.ButtonVariant.plain;
|
104
|
+
}
|
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
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
3
|
+
if (k2 === undefined) k2 = k;
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
7
|
+
}
|
8
|
+
Object.defineProperty(o, k2, desc);
|
9
|
+
}) : (function(o, m, k, k2) {
|
10
|
+
if (k2 === undefined) k2 = k;
|
11
|
+
o[k2] = m[k];
|
12
|
+
}));
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
15
|
+
};
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
17
|
+
__exportStar(require("./TypedActions"), exports);
|
18
|
+
__exportStar(require("./TypedActionsButtons"), exports);
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { ButtonVariant, DropdownPosition } from '@patternfly/react-core';
|
2
2
|
import { IAction } from '@patternfly/react-table';
|
3
3
|
import { ComponentClass, FunctionComponent } from 'react';
|
4
|
-
import { WindowSize } from '
|
4
|
+
import { WindowSize } from '../components/useBreakPoint';
|
5
5
|
export declare enum TypedActionType {
|
6
6
|
seperator = "seperator",
|
7
7
|
button = "button",
|
@@ -47,19 +47,11 @@ export declare function TypedActionsDropdown<T extends object>(props: {
|
|
47
47
|
selectedItems?: T[];
|
48
48
|
position?: DropdownPosition;
|
49
49
|
}): JSX.Element;
|
50
|
-
export declare function
|
51
|
-
actions: ITypedAction<T>[];
|
52
|
-
selectedItems?: T[];
|
53
|
-
wrapper?: ComponentClass | FunctionComponent;
|
54
|
-
noPrimary?: boolean;
|
55
|
-
}): JSX.Element;
|
56
|
-
export declare function TypedActionButton<T extends object>(props: {
|
50
|
+
export declare function DropdownActionItem<T extends object>(props: {
|
57
51
|
action: ITypedAction<T>;
|
58
|
-
selectedItems
|
59
|
-
|
60
|
-
|
61
|
-
noPrimary?: boolean;
|
62
|
-
iconOnly?: boolean;
|
52
|
+
selectedItems: T[];
|
53
|
+
hasIcons: boolean;
|
54
|
+
index: number;
|
63
55
|
}): JSX.Element;
|
64
56
|
export declare function TypedActions<T extends object>(props: {
|
65
57
|
actions: ITypedAction<T>[];
|
@@ -1,8 +1,9 @@
|
|
1
1
|
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import {
|
2
|
+
import { ButtonVariant, Dropdown, DropdownItem, DropdownSeparator, DropdownToggle, KebabToggle, Split, SplitItem, Tooltip, } from '@patternfly/react-core';
|
3
3
|
import { CircleIcon } from '@patternfly/react-icons';
|
4
|
-
import {
|
5
|
-
import { useBreakpoint } from '
|
4
|
+
import { useCallback, useMemo, useState } from 'react';
|
5
|
+
import { useBreakpoint } from '../components/useBreakPoint';
|
6
|
+
import { TypedActionsButtons, TypedActionButton } from './TypedActionsButtons';
|
6
7
|
export var TypedActionType;
|
7
8
|
(function (TypedActionType) {
|
8
9
|
TypedActionType["seperator"] = "seperator";
|
@@ -23,104 +24,33 @@ export function TypedActionsDropdown(props) {
|
|
23
24
|
? {
|
24
25
|
color: 'var(--pf-global--Color--light-100)',
|
25
26
|
}
|
26
|
-
: {}, children: label }), isOpen: dropdownOpen, isPlain: !label, dropdownItems: actions.map((action, index) => {
|
27
|
-
switch (action.type) {
|
28
|
-
case TypedActionType.button:
|
29
|
-
case TypedActionType.bulk: {
|
30
|
-
let Icon = action.icon;
|
31
|
-
if (!Icon && hasIcons)
|
32
|
-
Icon = TransparentIcon;
|
33
|
-
let tooltip = action.tooltip;
|
34
|
-
let isDisabled = false;
|
35
|
-
if (action.type === TypedActionType.bulk && (!selectedItems || !selectedItems.length)) {
|
36
|
-
tooltip = 'No selections';
|
37
|
-
isDisabled = true;
|
38
|
-
}
|
39
|
-
return (_jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(DropdownItem, { onClick: () => action.onClick(selectedItems ?? []), isAriaDisabled: isDisabled, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined,
|
40
|
-
// style={{ color: 'var(--pf-global--primary-color--100)' }}
|
41
|
-
style: {
|
42
|
-
color: action.isDanger && !isDisabled
|
43
|
-
? 'var(--pf-global--danger-color--100)'
|
44
|
-
: undefined,
|
45
|
-
}, children: action.label }) }, action.label));
|
46
|
-
}
|
47
|
-
case TypedActionType.dropdown:
|
48
|
-
return (_jsx(TypedActionsDropdown, { label: action.label, actions: action.options }, action.label));
|
49
|
-
case TypedActionType.seperator:
|
50
|
-
return _jsx(DropdownSeparator, {}, `separator-${index}`);
|
51
|
-
}
|
52
|
-
}), position: props.position, style: { zIndex: 201 } }));
|
27
|
+
: {}, children: label }), isOpen: dropdownOpen, isPlain: !label, dropdownItems: actions.map((action, index) => (_jsx(DropdownActionItem, { action: action, selectedItems: selectedItems ?? [], hasIcons: hasIcons, index: index }, 'label' in action ? action.label : `action-${index}`))), position: props.position, style: { zIndex: 201 } }));
|
53
28
|
}
|
54
|
-
export function
|
55
|
-
const {
|
56
|
-
|
57
|
-
return _jsx(_Fragment, {});
|
58
|
-
return (_jsx(Split, { hasGutter: true, children: actions.map((action, index) => (_jsx(TypedActionButton, { action: action, selectedItems: selectedItems, wrapper: wrapper }, index))) }));
|
59
|
-
}
|
60
|
-
export function TypedActionButton(props) {
|
61
|
-
const { action, selectedItems, selectedItem, wrapper, noPrimary } = props;
|
62
|
-
const Wrapper = wrapper ?? Fragment;
|
29
|
+
export function DropdownActionItem(props) {
|
30
|
+
const { action, selectedItems, hasIcons, index } = props;
|
31
|
+
// TODO case TypedActionType.single?
|
63
32
|
switch (action.type) {
|
64
|
-
case TypedActionType.
|
65
|
-
return _jsx(_Fragment, {});
|
66
|
-
}
|
67
|
-
case TypedActionType.single: {
|
68
|
-
const Icon = action.icon;
|
69
|
-
const tooltip = action.tooltip;
|
70
|
-
const isDisabled = false;
|
71
|
-
let variant = action.variant ?? ButtonVariant.secondary;
|
72
|
-
if (variant === ButtonVariant.primary && noPrimary) {
|
73
|
-
variant = ButtonVariant.secondary;
|
74
|
-
}
|
75
|
-
if (variant === ButtonVariant.primary && action.isDanger) {
|
76
|
-
variant = ButtonVariant.danger;
|
77
|
-
}
|
78
|
-
if (props.iconOnly) {
|
79
|
-
variant = ButtonVariant.plain;
|
80
|
-
}
|
81
|
-
return (_jsx(Wrapper, { children: _jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(Button, { variant: variant, icon: Icon ? (_jsx("span", { style: { marginLeft: -4, paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, isAriaDisabled: isDisabled, onClick: () => selectedItem && action.onClick(selectedItem), isDanger: action.isDanger, children: props.iconOnly && Icon ? (_jsx(Icon, {})) : action.shortLabel ? (action.shortLabel) : (action.label) }) }) }));
|
82
|
-
}
|
33
|
+
case TypedActionType.button:
|
83
34
|
case TypedActionType.bulk: {
|
84
|
-
|
35
|
+
let Icon = action.icon;
|
36
|
+
if (!Icon && hasIcons)
|
37
|
+
Icon = TransparentIcon;
|
85
38
|
let tooltip = action.tooltip;
|
86
39
|
let isDisabled = false;
|
87
|
-
|
88
|
-
if (variant === ButtonVariant.primary && noPrimary) {
|
89
|
-
variant = ButtonVariant.secondary;
|
90
|
-
}
|
91
|
-
if (variant === ButtonVariant.primary && action.isDanger) {
|
92
|
-
variant = ButtonVariant.danger;
|
93
|
-
}
|
94
|
-
if (!selectedItems || !selectedItems.length) {
|
40
|
+
if (action.type === TypedActionType.bulk && !selectedItems.length) {
|
95
41
|
tooltip = 'No selections';
|
96
42
|
isDisabled = true;
|
97
43
|
}
|
98
|
-
return (_jsx(
|
99
|
-
|
100
|
-
|
101
|
-
const Icon = action.icon;
|
102
|
-
const tooltip = action.tooltip;
|
103
|
-
const isDisabled = false;
|
104
|
-
let variant = action.variant ?? ButtonVariant.secondary;
|
105
|
-
if (selectedItems && selectedItems.length) {
|
106
|
-
switch (variant) {
|
107
|
-
case ButtonVariant.danger:
|
108
|
-
case ButtonVariant.primary:
|
109
|
-
variant = ButtonVariant.secondary;
|
110
|
-
break;
|
111
|
-
}
|
112
|
-
}
|
113
|
-
if (variant === ButtonVariant.primary && noPrimary) {
|
114
|
-
variant = ButtonVariant.secondary;
|
115
|
-
}
|
116
|
-
if (variant === ButtonVariant.primary && action.isDanger) {
|
117
|
-
variant = ButtonVariant.danger;
|
118
|
-
}
|
119
|
-
return (_jsx(Wrapper, { children: _jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(Button, { variant: variant, isDanger: action.isDanger, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, isAriaDisabled: isDisabled, onClick: action.onClick, children: action.shortLabel ? action.shortLabel : action.label }) }) }));
|
120
|
-
}
|
121
|
-
case TypedActionType.dropdown: {
|
122
|
-
return (_jsx(TypedActionsDropdown, { actions: action.options, label: action.label, isPrimary: action.variant === ButtonVariant.primary && !selectedItems?.length }));
|
44
|
+
return (_jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(DropdownItem, { onClick: () => action.onClick(selectedItems), isAriaDisabled: isDisabled, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, style: {
|
45
|
+
color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
|
46
|
+
}, children: action.label }) }, action.label));
|
123
47
|
}
|
48
|
+
case TypedActionType.dropdown:
|
49
|
+
return (_jsx(TypedActionsDropdown, { label: action.label, actions: action.options }, action.label));
|
50
|
+
case TypedActionType.seperator:
|
51
|
+
return _jsx(DropdownSeparator, {}, `separator-${index}`);
|
52
|
+
default:
|
53
|
+
return _jsx(_Fragment, {});
|
124
54
|
}
|
125
55
|
}
|
126
56
|
export function TypedActions(props) {
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { ComponentClass, FunctionComponent } from 'react';
|
2
|
+
import { ITypedAction } from './TypedActions';
|
3
|
+
export declare function TypedActionsButtons<T extends object>(props: {
|
4
|
+
actions: ITypedAction<T>[];
|
5
|
+
selectedItems?: T[];
|
6
|
+
wrapper?: ComponentClass | FunctionComponent;
|
7
|
+
noPrimary?: boolean;
|
8
|
+
}): JSX.Element;
|
9
|
+
export declare function TypedActionButton<T extends object>(props: {
|
10
|
+
action: ITypedAction<T>;
|
11
|
+
selectedItems?: T[];
|
12
|
+
selectedItem?: T;
|
13
|
+
wrapper?: ComponentClass | FunctionComponent;
|
14
|
+
noPrimary?: boolean;
|
15
|
+
iconOnly?: boolean;
|
16
|
+
}): JSX.Element;
|
@@ -0,0 +1,87 @@
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
import { Fragment } from 'react';
|
3
|
+
import { Button, ButtonVariant, Tooltip, Split } from '@patternfly/react-core';
|
4
|
+
import { TypedActionType, TypedActionsDropdown, } from './TypedActions';
|
5
|
+
export function TypedActionsButtons(props) {
|
6
|
+
const { actions, selectedItems, wrapper } = props;
|
7
|
+
if (actions.length === 0)
|
8
|
+
return _jsx(_Fragment, {});
|
9
|
+
return (_jsx(Split, { hasGutter: true, children: actions.map((action, index) => (_jsx(TypedActionButton, { action: action, selectedItems: selectedItems, wrapper: wrapper }, index))) }));
|
10
|
+
}
|
11
|
+
export function TypedActionButton(props) {
|
12
|
+
const { action, selectedItems, selectedItem, wrapper, noPrimary } = props;
|
13
|
+
switch (action.type) {
|
14
|
+
case TypedActionType.seperator: {
|
15
|
+
return _jsx(_Fragment, {});
|
16
|
+
}
|
17
|
+
case TypedActionType.single: {
|
18
|
+
return (_jsx(ActionSingleButton, { action: action, selectedItem: selectedItem, noPrimary: noPrimary, iconOnly: props.iconOnly, wrapper: wrapper }));
|
19
|
+
}
|
20
|
+
case TypedActionType.bulk: {
|
21
|
+
return (_jsx(ActionBulkButton, { action: action, selectedItems: selectedItems, noPrimary: noPrimary, wrapper: wrapper }));
|
22
|
+
}
|
23
|
+
case TypedActionType.button: {
|
24
|
+
return _jsx(ActionButton, { action: action, noPrimary: noPrimary, wrapper: wrapper });
|
25
|
+
}
|
26
|
+
case TypedActionType.dropdown: {
|
27
|
+
return (_jsx(TypedActionsDropdown, { actions: action.options, selectedItems: selectedItems, label: action.label, isPrimary: action.variant === ButtonVariant.primary && !selectedItems?.length }));
|
28
|
+
}
|
29
|
+
}
|
30
|
+
}
|
31
|
+
function ActionButton(props) {
|
32
|
+
const { action, selectedItems, noPrimary, wrapper } = props;
|
33
|
+
const Wrapper = wrapper ?? Fragment;
|
34
|
+
const Icon = action.icon;
|
35
|
+
const tooltip = action.tooltip;
|
36
|
+
const isDisabled = false;
|
37
|
+
let variant = action.variant ?? ButtonVariant.secondary;
|
38
|
+
if (selectedItems &&
|
39
|
+
selectedItems.length &&
|
40
|
+
[ButtonVariant.primary, ButtonVariant.danger].includes(variant)) {
|
41
|
+
variant = ButtonVariant.secondary;
|
42
|
+
}
|
43
|
+
if (variant === ButtonVariant.primary && noPrimary) {
|
44
|
+
variant = ButtonVariant.secondary;
|
45
|
+
}
|
46
|
+
if (variant === ButtonVariant.primary && action.isDanger) {
|
47
|
+
variant = ButtonVariant.danger;
|
48
|
+
}
|
49
|
+
return (_jsx(Wrapper, { children: _jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(Button, { variant: variant, isDanger: action.isDanger, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, isAriaDisabled: isDisabled, onClick: action.onClick, children: action.shortLabel ? action.shortLabel : action.label }) }) }));
|
50
|
+
}
|
51
|
+
function ActionBulkButton(props) {
|
52
|
+
const { action, noPrimary, selectedItems, wrapper } = props;
|
53
|
+
const Wrapper = wrapper ?? Fragment;
|
54
|
+
const Icon = action.icon;
|
55
|
+
let tooltip = action.tooltip;
|
56
|
+
let isDisabled = false;
|
57
|
+
let variant = action.variant ?? ButtonVariant.secondary;
|
58
|
+
if (variant === ButtonVariant.primary && noPrimary) {
|
59
|
+
variant = ButtonVariant.secondary;
|
60
|
+
}
|
61
|
+
if (variant === ButtonVariant.primary && action.isDanger) {
|
62
|
+
variant = ButtonVariant.danger;
|
63
|
+
}
|
64
|
+
if (!selectedItems || !selectedItems.length) {
|
65
|
+
tooltip = 'No selections';
|
66
|
+
isDisabled = true;
|
67
|
+
}
|
68
|
+
return (_jsx(Wrapper, { children: _jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(Button, { variant: variant, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, isAriaDisabled: isDisabled, onClick: () => action.onClick(selectedItems ?? []), isDanger: action.isDanger, children: action.shortLabel ? action.shortLabel : action.label }) }) }));
|
69
|
+
}
|
70
|
+
function ActionSingleButton(props) {
|
71
|
+
const { action, selectedItem, noPrimary, wrapper } = props;
|
72
|
+
const Wrapper = wrapper ?? Fragment;
|
73
|
+
const Icon = action.icon;
|
74
|
+
const tooltip = action.tooltip;
|
75
|
+
const isDisabled = false;
|
76
|
+
let variant = action.variant ?? ButtonVariant.secondary;
|
77
|
+
if (variant === ButtonVariant.primary && noPrimary) {
|
78
|
+
variant = ButtonVariant.secondary;
|
79
|
+
}
|
80
|
+
if (variant === ButtonVariant.primary && action.isDanger) {
|
81
|
+
variant = ButtonVariant.danger;
|
82
|
+
}
|
83
|
+
if (props.iconOnly) {
|
84
|
+
variant = ButtonVariant.plain;
|
85
|
+
}
|
86
|
+
return (_jsx(Wrapper, { children: _jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(Button, { variant: variant, icon: Icon ? (_jsx("span", { style: { marginLeft: -4, paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, isAriaDisabled: isDisabled, onClick: () => selectedItem && action.onClick(selectedItem), isDanger: action.isDanger, children: props.iconOnly && Icon ? _jsx(Icon, {}) : action.shortLabel ? action.shortLabel : action.label }) }) }));
|
87
|
+
}
|
package/package.json
CHANGED