@ansible/ansible-ui-framework 0.0.478 → 0.0.480
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/BulkConfirmationDialog.js +1 -1
- package/cjs/PageActions/PageAction.d.ts +21 -2
- package/cjs/PageActions/PageActionType.d.ts +1 -0
- package/cjs/PageActions/PageActionType.js +1 -0
- package/cjs/PageActions/PageActions.js +1 -0
- package/cjs/PageActions/PageButtonAction.js +4 -1
- package/cjs/PageActions/PageDropdownAction.js +9 -3
- package/cjs/PageActions/PagePinnedActions.js +2 -1
- package/cjs/PageActions/PageSingleAction.js +4 -1
- package/cjs/PageForm/Inputs/PageFormCheckbox.d.ts +2 -2
- package/cjs/PageForm/Inputs/PageFormTextArea.d.ts +2 -2
- package/cjs/PageForm/Inputs/PageFormTextInput.d.ts +1 -1
- package/cjs/components/ErrorBoundary.d.ts +1 -1
- package/package.json +1 -1
@@ -46,7 +46,7 @@ function BulkConfirmationDialog(props) {
|
|
46
46
|
}, [onClose, setDialog]);
|
47
47
|
var _c = (0, useTableItems_1.usePaged)(items), paged = _c.paged, page = _c.page, perPage = _c.perPage, setPage = _c.setPage, setPerPage = _c.setPerPage;
|
48
48
|
var _d = __read((0, react_1.useState)(!confirmText), 2), confirmed = _d[0], setConfirmed = _d[1];
|
49
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.Modal, __assign({ titleIconVariant: isDanger ? 'warning' : undefined, title: title, description: prompt, variant: react_core_1.ModalVariant.medium, isOpen: true, onClose: onCloseClicked, actions: [
|
49
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.Modal, __assign({ titleIconVariant: isDanger ? 'warning' : undefined, title: title, description: prompt ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: prompt }) : undefined, variant: react_core_1.ModalVariant.medium, isOpen: true, onClose: onCloseClicked, actions: [
|
50
50
|
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: isDanger ? 'danger' : 'primary', onClick: function () {
|
51
51
|
onCloseClicked();
|
52
52
|
onConfirm();
|
@@ -12,23 +12,41 @@ export interface IPageActionCommon {
|
|
12
12
|
export interface IPageActionSeperator {
|
13
13
|
type: PageActionType.seperator;
|
14
14
|
}
|
15
|
-
|
15
|
+
type IPageActionWithLink = IPageActionCommon & {
|
16
|
+
type: PageActionType.button;
|
17
|
+
variant?: ButtonVariant;
|
18
|
+
href: string;
|
19
|
+
onClick?: never;
|
20
|
+
};
|
21
|
+
type IPageActionWithOnClick = IPageActionCommon & {
|
16
22
|
type: PageActionType.button;
|
17
23
|
variant?: ButtonVariant;
|
18
24
|
onClick: () => void;
|
25
|
+
href?: never;
|
19
26
|
};
|
27
|
+
export type IPageActionButton = IPageActionWithLink | IPageActionWithOnClick;
|
20
28
|
export type IPageBulkAction<T extends object> = IPageActionCommon & {
|
21
29
|
type: PageActionType.bulk;
|
22
30
|
variant?: ButtonVariant;
|
23
31
|
onClick: (selectedItems: T[]) => void;
|
24
32
|
};
|
25
|
-
|
33
|
+
type IPageSingleActionWithLink<T extends object> = IPageActionCommon & {
|
34
|
+
type: PageActionType.singleLink;
|
35
|
+
variant?: ButtonVariant;
|
36
|
+
href: (item: T) => string;
|
37
|
+
onClick?: never;
|
38
|
+
isDisabled?: (item: T) => string | undefined;
|
39
|
+
isHidden?: (item: T) => boolean;
|
40
|
+
};
|
41
|
+
type IPageSingleActionWithOnClick<T extends object> = IPageActionCommon & {
|
26
42
|
type: PageActionType.single;
|
27
43
|
variant?: ButtonVariant;
|
28
44
|
onClick: (item: T) => void;
|
45
|
+
href?: never;
|
29
46
|
isDisabled?: (item: T) => string | undefined;
|
30
47
|
isHidden?: (item: T) => boolean;
|
31
48
|
};
|
49
|
+
export type IPageSingleAction<T extends object> = IPageSingleActionWithLink<T> | IPageSingleActionWithOnClick<T>;
|
32
50
|
export type IPageDropdownAction<T extends object> = IPageActionCommon & {
|
33
51
|
type: PageActionType.dropdown;
|
34
52
|
variant?: ButtonVariant;
|
@@ -36,3 +54,4 @@ export type IPageDropdownAction<T extends object> = IPageActionCommon & {
|
|
36
54
|
isDisabled?: (item: T) => string;
|
37
55
|
options: IPageAction<T>[];
|
38
56
|
};
|
57
|
+
export {};
|
@@ -6,6 +6,7 @@ var PageActionType;
|
|
6
6
|
PageActionType["seperator"] = "seperator";
|
7
7
|
PageActionType["button"] = "button";
|
8
8
|
PageActionType["single"] = "single";
|
9
|
+
PageActionType["singleLink"] = "singleLink";
|
9
10
|
PageActionType["bulk"] = "bulk";
|
10
11
|
PageActionType["dropdown"] = "dropdown";
|
11
12
|
})(PageActionType = exports.PageActionType || (exports.PageActionType = {}));
|
@@ -57,6 +57,7 @@ function isPinnedAction(action) {
|
|
57
57
|
function isHiddenAction(action, selectedItem) {
|
58
58
|
switch (action.type) {
|
59
59
|
case PageActionType_1.PageActionType.single:
|
60
|
+
case PageActionType_1.PageActionType.singleLink:
|
60
61
|
case PageActionType_1.PageActionType.dropdown:
|
61
62
|
return action.isHidden !== undefined && selectedItem ? action.isHidden(selectedItem) : false;
|
62
63
|
case PageActionType_1.PageActionType.bulk:
|
@@ -15,6 +15,7 @@ exports.PageButtonAction = void 0;
|
|
15
15
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
16
|
var react_core_1 = require("@patternfly/react-core");
|
17
17
|
var react_1 = require("react");
|
18
|
+
var react_router_dom_1 = require("react-router-dom");
|
18
19
|
function PageButtonAction(props) {
|
19
20
|
var _a, _b;
|
20
21
|
var action = props.action, isSecondary = props.isSecondary, wrapper = props.wrapper;
|
@@ -32,6 +33,8 @@ function PageButtonAction(props) {
|
|
32
33
|
if (props.iconOnly) {
|
33
34
|
variant = react_core_1.ButtonVariant.plain;
|
34
35
|
}
|
35
|
-
|
36
|
+
var id = props.action.label.toLowerCase().split(' ').join('-');
|
37
|
+
var content = props.iconOnly && Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : action.shortLabel ? action.shortLabel : action.label;
|
38
|
+
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({ id: id, 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 ? action.onClick : undefined, component: action.href ? function (props) { return (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, __assign({}, props, { to: action.href })); } : undefined }, { children: content })) })) }));
|
36
39
|
}
|
37
40
|
exports.PageButtonAction = PageButtonAction;
|
@@ -41,6 +41,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
41
41
|
var react_core_1 = require("@patternfly/react-core");
|
42
42
|
var react_icons_1 = require("@patternfly/react-icons");
|
43
43
|
var react_1 = require("react");
|
44
|
+
var react_router_dom_1 = require("react-router-dom");
|
44
45
|
var PageActions_1 = require("./PageActions");
|
45
46
|
var PageActionType_1 = require("./PageActionType");
|
46
47
|
function PageDropdownAction(props) {
|
@@ -72,14 +73,17 @@ exports.PageDropdownAction = PageDropdownAction;
|
|
72
73
|
function PageDropdownActionItem(props) {
|
73
74
|
var action = props.action, selectedItems = props.selectedItems, selectedItem = props.selectedItem, hasIcons = props.hasIcons, index = props.index;
|
74
75
|
switch (action.type) {
|
75
|
-
case PageActionType_1.PageActionType.single:
|
76
|
+
case PageActionType_1.PageActionType.single:
|
77
|
+
case PageActionType_1.PageActionType.singleLink: {
|
76
78
|
var Icon = action.icon;
|
77
79
|
if (!Icon && hasIcons)
|
78
80
|
Icon = TransparentIcon;
|
79
81
|
var tooltip = action.tooltip;
|
80
82
|
var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : false;
|
81
83
|
tooltip = isDisabled ? isDisabled : tooltip;
|
82
|
-
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); }
|
84
|
+
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: action.onClick ? function () { return selectedItem && action.onClick(selectedItem); } : undefined, component: (action.href
|
85
|
+
? function (props) { return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, __assign({}, props, { to: selectedItem ? action.href(selectedItem) : '' }))); }
|
86
|
+
: undefined), isAriaDisabled: Boolean(isDisabled), icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, style: {
|
83
87
|
color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
|
84
88
|
} }, { children: action.label })) }), action.label));
|
85
89
|
}
|
@@ -94,7 +98,9 @@ function PageDropdownActionItem(props) {
|
|
94
98
|
tooltip = 'No selections';
|
95
99
|
isDisabled = true;
|
96
100
|
}
|
97
|
-
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); }
|
101
|
+
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: action.onClick ? function () { return action.onClick(selectedItems); } : undefined, component: (!action.onClick
|
102
|
+
? function (props) { return (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, __assign({}, props, { to: action.href })); }
|
103
|
+
: undefined), isAriaDisabled: isDisabled, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, style: {
|
98
104
|
color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
|
99
105
|
} }, { children: action.label })) }), action.label));
|
100
106
|
}
|
@@ -32,7 +32,8 @@ function PagePinnedAction(props) {
|
|
32
32
|
case PageActionType_1.PageActionType.seperator: {
|
33
33
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
34
34
|
}
|
35
|
-
case PageActionType_1.PageActionType.single:
|
35
|
+
case PageActionType_1.PageActionType.single:
|
36
|
+
case PageActionType_1.PageActionType.singleLink: {
|
36
37
|
return ((0, jsx_runtime_1.jsx)(PageSingleAction_1.PageSingleAction, { action: action, selectedItem: selectedItem, iconOnly: props.iconOnly, wrapper: wrapper }));
|
37
38
|
}
|
38
39
|
case PageActionType_1.PageActionType.bulk: {
|
@@ -15,6 +15,7 @@ exports.PageSingleAction = void 0;
|
|
15
15
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
16
|
var react_core_1 = require("@patternfly/react-core");
|
17
17
|
var react_1 = require("react");
|
18
|
+
var react_router_dom_1 = require("react-router-dom");
|
18
19
|
function PageSingleAction(props) {
|
19
20
|
var _a, _b;
|
20
21
|
var action = props.action, selectedItem = props.selectedItem, wrapper = props.wrapper;
|
@@ -30,6 +31,8 @@ function PageSingleAction(props) {
|
|
30
31
|
if (props.iconOnly) {
|
31
32
|
variant = react_core_1.ButtonVariant.plain;
|
32
33
|
}
|
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({ id: props.action.label.toLowerCase().split(' ').join('-'), 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); }
|
34
|
+
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({ id: props.action.label.toLowerCase().split(' ').join('-'), 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: action.onClick ? function () { return selectedItem && action.onClick(selectedItem); } : undefined, component: action.href
|
35
|
+
? function (props) { return (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, __assign({}, props, { to: selectedItem && action.href(selectedItem) })); }
|
36
|
+
: undefined, isDanger: action.isDanger }, { children: props.iconOnly && Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : action.shortLabel ? action.shortLabel : action.label })) })) }));
|
34
37
|
}
|
35
38
|
exports.PageSingleAction = PageSingleAction;
|
@@ -1,10 +1,10 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { CheckboxProps } from '@patternfly/react-core';
|
3
|
-
import { FieldPath,
|
3
|
+
import { FieldPath, FieldValues, Validate } from 'react-hook-form';
|
4
4
|
export type PageFormCheckboxProps<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
|
5
5
|
id?: string;
|
6
6
|
name: TFieldName;
|
7
|
-
validate?: Validate<
|
7
|
+
validate?: Validate<boolean, TFieldValues> | Record<string, Validate<boolean, TFieldValues>>;
|
8
8
|
} & Omit<CheckboxProps, 'id' | 'onChange' | 'value'>;
|
9
9
|
/** PatternFly Checkbox wrapper for use with react-hook-form */
|
10
10
|
export declare function PageFormCheckbox<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: PageFormCheckboxProps<TFieldValues, TFieldName>): JSX.Element;
|
@@ -1,12 +1,12 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import { FieldPath,
|
2
|
+
import { FieldPath, FieldValues, Validate, ValidationRule } from 'react-hook-form';
|
3
3
|
import { FormGroupTextAreaProps } from './FormGroupTextArea';
|
4
4
|
export type PageFormTextAreaProps<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
|
5
5
|
name: TFieldName;
|
6
6
|
minLength?: number | ValidationRule<number>;
|
7
7
|
maxLength?: number | ValidationRule<number>;
|
8
8
|
pattern?: ValidationRule<RegExp>;
|
9
|
-
validate?: Validate<
|
9
|
+
validate?: Validate<string, TFieldValues> | Record<string, Validate<string, TFieldValues>>;
|
10
10
|
} & Omit<FormGroupTextAreaProps, 'onChange' | 'value'>;
|
11
11
|
/** PatternFly TextArea wrapper for use with react-hook-form */
|
12
12
|
export declare function PageFormTextArea<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: PageFormTextAreaProps<TFieldValues, TFieldName>): JSX.Element;
|
@@ -6,7 +6,7 @@ export type PageFormTextInputProps<TFieldValues extends FieldValues = FieldValue
|
|
6
6
|
minLength?: number | ValidationRule<number>;
|
7
7
|
maxLength?: number | ValidationRule<number>;
|
8
8
|
pattern?: ValidationRule<RegExp>;
|
9
|
-
validate?: Validate<
|
9
|
+
validate?: Validate<string, TFieldValues> | Record<string, Validate<string, TFieldValues>>;
|
10
10
|
selectTitle?: string;
|
11
11
|
selectValue?: (selection: TSelection) => FieldPathValue<TSelection, FieldPath<TSelection>>;
|
12
12
|
selectOpen?: (callback: (selection: TSelection) => void, title: string) => void;
|
@@ -10,6 +10,6 @@ declare class ErrorBoundary extends Component<Props, State> {
|
|
10
10
|
state: State;
|
11
11
|
static getDerivedStateFromError(_: Error): State;
|
12
12
|
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
|
13
|
-
render():
|
13
|
+
render(): string | number | boolean | import("react").ReactFragment | JSX.Element | null | undefined;
|
14
14
|
}
|
15
15
|
export default ErrorBoundary;
|