@ansible/ansible-ui-framework 0.0.369 → 0.0.370
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.
package/cjs/PageTable.js
CHANGED
@@ -232,31 +232,18 @@ function TableRow(props) {
|
|
232
232
|
}
|
233
233
|
function TableCells(props) {
|
234
234
|
var columns = props.columns, item = props.item, rowActions = props.rowActions, rowIndex = props.rowIndex;
|
235
|
-
var actions = (0, TypedActions_1.useTypedActionsToTableActions)({
|
236
|
-
actions: rowActions !== null && rowActions !== void 0 ? rowActions : [],
|
237
|
-
item: item,
|
238
|
-
collapse: 'xxl',
|
239
|
-
});
|
240
235
|
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [columns
|
241
236
|
.filter(function (column) { return column.enabled !== false; })
|
242
237
|
.map(function (column) {
|
243
238
|
return ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ dataLabel: column.header, modifier: "nowrap" }, { children: (0, jsx_runtime_1.jsx)(TableColumnCell, { item: item, column: column }) }), column.header));
|
244
|
-
}),
|
245
|
-
// isActionCell
|
246
|
-
, __assign({
|
247
|
-
// isActionCell
|
248
|
-
style: {
|
239
|
+
}), rowActions !== undefined && rowActions.length > 0 && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ style: {
|
249
240
|
zIndex: 100 - rowIndex,
|
250
241
|
paddingRight: 8,
|
251
242
|
paddingLeft: 8,
|
252
243
|
width: '0%',
|
253
244
|
right: 0,
|
254
245
|
// display: 'flex',
|
255
|
-
}, isStickyColumn: true, stickyMinWidth: "0px", className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: (0, jsx_runtime_1.jsx)(
|
256
|
-
// dropdownDirection="up" // TODO handle....
|
257
|
-
, {
|
258
|
-
// dropdownDirection="up" // TODO handle....
|
259
|
-
items: actions }) })) })))] }));
|
246
|
+
}, isStickyColumn: true, stickyMinWidth: "0px", className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: (0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: rowActions, selectedItem: item, position: react_core_1.DropdownPosition.right, iconOnly: true }) })))] }));
|
260
247
|
}
|
261
248
|
var TableColumnSomething;
|
262
249
|
(function (TableColumnSomething) {
|
@@ -1,5 +1,4 @@
|
|
1
1
|
import { ButtonVariant, DropdownPosition } from '@patternfly/react-core';
|
2
|
-
import { IAction } from '@patternfly/react-table';
|
3
2
|
import { ComponentClass, FunctionComponent } from 'react';
|
4
3
|
import { WindowSize } from '../components/useBreakPoint';
|
5
4
|
export declare enum TypedActionType {
|
@@ -66,12 +65,4 @@ export declare function TypedActions<T extends object>(props: {
|
|
66
65
|
position?: DropdownPosition;
|
67
66
|
iconOnly?: boolean;
|
68
67
|
}): JSX.Element;
|
69
|
-
export declare function useTypedActionsToTableActions<T extends object>(props: {
|
70
|
-
actions: ITypedAction<T>[];
|
71
|
-
item: T;
|
72
|
-
wrapper?: ComponentClass | FunctionComponent;
|
73
|
-
collapse?: WindowSize;
|
74
|
-
noPrimary?: boolean;
|
75
|
-
position?: DropdownPosition;
|
76
|
-
}): IAction[];
|
77
68
|
export {};
|
@@ -26,23 +26,12 @@ var __read = (this && this.__read) || function (o, n) {
|
|
26
26
|
}
|
27
27
|
return ar;
|
28
28
|
};
|
29
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
30
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
31
|
-
if (ar || !(i in from)) {
|
32
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
33
|
-
ar[i] = from[i];
|
34
|
-
}
|
35
|
-
}
|
36
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
37
|
-
};
|
38
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
39
|
-
exports.
|
30
|
+
exports.TypedActions = exports.DropdownActionItem = exports.TypedActionsDropdown = exports.TypedActionType = void 0;
|
40
31
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
41
32
|
var react_core_1 = require("@patternfly/react-core");
|
42
33
|
var react_icons_1 = require("@patternfly/react-icons");
|
43
34
|
var react_1 = require("react");
|
44
|
-
var IconWrapper_1 = require("../components/IconWrapper");
|
45
|
-
var pfcolors_1 = require("../components/pfcolors");
|
46
35
|
var useBreakPoint_1 = require("../components/useBreakPoint");
|
47
36
|
var TypedActionsButtons_1 = require("./TypedActionsButtons");
|
48
37
|
var TypedActionType;
|
@@ -145,105 +134,3 @@ function TypedActions(props) {
|
|
145
134
|
}
|
146
135
|
exports.TypedActions = TypedActions;
|
147
136
|
var TransparentIcon = function () { return (0, jsx_runtime_1.jsx)(react_icons_1.CircleIcon, { style: { opacity: 0 } }); };
|
148
|
-
function useTypedActionsToTableActions(props) {
|
149
|
-
var _a;
|
150
|
-
var actions = props.actions;
|
151
|
-
var collapseButtons = !(0, useBreakPoint_1.useBreakpoint)((_a = props.collapse) !== null && _a !== void 0 ? _a : 'lg');
|
152
|
-
var buttonActions = (0, react_1.useMemo)(function () {
|
153
|
-
if (collapseButtons) {
|
154
|
-
return [];
|
155
|
-
}
|
156
|
-
else {
|
157
|
-
var buttonActions_1 = actions === null || actions === void 0 ? void 0 : actions.filter(function (action) {
|
158
|
-
return (action.type === TypedActionType.button ||
|
159
|
-
action.type === TypedActionType.bulk ||
|
160
|
-
action.type === TypedActionType.single) &&
|
161
|
-
(action.variant === react_core_1.ButtonVariant.primary ||
|
162
|
-
action.variant === react_core_1.ButtonVariant.secondary ||
|
163
|
-
action.variant === react_core_1.ButtonVariant.danger);
|
164
|
-
});
|
165
|
-
return buttonActions_1 !== null && buttonActions_1 !== void 0 ? buttonActions_1 : [];
|
166
|
-
}
|
167
|
-
}, [collapseButtons, actions]);
|
168
|
-
var dropdownActions = (0, react_1.useMemo)(function () {
|
169
|
-
if (collapseButtons) {
|
170
|
-
return actions !== null && actions !== void 0 ? actions : [];
|
171
|
-
}
|
172
|
-
else {
|
173
|
-
var dropdownActions_1 = actions === null || actions === void 0 ? void 0 : actions.filter(function (action) {
|
174
|
-
return !((action.type === TypedActionType.button ||
|
175
|
-
action.type === TypedActionType.bulk ||
|
176
|
-
action.type === TypedActionType.single) &&
|
177
|
-
(action.variant === react_core_1.ButtonVariant.primary ||
|
178
|
-
action.variant === react_core_1.ButtonVariant.secondary ||
|
179
|
-
action.variant === react_core_1.ButtonVariant.danger));
|
180
|
-
});
|
181
|
-
dropdownActions_1 = dropdownActions_1 !== null && dropdownActions_1 !== void 0 ? dropdownActions_1 : [];
|
182
|
-
while (dropdownActions_1.length && dropdownActions_1[0].type === TypedActionType.seperator)
|
183
|
-
dropdownActions_1.shift();
|
184
|
-
while (dropdownActions_1.length &&
|
185
|
-
dropdownActions_1[dropdownActions_1.length - 1].type === TypedActionType.seperator)
|
186
|
-
dropdownActions_1.pop();
|
187
|
-
return dropdownActions_1;
|
188
|
-
}
|
189
|
-
}, [collapseButtons, actions]);
|
190
|
-
return __spreadArray(__spreadArray([], __read(buttonActions.map(function (buttonAction) {
|
191
|
-
switch (buttonAction.type) {
|
192
|
-
case TypedActionType.button:
|
193
|
-
return {
|
194
|
-
title: (0, jsx_runtime_1.jsx)(TypedActionsButtons_1.TypedActionButton, { action: buttonAction }),
|
195
|
-
isOutsideDropdown: true,
|
196
|
-
};
|
197
|
-
case TypedActionType.single:
|
198
|
-
return {
|
199
|
-
title: ((0, jsx_runtime_1.jsx)(TypedActionsButtons_1.TypedActionButton, { action: __assign(__assign({}, buttonAction), { tooltip: buttonAction.label }), selectedItem: props.item, iconOnly: true })),
|
200
|
-
isOutsideDropdown: true,
|
201
|
-
};
|
202
|
-
case TypedActionType.bulk:
|
203
|
-
return {
|
204
|
-
title: ((0, jsx_runtime_1.jsx)(TypedActionsButtons_1.TypedActionButton, { action: buttonAction, selectedItems: props.item ? [props.item] : [] })),
|
205
|
-
isOutsideDropdown: true,
|
206
|
-
};
|
207
|
-
default:
|
208
|
-
return null;
|
209
|
-
}
|
210
|
-
})), false), __read(dropdownActions.map(function (buttonAction) {
|
211
|
-
switch (buttonAction.type) {
|
212
|
-
case TypedActionType.button: {
|
213
|
-
var Icon = buttonAction.icon;
|
214
|
-
return {
|
215
|
-
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 })] }))),
|
216
|
-
onClick: function () {
|
217
|
-
buttonAction.onClick();
|
218
|
-
},
|
219
|
-
};
|
220
|
-
}
|
221
|
-
case TypedActionType.single: {
|
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;
|
228
|
-
return {
|
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);
|
232
|
-
},
|
233
|
-
};
|
234
|
-
}
|
235
|
-
case TypedActionType.bulk: {
|
236
|
-
var Icon = buttonAction.icon;
|
237
|
-
return {
|
238
|
-
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 })] }))),
|
239
|
-
onClick: function () {
|
240
|
-
buttonAction.onClick([props.item]);
|
241
|
-
},
|
242
|
-
};
|
243
|
-
}
|
244
|
-
default:
|
245
|
-
return { isSeparator: true };
|
246
|
-
}
|
247
|
-
})), false).filter(function (i) { return i !== null; });
|
248
|
-
}
|
249
|
-
exports.useTypedActionsToTableActions = useTypedActionsToTableActions;
|