@ansible/ansible-ui-framework 0.0.536 → 0.0.538
Sign up to get free protection for your applications and to get access to all the features.
@@ -8,6 +8,7 @@ export interface IPageActionCommon {
|
|
8
8
|
shortLabel?: string;
|
9
9
|
tooltip?: string;
|
10
10
|
isDanger?: boolean;
|
11
|
+
ouiaId?: string;
|
11
12
|
}
|
12
13
|
export interface IPageActionSeperator {
|
13
14
|
type: PageActionType.seperator;
|
@@ -23,7 +24,7 @@ type IPageActionWithOnClick = IPageActionCommon & {
|
|
23
24
|
type: PageActionType.button;
|
24
25
|
variant?: ButtonVariant;
|
25
26
|
isDisabled?: string | undefined;
|
26
|
-
onClick: () => void;
|
27
|
+
onClick: (() => void) | (() => Promise<unknown>);
|
27
28
|
href?: never;
|
28
29
|
};
|
29
30
|
export type IPageActionButton = IPageActionWithLink | IPageActionWithOnClick;
|
@@ -43,7 +44,7 @@ type IPageSingleActionWithLink<T extends object> = IPageActionCommon & {
|
|
43
44
|
type IPageSingleActionWithOnClick<T extends object> = IPageActionCommon & {
|
44
45
|
type: PageActionType.single;
|
45
46
|
variant?: ButtonVariant;
|
46
|
-
onClick: (item: T) => void;
|
47
|
+
onClick: (item: T) => void | (() => Promise<unknown>);
|
47
48
|
href?: never;
|
48
49
|
isDisabled?: (item: T) => string | undefined;
|
49
50
|
isHidden?: (item: T) => boolean;
|
@@ -64,9 +64,7 @@ function PageDropdownAction(props) {
|
|
64
64
|
var toggleIcon = Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : label;
|
65
65
|
var isPrimary = hasBulkActions && !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length);
|
66
66
|
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: isPrimary ? 'primary' : undefined, toggleIndicator: null, style: isPrimary && !label ? { color: 'var(--pf-global--Color--light-100)' } : {} }, { children: toggleIcon }))) : ((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
|
-
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: {
|
68
|
-
zIndex: 201,
|
69
|
-
} }));
|
67
|
+
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 } }));
|
70
68
|
return tooltip && (iconOnly || isDisabled) ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: dropdown }))) : (__assign({}, dropdown));
|
71
69
|
}
|
72
70
|
exports.PageDropdownAction = PageDropdownAction;
|
@@ -51,19 +51,13 @@ function PageTableCard(props) {
|
|
51
51
|
transition: 'box-shadow 0.25s',
|
52
52
|
cursor: 'default',
|
53
53
|
maxWidth: '100%',
|
54
|
-
|
55
|
-
} }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.CardHeader, __assign({ style: { display: 'flex', flexWrap: 'nowrap', maxWidth: '100%', overflow: 'hidden' } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: {
|
56
|
-
display: 'flex',
|
57
|
-
flexWrap: 'nowrap',
|
58
|
-
maxWidth: '100%',
|
59
|
-
overflow: 'hidden',
|
60
|
-
} }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: {
|
54
|
+
} }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.CardHeader, __assign({ style: { display: 'flex', flexWrap: 'nowrap', maxWidth: '100%' } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', flexWrap: 'nowrap', maxWidth: '100%' } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: {
|
61
55
|
display: 'flex',
|
62
56
|
flexWrap: 'wrap',
|
63
57
|
alignItems: 'center',
|
64
58
|
gap: 16,
|
65
59
|
maxWidth: '100%',
|
66
|
-
} }, { children: [card.icon && (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "xl" }, { children: card.icon })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: '100%' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { children: card.title }), card.subtitle ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: card.subtitle }))) : (defaultCardSubtitle && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: defaultCardSubtitle }))))] }))] })), card.badge && card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: card.badgeTooltipTitle, bodyContent: card.badgeTooltip, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) })) })) })), card.badge && !card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) }))] })), showActions && ((0, jsx_runtime_1.jsxs)(react_core_1.CardActions, { children: [itemActions && itemActions.length && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: itemActions, position: react_core_1.DropdownPosition.right, selectedItem: item, iconOnly: true, collapse: "always" })), showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onChange: onSelectClick,
|
60
|
+
} }, { children: [card.icon && (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "xl" }, { children: card.icon })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: '100%' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: card.title }) }), card.subtitle ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: card.subtitle }))) : (defaultCardSubtitle && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: defaultCardSubtitle }))))] }))] })), card.badge && card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: card.badgeTooltipTitle, bodyContent: card.badgeTooltip, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) })) })) })), card.badge && !card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) }))] })), showActions && ((0, jsx_runtime_1.jsxs)(react_core_1.CardActions, { children: [itemActions && itemActions.length && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: itemActions, position: react_core_1.DropdownPosition.right, selectedItem: item, iconOnly: true, collapse: "always" })), showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onChange: onSelectClick,
|
67
61
|
// aria-label="card checkbox example"
|
68
62
|
id: "check-1" }))] }))] })), card.cardBody, card.labels && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
69
63
|
display: 'flex',
|