@ansible/ansible-ui-framework 0.0.373 → 0.0.375

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. package/cjs/PageActions/PageAction.d.ts +38 -0
  2. package/cjs/PageActions/PageAction.js +2 -0
  3. package/cjs/PageActions/PageActionType.d.ts +7 -0
  4. package/cjs/PageActions/PageActionType.js +11 -0
  5. package/cjs/PageActions/PageActions.d.ts +27 -0
  6. package/cjs/PageActions/PageActions.js +68 -0
  7. package/cjs/PageActions/PageBulkAction.d.ts +7 -0
  8. package/cjs/PageActions/PageBulkAction.js +35 -0
  9. package/cjs/PageActions/PageButtonAction.d.ts +8 -0
  10. package/cjs/PageActions/PageButtonAction.js +34 -0
  11. package/cjs/PageActions/PageDropdownAction.d.ts +15 -0
  12. package/cjs/PageActions/PageDropdownAction.js +125 -0
  13. package/cjs/PageActions/PagePinnedActions.d.ts +20 -0
  14. package/cjs/PageActions/PagePinnedActions.js +57 -0
  15. package/cjs/PageActions/PageSingleAction.d.ts +8 -0
  16. package/cjs/PageActions/PageSingleAction.js +35 -0
  17. package/cjs/PageDataList.d.ts +3 -3
  18. package/cjs/PageDataList.js +4 -3
  19. package/cjs/{PageForm.d.ts → PageForm/PageForm.d.ts} +1 -1
  20. package/cjs/{PageForm.js → PageForm/PageForm.js} +11 -16
  21. package/cjs/PageForm/PageFormSelectOption.d.ts +9 -0
  22. package/cjs/PageForm/PageFormSelectOption.js +29 -0
  23. package/cjs/PageHeader.d.ts +1 -1
  24. package/cjs/PageHeader.js +3 -3
  25. package/cjs/PageTable.d.ts +3 -3
  26. package/cjs/PageTable.js +5 -5
  27. package/cjs/PageTableCard.d.ts +2 -2
  28. package/cjs/PageTableCard.js +2 -2
  29. package/cjs/PageTableList.d.ts +2 -2
  30. package/cjs/PageTableList.js +2 -2
  31. package/cjs/PageToolbar.d.ts +3 -3
  32. package/cjs/PageToolbar.js +6 -5
  33. package/cjs/Settings.js +6 -6
  34. package/cjs/components/PageFormGroup.d.ts +11 -0
  35. package/cjs/components/PageFormGroup.js +27 -0
  36. package/cjs/components/PageSelect.d.ts +16 -0
  37. package/cjs/components/PageSelect.js +54 -0
  38. package/cjs/components/PageSelectOption.d.ts +14 -0
  39. package/cjs/components/PageSelectOption.js +56 -0
  40. package/cjs/components/useOpen.d.ts +1 -1
  41. package/cjs/components/useOpen.js +5 -5
  42. package/cjs/index.d.ts +7 -2
  43. package/cjs/index.js +7 -2
  44. package/docs/components/PageHeader.md +1 -1
  45. package/package.json +1 -1
  46. package/cjs/TypedActions/TypedActions.d.ts +0 -76
  47. package/cjs/TypedActions/TypedActions.js +0 -159
  48. package/cjs/TypedActions/TypedActionsButtons.d.ts +0 -18
  49. package/cjs/TypedActions/TypedActionsButtons.js +0 -113
  50. package/cjs/TypedActions/index.d.ts +0 -2
  51. package/cjs/TypedActions/index.js +0 -18
  52. package/cjs/components/SingleSelect.d.ts +0 -18
  53. package/cjs/components/SingleSelect.js +0 -70
@@ -19,14 +19,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
19
19
  exports.useOpen = void 0;
20
20
  var react_1 = require("react");
