@ansible/ansible-ui-framework 0.0.372 → 0.0.374
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/PageActions/PageAction.d.ts +38 -0
- package/cjs/PageActions/PageAction.js +2 -0
- package/cjs/PageActions/PageActionType.d.ts +7 -0
- package/cjs/PageActions/PageActionType.js +11 -0
- package/cjs/PageActions/PageActions.d.ts +27 -0
- package/cjs/PageActions/PageActions.js +68 -0
- package/cjs/PageActions/PageBulkAction.d.ts +7 -0
- package/cjs/PageActions/PageBulkAction.js +35 -0
- package/cjs/PageActions/PageButtonAction.d.ts +8 -0
- package/cjs/PageActions/PageButtonAction.js +34 -0
- package/cjs/PageActions/PageDropdownAction.d.ts +15 -0
- package/cjs/PageActions/PageDropdownAction.js +125 -0
- package/cjs/PageActions/PagePinnedActions.d.ts +20 -0
- package/cjs/PageActions/PagePinnedActions.js +57 -0
- package/cjs/PageActions/PageSingleAction.d.ts +8 -0
- package/cjs/PageActions/PageSingleAction.js +35 -0
- package/cjs/PageDataList.d.ts +3 -3
- package/cjs/PageDataList.js +4 -3
- package/cjs/PageHeader.d.ts +1 -1
- package/cjs/PageHeader.js +3 -3
- package/cjs/PageTable.d.ts +3 -3
- package/cjs/PageTable.js +5 -5
- package/cjs/PageTableCard.d.ts +2 -2
- package/cjs/PageTableCard.js +2 -2
- package/cjs/PageTableList.d.ts +2 -2
- package/cjs/PageTableList.js +2 -2
- package/cjs/PageToolbar.d.ts +3 -3
- package/cjs/PageToolbar.js +4 -3
- package/cjs/index.d.ts +3 -1
- package/cjs/index.js +3 -1
- package/docs/components/PageHeader.md +1 -1
- package/package.json +1 -1
- package/cjs/TypedActions/TypedActions.d.ts +0 -68
- package/cjs/TypedActions/TypedActions.js +0 -136
- package/cjs/TypedActions/TypedActionsButtons.d.ts +0 -18
- package/cjs/TypedActions/TypedActionsButtons.js +0 -107
- package/cjs/TypedActions/index.d.ts +0 -2
- package/cjs/TypedActions/index.js +0 -18
package/cjs/PageTable.js
CHANGED
@@ -42,6 +42,8 @@ var LabelsCell_1 = require("./cells/LabelsCell");
|
|
42
42
|
var TextCell_1 = require("./cells/TextCell");
|
43
43
|
var Scrollable_1 = require("./components/Scrollable");
|
44
44
|
var useBreakPoint_1 = require("./components/useBreakPoint");
|
45
|
+
var PageActions_1 = require("./PageActions/PageActions");
|
46
|
+
var PageActionType_1 = require("./PageActions/PageActionType");
|
45
47
|
var PageBody_1 = require("./PageBody");
|
46
48
|
var PageColumnModal_1 = require("./PageColumnModal");
|
47
49
|
var PageHeader_1 = require("./PageHeader");
|
@@ -52,7 +54,6 @@ var PageTableList_1 = require("./PageTableList");
|
|
52
54
|
var PageTableViewType_1 = require("./PageTableViewType");
|
53
55
|
var PageToolbar_1 = require("./PageToolbar");
|
54
56
|
var Settings_1 = require("./Settings");
|
55
|
-
var TypedActions_1 = require("./TypedActions");
|
56
57
|
function TablePage(props) {
|
57
58
|
return ((0, jsx_runtime_1.jsxs)(PageLayout_1.PageLayout, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, __assign({}, props)), (0, jsx_runtime_1.jsx)(PageTable, __assign({}, props))] }));
|
58
59
|
}
|
@@ -77,7 +78,7 @@ function PageTable(props) {
|
|
77
78
|
// const { disableBodyPadding } = props
|
78
79
|
var toolbarActions = props.toolbarActions, filters = props.filters, error = props.error, itemCount = props.itemCount;
|
79
80
|
var _b = (0, PageColumnModal_1.useColumnModal)(props.tableColumns), openColumnModal = _b.openColumnModal, columnModal = _b.columnModal, managedColumns = _b.managedColumns;
|
80
|
-
var showSelect = (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return
|
81
|
+
var showSelect = (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; })) !==
|
81
82
|
undefined;
|
82
83
|
var hasTableViewType = !props.disableTableView;
|
83
84
|
var hasListViewType = !props.disableListView;
|
@@ -121,7 +122,7 @@ function PageTableView(props) {
|
|
121
122
|
var t = props.t;
|
122
123
|
t = t ? t : function (t) { return t; };
|
123
124
|
var showSelect = props.showSelect ||
|
124
|
-
(toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return
|
125
|
+
(toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; })) !==
|
125
126
|
undefined;
|
126
127
|
var containerRef = (0, react_1.useRef)(null);
|
127
128
|
var _a = __read((0, react_1.useState)({
|
@@ -242,8 +243,7 @@ function TableCells(props) {
|
|
242
243
|
paddingLeft: 8,
|
243
244
|
width: '0%',
|
244
245
|
right: 0,
|
245
|
-
|
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 }) })))] }));
|
246
|
+
}, isStickyColumn: true, stickyMinWidth: "0px", className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: rowActions, selectedItem: item, position: react_core_1.DropdownPosition.right, iconOnly: true }) })))] }));
|
247
247
|
}
|
248
248
|
var TableColumnSomething;
|
249
249
|
(function (TableColumnSomething) {
|
package/cjs/PageTableCard.d.ts
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
2
|
import { LabelColor } from './components/pfcolors';
|
3
|
+
import { IPageAction } from './PageActions/PageAction';
|
3
4
|
import { ITableColumn } from './PageTable';
|
4
|
-
import { ITypedAction } from './TypedActions';
|
5
5
|
export interface IPageTableCard {
|
6
6
|
id: string | number;
|
7
7
|
icon?: ReactNode;
|
@@ -26,7 +26,7 @@ export declare function PageTableCard<T extends object>(props: {
|
|
26
26
|
isSelected?: (item: T) => boolean;
|
27
27
|
selectItem?: (item: T) => void;
|
28
28
|
unselectItem?: (item: T) => void;
|
29
|
-
itemActions?:
|
29
|
+
itemActions?: IPageAction<T>[];
|
30
30
|
showSelect?: boolean;
|
31
31
|
defaultCardSubtitle?: ReactNode;
|
32
32
|
}): JSX.Element;
|
package/cjs/PageTableCard.js
CHANGED
@@ -30,8 +30,8 @@ var react_core_1 = require("@patternfly/react-core");
|
|
30
30
|
var react_1 = require("react");
|
31
31
|
var Details_1 = require("./components/Details");
|
32
32
|
var IconWrapper_1 = require("./components/IconWrapper");
|
33
|
+
var PageActions_1 = require("./PageActions/PageActions");
|
33
34
|
var PageTable_1 = require("./PageTable");
|
34
|
-
var TypedActions_1 = require("./TypedActions");
|
35
35
|
function PageTableCard(props) {
|
36
36
|
var _a;
|
37
37
|
var item = props.item, itemToCardFn = props.itemToCardFn, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, itemActions = props.itemActions, showSelect = props.showSelect, defaultCardSubtitle = props.defaultCardSubtitle;
|
@@ -63,7 +63,7 @@ function PageTableCard(props) {
|
|
63
63
|
alignItems: 'center',
|
64
64
|
gap: 16,
|
65
65
|
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)(
|
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,
|
67
67
|
// aria-label="card checkbox example"
|
68
68
|
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
69
|
display: 'flex',
|
package/cjs/PageTableList.d.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
|
+
import { IPageAction } from './PageActions/PageAction';
|
2
3
|
import { ITableColumn, PageTableProps } from './PageTable';
|
3
|
-
import { ITypedAction } from './TypedActions';
|
4
4
|
export type PageTableListProps<T extends object> = PageTableProps<T>;
|
5
5
|
export declare function PageTableList<T extends object>(props: PageTableListProps<T>): JSX.Element;
|
6
|
-
export declare function useColumnsToDataList<T extends object>(tableColumns: ITableColumn<T>[], keyFn: (item: T) => string | number, isSelected?: (item: T) => boolean, selectItem?: (item: T) => void, unselectItem?: (item: T) => void, rowActions?:
|
6
|
+
export declare function useColumnsToDataList<T extends object>(tableColumns: ITableColumn<T>[], keyFn: (item: T) => string | number, isSelected?: (item: T) => boolean, selectItem?: (item: T) => void, unselectItem?: (item: T) => void, rowActions?: IPageAction<T>[], defaultCardSubtitle?: ReactNode, showSelect?: boolean): (item: T) => ReactNode;
|
package/cjs/PageTableList.js
CHANGED
@@ -27,8 +27,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
27
27
|
var react_core_1 = require("@patternfly/react-core");
|
28
28
|
var react_1 = require("react");
|
29
29
|
var IconWrapper_1 = require("./components/IconWrapper");
|
30
|
+
var PageActions_1 = require("./PageActions/PageActions");
|
30
31
|
var PageTable_1 = require("./PageTable");
|
31
|
-
var TypedActions_1 = require("./TypedActions");
|
32
32
|
function PageTableList(props) {
|
33
33
|
var keyFn = props.keyFn, pageItems = props.pageItems, tableColumns = props.tableColumns, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, rowActions = props.rowActions, defaultCardSubtitle = props.defaultSubtitle, showSelect = props.showSelect;
|
34
34
|
var columnsToDataList = useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unselectItem, rowActions, defaultCardSubtitle, showSelect);
|
@@ -133,7 +133,7 @@ function useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unsel
|
|
133
133
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
134
134
|
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: (0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7, whiteSpace: 'nowrap' } }, { children: column.header })) }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }) })] }, column.header));
|
135
135
|
}) })) }, "secondary")) : null,
|
136
|
-
] }), rowActions && ((0, jsx_runtime_1.jsx)(react_core_1.DataListAction, __assign({ "aria-labelledby": "check-action-item1 check-action-action1", id: "check-action-action1", "aria-label": "Actions", isPlainButtonAction: true, style: { whiteSpace: 'nowrap' } }, { children: (0, jsx_runtime_1.jsx)(
|
136
|
+
] }), rowActions && ((0, jsx_runtime_1.jsx)(react_core_1.DataListAction, __assign({ "aria-labelledby": "check-action-item1 check-action-action1", id: "check-action-action1", "aria-label": "Actions", isPlainButtonAction: true, style: { whiteSpace: 'nowrap' } }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: rowActions, position: react_core_1.DropdownPosition.right, selectedItem: item, iconOnly: true }) })))] }) }), key));
|
137
137
|
}, [
|
138
138
|
keyFn,
|
139
139
|
isSelected,
|
package/cjs/PageToolbar.d.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { Dispatch, SetStateAction } from 'react';
|
2
|
+
import { IPageAction } from './PageActions/PageAction';
|
2
3
|
import { PageTableViewType } from './PageTableViewType';
|
3
|
-
import { ITypedAction } from './TypedActions';
|
4
4
|
export interface IItemFilter<T extends object> {
|
5
5
|
label: string;
|
6
6
|
type?: 'search' | 'filter';
|
@@ -11,7 +11,7 @@ export interface IItemFilter<T extends object> {
|
|
11
11
|
filter: (item: T, values: string[]) => boolean;
|
12
12
|
}
|
13
13
|
export type SetFilterValues<T extends object> = (filter: IItemFilter<T>, values: string[]) => void;
|
14
|
-
export declare function toolbarActionsHaveBulkActions<T extends object>(actions?:
|
14
|
+
export declare function toolbarActionsHaveBulkActions<T extends object>(actions?: IPageAction<T>[]): boolean;
|
15
15
|
export interface IToolbarStringFilter {
|
16
16
|
key: string;
|
17
17
|
label: string;
|
@@ -36,7 +36,7 @@ export type PagetableToolbarProps<T extends object> = {
|
|
36
36
|
openColumnModal?: () => void;
|
37
37
|
keyFn: (item: T) => string | number;
|
38
38
|
itemCount?: number;
|
39
|
-
toolbarActions?:
|
39
|
+
toolbarActions?: IPageAction<T>[];
|
40
40
|
toolbarFilters?: IToolbarFilter[];
|
41
41
|
filters?: Record<string, string[]>;
|
42
42
|
setFilters?: Dispatch<SetStateAction<Record<string, string[]>>>;
|
package/cjs/PageToolbar.js
CHANGED
@@ -46,9 +46,10 @@ var react_1 = require("react");
|
|
46
46
|
var BulkSelector_1 = require("./components/BulkSelector");
|
47
47
|
var SingleSelect_1 = require("./components/SingleSelect");
|
48
48
|
var useBreakPoint_1 = require("./components/useBreakPoint");
|
49
|
+
var PageActions_1 = require("./PageActions/PageActions");
|
50
|
+
var PageActionType_1 = require("./PageActions/PageActionType");
|
49
51
|
var PageTableViewType_1 = require("./PageTableViewType");
|
50
52
|
var Settings_1 = require("./Settings");
|
51
|
-
var TypedActions_1 = require("./TypedActions");
|
52
53
|
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
53
54
|
function toolbarActionsHaveBulkActions(actions) {
|
54
55
|
var e_1, _a;
|
@@ -85,7 +86,7 @@ function PageTableToolbar(props) {
|
|
85
86
|
var showSelect = props.showSelect === true ||
|
86
87
|
(selectedItems !== undefined &&
|
87
88
|
toolbarActions &&
|
88
|
-
toolbarActions.find(function (toolbarAction) { return
|
89
|
+
toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; }));
|
89
90
|
var showToolbar = showSelect || showSearchAndFilters || showToolbarActions;
|
90
91
|
var _b = __read((0, react_1.useState)(function () {
|
91
92
|
return toolbarFilters ? ((toolbarFilters === null || toolbarFilters === void 0 ? void 0 : toolbarFilters.length) > 0 ? toolbarFilters[0].key : '') : '';
|
@@ -158,7 +159,7 @@ function PageTableToolbar(props) {
|
|
158
159
|
return newState;
|
159
160
|
});
|
160
161
|
}, showToolbarItem: false }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }), filter.label));
|
161
|
-
})] })) }))), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsx)(
|
162
|
+
})] })) }))), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: react_core_1.ToolbarItem }) })), (0, jsx_runtime_1.jsx)("div", { style: { flexGrow: 1 } }), (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: [openColumnModal && viewType === 'table' && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Manage columns' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "plain", icon: (0, jsx_runtime_1.jsx)(react_icons_1.ColumnsIcon, {}), onClick: openColumnModal }) })) })), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroup, __assign({ "aria-label": "table view toggle" }, { children: [PageTableViewType_1.PageTableViewTypeE.Table, PageTableViewType_1.PageTableViewTypeE.List, PageTableViewType_1.PageTableViewTypeE.Cards]
|
162
163
|
// .filter((vt) => {
|
163
164
|
// switch (vt) {
|
164
165
|
// case PageTableViewTypeE.Cards:
|
package/cjs/index.d.ts
CHANGED
@@ -15,6 +15,9 @@ export * from './components/icons/RunningIcon';
|
|
15
15
|
export * from './components/pfcolors';
|
16
16
|
export * from './components/Scrollable';
|
17
17
|
export * from './components/useBreakPoint';
|
18
|
+
export * from './PageActions/PageAction';
|
19
|
+
export * from './PageActions/PageActions';
|
20
|
+
export * from './PageActions/PageActionType';
|
18
21
|
export * from './PageAlertToaster';
|
19
22
|
export * from './PageBody';
|
20
23
|
export * from './PageDataList';
|
@@ -29,7 +32,6 @@ export * from './PageTableDetails';
|
|
29
32
|
export * from './PageTabs';
|
30
33
|
export * from './PageToolbar';
|
31
34
|
export * from './Settings';
|
32
|
-
export * from './TypedActions';
|
33
35
|
export * from './useFrameworkTranslations';
|
34
36
|
export * from './useInMemoryView';
|
35
37
|
export * from './useSelectDialog';
|
package/cjs/index.js
CHANGED
@@ -31,6 +31,9 @@ __exportStar(require("./components/icons/RunningIcon"), exports);
|
|
31
31
|
__exportStar(require("./components/pfcolors"), exports);
|
32
32
|
__exportStar(require("./components/Scrollable"), exports);
|
33
33
|
__exportStar(require("./components/useBreakPoint"), exports);
|
34
|
+
__exportStar(require("./PageActions/PageAction"), exports);
|
35
|
+
__exportStar(require("./PageActions/PageActions"), exports);
|
36
|
+
__exportStar(require("./PageActions/PageActionType"), exports);
|
34
37
|
__exportStar(require("./PageAlertToaster"), exports);
|
35
38
|
__exportStar(require("./PageBody"), exports);
|
36
39
|
__exportStar(require("./PageDataList"), exports);
|
@@ -45,7 +48,6 @@ __exportStar(require("./PageTableDetails"), exports);
|
|
45
48
|
__exportStar(require("./PageTabs"), exports);
|
46
49
|
__exportStar(require("./PageToolbar"), exports);
|
47
50
|
__exportStar(require("./Settings"), exports);
|
48
|
-
__exportStar(require("./TypedActions"), exports);
|
49
51
|
__exportStar(require("./useFrameworkTranslations"), exports);
|
50
52
|
__exportStar(require("./useInMemoryView"), exports);
|
51
53
|
__exportStar(require("./useSelectDialog"), exports);
|
@@ -23,7 +23,7 @@ PageHeader enables the responsive layout of the header.
|
|
23
23
|
breadcrumbs={[{ label: 'Home', to: '/home' }, { label: 'Page title' }]}
|
24
24
|
title='Page title'
|
25
25
|
description='Page description'
|
26
|
-
headerActions={<
|
26
|
+
headerActions={<TypedActions actions={actions} />}
|
27
27
|
/>
|
28
28
|
<PageBody />...</PageBody>
|
29
29
|
</PageLayout>
|
package/package.json
CHANGED
@@ -1,68 +0,0 @@
|
|
1
|
-
import { ButtonVariant, DropdownPosition } from '@patternfly/react-core';
|
2
|
-
import { ComponentClass, FunctionComponent } from 'react';
|
3
|
-
import { WindowSize } from '../components/useBreakPoint';
|
4
|
-
export declare enum TypedActionType {
|
5
|
-
seperator = "seperator",
|
6
|
-
button = "button",
|
7
|
-
single = "single",
|
8
|
-
bulk = "bulk",
|
9
|
-
dropdown = "dropdown"
|
10
|
-
}
|
11
|
-
export interface ITypedActionSeperator {
|
12
|
-
type: TypedActionType.seperator;
|
13
|
-
}
|
14
|
-
interface ITypedActionCommon {
|
15
|
-
icon?: ComponentClass;
|
16
|
-
label: string;
|
17
|
-
shortLabel?: string;
|
18
|
-
tooltip?: string;
|
19
|
-
isDanger?: boolean;
|
20
|
-
}
|
21
|
-
export type ITypedActionButton = ITypedActionCommon & {
|
22
|
-
type: TypedActionType.button;
|
23
|
-
variant?: ButtonVariant;
|
24
|
-
onClick: () => void;
|
25
|
-
};
|
26
|
-
export type ITypedBulkAction<T extends object> = ITypedActionCommon & {
|
27
|
-
type: TypedActionType.bulk;
|
28
|
-
variant?: ButtonVariant;
|
29
|
-
onClick: (selectedItems: T[]) => void;
|
30
|
-
};
|
31
|
-
export type ITypedSingleAction<T extends object> = ITypedActionCommon & {
|
32
|
-
type: TypedActionType.single;
|
33
|
-
variant?: ButtonVariant;
|
34
|
-
onClick: (item: T) => void;
|
35
|
-
isDisabled?: (item: T) => string;
|
36
|
-
};
|
37
|
-
export type ITypedDropdownAction<T extends object> = ITypedActionCommon & {
|
38
|
-
type: TypedActionType.dropdown;
|
39
|
-
variant?: ButtonVariant;
|
40
|
-
options: ITypedAction<T>[];
|
41
|
-
};
|
42
|
-
export type ITypedAction<T extends object> = ITypedActionSeperator | ITypedActionButton | ITypedBulkAction<T> | ITypedSingleAction<T> | ITypedDropdownAction<T>;
|
43
|
-
export declare function TypedActionsDropdown<T extends object>(props: {
|
44
|
-
actions: ITypedAction<T>[];
|
45
|
-
label?: string;
|
46
|
-
isPrimary?: boolean;
|
47
|
-
selectedItems?: T[];
|
48
|
-
selectedItem?: T;
|
49
|
-
position?: DropdownPosition;
|
50
|
-
}): JSX.Element;
|
51
|
-
export declare function DropdownActionItem<T extends object>(props: {
|
52
|
-
action: ITypedAction<T>;
|
53
|
-
selectedItems: T[];
|
54
|
-
selectedItem?: T;
|
55
|
-
hasIcons: boolean;
|
56
|
-
index: number;
|
57
|
-
}): JSX.Element;
|
58
|
-
export declare function TypedActions<T extends object>(props: {
|
59
|
-
actions: ITypedAction<T>[];
|
60
|
-
selectedItems?: T[];
|
61
|
-
selectedItem?: T;
|
62
|
-
wrapper?: ComponentClass | FunctionComponent;
|
63
|
-
collapse?: WindowSize | 'always';
|
64
|
-
noPrimary?: boolean;
|
65
|
-
position?: DropdownPosition;
|
66
|
-
iconOnly?: boolean;
|
67
|
-
}): JSX.Element;
|
68
|
-
export {};
|
@@ -1,136 +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.TypedActions = exports.DropdownActionItem = exports.TypedActionsDropdown = exports.TypedActionType = void 0;
|
31
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
32
|
-
var react_core_1 = require("@patternfly/react-core");
|
33
|
-
var react_icons_1 = require("@patternfly/react-icons");
|
34
|
-
var react_1 = require("react");
|
35
|
-
var useBreakPoint_1 = require("../components/useBreakPoint");
|
36
|
-
var TypedActionsButtons_1 = require("./TypedActionsButtons");
|
37
|
-
var TypedActionType;
|
38
|
-
(function (TypedActionType) {
|
39
|
-
TypedActionType["seperator"] = "seperator";
|
40
|
-
TypedActionType["button"] = "button";
|
41
|
-
TypedActionType["single"] = "single";
|
42
|
-
TypedActionType["bulk"] = "bulk";
|
43
|
-
TypedActionType["dropdown"] = "dropdown";
|
44
|
-
})(TypedActionType = exports.TypedActionType || (exports.TypedActionType = {}));
|
45
|
-
function TypedActionsDropdown(props) {
|
46
|
-
var actions = props.actions, label = props.label, _a = props.isPrimary, isPrimary = _a === void 0 ? false : _a, selectedItems = props.selectedItems, selectedItem = props.selectedItem;
|
47
|
-
var _b = __read((0, react_1.useState)(false), 2), dropdownOpen = _b[0], setDropdownOpen = _b[1];
|
48
|
-
var hasItemActions = (0, react_1.useMemo)(function () { return !actions.every(function (action) { return action.type !== TypedActionType.bulk; }); }, [actions]);
|
49
|
-
var hasIcons = (0, react_1.useMemo)(function () {
|
50
|
-
return actions.find(function (action) { return action.type !== TypedActionType.seperator && action.icon !== undefined; }) !== undefined;
|
51
|
-
}, [actions]);
|
52
|
-
if (actions.length === 0)
|
53
|
-
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
54
|
-
var Toggle = label ? react_core_1.DropdownToggle : react_core_1.KebabToggle;
|
55
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { onSelect: function () { return setDropdownOpen(false); }, toggle: (0, jsx_runtime_1.jsx)(Toggle, __assign({ id: "toggle-kebab", onToggle: function () { return setDropdownOpen(!dropdownOpen); }, toggleVariant: hasItemActions && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? 'primary' : undefined, isPrimary: isPrimary, style: isPrimary && !label
|
56
|
-
? {
|
57
|
-
color: 'var(--pf-global--Color--light-100)',
|
58
|
-
}
|
59
|
-
: {} }, { 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 : [], selectedItem: selectedItem, hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: { zIndex: 201 } }));
|
60
|
-
}
|
61
|
-
exports.TypedActionsDropdown = TypedActionsDropdown;
|
62
|
-
function DropdownActionItem(props) {
|
63
|
-
var action = props.action, selectedItems = props.selectedItems, selectedItem = props.selectedItem, hasIcons = props.hasIcons, index = props.index;
|
64
|
-
switch (action.type) {
|
65
|
-
case TypedActionType.single: {
|
66
|
-
var Icon = action.icon;
|
67
|
-
if (!Icon && hasIcons)
|
68
|
-
Icon = TransparentIcon;
|
69
|
-
var tooltip = action.tooltip;
|
70
|
-
var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : false;
|
71
|
-
tooltip = isDisabled ? isDisabled : tooltip;
|
72
|
-
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 selectedItem && action.onClick(selectedItem); }, isAriaDisabled: Boolean(isDisabled), icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, style: {
|
73
|
-
color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
|
74
|
-
} }, { children: action.label })) }), action.label));
|
75
|
-
}
|
76
|
-
case TypedActionType.button:
|
77
|
-
case TypedActionType.bulk: {
|
78
|
-
var Icon = action.icon;
|
79
|
-
if (!Icon && hasIcons)
|
80
|
-
Icon = TransparentIcon;
|
81
|
-
var tooltip = action.tooltip;
|
82
|
-
var isDisabled = false;
|
83
|
-
if (action.type === TypedActionType.bulk && !selectedItems.length) {
|
84
|
-
tooltip = 'No selections';
|
85
|
-
isDisabled = true;
|
86
|
-
}
|
87
|
-
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: {
|
88
|
-
color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
|
89
|
-
} }, { children: action.label })) }), action.label));
|
90
|
-
}
|
91
|
-
case TypedActionType.dropdown:
|
92
|
-
return ((0, jsx_runtime_1.jsx)(TypedActionsDropdown, { label: action.label, actions: action.options }, action.label));
|
93
|
-
case TypedActionType.seperator:
|
94
|
-
return (0, jsx_runtime_1.jsx)(react_core_1.DropdownSeparator, {}, "separator-".concat(index));
|
95
|
-
default:
|
96
|
-
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
97
|
-
}
|
98
|
-
}
|
99
|
-
exports.DropdownActionItem = DropdownActionItem;
|
100
|
-
function TypedActions(props) {
|
101
|
-
var _a, _b;
|
102
|
-
var actions = props.actions;
|
103
|
-
var bp = (0, useBreakPoint_1.useBreakpoint)(props.collapse !== 'always' ? (_a = props.collapse) !== null && _a !== void 0 ? _a : 'lg' : 'lg');
|
104
|
-
var collapseButtons = props.collapse === 'always' || !bp;
|
105
|
-
var isButtonAction = (0, react_1.useCallback)(function (action) {
|
106
|
-
var actionVariants = [
|
107
|
-
react_core_1.ButtonVariant.primary,
|
108
|
-
react_core_1.ButtonVariant.secondary,
|
109
|
-
react_core_1.ButtonVariant.danger,
|
110
|
-
];
|
111
|
-
return action.type !== TypedActionType.seperator && actionVariants.includes(action.variant);
|
112
|
-
}, []);
|
113
|
-
var buttonActions = (0, react_1.useMemo)(function () {
|
114
|
-
var _a;
|
115
|
-
if (collapseButtons) {
|
116
|
-
return [];
|
117
|
-
}
|
118
|
-
return (_a = actions === null || actions === void 0 ? void 0 : actions.filter(isButtonAction)) !== null && _a !== void 0 ? _a : [];
|
119
|
-
}, [collapseButtons, actions, isButtonAction]);
|
120
|
-
var dropdownActions = (0, react_1.useMemo)(function () {
|
121
|
-
var _a;
|
122
|
-
if (collapseButtons) {
|
123
|
-
return actions !== null && actions !== void 0 ? actions : [];
|
124
|
-
}
|
125
|
-
var dropdownActions = (_a = actions === null || actions === void 0 ? void 0 : actions.filter(function (action) { return !isButtonAction(action); })) !== null && _a !== void 0 ? _a : [];
|
126
|
-
while (dropdownActions.length && dropdownActions[0].type === TypedActionType.seperator)
|
127
|
-
dropdownActions.shift();
|
128
|
-
while (dropdownActions.length &&
|
129
|
-
dropdownActions[dropdownActions.length - 1].type === TypedActionType.seperator)
|
130
|
-
dropdownActions.pop();
|
131
|
-
return dropdownActions;
|
132
|
-
}, [collapseButtons, actions, isButtonAction]);
|
133
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: !props.iconOnly }, { 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) }))] })));
|
134
|
-
}
|
135
|
-
exports.TypedActions = TypedActions;
|
136
|
-
var TransparentIcon = function () { return (0, jsx_runtime_1.jsx)(react_icons_1.CircleIcon, { style: { opacity: 0 } }); };
|
@@ -1,18 +0,0 @@
|
|
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
|
-
selectedItem?: T;
|
7
|
-
wrapper?: ComponentClass | FunctionComponent;
|
8
|
-
noPrimary?: boolean;
|
9
|
-
iconOnly?: boolean;
|
10
|
-
}): JSX.Element;
|
11
|
-
export declare function TypedActionButton<T extends object>(props: {
|
12
|
-
action: ITypedAction<T>;
|
13
|
-
selectedItems?: T[];
|
14
|
-
selectedItem?: T;
|
15
|
-
wrapper?: ComponentClass | FunctionComponent;
|
16
|
-
noPrimary?: boolean;
|
17
|
-
iconOnly?: boolean;
|
18
|
-
}): JSX.Element;
|
@@ -1,107 +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
|
-
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_core_1 = require("@patternfly/react-core");
|
17
|
-
var react_1 = require("react");
|
18
|
-
var TypedActions_1 = require("./TypedActions");
|
19
|
-
function TypedActionsButtons(props) {
|
20
|
-
var actions = props.actions, selectedItems = props.selectedItems, selectedItem = props.selectedItem, wrapper = props.wrapper, iconOnly = props.iconOnly;
|
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, selectedItem: selectedItem, wrapper: wrapper, iconOnly: iconOnly }, 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, selectedItems: selectedItems, 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, _b;
|
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 = ((_a = action.tooltip) !== null && _a !== void 0 ? _a : props.iconOnly) ? props.action.label : undefined;
|
94
|
-
var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : false;
|
95
|
-
tooltip = isDisabled ? isDisabled : tooltip;
|
96
|
-
var variant = (_b = action.variant) !== null && _b !== void 0 ? _b : react_core_1.ButtonVariant.secondary;
|
97
|
-
if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
|
98
|
-
variant = react_core_1.ButtonVariant.secondary;
|
99
|
-
}
|
100
|
-
if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
|
101
|
-
variant = react_core_1.ButtonVariant.danger;
|
102
|
-
}
|
103
|
-
if (props.iconOnly) {
|
104
|
-
variant = react_core_1.ButtonVariant.plain;
|
105
|
-
}
|
106
|
-
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: Boolean(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 })) })) }));
|
107
|
-
}
|
@@ -1,18 +0,0 @@
|
|
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);
|