@ansible/ansible-ui-framework 0.0.231 → 0.0.233

Sign up to get free protection for your applications and to get access to all the features.
Files changed (43) hide show
  1. package/cjs/BulkActionDialog.js +2 -2
  2. package/cjs/PageBody.js +1 -1
  3. package/cjs/PageDataList.js +1 -2
  4. package/cjs/PageHeader.js +2 -2
  5. package/cjs/PageTable.js +32 -8
  6. package/cjs/PageTableCard.js +87 -0
  7. package/cjs/PageTableCards.js +38 -0
  8. package/cjs/PageTableList.js +79 -0
  9. package/cjs/PageTableViewType.js +9 -0
  10. package/cjs/PageToolbar.js +25 -1
  11. package/cjs/TypedActions/TypedActions.js +13 -4
  12. package/cjs/components/Details.js +1 -1
  13. package/cjs/components/patternfly-colors.js +11 -1
  14. package/cjs/index.js +1 -1
  15. package/mjs/BulkActionDialog.js +2 -2
  16. package/mjs/PageBody.d.ts +1 -0
  17. package/mjs/PageBody.js +1 -1
  18. package/mjs/PageDataList.js +1 -2
  19. package/mjs/PageHeader.d.ts +1 -0
  20. package/mjs/PageHeader.js +2 -2
  21. package/mjs/PageTable.d.ts +9 -1
  22. package/mjs/PageTable.js +28 -7
  23. package/mjs/PageTableCard.d.ts +33 -0
  24. package/mjs/PageTableCard.js +69 -0
  25. package/mjs/PageTableCards.d.ts +4 -0
  26. package/mjs/PageTableCards.js +23 -0
  27. package/mjs/PageTableList.d.ts +6 -0
  28. package/mjs/PageTableList.js +62 -0
  29. package/mjs/PageTableViewType.d.ts +6 -0
  30. package/mjs/PageTableViewType.js +6 -0
  31. package/mjs/PageToolbar.d.ts +3 -0
  32. package/mjs/PageToolbar.js +27 -3
  33. package/mjs/TypedActions/TypedActions.d.ts +3 -0
  34. package/mjs/TypedActions/TypedActions.js +14 -5
  35. package/mjs/components/Details.js +2 -2
  36. package/mjs/components/patternfly-colors.d.ts +10 -0
  37. package/mjs/components/patternfly-colors.js +10 -0
  38. package/mjs/index.d.ts +1 -1
  39. package/mjs/index.js +1 -1
  40. package/package.json +1 -1
  41. package/cjs/PageCatalog.js +0 -178
  42. package/mjs/PageCatalog.d.ts +0 -113
  43. package/mjs/PageCatalog.js +0 -140
@@ -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;
@@ -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 {};
@@ -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
- }