@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
@@ -0,0 +1,38 @@
|
|
1
|
+
import { ButtonVariant } from '@patternfly/react-core';
|
2
|
+
import { ComponentClass } from 'react';
|
3
|
+
import { PageActionType } from './PageActionType';
|
4
|
+
export type IPageAction<T extends object> = IPageActionSeperator | IPageActionButton | IPageBulkAction<T> | IPageSingleAction<T> | IPageDropdownAction<T>;
|
5
|
+
export interface IPageActionCommon {
|
6
|
+
icon?: ComponentClass;
|
7
|
+
label: string;
|
8
|
+
shortLabel?: string;
|
9
|
+
tooltip?: string;
|
10
|
+
isDanger?: boolean;
|
11
|
+
}
|
12
|
+
export interface IPageActionSeperator {
|
13
|
+
type: PageActionType.seperator;
|
14
|
+
}
|
15
|
+
export type IPageActionButton = IPageActionCommon & {
|
16
|
+
type: PageActionType.button;
|
17
|
+
variant?: ButtonVariant;
|
18
|
+
onClick: () => void;
|
19
|
+
};
|
20
|
+
export type IPageBulkAction<T extends object> = IPageActionCommon & {
|
21
|
+
type: PageActionType.bulk;
|
22
|
+
variant?: ButtonVariant;
|
23
|
+
onClick: (selectedItems: T[]) => void;
|
24
|
+
};
|
25
|
+
export type IPageSingleAction<T extends object> = IPageActionCommon & {
|
26
|
+
type: PageActionType.single;
|
27
|
+
variant?: ButtonVariant;
|
28
|
+
onClick: (item: T) => void;
|
29
|
+
isDisabled?: (item: T) => string;
|
30
|
+
isHidden?: (item: T) => boolean;
|
31
|
+
};
|
32
|
+
export type IPageDropdownAction<T extends object> = IPageActionCommon & {
|
33
|
+
type: PageActionType.dropdown;
|
34
|
+
variant?: ButtonVariant;
|
35
|
+
isHidden?: (item: T) => boolean;
|
36
|
+
isDisabled?: (item: T) => string;
|
37
|
+
options: IPageAction<T>[];
|
38
|
+
};
|
@@ -0,0 +1,11 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.PageActionType = void 0;
|
4
|
+
var PageActionType;
|
5
|
+
(function (PageActionType) {
|
6
|
+
PageActionType["seperator"] = "seperator";
|
7
|
+
PageActionType["button"] = "button";
|
8
|
+
PageActionType["single"] = "single";
|
9
|
+
PageActionType["bulk"] = "bulk";
|
10
|
+
PageActionType["dropdown"] = "dropdown";
|
11
|
+
})(PageActionType = exports.PageActionType || (exports.PageActionType = {}));
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import { DropdownPosition } from '@patternfly/react-core';
|
2
|
+
import { ComponentClass, FunctionComponent } from 'react';
|
3
|
+
import { WindowSize } from '../components/useBreakPoint';
|
4
|
+
import { IPageAction } from './PageAction';
|
5
|
+
/**
|
6
|
+
* Page actions represent actions used in table rows, toolbars, and page headers.
|
7
|
+
* The PageActions component controls the collapsing of the actions at given breakpoints.
|
8
|
+
*/
|
9
|
+
export declare function PageActions<T extends object>(props: {
|
10
|
+
/** An array of PageActions */
|
11
|
+
actions: IPageAction<T>[];
|
12
|
+
/** The currently selected item for single actions */
|
13
|
+
selectedItem?: T;
|
14
|
+
/** The currently selected items for bulk actions */
|
15
|
+
selectedItems?: T[];
|
16
|
+
/** The wrapper for each item
|
17
|
+
* @example Wrapping each button in a ToolbarItem
|
18
|
+
*/
|
19
|
+
wrapper?: ComponentClass | FunctionComponent;
|
20
|
+
/** When to collapse the primary and secondary items into the dropdown menu */
|
21
|
+
collapse?: WindowSize | 'always';
|
22
|
+
/** The position for the dropdown */
|
23
|
+
position?: DropdownPosition;
|
24
|
+
/** Indicates if only to show the icon when not collapsed */
|
25
|
+
iconOnly?: boolean;
|
26
|
+
}): JSX.Element;
|
27
|
+
export declare function isHiddenAction<T extends object>(action: IPageAction<T>, selectedItem: T | undefined): boolean;
|
@@ -0,0 +1,68 @@
|
|
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.isHiddenAction = exports.PageActions = 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 useBreakPoint_1 = require("../components/useBreakPoint");
|
19
|
+
var PageActionType_1 = require("./PageActionType");
|
20
|
+
var PageDropdownAction_1 = require("./PageDropdownAction");
|
21
|
+
var PagePinnedActions_1 = require("./PagePinnedActions");
|
22
|
+
/**
|
23
|
+
* Page actions represent actions used in table rows, toolbars, and page headers.
|
24
|
+
* The PageActions component controls the collapsing of the actions at given breakpoints.
|
25
|
+
*/
|
26
|
+
function PageActions(props) {
|
27
|
+
var _a;
|
28
|
+
var actions = props.actions, selectedItem = props.selectedItem, selectedItems = props.selectedItems, iconOnly = props.iconOnly;
|
29
|
+
var collapseBreakpoint = (0, useBreakPoint_1.useBreakpoint)(props.collapse !== 'always' ? (_a = props.collapse) !== null && _a !== void 0 ? _a : 'lg' : 'lg');
|
30
|
+
var collapseButtons = props.collapse === 'always' || !collapseBreakpoint;
|
31
|
+
/** Actions that are visible */
|
32
|
+
var visibleActions = (0, react_1.useMemo)(function () { return actions.filter(function (action) { return !isHiddenAction(action, selectedItem); }); }, [actions, selectedItem]);
|
33
|
+
/** Actions that show up outside the dropdown */
|
34
|
+
var pinnedActions = (0, react_1.useMemo)(function () {
|
35
|
+
if (collapseButtons)
|
36
|
+
return [];
|
37
|
+
return visibleActions === null || visibleActions === void 0 ? void 0 : visibleActions.filter(isPinnedAction);
|
38
|
+
}, [collapseButtons, visibleActions]);
|
39
|
+
/** Actions that are not pinned and show up inside the dropdown */
|
40
|
+
var dropdownActions = (0, react_1.useMemo)(function () {
|
41
|
+
var _a;
|
42
|
+
if (collapseButtons)
|
43
|
+
return visibleActions;
|
44
|
+
return (_a = visibleActions === null || visibleActions === void 0 ? void 0 : visibleActions.filter(function (action) { return !isPinnedAction(action); })) !== null && _a !== void 0 ? _a : [];
|
45
|
+
}, [collapseButtons, visibleActions]);
|
46
|
+
return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: (!iconOnly && selectedItem !== undefined) || (selectedItems && selectedItems.length > 0) }, { children: [pinnedActions !== undefined && pinnedActions.length > 0 && ((0, jsx_runtime_1.jsx)(PagePinnedActions_1.PagePinnedActions, __assign({}, props, { actions: pinnedActions }))), dropdownActions.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ isFilled: true, style: { display: 'flex', justifyContent: 'flex-end' } }, { children: (0, jsx_runtime_1.jsx)(PageDropdownAction_1.PageDropdownAction, __assign({}, props, { actions: dropdownActions })) })))] })));
|
47
|
+
}
|
48
|
+
exports.PageActions = PageActions;
|
49
|
+
function isPinnedAction(action) {
|
50
|
+
var actionVariants = [
|
51
|
+
react_core_1.ButtonVariant.primary,
|
52
|
+
react_core_1.ButtonVariant.secondary,
|
53
|
+
react_core_1.ButtonVariant.danger,
|
54
|
+
];
|
55
|
+
return action.type !== PageActionType_1.PageActionType.seperator && actionVariants.includes(action.variant);
|
56
|
+
}
|
57
|
+
function isHiddenAction(action, selectedItem) {
|
58
|
+
switch (action.type) {
|
59
|
+
case PageActionType_1.PageActionType.single:
|
60
|
+
case PageActionType_1.PageActionType.dropdown:
|
61
|
+
return action.isHidden !== undefined && selectedItem ? action.isHidden(selectedItem) : false;
|
62
|
+
case PageActionType_1.PageActionType.bulk:
|
63
|
+
case PageActionType_1.PageActionType.seperator:
|
64
|
+
case PageActionType_1.PageActionType.button:
|
65
|
+
return false;
|
66
|
+
}
|
67
|
+
}
|
68
|
+
exports.isHiddenAction = isHiddenAction;
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { ComponentClass, FunctionComponent } from 'react';
|
2
|
+
import { IPageBulkAction } from './PageAction';
|
3
|
+
export declare function PageBulkAction<T extends object>(props: {
|
4
|
+
action: IPageBulkAction<T>;
|
5
|
+
selectedItems?: T[];
|
6
|
+
wrapper?: ComponentClass | FunctionComponent;
|
7
|
+
}): JSX.Element;
|
@@ -0,0 +1,35 @@
|
|
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.PageBulkAction = 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
|
+
function PageBulkAction(props) {
|
19
|
+
var _a;
|
20
|
+
var action = props.action, selectedItems = props.selectedItems, wrapper = props.wrapper;
|
21
|
+
var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
|
22
|
+
var Icon = action.icon;
|
23
|
+
var tooltip = action.tooltip;
|
24
|
+
var isDisabled = false;
|
25
|
+
var variant = (_a = action.variant) !== null && _a !== void 0 ? _a : react_core_1.ButtonVariant.secondary;
|
26
|
+
if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
|
27
|
+
variant = react_core_1.ButtonVariant.danger;
|
28
|
+
}
|
29
|
+
if (!selectedItems || !selectedItems.length) {
|
30
|
+
tooltip = 'No selections';
|
31
|
+
isDisabled = true;
|
32
|
+
}
|
33
|
+
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 })) })) }));
|
34
|
+
}
|
35
|
+
exports.PageBulkAction = PageBulkAction;
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { ComponentClass, FunctionComponent } from 'react';
|
2
|
+
import { IPageActionButton } from './PageAction';
|
3
|
+
export declare function PageButtonAction(props: {
|
4
|
+
action: IPageActionButton;
|
5
|
+
/** Turn primary buttons to secondary if there are items selected */
|
6
|
+
isSecondary?: boolean;
|
7
|
+
wrapper?: ComponentClass | FunctionComponent;
|
8
|
+
}): JSX.Element;
|
@@ -0,0 +1,34 @@
|
|
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.PageButtonAction = 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
|
+
function PageButtonAction(props) {
|
19
|
+
var _a;
|
20
|
+
var action = props.action, isSecondary = props.isSecondary, wrapper = props.wrapper;
|
21
|
+
var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
|
22
|
+
var Icon = action.icon;
|
23
|
+
var tooltip = action.tooltip;
|
24
|
+
var isDisabled = false;
|
25
|
+
var variant = (_a = action.variant) !== null && _a !== void 0 ? _a : react_core_1.ButtonVariant.secondary;
|
26
|
+
if (isSecondary && [react_core_1.ButtonVariant.primary, react_core_1.ButtonVariant.danger].includes(variant)) {
|
27
|
+
variant = react_core_1.ButtonVariant.secondary;
|
28
|
+
}
|
29
|
+
if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
|
30
|
+
variant = react_core_1.ButtonVariant.danger;
|
31
|
+
}
|
32
|
+
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 })) })) }));
|
33
|
+
}
|
34
|
+
exports.PageButtonAction = PageButtonAction;
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import { DropdownPosition } from '@patternfly/react-core';
|
2
|
+
import { ComponentClass, FunctionComponent } from 'react';
|
3
|
+
import { IPageAction } from './PageAction';
|
4
|
+
export declare function PageDropdownAction<T extends object>(props: {
|
5
|
+
actions: IPageAction<T>[];
|
6
|
+
label?: string;
|
7
|
+
icon?: ComponentClass | FunctionComponent;
|
8
|
+
isDisabled?: boolean;
|
9
|
+
tooltip?: string;
|
10
|
+
selectedItems?: T[];
|
11
|
+
selectedItem?: T;
|
12
|
+
position?: DropdownPosition;
|
13
|
+
iconOnly?: boolean;
|
14
|
+
}): JSX.Element;
|
15
|
+
export declare function filterActionSeperators<T extends object>(actions: IPageAction<T>[]): IPageAction<T>[];
|
@@ -0,0 +1,125 @@
|
|
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
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
30
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
31
|
+
if (ar || !(i in from)) {
|
32
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
33
|
+
ar[i] = from[i];
|
34
|
+
}
|
35
|
+
}
|
36
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
37
|
+
};
|
38
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
39
|
+
exports.filterActionSeperators = exports.PageDropdownAction = void 0;
|
40
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
41
|
+
var react_core_1 = require("@patternfly/react-core");
|
42
|
+
var react_icons_1 = require("@patternfly/react-icons");
|
43
|
+
var react_1 = require("react");
|
44
|
+
var PageActions_1 = require("./PageActions");
|
45
|
+
var PageActionType_1 = require("./PageActionType");
|
46
|
+
function PageDropdownAction(props) {
|
47
|
+
var label = props.label, icon = props.icon, selectedItems = props.selectedItems, selectedItem = props.selectedItem, iconOnly = props.iconOnly, isDisabled = props.isDisabled, tooltip = props.tooltip;
|
48
|
+
var actions = props.actions;
|
49
|
+
actions = actions.filter(function (action) { return !(0, PageActions_1.isHiddenAction)(action, selectedItem); });
|
50
|
+
actions = filterActionSeperators(actions);
|
51
|
+
var _a = __read((0, react_1.useState)(false), 2), dropdownOpen = _a[0], setDropdownOpen = _a[1];
|
52
|
+
var hasBulkActions = (0, react_1.useMemo)(function () { return !actions.every(function (action) { return action.type !== PageActionType_1.PageActionType.bulk; }); }, [actions]);
|
53
|
+
var hasIcons = (0, react_1.useMemo)(function () {
|
54
|
+
return actions.find(function (action) { return action.type !== PageActionType_1.PageActionType.seperator && action.icon !== undefined; }) !== undefined;
|
55
|
+
}, [actions]);
|
56
|
+
if (actions.length === 0)
|
57
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
58
|
+
var Icon = icon;
|
59
|
+
var Toggle = label || Icon ? react_core_1.DropdownToggle : react_core_1.KebabToggle;
|
60
|
+
var isPrimary = hasBulkActions && !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length);
|
61
|
+
var dropdown = ((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", isDisabled: isDisabled, onToggle: function () { return setDropdownOpen(!dropdownOpen); }, toggleVariant: isPrimary ? 'primary' : undefined, toggleIndicator: Icon ? null : undefined, style: isPrimary && !label
|
62
|
+
? {
|
63
|
+
color: 'var(--pf-global--Color--light-100)',
|
64
|
+
}
|
65
|
+
: {} }, { children: Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : label })), isOpen: dropdownOpen, isPlain: !label || iconOnly, dropdownItems: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(PageDropdownActionItem, { action: action, selectedItems: selectedItems !== null && selectedItems !== void 0 ? selectedItems : [], selectedItem: selectedItem, hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: {
|
66
|
+
zIndex: 201,
|
67
|
+
} }));
|
68
|
+
return tooltip && (iconOnly || isDisabled) ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: dropdown }))) : (__assign({}, dropdown));
|
69
|
+
}
|
70
|
+
exports.PageDropdownAction = PageDropdownAction;
|
71
|
+
function PageDropdownActionItem(props) {
|
72
|
+
var action = props.action, selectedItems = props.selectedItems, selectedItem = props.selectedItem, hasIcons = props.hasIcons, index = props.index;
|
73
|
+
switch (action.type) {
|
74
|
+
case PageActionType_1.PageActionType.single: {
|
75
|
+
var Icon = action.icon;
|
76
|
+
if (!Icon && hasIcons)
|
77
|
+
Icon = TransparentIcon;
|
78
|
+
var tooltip = action.tooltip;
|
79
|
+
var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : false;
|
80
|
+
tooltip = isDisabled ? isDisabled : tooltip;
|
81
|
+
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: {
|
82
|
+
color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
|
83
|
+
} }, { children: action.label })) }), action.label));
|
84
|
+
}
|
85
|
+
case PageActionType_1.PageActionType.button:
|
86
|
+
case PageActionType_1.PageActionType.bulk: {
|
87
|
+
var Icon = action.icon;
|
88
|
+
if (!Icon && hasIcons)
|
89
|
+
Icon = TransparentIcon;
|
90
|
+
var tooltip = action.tooltip;
|
91
|
+
var isDisabled = false;
|
92
|
+
if (action.type === PageActionType_1.PageActionType.bulk && !selectedItems.length) {
|
93
|
+
tooltip = 'No selections';
|
94
|
+
isDisabled = true;
|
95
|
+
}
|
96
|
+
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: {
|
97
|
+
color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
|
98
|
+
} }, { children: action.label })) }), action.label));
|
99
|
+
}
|
100
|
+
case PageActionType_1.PageActionType.dropdown: {
|
101
|
+
var tooltip = action.label;
|
102
|
+
var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : '';
|
103
|
+
tooltip = isDisabled ? isDisabled : tooltip;
|
104
|
+
return ((0, jsx_runtime_1.jsx)(PageDropdownAction, { label: action.label, actions: action.options, selectedItem: selectedItem, isDisabled: Boolean(isDisabled), tooltip: tooltip }, action.label));
|
105
|
+
}
|
106
|
+
case PageActionType_1.PageActionType.seperator:
|
107
|
+
return (0, jsx_runtime_1.jsx)(react_core_1.DropdownSeparator, {}, "separator-".concat(index));
|
108
|
+
}
|
109
|
+
}
|
110
|
+
var TransparentIcon = function () { return (0, jsx_runtime_1.jsx)(react_icons_1.CircleIcon, { style: { opacity: 0 } }); };
|
111
|
+
function filterActionSeperators(actions) {
|
112
|
+
var filteredActions = __spreadArray([], __read(actions), false);
|
113
|
+
// Remove seperators at beginning of actions
|
114
|
+
while (filteredActions.length > 0 && filteredActions[0].type === PageActionType_1.PageActionType.seperator) {
|
115
|
+
filteredActions.shift();
|
116
|
+
}
|
117
|
+
// Remove seperators at end of actions
|
118
|
+
while (filteredActions.length > 0 &&
|
119
|
+
filteredActions[filteredActions.length - 1].type === PageActionType_1.PageActionType.seperator) {
|
120
|
+
filteredActions.pop();
|
121
|
+
}
|
122
|
+
// TODO remove two seperators in a row
|
123
|
+
return filteredActions;
|
124
|
+
}
|
125
|
+
exports.filterActionSeperators = filterActionSeperators;
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import { ComponentClass, FunctionComponent } from 'react';
|
2
|
+
import { IPageAction } from './PageAction';
|
3
|
+
export declare function PagePinnedActions<T extends object>(props: {
|
4
|
+
actions: IPageAction<T>[];
|
5
|
+
selectedItem?: T;
|
6
|
+
selectedItems?: T[];
|
7
|
+
wrapper?: ComponentClass | FunctionComponent;
|
8
|
+
/**
|
9
|
+
* indicates to only show the icon for the action
|
10
|
+
* Example: Table rows only show the icon but toolbars and details page actions show label
|
11
|
+
*/
|
12
|
+
iconOnly?: boolean;
|
13
|
+
}): JSX.Element;
|
14
|
+
export declare function PagePinnedAction<T extends object>(props: {
|
15
|
+
action: IPageAction<T>;
|
16
|
+
selectedItem?: T;
|
17
|
+
selectedItems?: T[];
|
18
|
+
wrapper?: ComponentClass | FunctionComponent;
|
19
|
+
iconOnly?: boolean;
|
20
|
+
}): JSX.Element;
|
@@ -0,0 +1,57 @@
|
|
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.PagePinnedAction = exports.PagePinnedActions = void 0;
|
15
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
|
+
var react_core_1 = require("@patternfly/react-core");
|
17
|
+
var PageActionType_1 = require("./PageActionType");
|
18
|
+
var PageBulkAction_1 = require("./PageBulkAction");
|
19
|
+
var PageButtonAction_1 = require("./PageButtonAction");
|
20
|
+
var PageDropdownAction_1 = require("./PageDropdownAction");
|
21
|
+
var PageSingleAction_1 = require("./PageSingleAction");
|
22
|
+
function PagePinnedActions(props) {
|
23
|
+
var actions = props.actions, selectedItems = props.selectedItems, selectedItem = props.selectedItem, wrapper = props.wrapper, iconOnly = props.iconOnly;
|
24
|
+
if (actions.length === 0)
|
25
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
26
|
+
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)(PagePinnedAction, { action: action, selectedItem: selectedItem, selectedItems: selectedItems, wrapper: wrapper, iconOnly: iconOnly }, index)); }) })));
|
27
|
+
}
|
28
|
+
exports.PagePinnedActions = PagePinnedActions;
|
29
|
+
function PagePinnedAction(props) {
|
30
|
+
var action = props.action, selectedItems = props.selectedItems, selectedItem = props.selectedItem, wrapper = props.wrapper;
|
31
|
+
switch (action.type) {
|
32
|
+
case PageActionType_1.PageActionType.seperator: {
|
33
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
34
|
+
}
|
35
|
+
case PageActionType_1.PageActionType.single: {
|
36
|
+
return ((0, jsx_runtime_1.jsx)(PageSingleAction_1.PageSingleAction, { action: action, selectedItem: selectedItem, iconOnly: props.iconOnly, wrapper: wrapper }));
|
37
|
+
}
|
38
|
+
case PageActionType_1.PageActionType.bulk: {
|
39
|
+
return ((0, jsx_runtime_1.jsx)(PageBulkAction_1.PageBulkAction, { action: action, selectedItems: selectedItems,
|
40
|
+
// iconOnly={props.iconOnly}
|
41
|
+
wrapper: wrapper }));
|
42
|
+
}
|
43
|
+
case PageActionType_1.PageActionType.button: {
|
44
|
+
return ((0, jsx_runtime_1.jsx)(PageButtonAction_1.PageButtonAction, { action: action, isSecondary: (selectedItems !== undefined && selectedItems.length !== 0) ||
|
45
|
+
selectedItem !== undefined,
|
46
|
+
// iconOnly={props.iconOnly}
|
47
|
+
wrapper: wrapper }));
|
48
|
+
}
|
49
|
+
case PageActionType_1.PageActionType.dropdown: {
|
50
|
+
var tooltip = action.label;
|
51
|
+
var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : '';
|
52
|
+
tooltip = isDisabled ? isDisabled : tooltip;
|
53
|
+
return ((0, jsx_runtime_1.jsx)(PageDropdownAction_1.PageDropdownAction, { icon: action.icon, label: action.label, actions: action.options, selectedItem: selectedItem, selectedItems: selectedItems, iconOnly: props.iconOnly, position: react_core_1.DropdownPosition.right, isDisabled: Boolean(isDisabled), tooltip: props.iconOnly || isDisabled ? tooltip : undefined }));
|
54
|
+
}
|
55
|
+
}
|
56
|
+
}
|
57
|
+
exports.PagePinnedAction = PagePinnedAction;
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { ComponentClass, FunctionComponent } from 'react';
|
2
|
+
import { IPageSingleAction } from './PageAction';
|
3
|
+
export declare function PageSingleAction<T extends object>(props: {
|
4
|
+
action: IPageSingleAction<T>;
|
5
|
+
selectedItem?: T;
|
6
|
+
iconOnly?: boolean;
|
7
|
+
wrapper?: ComponentClass | FunctionComponent;
|
8
|
+
}): JSX.Element;
|
@@ -0,0 +1,35 @@
|
|
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.PageSingleAction = 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
|
+
function PageSingleAction(props) {
|
19
|
+
var _a, _b;
|
20
|
+
var action = props.action, selectedItem = props.selectedItem, wrapper = props.wrapper;
|
21
|
+
var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
|
22
|
+
var Icon = action.icon;
|
23
|
+
var tooltip = ((_a = action.tooltip) !== null && _a !== void 0 ? _a : props.iconOnly) ? props.action.label : undefined;
|
24
|
+
var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : false;
|
25
|
+
tooltip = isDisabled ? isDisabled : tooltip;
|
26
|
+
var variant = (_b = action.variant) !== null && _b !== void 0 ? _b : react_core_1.ButtonVariant.secondary;
|
27
|
+
if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
|
28
|
+
variant = react_core_1.ButtonVariant.danger;
|
29
|
+
}
|
30
|
+
if (props.iconOnly) {
|
31
|
+
variant = react_core_1.ButtonVariant.plain;
|
32
|
+
}
|
33
|
+
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 })) })) }));
|
34
|
+
}
|
35
|
+
exports.PageSingleAction = PageSingleAction;
|
package/cjs/PageDataList.d.ts
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import { Dispatch, ReactNode, SetStateAction } from 'react';
|
2
|
+
import { IPageAction } from './PageActions/PageAction';
|
2
3
|
import { PageHeaderProps } from './PageHeader';
|
3
4
|
import { IToolbarFilter } from './PageToolbar';
|
4
|
-
import { ITypedAction } from './TypedActions';
|
5
5
|
export type DataListPageProps<T extends object> = PageHeaderProps & PageDataListProps<T> & {
|
6
6
|
error?: Error;
|
7
7
|
};
|
@@ -10,9 +10,9 @@ export type PageDataListProps<T extends object> = {
|
|
10
10
|
keyFn: (item: T) => string | number;
|
11
11
|
itemCount?: number;
|
12
12
|
pageItems: T[] | undefined;
|
13
|
-
toolbarActions?:
|
13
|
+
toolbarActions?: IPageAction<T>[];
|
14
14
|
dataCells: ((item: T) => ReactNode)[];
|
15
|
-
actions:
|
15
|
+
actions: IPageAction<T>[];
|
16
16
|
toolbarFilters?: IToolbarFilter[];
|
17
17
|
filters?: Record<string, string[]>;
|
18
18
|
setFilters?: Dispatch<SetStateAction<Record<string, string[]>>>;
|
package/cjs/PageDataList.js
CHANGED
@@ -17,12 +17,13 @@ var react_core_1 = require("@patternfly/react-core");
|
|
17
17
|
var react_icons_1 = require("@patternfly/react-icons");
|
18
18
|
var react_1 = require("react");
|
19
19
|
var Scrollable_1 = require("./components/Scrollable");
|
20
|
+
var PageActions_1 = require("./PageActions/PageActions");
|
21
|
+
var PageActionType_1 = require("./PageActions/PageActionType");
|
20
22
|
var PageBody_1 = require("./PageBody");
|
21
23
|
var PageHeader_1 = require("./PageHeader");
|
22
24
|
var PageLayout_1 = require("./PageLayout");
|
23
25
|
var PagePagination_1 = require("./PagePagination");
|
24
26
|
var Settings_1 = require("./Settings");
|
25
|
-
var TypedActions_1 = require("./TypedActions");
|
26
27
|
function DataListPage(props) {
|
27
28
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(PageLayout_1.PageLayout, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, __assign({}, props)), (0, jsx_runtime_1.jsx)(PageBody_1.PageBody, { children: (0, jsx_runtime_1.jsx)(PageDataList, __assign({}, props)) })] }) }));
|
28
29
|
}
|
@@ -31,7 +32,7 @@ function PageDataList(props) {
|
|
31
32
|
var pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, keyFn = props.keyFn, toolbarActions = props.toolbarActions, itemCount = props.itemCount, perPage = props.perPage,
|
32
33
|
// clearAllFilters,
|
33
34
|
filters = props.filters, error = props.error, dataCells = props.dataCells;
|
34
|
-
var showSelect = (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return
|
35
|
+
var showSelect = (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; })) !==
|
35
36
|
undefined;
|
36
37
|
var settings = (0, Settings_1.useSettings)();
|
37
38
|
if (error) {
|
@@ -56,5 +57,5 @@ function PageDataList(props) {
|
|
56
57
|
}
|
57
58
|
exports.PageDataList = PageDataList;
|
58
59
|
function DataListActions(props) {
|
59
|
-
return ((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)(
|
60
|
+
return ((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: props.actions, position: react_core_1.DropdownPosition.right }) })));
|
60
61
|
}
|
package/cjs/PageHeader.d.ts
CHANGED
@@ -37,7 +37,7 @@ export interface PageHeaderProps {
|
|
37
37
|
* breadcrumbs={[{ label: 'Home', to: '/home' }, { label: 'Page title' }]}
|
38
38
|
* title='Page title'
|
39
39
|
* description='Page description'
|
40
|
-
* headerActions={<
|
40
|
+
* headerActions={<TypedActions actions={actions} />}
|
41
41
|
* />
|
42
42
|
* <PageBody />...</PageBody>
|
43
43
|
* </PageLayout>
|
package/cjs/PageHeader.js
CHANGED
@@ -51,14 +51,14 @@ function Breadcrumbs(props) {
|
|
51
51
|
* breadcrumbs={[{ label: 'Home', to: '/home' }, { label: 'Page title' }]}
|
52
52
|
* title='Page title'
|
53
53
|
* description='Page description'
|
54
|
-
* headerActions={<
|
54
|
+
* headerActions={<TypedActions actions={actions} />}
|
55
55
|
* />
|
56
56
|
* <PageBody />...</PageBody>
|
57
57
|
* </PageLayout>
|
58
58
|
* <Page>
|
59
59
|
*/
|
60
60
|
function PageHeader(props) {
|
61
|
-
var navigation = props.navigation, breadcrumbs = props.breadcrumbs, title = props.title, description = props.description, controls = props.controls,
|
61
|
+
var navigation = props.navigation, breadcrumbs = props.breadcrumbs, title = props.title, description = props.description, controls = props.controls, headerActions = props.headerActions;
|
62
62
|
var lg = (0, useBreakPoint_1.useBreakpoint)('lg');
|
63
63
|
var xl = (0, useBreakPoint_1.useBreakpoint)('xl');
|
64
64
|
var isMdOrLarger = (0, useBreakPoint_1.useBreakpoint)('md');
|
@@ -91,6 +91,6 @@ function PageHeader(props) {
|
|
91
91
|
marginTop: 1,
|
92
92
|
marginLeft: 8,
|
93
93
|
verticalAlign: 'top',
|
94
|
-
} }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) }))] })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: title })))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { width: "160px" }) }))), isMdOrLarger && description && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "p", style: { paddingTop: xl ? 4 : 2, opacity: 0.8 } }, { children: typeof description === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: description })) : ((0, jsx_runtime_1.jsx)(react_core_1.Stack, { children: description.map(function (d) { return ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: d }, d)); }) })) })))] })), title && (
|
94
|
+
} }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) }))] })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: title })))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { width: "160px" }) }))), isMdOrLarger && description && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "p", style: { paddingTop: xl ? 4 : 2, opacity: 0.8 } }, { children: typeof description === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: description })) : ((0, jsx_runtime_1.jsx)(react_core_1.Stack, { children: description.map(function (d) { return ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: d }, d)); }) })) })))] })), title && (headerActions || controls) && ((0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ direction: { default: 'column' }, spaceItems: { default: 'spaceItemsSm', xl: 'spaceItemsMd' }, justifyContent: { default: 'justifyContentCenter' } }, { children: [controls && (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: controls })), headerActions && (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: headerActions })] })))] })) })))] }));
|
95
95
|
}
|
96
96
|
exports.PageHeader = PageHeader;
|
package/cjs/PageTable.d.ts
CHANGED
@@ -1,8 +1,8 @@
|
|
1
1
|
import { Dispatch, ReactNode, SetStateAction } from 'react';
|
2
|
+
import { IPageAction } from './PageActions/PageAction';
|
2
3
|
import { PageHeaderProps } from './PageHeader';
|
3
4
|
import { PageTableViewType } from './PageTableViewType';
|
4
5
|
import { IToolbarFilter } from './PageToolbar';
|
5
|
-
import { ITypedAction } from './TypedActions';
|
6
6
|
export type TablePageProps<T extends object> = PageHeaderProps & PageTableProps<T> & {
|
7
7
|
error?: Error;
|
8
8
|
};
|
@@ -11,9 +11,9 @@ export type PageTableProps<T extends object> = {
|
|
11
11
|
keyFn: (item: T) => string | number;
|
12
12
|
itemCount?: number;
|
13
13
|
pageItems: T[] | undefined;
|
14
|
-
toolbarActions?:
|
14
|
+
toolbarActions?: IPageAction<T>[];
|
15
15
|
tableColumns: ITableColumn<T>[];
|
16
|
-
rowActions?:
|
16
|
+
rowActions?: IPageAction<T>[];
|
17
17
|
toolbarFilters?: IToolbarFilter[];
|
18
18
|
filters?: Record<string, string[]>;
|
19
19
|
setFilters?: Dispatch<SetStateAction<Record<string, string[]>>>;
|