@ansible/ansible-ui-framework 0.0.232 → 0.0.233
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/BulkActionDialog.js +2 -2
- package/cjs/PageBody.js +1 -1
- package/cjs/PageDataList.js +1 -2
- package/cjs/PageHeader.js +2 -2
- package/cjs/PageTable.js +32 -8
- package/cjs/PageTableCard.js +87 -0
- package/cjs/PageTableCards.js +38 -0
- package/cjs/PageTableList.js +79 -0
- package/cjs/PageTableViewType.js +9 -0
- package/cjs/PageToolbar.js +25 -1
- package/cjs/TypedActions/TypedActions.js +13 -4
- package/cjs/components/Details.js +1 -1
- package/cjs/components/patternfly-colors.js +11 -1
- package/cjs/index.js +1 -1
- package/mjs/BulkActionDialog.js +2 -2
- package/mjs/PageBody.d.ts +1 -0
- package/mjs/PageBody.js +1 -1
- package/mjs/PageDataList.js +1 -2
- package/mjs/PageHeader.d.ts +1 -0
- package/mjs/PageHeader.js +2 -2
- package/mjs/PageTable.d.ts +9 -1
- package/mjs/PageTable.js +28 -7
- package/mjs/PageTableCard.d.ts +33 -0
- package/mjs/PageTableCard.js +69 -0
- package/mjs/PageTableCards.d.ts +4 -0
- package/mjs/PageTableCards.js +23 -0
- package/mjs/PageTableList.d.ts +6 -0
- package/mjs/PageTableList.js +62 -0
- package/mjs/PageTableViewType.d.ts +6 -0
- package/mjs/PageTableViewType.js +6 -0
- package/mjs/PageToolbar.d.ts +3 -0
- package/mjs/PageToolbar.js +27 -3
- package/mjs/TypedActions/TypedActions.d.ts +3 -0
- package/mjs/TypedActions/TypedActions.js +14 -5
- package/mjs/components/Details.js +2 -2
- package/mjs/components/patternfly-colors.d.ts +10 -0
- package/mjs/components/patternfly-colors.js +10 -0
- package/mjs/index.d.ts +1 -1
- package/mjs/index.js +1 -1
- package/package.json +1 -1
- package/cjs/PageCatalog.js +0 -178
- package/mjs/PageCatalog.d.ts +0 -113
- package/mjs/PageCatalog.js +0 -140
package/cjs/PageCatalog.js
DELETED
@@ -1,178 +0,0 @@
|
|
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
|
-
var __read = (this && this.__read) || function (o, n) {
|
14
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
15
|
-
if (!m) return o;
|
16
|
-
var i = m.call(o), r, ar = [], e;
|
17
|
-
try {
|
18
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
19
|
-
}
|
20
|
-
catch (error) { e = { error: error }; }
|
21
|
-
finally {
|
22
|
-
try {
|
23
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
24
|
-
}
|
25
|
-
finally { if (e) throw e.error; }
|
26
|
-
}
|
27
|
-
return ar;
|
28
|
-
};
|
29
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
30
|
-
exports.CardList = exports.CardSection = exports.CatalogCard = exports.CatalogCardListItemIcon = exports.CatalogCardItemType = exports.CatalogColor = exports.CatalogIconColor = exports.Catalog = void 0;
|
31
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
32
|
-
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
33
|
-
/* eslint-disable @typescript-eslint/no-empty-function */
|
34
|
-
var react_core_1 = require("@patternfly/react-core");
|
35
|
-
var react_icons_1 = require("@patternfly/react-icons");
|
36
|
-
var react_1 = require("react");
|
37
|
-
var Grid_1 = require("./components/Grid");
|
38
|
-
var IconWrapper_1 = require("./components/IconWrapper");
|
39
|
-
var Scrollable_1 = require("./components/Scrollable");
|
40
|
-
function Catalog(props) {
|
41
|
-
var keyFn = props.keyFn, items = props.items, itemToCardFn = props.itemToCardFn, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, itemActions = props.itemActions, showSelect = props.showSelect;
|
42
|
-
var catalogCards = (0, react_1.useMemo)(function () {
|
43
|
-
var _a;
|
44
|
-
return ((0, jsx_runtime_1.jsx)(Grid_1.Grid, __assign({ size: (_a = props.cardWidth) !== null && _a !== void 0 ? _a : 470 }, { children: items.map(function (item) { return ((0, jsx_runtime_1.jsx)(CatalogCard, { item: item, itemToCardFn: itemToCardFn, isSelected: isSelected, selectItem: selectItem, unselectItem: unselectItem, itemActions: itemActions, showSelect: showSelect }, keyFn(item))); }) })));
|
45
|
-
}, [
|
46
|
-
props.cardWidth,
|
47
|
-
items,
|
48
|
-
keyFn,
|
49
|
-
itemToCardFn,
|
50
|
-
isSelected,
|
51
|
-
selectItem,
|
52
|
-
unselectItem,
|
53
|
-
itemActions,
|
54
|
-
showSelect,
|
55
|
-
]);
|
56
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ style: { flexGrow: 1 } }, { children: (0, jsx_runtime_1.jsx)("div", { children: catalogCards }) })));
|
57
|
-
}
|
58
|
-
exports.Catalog = Catalog;
|
59
|
-
var CatalogIconColor;
|
60
|
-
(function (CatalogIconColor) {
|
61
|
-
CatalogIconColor["red"] = "red";
|
62
|
-
CatalogIconColor["green"] = "green";
|
63
|
-
CatalogIconColor["blue"] = "blue";
|
64
|
-
CatalogIconColor["yellow"] = "yellow";
|
65
|
-
})(CatalogIconColor = exports.CatalogIconColor || (exports.CatalogIconColor = {}));
|
66
|
-
var CatalogColor;
|
67
|
-
(function (CatalogColor) {
|
68
|
-
CatalogColor["blue"] = "blue";
|
69
|
-
CatalogColor["cyan"] = "cyan";
|
70
|
-
CatalogColor["green"] = "green";
|
71
|
-
CatalogColor["orange"] = "orange";
|
72
|
-
CatalogColor["purple"] = "purple";
|
73
|
-
CatalogColor["red"] = "red";
|
74
|
-
CatalogColor["grey"] = "grey";
|
75
|
-
})(CatalogColor = exports.CatalogColor || (exports.CatalogColor = {}));
|
76
|
-
var CatalogCardItemType;
|
77
|
-
(function (CatalogCardItemType) {
|
78
|
-
CatalogCardItemType["Description"] = "description";
|
79
|
-
CatalogCardItemType["List"] = "list";
|
80
|
-
})(CatalogCardItemType = exports.CatalogCardItemType || (exports.CatalogCardItemType = {}));
|
81
|
-
var CatalogCardListItemIcon;
|
82
|
-
(function (CatalogCardListItemIcon) {
|
83
|
-
CatalogCardListItemIcon["Checkmark"] = "checkmark";
|
84
|
-
CatalogCardListItemIcon["Plus"] = "plus";
|
85
|
-
CatalogCardListItemIcon["CheckCircle"] = "check-circle";
|
86
|
-
CatalogCardListItemIcon["ExclamationCircle"] = "exclamation-circle";
|
87
|
-
})(CatalogCardListItemIcon = exports.CatalogCardListItemIcon || (exports.CatalogCardListItemIcon = {}));
|
88
|
-
function CatalogCard(props) {
|
89
|
-
var _a;
|
90
|
-
var t = props.t;
|
91
|
-
t = t ? t : function (t) { return t; };
|
92
|
-
var item = props.item, itemToCardFn = props.itemToCardFn, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, itemActions = props.itemActions, showSelect = props.showSelect;
|
93
|
-
var card = (0, react_1.useMemo)(function () { return itemToCardFn(item); }, [item, itemToCardFn]);
|
94
|
-
var _b = __read((0, react_1.useState)(false), 2), isOpen = _b[0], setIsOpen = _b[1];
|
95
|
-
var onSelect = (0, react_1.useCallback)(function () { }, []);
|
96
|
-
var onClick = (0, react_1.useCallback)(function () {
|
97
|
-
if (isSelected(item)) {
|
98
|
-
unselectItem(item);
|
99
|
-
}
|
100
|
-
else {
|
101
|
-
selectItem(item);
|
102
|
-
}
|
103
|
-
}, [isSelected, item, selectItem, unselectItem]);
|
104
|
-
var showDropdown = itemActions !== undefined && itemActions.length > 0;
|
105
|
-
var showActions = showSelect || showDropdown;
|
106
|
-
var dropdownItems = (0, react_1.useMemo)(function () {
|
107
|
-
return itemActions === null || itemActions === void 0 ? void 0 : itemActions.map(function (itemAction, index) {
|
108
|
-
// if (isItemActionClick(itemAction)) {
|
109
|
-
// return (
|
110
|
-
// <DropdownItem
|
111
|
-
// key={itemAction.label}
|
112
|
-
// onClick={() => {
|
113
|
-
// itemAction.onClick(item)
|
114
|
-
// setIsOpen(false)
|
115
|
-
// }}
|
116
|
-
// >
|
117
|
-
// {itemAction.label}
|
118
|
-
// </DropdownItem>
|
119
|
-
// )
|
120
|
-
// }
|
121
|
-
return (0, jsx_runtime_1.jsx)(react_core_1.DropdownSeparator, {}, index);
|
122
|
-
});
|
123
|
-
}, [itemActions]);
|
124
|
-
var disabled = !card.onClick;
|
125
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.Card, __assign({ id: card.id, onClick: card.onClick, isFlat: true, isLarge: true, isSelectable: !disabled, isRounded: true, style: {
|
126
|
-
transition: 'box-shadow 0.25s',
|
127
|
-
cursor: !disabled ? 'pointer' : undefined,
|
128
|
-
} }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.CardHeader, __assign({ style: { opacity: !disabled ? undefined : '0.5' } }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true, style: { width: '100%' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ isFilled: true }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [card.icon && ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
129
|
-
display: 'flex',
|
130
|
-
height: 40,
|
131
|
-
width: 40,
|
132
|
-
marginTop: -20,
|
133
|
-
marginBottom: -20,
|
134
|
-
marginRight: 12,
|
135
|
-
alignItems: 'center',
|
136
|
-
justifyItems: 'stretch',
|
137
|
-
} }, { children: (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "lg" }, { children: card.icon })) }))), (0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { children: card.title })] })) })), card.badge && card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { 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.SplitItem, { 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, __assign({ hasNoOffset: true }, { children: [showDropdown && ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { onSelect: onSelect, toggle: (0, jsx_runtime_1.jsx)(react_core_1.KebabToggle, { onToggle: setIsOpen }), isOpen: isOpen, isPlain: true, dropdownItems: dropdownItems, position: "right" })), showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { isChecked: isSelected(item), onChange: onClick, "aria-label": "card checkbox example", id: "check-1", name: "check1" }))] })))] })), card.items && ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(react_core_1.CardBody, __assign({ style: { paddingTop: 0, opacity: !disabled ? undefined : '0.5' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, { children: card.items &&
|
138
|
-
card.items.map(function (item, index) {
|
139
|
-
switch (item.type) {
|
140
|
-
case CatalogCardItemType.Description:
|
141
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListGroup, { children: (0, jsx_runtime_1.jsx)("span", __assign({ style: { opacity: 9 } }, { children: item.description })) }) }, index));
|
142
|
-
case CatalogCardItemType.List:
|
143
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ orientation: item.horizontal ? { sm: 'horizontal' } : undefined }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: item.title }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: (0, jsx_runtime_1.jsx)(CardList, { icon: item.icon, items: item.items }) })] }) }), index));
|
144
|
-
default:
|
145
|
-
return (0, jsx_runtime_1.jsx)(react_1.Fragment, {}, index);
|
146
|
-
}
|
147
|
-
}) }) })) })), (card.labels || card.learnMore) && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ style: {
|
148
|
-
display: 'flex',
|
149
|
-
flexDirection: 'row',
|
150
|
-
alignItems: 'end',
|
151
|
-
gap: 16,
|
152
|
-
} }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ style: { flexGrow: 1, opacity: !disabled ? undefined : '0.5' } }, { children: card.labels && ((0, jsx_runtime_1.jsx)(react_core_1.LabelGroup, { children: card.labels.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: item.color }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: item.label, style: { minWidth: 0 } }) }), item.label)); }) })) })), card.learnMore && ((0, jsx_runtime_1.jsxs)(react_core_1.Button, __assign({ variant: "link", icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkAltIcon, {}), isInline: true, onClick: function () { return window.open(card.learnMore, '_blank'); } }, { children: ["\u00A0", t('Learn more')] })))] })) })), card.alertTitle && ((0, jsx_runtime_1.jsx)(react_core_1.Alert, __assign({ title: card.alertTitle, isInline: true, variant: card.alertVariant }, { children: card.alertContent })))] }), (_a = card.id) !== null && _a !== void 0 ? _a : card.title));
|
153
|
-
}
|
154
|
-
exports.CatalogCard = CatalogCard;
|
155
|
-
function CardSection(props) {
|
156
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.Stack, { children: [props.title && ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h6", style: { paddingBottom: 8 } }, { children: props.title })) })), props.children] }));
|
157
|
-
}
|
158
|
-
exports.CardSection = CardSection;
|
159
|
-
function CardList(props) {
|
160
|
-
var items = props.items, icon = props.icon;
|
161
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.List, __assign({ isPlain: true }, { children: items === null || items === void 0 ? void 0 : items.map(function (listItem, index) {
|
162
|
-
var itemIcon;
|
163
|
-
if (listItem.icon) {
|
164
|
-
itemIcon = ((0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "md", noPadding: true }, { children: listItem.icon })));
|
165
|
-
}
|
166
|
-
else if (icon) {
|
167
|
-
itemIcon = ((0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "md", noPadding: true }, { children: icon })));
|
168
|
-
}
|
169
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.ListItem, __assign({ icon: itemIcon, style: { opacity: 0.85 } }, { children: [listItem.text, listItem.help && (
|
170
|
-
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
|
171
|
-
(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: listItem.helpTitle, bodyContent: listItem.help, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", style: {
|
172
|
-
padding: 0,
|
173
|
-
marginLeft: '8px',
|
174
|
-
verticalAlign: 'middle',
|
175
|
-
} }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) })) })) })))] }), index));
|
176
|
-
}) })));
|
177
|
-
}
|
178
|
-
exports.CardList = CardList;
|
package/mjs/PageCatalog.d.ts
DELETED
@@ -1,113 +0,0 @@
|
|
1
|
-
import { ReactNode } from 'react';
|
2
|
-
import { ITypedAction } from './TypedActions';
|
3
|
-
declare type CatalogFilterValue = string;
|
4
|
-
interface ICatalogFilterGroup {
|
5
|
-
id: string;
|
6
|
-
label: string;
|
7
|
-
filters?: ICatalogFilter[];
|
8
|
-
}
|
9
|
-
interface ICatalogFilter {
|
10
|
-
id?: string;
|
11
|
-
label?: string;
|
12
|
-
value: CatalogFilterValue;
|
13
|
-
filters?: ICatalogFilter[];
|
14
|
-
}
|
15
|
-
export declare function Catalog<T extends object>(props: {
|
16
|
-
keyFn: (item: T) => string;
|
17
|
-
items: T[];
|
18
|
-
itemToCardFn: (item: T) => ICatalogCard;
|
19
|
-
filterGroups?: ICatalogFilterGroup[];
|
20
|
-
onBack?: () => void;
|
21
|
-
cardWidth?: number;
|
22
|
-
selectItem: (item: T) => void;
|
23
|
-
unselectItem: (item: T) => void;
|
24
|
-
isSelected: (item: T) => boolean;
|
25
|
-
itemActions?: ITypedAction<T>[];
|
26
|
-
showSelect: boolean;
|
27
|
-
}): JSX.Element;
|
28
|
-
export declare enum CatalogIconColor {
|
29
|
-
'red' = "red",
|
30
|
-
'green' = "green",
|
31
|
-
'blue' = "blue",
|
32
|
-
'yellow' = "yellow"
|
33
|
-
}
|
34
|
-
export declare enum CatalogColor {
|
35
|
-
blue = "blue",
|
36
|
-
cyan = "cyan",
|
37
|
-
green = "green",
|
38
|
-
orange = "orange",
|
39
|
-
purple = "purple",
|
40
|
-
red = "red",
|
41
|
-
grey = "grey"
|
42
|
-
}
|
43
|
-
export interface ICatalogCard {
|
44
|
-
id: string;
|
45
|
-
icon?: ReactNode;
|
46
|
-
title: string;
|
47
|
-
items?: CatalogCardItem[];
|
48
|
-
labels?: {
|
49
|
-
label: string;
|
50
|
-
color?: CatalogColor;
|
51
|
-
}[];
|
52
|
-
learnMore?: string;
|
53
|
-
badge?: string;
|
54
|
-
badgeColor?: CatalogColor;
|
55
|
-
badgeTooltip?: string;
|
56
|
-
badgeTooltipTitle?: string;
|
57
|
-
alertTitle?: string;
|
58
|
-
alertContent?: ReactNode;
|
59
|
-
alertVariant?: 'success' | 'danger' | 'warning' | 'info' | 'default';
|
60
|
-
onClick?: () => void;
|
61
|
-
}
|
62
|
-
export interface ICatalogCardFeatureGroup {
|
63
|
-
title: string;
|
64
|
-
features: string[];
|
65
|
-
}
|
66
|
-
export declare enum CatalogCardItemType {
|
67
|
-
Description = "description",
|
68
|
-
List = "list"
|
69
|
-
}
|
70
|
-
export interface ICatalogCardDescription {
|
71
|
-
type: CatalogCardItemType.Description;
|
72
|
-
title?: string;
|
73
|
-
description: string;
|
74
|
-
}
|
75
|
-
export interface ICatalogCardList {
|
76
|
-
type: CatalogCardItemType.List;
|
77
|
-
title: string;
|
78
|
-
items: ICatalogCardListItem[];
|
79
|
-
horizontal?: boolean;
|
80
|
-
icon?: ReactNode;
|
81
|
-
}
|
82
|
-
export declare enum CatalogCardListItemIcon {
|
83
|
-
Checkmark = "checkmark",
|
84
|
-
Plus = "plus",
|
85
|
-
CheckCircle = "check-circle",
|
86
|
-
ExclamationCircle = "exclamation-circle"
|
87
|
-
}
|
88
|
-
export interface ICatalogCardListItem {
|
89
|
-
icon?: ReactNode;
|
90
|
-
text: string;
|
91
|
-
helpTitle?: string;
|
92
|
-
help?: ReactNode;
|
93
|
-
}
|
94
|
-
export declare type CatalogCardItem = ICatalogCardDescription | ICatalogCardList;
|
95
|
-
export declare function CatalogCard<T extends object>(props: {
|
96
|
-
item: T;
|
97
|
-
itemToCardFn: (item: T) => ICatalogCard;
|
98
|
-
isSelected: (item: T) => boolean;
|
99
|
-
selectItem: (item: T) => void;
|
100
|
-
unselectItem: (item: T) => void;
|
101
|
-
itemActions?: ITypedAction<T>[];
|
102
|
-
showSelect: boolean;
|
103
|
-
t?: (t: string) => string;
|
104
|
-
}): JSX.Element;
|
105
|
-
export declare function CardSection(props: {
|
106
|
-
title?: string;
|
107
|
-
children: ReactNode;
|
108
|
-
}): JSX.Element;
|
109
|
-
export declare function CardList(props: {
|
110
|
-
icon?: ReactNode;
|
111
|
-
items: ICatalogCardListItem[];
|
112
|
-
}): JSX.Element;
|
113
|
-
export {};
|
package/mjs/PageCatalog.js
DELETED
@@ -1,140 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
3
|
-
/* eslint-disable @typescript-eslint/no-empty-function */
|
4
|
-
import { Alert, Button, Card, CardActions, CardBody, CardFooter, CardHeader, CardTitle, Checkbox, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Dropdown, DropdownSeparator, KebabToggle, Label, LabelGroup, List, ListItem, PageSection, Popover, Split, SplitItem, Stack, StackItem, Title, Truncate, } from '@patternfly/react-core';
|
5
|
-
import { ExternalLinkAltIcon, OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
|
6
|
-
import { Fragment, useCallback, useMemo, useState } from 'react';
|
7
|
-
import { Grid } from './components/Grid';
|
8
|
-
import { IconWrapper } from './components/IconWrapper';
|
9
|
-
import { Scrollable } from './components/Scrollable';
|
10
|
-
export function Catalog(props) {
|
11
|
-
const { keyFn, items, itemToCardFn, isSelected, selectItem, unselectItem, itemActions, showSelect, } = props;
|
12
|
-
const catalogCards = useMemo(() => {
|
13
|
-
return (_jsx(Grid, { size: props.cardWidth ?? 470, children: items.map((item) => (_jsx(CatalogCard, { item: item, itemToCardFn: itemToCardFn, isSelected: isSelected, selectItem: selectItem, unselectItem: unselectItem, itemActions: itemActions, showSelect: showSelect }, keyFn(item)))) }));
|
14
|
-
}, [
|
15
|
-
props.cardWidth,
|
16
|
-
items,
|
17
|
-
keyFn,
|
18
|
-
itemToCardFn,
|
19
|
-
isSelected,
|
20
|
-
selectItem,
|
21
|
-
unselectItem,
|
22
|
-
itemActions,
|
23
|
-
showSelect,
|
24
|
-
]);
|
25
|
-
return (_jsx(PageSection, { style: { flexGrow: 1 }, children: _jsx("div", { children: catalogCards }) }));
|
26
|
-
}
|
27
|
-
export var CatalogIconColor;
|
28
|
-
(function (CatalogIconColor) {
|
29
|
-
CatalogIconColor["red"] = "red";
|
30
|
-
CatalogIconColor["green"] = "green";
|
31
|
-
CatalogIconColor["blue"] = "blue";
|
32
|
-
CatalogIconColor["yellow"] = "yellow";
|
33
|
-
})(CatalogIconColor || (CatalogIconColor = {}));
|
34
|
-
export var CatalogColor;
|
35
|
-
(function (CatalogColor) {
|
36
|
-
CatalogColor["blue"] = "blue";
|
37
|
-
CatalogColor["cyan"] = "cyan";
|
38
|
-
CatalogColor["green"] = "green";
|
39
|
-
CatalogColor["orange"] = "orange";
|
40
|
-
CatalogColor["purple"] = "purple";
|
41
|
-
CatalogColor["red"] = "red";
|
42
|
-
CatalogColor["grey"] = "grey";
|
43
|
-
})(CatalogColor || (CatalogColor = {}));
|
44
|
-
export var CatalogCardItemType;
|
45
|
-
(function (CatalogCardItemType) {
|
46
|
-
CatalogCardItemType["Description"] = "description";
|
47
|
-
CatalogCardItemType["List"] = "list";
|
48
|
-
})(CatalogCardItemType || (CatalogCardItemType = {}));
|
49
|
-
export var CatalogCardListItemIcon;
|
50
|
-
(function (CatalogCardListItemIcon) {
|
51
|
-
CatalogCardListItemIcon["Checkmark"] = "checkmark";
|
52
|
-
CatalogCardListItemIcon["Plus"] = "plus";
|
53
|
-
CatalogCardListItemIcon["CheckCircle"] = "check-circle";
|
54
|
-
CatalogCardListItemIcon["ExclamationCircle"] = "exclamation-circle";
|
55
|
-
})(CatalogCardListItemIcon || (CatalogCardListItemIcon = {}));
|
56
|
-
export function CatalogCard(props) {
|
57
|
-
let { t } = props;
|
58
|
-
t = t ? t : (t) => t;
|
59
|
-
const { item, itemToCardFn, isSelected, selectItem, unselectItem, itemActions, showSelect } = props;
|
60
|
-
const card = useMemo(() => itemToCardFn(item), [item, itemToCardFn]);
|
61
|
-
const [isOpen, setIsOpen] = useState(false);
|
62
|
-
const onSelect = useCallback(() => { }, []);
|
63
|
-
const onClick = useCallback(() => {
|
64
|
-
if (isSelected(item)) {
|
65
|
-
unselectItem(item);
|
66
|
-
}
|
67
|
-
else {
|
68
|
-
selectItem(item);
|
69
|
-
}
|
70
|
-
}, [isSelected, item, selectItem, unselectItem]);
|
71
|
-
const showDropdown = itemActions !== undefined && itemActions.length > 0;
|
72
|
-
const showActions = showSelect || showDropdown;
|
73
|
-
const dropdownItems = useMemo(() => itemActions?.map((itemAction, index) => {
|
74
|
-
// if (isItemActionClick(itemAction)) {
|
75
|
-
// return (
|
76
|
-
// <DropdownItem
|
77
|
-
// key={itemAction.label}
|
78
|
-
// onClick={() => {
|
79
|
-
// itemAction.onClick(item)
|
80
|
-
// setIsOpen(false)
|
81
|
-
// }}
|
82
|
-
// >
|
83
|
-
// {itemAction.label}
|
84
|
-
// </DropdownItem>
|
85
|
-
// )
|
86
|
-
// }
|
87
|
-
return _jsx(DropdownSeparator, {}, index);
|
88
|
-
}), [itemActions]);
|
89
|
-
const disabled = !card.onClick;
|
90
|
-
return (_jsxs(Card, { id: card.id, onClick: card.onClick, isFlat: true, isLarge: true, isSelectable: !disabled, isRounded: true, style: {
|
91
|
-
transition: 'box-shadow 0.25s',
|
92
|
-
cursor: !disabled ? 'pointer' : undefined,
|
93
|
-
}, children: [_jsxs(CardHeader, { style: { opacity: !disabled ? undefined : '0.5' }, children: [_jsxs(Split, { hasGutter: true, style: { width: '100%' }, children: [_jsx(SplitItem, { isFilled: true, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [card.icon && (_jsx("div", { style: {
|
94
|
-
display: 'flex',
|
95
|
-
height: 40,
|
96
|
-
width: 40,
|
97
|
-
marginTop: -20,
|
98
|
-
marginBottom: -20,
|
99
|
-
marginRight: 12,
|
100
|
-
alignItems: 'center',
|
101
|
-
justifyItems: 'stretch',
|
102
|
-
}, children: _jsx(IconWrapper, { size: "lg", children: card.icon }) })), _jsx(CardTitle, { children: card.title })] }) }), card.badge && card.badgeTooltip && (_jsx(SplitItem, { children: _jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsx(Popover, { headerContent: card.badgeTooltipTitle, bodyContent: card.badgeTooltip, removeFindDomNode: true, children: _jsx(Label, { color: card.badgeColor, children: card.badge }) }) }) })), card.badge && !card.badgeTooltip && (_jsx(SplitItem, { children: _jsx(Label, { color: card.badgeColor, children: card.badge }) }))] }), showActions && (_jsxs(CardActions, { hasNoOffset: true, children: [showDropdown && (_jsx(Dropdown, { onSelect: onSelect, toggle: _jsx(KebabToggle, { onToggle: setIsOpen }), isOpen: isOpen, isPlain: true, dropdownItems: dropdownItems, position: "right" })), showSelect && (_jsx(Checkbox, { isChecked: isSelected(item), onChange: onClick, "aria-label": "card checkbox example", id: "check-1", name: "check1" }))] }))] }), card.items && (_jsx(Scrollable, { children: _jsx(CardBody, { style: { paddingTop: 0, opacity: !disabled ? undefined : '0.5' }, children: _jsx(DescriptionList, { children: card.items &&
|
103
|
-
card.items.map((item, index) => {
|
104
|
-
switch (item.type) {
|
105
|
-
case CatalogCardItemType.Description:
|
106
|
-
return (_jsx(DescriptionList, { children: _jsx(DescriptionListGroup, { children: _jsx("span", { style: { opacity: 9 }, children: item.description }) }) }, index));
|
107
|
-
case CatalogCardItemType.List:
|
108
|
-
return (_jsx(DescriptionList, { orientation: item.horizontal ? { sm: 'horizontal' } : undefined, children: _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: item.title }), _jsx(DescriptionListDescription, { children: _jsx(CardList, { icon: item.icon, items: item.items }) })] }) }, index));
|
109
|
-
default:
|
110
|
-
return _jsx(Fragment, {}, index);
|
111
|
-
}
|
112
|
-
}) }) }) })), (card.labels || card.learnMore) && (_jsx(CardFooter, { children: _jsxs("div", { style: {
|
113
|
-
display: 'flex',
|
114
|
-
flexDirection: 'row',
|
115
|
-
alignItems: 'end',
|
116
|
-
gap: 16,
|
117
|
-
}, children: [_jsx("div", { style: { flexGrow: 1, opacity: !disabled ? undefined : '0.5' }, children: card.labels && (_jsx(LabelGroup, { children: card.labels.map((item) => (_jsx(Label, { color: item.color, children: _jsx(Truncate, { content: item.label, style: { minWidth: 0 } }) }, item.label))) })) }), card.learnMore && (_jsxs(Button, { variant: "link", icon: _jsx(ExternalLinkAltIcon, {}), isInline: true, onClick: () => window.open(card.learnMore, '_blank'), children: ["\u00A0", t('Learn more')] }))] }) })), card.alertTitle && (_jsx(Alert, { title: card.alertTitle, isInline: true, variant: card.alertVariant, children: card.alertContent }))] }, card.id ?? card.title));
|
118
|
-
}
|
119
|
-
export function CardSection(props) {
|
120
|
-
return (_jsxs(Stack, { children: [props.title && (_jsx(StackItem, { children: _jsx(Title, { headingLevel: "h6", style: { paddingBottom: 8 }, children: props.title }) })), props.children] }));
|
121
|
-
}
|
122
|
-
export function CardList(props) {
|
123
|
-
const { items, icon } = props;
|
124
|
-
return (_jsx(List, { isPlain: true, children: items?.map((listItem, index) => {
|
125
|
-
let itemIcon;
|
126
|
-
if (listItem.icon) {
|
127
|
-
itemIcon = (_jsx(IconWrapper, { size: "md", noPadding: true, children: listItem.icon }));
|
128
|
-
}
|
129
|
-
else if (icon) {
|
130
|
-
itemIcon = (_jsx(IconWrapper, { size: "md", noPadding: true, children: icon }));
|
131
|
-
}
|
132
|
-
return (_jsxs(ListItem, { icon: itemIcon, style: { opacity: 0.85 }, children: [listItem.text, listItem.help && (
|
133
|
-
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
|
134
|
-
_jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsx(Popover, { headerContent: listItem.helpTitle, bodyContent: listItem.help, removeFindDomNode: true, children: _jsx(Button, { variant: "link", style: {
|
135
|
-
padding: 0,
|
136
|
-
marginLeft: '8px',
|
137
|
-
verticalAlign: 'middle',
|
138
|
-
}, children: _jsx(OutlinedQuestionCircleIcon, {}) }) }) }))] }, index));
|
139
|
-
}) }));
|
140
|
-
}
|