21
21
  function useOpen(props) {
22
- var _a = __read((0, react_1.useState)(function () { var _a; return (_a = props.open) !== null && _a !== void 0 ? _a : false; }), 2), open = _a[0], setOpenState = _a[1];
22
+ var _a = __read((0, react_1.useState)(function () { var _a; return (_a = props === null || props === void 0 ? void 0 : props.open) !== null && _a !== void 0 ? _a : false; }), 2), open = _a[0], setOpenState = _a[1];
23
23
  (0, react_1.useEffect)(function () {
24
- if (props.open !== undefined) {
25
- setOpenState(props.open);
24
+ if ((props === null || props === void 0 ? void 0 : props.open) !== undefined) {
25
+ setOpenState(props === null || props === void 0 ? void 0 : props.open);
26
26
  }
27
- }, [props.open, setOpenState]);
27
+ }, [props === null || props === void 0 ? void 0 : props.open, setOpenState]);
28
28
  var setOpen = (0, react_1.useCallback)(function (open) {
29
- props.setOpen ? props.setOpen(open) : setOpenState(open);
29
+ (props === null || props === void 0 ? void 0 : props.setOpen) ? props === null || props === void 0 ? void 0 : props.setOpen(open) : setOpenState(open);
30
30
  }, [props]);
31
31
  var onToggle = (0, react_1.useCallback)(function () {
32
32
  setOpen(!open);
package/cjs/index.d.ts CHANGED
@@ -12,14 +12,20 @@ export * from './components/Collapse';
12
12
  export * from './components/Details';
13
13
  export * from './components/Help';
14
14
  export * from './components/icons/RunningIcon';
15
+ export * from './components/PageSelect';
16
+ export * from './components/PageSelectOption';
15
17
  export * from './components/pfcolors';
16
18
  export * from './components/Scrollable';
17
19
  export * from './components/useBreakPoint';
20
+ export * from './PageActions/PageAction';
21
+ export * from './PageActions/PageActions';
22
+ export * from './PageActions/PageActionType';
18
23
  export * from './PageAlertToaster';
19
24
  export * from './PageBody';
20
25
  export * from './PageDataList';
21
26
  export * from './PageDialog';
22
- export * from './PageForm';
27
+ export * from './PageForm/PageForm';
28
+ export * from './PageForm/PageFormSelectOption';
23
29
  export * from './PageFramework';
24
30
  export * from './PageHeader';
25
31
  export * from './PageLayout';
@@ -29,7 +35,6 @@ export * from './PageTableDetails';
29
35
  export * from './PageTabs';
30
36
  export * from './PageToolbar';
31
37
  export * from './Settings';
32
- export * from './TypedActions';
33
38
  export * from './useFrameworkTranslations';
34
39
  export * from './useInMemoryView';
35
40
  export * from './useSelectDialog';
package/cjs/index.js CHANGED
@@ -28,14 +28,20 @@ __exportStar(require("./components/Collapse"), exports);
28
28
  __exportStar(require("./components/Details"), exports);
29
29
  __exportStar(require("./components/Help"), exports);
30
30
  __exportStar(require("./components/icons/RunningIcon"), exports);
31
+ __exportStar(require("./components/PageSelect"), exports);
32
+ __exportStar(require("./components/PageSelectOption"), exports);
31
33
  __exportStar(require("./components/pfcolors"), exports);
32
34
  __exportStar(require("./components/Scrollable"), exports);
33
35
  __exportStar(require("./components/useBreakPoint"), exports);
36
+ __exportStar(require("./PageActions/PageAction"), exports);
37
+ __exportStar(require("./PageActions/PageActions"), exports);
38
+ __exportStar(require("./PageActions/PageActionType"), exports);
34
39
  __exportStar(require("./PageAlertToaster"), exports);
35
40
  __exportStar(require("./PageBody"), exports);
36
41
  __exportStar(require("./PageDataList"), exports);
37
42
  __exportStar(require("./PageDialog"), exports);
38
- __exportStar(require("./PageForm"), exports);
43
+ __exportStar(require("./PageForm/PageForm"), exports);
44
+ __exportStar(require("./PageForm/PageFormSelectOption"), exports);
39
45
  __exportStar(require("./PageFramework"), exports);
40
46
  __exportStar(require("./PageHeader"), exports);
41
47
  __exportStar(require("./PageLayout"), exports);
@@ -45,7 +51,6 @@ __exportStar(require("./PageTableDetails"), exports);
45
51
  __exportStar(require("./PageTabs"), exports);
46
52
  __exportStar(require("./PageToolbar"), exports);
47
53
  __exportStar(require("./Settings"), exports);
48
- __exportStar(require("./TypedActions"), exports);
49
54
  __exportStar(require("./useFrameworkTranslations"), exports);
50
55
  __exportStar(require("./useInMemoryView"), exports);
51
56
  __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={<PageActions actions={actions} />}
26
+ headerActions={<TypedActions actions={actions} />}
27
27
  />
28
28
  <PageBody />...</PageBody>
29
29
  </PageLayout>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ansible/ansible-ui-framework",
3
3
  "description": "A framework for building applications using PatternFly.",
4
- "version": "0.0.373",
4
+ "version": "0.0.375",
5
5
  "author": "Red Hat",
6
6
  "license": "MIT",
7
7
  "repository": {
@@ -1,76 +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
- isHidden?: (item: T) => boolean;
37
- };
38
- export type ITypedDropdownAction<T extends object> = ITypedActionCommon & {
39
- type: TypedActionType.dropdown;
40
- variant?: ButtonVariant;
41
- isHidden?: (item: T) => boolean;
42
- isDisabled?: (item: T) => string;
43
- options: ITypedAction<T>[];
44
- };
45
- export type ITypedAction<T extends object> = ITypedActionSeperator | ITypedActionButton | ITypedBulkAction<T> | ITypedSingleAction<T> | ITypedDropdownAction<T>;
46
- export declare function TypedActionsDropdown<T extends object>(props: {
47
- actions: ITypedAction<T>[];
48
- label?: string;
49
- icon?: ComponentClass | FunctionComponent;
50
- isDisabled?: boolean;
51
- tooltip?: string;
52
- isPrimary?: boolean;
53
- selectedItems?: T[];
54
- selectedItem?: T;
55
- position?: DropdownPosition;
56
- iconOnly?: boolean;
57
- }): JSX.Element;
58
- export declare function DropdownActionItem<T extends object>(props: {
59
- action: ITypedAction<T>;
60
- selectedItems: T[];
61
- selectedItem?: T;
62
- hasIcons: boolean;
63
- index: number;
64
- }): JSX.Element | null;
65
- export declare function TypedActions<T extends object>(props: {
66
- actions: ITypedAction<T>[];
67
- selectedItems?: T[];
68
- selectedItem?: T;
69
- wrapper?: ComponentClass | FunctionComponent;
70
- collapse?: WindowSize | 'always';
71
- noPrimary?: boolean;
72
- position?: DropdownPosition;
73
- iconOnly?: boolean;
74
- isFilled?: boolean;
75
- }): JSX.Element;
76
- export {};
@@ -1,159 +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, icon = props.icon, _a = props.isPrimary, isPrimary = _a === void 0 ? false : _a, selectedItems = props.selectedItems, selectedItem = props.selectedItem, iconOnly = props.iconOnly, isDisabled = props.isDisabled, tooltip = props.tooltip;
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 Icon = icon;
55
- var Toggle = label || Icon ? react_core_1.DropdownToggle : react_core_1.KebabToggle;
56
- 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: hasItemActions && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? 'primary' : undefined, isPrimary: isPrimary, toggleIndicator: Icon ? null : undefined, style: isPrimary && !label
57
- ? {
58
- color: 'var(--pf-global--Color--light-100)',
59
- }
60
- : {} }, { 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)(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: {
61
- zIndex: 201,
62
- } }));
63
- return tooltip && (iconOnly || isDisabled) ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: dropdown }))) : (__assign({}, dropdown));
64
- }
65
- exports.TypedActionsDropdown = TypedActionsDropdown;
66
- function DropdownActionItem(props) {
67
- var action = props.action, selectedItems = props.selectedItems, selectedItem = props.selectedItem, hasIcons = props.hasIcons, index = props.index;
68
- switch (action.type) {
69
- case TypedActionType.single: {
70
- var Icon = action.icon;
71
- if (!Icon && hasIcons)
72
- Icon = TransparentIcon;
73
- var tooltip = action.tooltip;
74
- var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : false;
75
- tooltip = isDisabled ? isDisabled : tooltip;
76
- var isHidden = action.isHidden !== undefined && selectedItem ? action.isHidden(selectedItem) : false;
77
- if (isHidden) {
78
- return null;
79
- }
80
- 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: {
81
- color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
82
- } }, { children: action.label })) }), action.label));
83
- }
84
- case TypedActionType.button:
85
- case TypedActionType.bulk: {
86
- var Icon = action.icon;
87
- if (!Icon && hasIcons)
88
- Icon = TransparentIcon;
89
- var tooltip = action.tooltip;
90
- var isDisabled = false;
91
- if (action.type === TypedActionType.bulk && !selectedItems.length) {
92
- tooltip = 'No selections';
93
- isDisabled = true;
94
- }
95
- 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: {
96
- color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
97
- } }, { children: action.label })) }), action.label));
98
- }
99
- case TypedActionType.dropdown: {
100
- var isHidden = action.isHidden !== undefined && selectedItem ? action.isHidden(selectedItem) : false;
101
- if (isHidden) {
102
- return null;
103
- }
104
- var tooltip = action.label;
105
- var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : '';
106
- tooltip = isDisabled ? isDisabled : tooltip;
107
- return ((0, jsx_runtime_1.jsx)(TypedActionsDropdown, { label: action.label, actions: action.options, selectedItem: selectedItem, isDisabled: Boolean(isDisabled), tooltip: tooltip }, action.label));
108
- }
109
- case TypedActionType.seperator:
110
- return (0, jsx_runtime_1.jsx)(react_core_1.DropdownSeparator, {}, "separator-".concat(index));
111
- default:
112
- return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
113
- }
114
- }
115
- exports.DropdownActionItem = DropdownActionItem;
116
- function TypedActions(props) {
117
- var _a, _b;
118
- var actions = props.actions;
119
- var bp = (0, useBreakPoint_1.useBreakpoint)(props.collapse !== 'always' ? (_a = props.collapse) !== null && _a !== void 0 ? _a : 'lg' : 'lg');
120
- var collapseButtons = props.collapse === 'always' || !bp;
121
- var isButtonAction = (0, react_1.useCallback)(function (action) {
122
- var actionVariants = [
123
- react_core_1.ButtonVariant.primary,
124
- react_core_1.ButtonVariant.secondary,
125
- react_core_1.ButtonVariant.danger,
126
- ];
127
- return action.type !== TypedActionType.seperator && actionVariants.includes(action.variant);
128
- }, []);
129
- var isHidden = (0, react_1.useCallback)(function (action) {
130
- return (action.type === TypedActionType.single || action.type === TypedActionType.dropdown) &&
131
- action.isHidden !== undefined &&
132
- props.selectedItem
133
- ? action.isHidden(props.selectedItem)
134
- : false;
135
- }, [props.selectedItem]);
136
- var buttonActions = (0, react_1.useMemo)(function () {
137
- var _a;
138
- if (collapseButtons) {
139
- return [];
140
- }
141
- return ((_a = actions === null || actions === void 0 ? void 0 : actions.filter(function (action) { return isButtonAction(action) && !isHidden(action); })) !== null && _a !== void 0 ? _a : []);
142
- }, [collapseButtons, actions, isButtonAction, isHidden]);
143
- var dropdownActions = (0, react_1.useMemo)(function () {
144
- var _a;
145
- if (collapseButtons) {
146
- return actions !== null && actions !== void 0 ? actions : [];
147
- }
148
- var dropdownActions = (_a = actions === null || actions === void 0 ? void 0 : actions.filter(function (action) { return !isButtonAction(action) && !isHidden(action); })) !== null && _a !== void 0 ? _a : [];
149
- while (dropdownActions.length && dropdownActions[0].type === TypedActionType.seperator)
150
- dropdownActions.shift();
151
- while (dropdownActions.length &&
152
- dropdownActions[dropdownActions.length - 1].type === TypedActionType.seperator)
153
- dropdownActions.pop();
154
- return dropdownActions;
155
- }, [collapseButtons, actions, isButtonAction, isHidden]);
156
- return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ style: props.isFilled ? { width: '100%' } : undefined, hasGutter: !props.iconOnly }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ isFilled: true }, { children: (0, jsx_runtime_1.jsx)(TypedActionsButtons_1.TypedActionsButtons, __assign({}, props, { actions: buttonActions })) })), (0, jsx_runtime_1.jsx)(TypedActionsDropdown, __assign({}, props, { actions: dropdownActions, selectedItem: props.selectedItem, position: props.position, isPrimary: !!((_b = props.selectedItems) === null || _b === void 0 ? void 0 : _b.length) }))] })));
157
- }
158
- exports.TypedActions = TypedActions;
159
- 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,113 +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
- var tooltip = action.label;
43
- var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : '';
44
- tooltip = isDisabled ? isDisabled : tooltip;
45
- return ((0, jsx_runtime_1.jsx)(TypedActions_1.TypedActionsDropdown, { actions: action.options, selectedItems: selectedItems, selectedItem: selectedItem, label: action.label, icon: action.icon, iconOnly: props.iconOnly, position: react_core_1.DropdownPosition.right, isDisabled: Boolean(isDisabled), tooltip: props.iconOnly || isDisabled ? tooltip : undefined, isPrimary: action.variant === react_core_1.ButtonVariant.primary && !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) }));
46
- }
47
- default: {
48
- return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
49
- }
50
- }
51
- }
52
- exports.TypedActionButton = TypedActionButton;
53
- function ActionButton(props) {
54
- var _a;
55
- var action = props.action, selectedItems = props.selectedItems, noPrimary = props.noPrimary, wrapper = props.wrapper;
56
- var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
57
- var Icon = action.icon;
58
- var tooltip = action.tooltip;
59
- var isDisabled = false;
60
- var variant = (_a = action.variant) !== null && _a !== void 0 ? _a : react_core_1.ButtonVariant.secondary;
61
- if (selectedItems &&
62
- selectedItems.length &&
63
- [react_core_1.ButtonVariant.primary, react_core_1.ButtonVariant.danger].includes(variant)) {
64
- variant = react_core_1.ButtonVariant.secondary;
65
- }
66
- if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
67
- variant = react_core_1.ButtonVariant.secondary;
68
- }
69
- if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
70
- variant = react_core_1.ButtonVariant.danger;
71
- }
72
- 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 })) })) }));
73
- }
74
- function ActionBulkButton(props) {
75
- var _a;
76
- var action = props.action, noPrimary = props.noPrimary, selectedItems = props.selectedItems, wrapper = props.wrapper;
77
- var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
78
- var Icon = action.icon;
79
- var tooltip = action.tooltip;
80
- var isDisabled = false;
81
- var variant = (_a = action.variant) !== null && _a !== void 0 ? _a : react_core_1.ButtonVariant.secondary;
82
- if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
83
- variant = react_core_1.ButtonVariant.secondary;
84
- }
85
- if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
86
- variant = react_core_1.ButtonVariant.danger;
87
- }
88
- if (!selectedItems || !selectedItems.length) {
89
- tooltip = 'No selections';
90
- isDisabled = true;
91
- }
92
- 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 })) })) }));
93
- }
94
- function ActionSingleButton(props) {
95
- var _a, _b;
96
- var action = props.action, selectedItem = props.selectedItem, noPrimary = props.noPrimary, wrapper = props.wrapper;
97
- var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
98
- var Icon = action.icon;
99
- var tooltip = ((_a = action.tooltip) !== null && _a !== void 0 ? _a : props.iconOnly) ? props.action.label : undefined;
100
- var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : false;
101
- tooltip = isDisabled ? isDisabled : tooltip;
102
- var variant = (_b = action.variant) !== null && _b !== void 0 ? _b : react_core_1.ButtonVariant.secondary;
103
- if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
104
- variant = react_core_1.ButtonVariant.secondary;
105
- }
106
- if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
107
- variant = react_core_1.ButtonVariant.danger;
108
- }
109
- if (props.iconOnly) {
110
- variant = react_core_1.ButtonVariant.plain;
111
- }
112
- 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 })) })) }));
113
- }
@@ -1,2 +0,0 @@
1
- export * from './TypedActions';
2
- export * from './TypedActionsButtons';
@@ -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);
@@ -1,18 +0,0 @@
1
- import { CSSProperties, ReactNode } from 'react';
2
- export declare function SingleSelect(props: {
3
- id?: string;
4
- label: string;
5
- value: string;
6
- onChange: (value: string) => void;
7
- children: ReactNode;
8
- style?: CSSProperties;
9
- open?: boolean;
10
- setOpen?: (open: boolean) => void;
11
- }): JSX.Element;
12
- export declare function SingleSelect2(props: {
13
- id?: string;
14
- children: ReactNode;
15
- value?: string;
16
- onChange: (value: string) => void;
17
- label?: string;
18
- }): JSX.Element;
@@ -1,70 +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.SingleSelect2 = exports.SingleSelect = void 0;
31
- var jsx_runtime_1 = require("react/jsx-runtime");
32
- var react_core_1 = require("@patternfly/react-core");
33
- var react_1 = require("react");
34
- var useOpen_1 = require("./useOpen");
35
- function SingleSelect(props) {
36
- var _a;
37
- var onChange = props.onChange;
38
- var _b = __read((0, useOpen_1.useOpen)(props), 3), open = _b[0], setOpen = _b[1], onToggle = _b[2];
39
- var onSelect = (0, react_1.useCallback)(function (_e, v) {
40
- if (typeof v === 'string') {
41
- onChange(v);
42
- }
43
- else {
44
- onChange(v.toString());
45
- }
46
- setOpen(false);
47
- }, [onChange, setOpen]);
48
- var id = (_a = props.id) !== null && _a !== void 0 ? _a : props.label.toLocaleLowerCase().split(' ').join('-');
49
- return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ label: props.label, fieldId: id, style: props.style }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ id: id, selections: props.value, isOpen: open, onToggle: onToggle, onSelect: onSelect }, { children: props.children })) })));
50
- }
51
- exports.SingleSelect = SingleSelect;
52
- function SingleSelect2(props) {
53
- var onChange = props.onChange;
54
- var id = props.id;
55
- var _a = __read((0, react_1.useState)(false), 2), open = _a[0], setOpen = _a[1];
56
- var onToggle = (0, react_1.useCallback)(function () {
57
- setOpen(function (open) { return !open; });
58
- }, []);
59
- var onSelect = (0, react_1.useCallback)(function (_e, v) {
60
- if (typeof v === 'string') {
61
- onChange(v);
62
- }
63
- else {
64
- onChange(v.toString());
65
- }
66
- setOpen(false);
67
- }, [onChange]);
68
- return ((0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ id: id, selections: props.value, isOpen: open, onToggle: onToggle, onSelect: onSelect }, { children: props.children })));
69
- }
70
- exports.SingleSelect2 = SingleSelect2;