@ansible/ansible-ui-framework 0.0.259 → 0.0.261
Sign up to get free protection for your applications and to get access to all the features.
- package/{mjs → cjs}/BulkActionDialog.d.ts +0 -0
- package/{mjs → cjs}/BulkProgressDialog.d.ts +0 -0
- package/{mjs → cjs}/FilterDrawer.d.ts +0 -0
- package/{mjs → cjs}/PageAlertToaster.d.ts +0 -0
- package/{mjs → cjs}/PageBody.d.ts +0 -0
- package/{mjs → cjs}/PageCells.d.ts +0 -0
- package/{mjs → cjs}/PageColumnModal.d.ts +0 -0
- package/{mjs → cjs}/PageDataList.d.ts +0 -0
- package/{mjs → cjs}/PageDialog.d.ts +0 -0
- package/{mjs → cjs}/PageForm.d.ts +0 -0
- package/{mjs → cjs}/PageFramework.d.ts +0 -0
- package/{mjs → cjs}/PageHeader.d.ts +0 -0
- package/{mjs → cjs}/PageLayout.d.ts +0 -0
- package/{mjs → cjs}/PagePagination.d.ts +0 -0
- package/{mjs → cjs}/PageTable.d.ts +0 -0
- package/{mjs → cjs}/PageTableCard.d.ts +0 -0
- package/{mjs → cjs}/PageTableCards.d.ts +0 -0
- package/{mjs → cjs}/PageTableDetails.d.ts +0 -0
- package/{mjs → cjs}/PageTableList.d.ts +0 -0
- package/{mjs → cjs}/PageTableViewType.d.ts +0 -0
- package/{mjs → cjs}/PageTabs.d.ts +0 -0
- package/{mjs → cjs}/PageToolbar.d.ts +0 -0
- package/{mjs → cjs}/Settings.d.ts +0 -0
- package/{mjs → cjs}/TypedActions/TypedActions.d.ts +0 -0
- package/{mjs → cjs}/TypedActions/TypedActionsButtons.d.ts +0 -0
- package/{mjs → cjs}/TypedActions/index.d.ts +0 -0
- package/{mjs → cjs}/components/BulkSelector.d.ts +0 -0
- package/{mjs → cjs}/components/Collapse.d.ts +0 -0
- package/{mjs → cjs}/components/DetailInfo.d.ts +0 -0
- package/{mjs → cjs}/components/Details.d.ts +0 -0
- package/{mjs → cjs}/components/Dotted.d.ts +0 -0
- package/{mjs → cjs}/components/DropdownControlled.d.ts +0 -0
- package/{mjs → cjs}/components/ErrorBoundary.d.ts +0 -0
- package/{mjs → cjs}/components/Grid.d.ts +0 -0
- package/{mjs → cjs}/components/Help.d.ts +0 -0
- package/{mjs → cjs}/components/IconWrapper.d.ts +0 -0
- package/{mjs → cjs}/components/LoadingPage.d.ts +0 -0
- package/{mjs → cjs}/components/Masonry.d.ts +0 -0
- package/{mjs → cjs}/components/Scrollable.d.ts +0 -0
- package/{mjs → cjs}/components/SingleSelect.d.ts +0 -0
- package/{mjs → cjs}/components/patternfly-colors.d.ts +0 -0
- package/{mjs → cjs}/components/useBreakPoint.d.ts +0 -0
- package/{mjs → cjs}/components/useOpen.d.ts +0 -0
- package/{mjs → cjs}/components/useWindowLocation.d.ts +0 -0
- package/{mjs → cjs}/index.d.ts +3 -0
- package/cjs/index.js +3 -0
- package/{mjs → cjs}/useFrameworkTranslations.d.ts +0 -0
- package/{mjs → cjs}/useInMemoryView.d.ts +0 -0
- package/{mjs → cjs}/useSelectDialog.d.ts +0 -0
- package/{mjs → cjs}/useSelectMultipleDialog.d.ts +0 -0
- package/{mjs → cjs}/useTableItems.d.ts +0 -0
- package/{mjs → cjs}/useView.d.ts +0 -0
- package/{mjs → cjs}/utils/compare.d.ts +0 -0
- package/{mjs → cjs}/utils/download-file.d.ts +0 -0
- package/{mjs → cjs}/utils/random-string.d.ts +0 -0
- package/package.json +3 -11
- package/mjs/BulkActionDialog.js +0 -104
- package/mjs/BulkProgressDialog.js +0 -131
- package/mjs/FilterDrawer.js +0 -24
- package/mjs/PageAlertToaster.js +0 -48
- package/mjs/PageBody.js +0 -29
- package/mjs/PageCells.js +0 -102
- package/mjs/PageColumnModal.js +0 -64
- package/mjs/PageDataList.js +0 -44
- package/mjs/PageDialog.js +0 -12
- package/mjs/PageForm.js +0 -316
- package/mjs/PageFramework.js +0 -8
- package/mjs/PageHeader.js +0 -86
- package/mjs/PageLayout.js +0 -23
- package/mjs/PagePagination.js +0 -22
- package/mjs/PageTable.js +0 -191
- package/mjs/PageTableCard.js +0 -69
- package/mjs/PageTableCards.js +0 -23
- package/mjs/PageTableDetails.js +0 -11
- package/mjs/PageTableList.js +0 -62
- package/mjs/PageTableViewType.js +0 -6
- package/mjs/PageTabs.js +0 -45
- package/mjs/PageToolbar.js +0 -172
- package/mjs/Settings.js +0 -87
- package/mjs/TypedActions/TypedActions.js +0 -190
- package/mjs/TypedActions/TypedActionsButtons.js +0 -87
- package/mjs/TypedActions/index.js +0 -2
- package/mjs/components/BulkSelector.js +0 -56
- package/mjs/components/Collapse.js +0 -7
- package/mjs/components/DetailInfo.js +0 -8
- package/mjs/components/Details.js +0 -68
- package/mjs/components/Dotted.js +0 -4
- package/mjs/components/DropdownControlled.js +0 -8
- package/mjs/components/ErrorBoundary.js +0 -25
- package/mjs/components/Grid.js +0 -27
- package/mjs/components/Help.js +0 -9
- package/mjs/components/IconWrapper.js +0 -40
- package/mjs/components/LoadingPage.js +0 -9
- package/mjs/components/Masonry.js +0 -69
- package/mjs/components/Scrollable.js +0 -60
- package/mjs/components/SingleSelect.js +0 -37
- package/mjs/components/patternfly-colors.js +0 -38
- package/mjs/components/useBreakPoint.js +0 -118
- package/mjs/components/useOpen.js +0 -16
- package/mjs/components/useWindowLocation.js +0 -48
- package/mjs/index.js +0 -24
- package/mjs/useFrameworkTranslations.js +0 -22
- package/mjs/useInMemoryView.js +0 -60
- package/mjs/useSelectDialog.js +0 -49
- package/mjs/useSelectMultipleDialog.js +0 -29
- package/mjs/useTableItems.js +0 -378
- package/mjs/useView.js +0 -108
- package/mjs/utils/compare.js +0 -53
- package/mjs/utils/download-file.js +0 -18
- package/mjs/utils/random-string.js +0 -12
package/mjs/Settings.js
DELETED
@@ -1,87 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import { Button, Form, Modal, ModalVariant, SelectOption } from '@patternfly/react-core';
|
3
|
-
import { createContext, useCallback, useContext, useEffect, useState } from 'react';
|
4
|
-
import { SingleSelect } from './components/SingleSelect';
|
5
|
-
import { usePageDialog } from './PageDialog';
|
6
|
-
export const SettingsContext = createContext([
|
7
|
-
{},
|
8
|
-
() => null,
|
9
|
-
]);
|
10
|
-
export function useSettings() {
|
11
|
-
const [settings] = useContext(SettingsContext);
|
12
|
-
return settings;
|
13
|
-
}
|
14
|
-
export function SettingsProvider(props) {
|
15
|
-
const [settings, setSettingsState] = useState(() => {
|
16
|
-
const settings = {
|
17
|
-
theme: localStorage.getItem('theme'),
|
18
|
-
tableLayout: localStorage.getItem('tableLayout'),
|
19
|
-
formColumns: localStorage.getItem('formColumns'),
|
20
|
-
formLayout: localStorage.getItem('formLayout'),
|
21
|
-
borders: localStorage.getItem('borders') !== 'false',
|
22
|
-
};
|
23
|
-
const activeTheme = settings.theme !== 'dark' && settings.theme !== 'light'
|
24
|
-
? window.matchMedia('(prefers-color-scheme: dark)').matches
|
25
|
-
? 'dark'
|
26
|
-
: 'light'
|
27
|
-
: settings.theme;
|
28
|
-
if (activeTheme === 'dark') {
|
29
|
-
document.documentElement.classList.add('pf-theme-dark');
|
30
|
-
}
|
31
|
-
else {
|
32
|
-
document.documentElement.classList.remove('pf-theme-dark');
|
33
|
-
}
|
34
|
-
return settings;
|
35
|
-
});
|
36
|
-
const setSettings = useCallback((settings) => {
|
37
|
-
localStorage.setItem('theme', settings.theme ?? 'system');
|
38
|
-
localStorage.setItem('tableLayout', settings.tableLayout ?? 'comfortable');
|
39
|
-
localStorage.setItem('formColumns', settings.formColumns ?? 'multiple');
|
40
|
-
localStorage.setItem('formLayout', settings.formLayout ?? 'vertical');
|
41
|
-
localStorage.setItem('borders', settings.borders ? 'true' : 'false');
|
42
|
-
setSettingsState(settings);
|
43
|
-
const activeTheme = settings.theme === 'system'
|
44
|
-
? window.matchMedia('(prefers-color-scheme: dark)').matches
|
45
|
-
? 'dark'
|
46
|
-
: 'light'
|
47
|
-
: settings.theme;
|
48
|
-
if (activeTheme === 'dark') {
|
49
|
-
document.documentElement.classList.add('pf-theme-dark');
|
50
|
-
}
|
51
|
-
else {
|
52
|
-
document.documentElement.classList.remove('pf-theme-dark');
|
53
|
-
}
|
54
|
-
}, []);
|
55
|
-
return (_jsx(SettingsContext.Provider, { value: [settings, setSettings], children: props.children }));
|
56
|
-
}
|
57
|
-
export function useSettingsDialog(t) {
|
58
|
-
const [open, setOpen] = useState(false);
|
59
|
-
const openSetting = useCallback(() => setOpen(true), []);
|
60
|
-
const [_, setDialog] = usePageDialog();
|
61
|
-
useEffect(() => {
|
62
|
-
if (open) {
|
63
|
-
setDialog(_jsx(SettingsDialog, { open: open, setOpen: setOpen, t: t }));
|
64
|
-
}
|
65
|
-
else {
|
66
|
-
setDialog(undefined);
|
67
|
-
}
|
68
|
-
}, [open, setDialog, t]);
|
69
|
-
return openSetting;
|
70
|
-
}
|
71
|
-
export function SettingsDialog(props) {
|
72
|
-
const onClose = () => props.setOpen(false);
|
73
|
-
const [settings, setSettings] = useContext(SettingsContext);
|
74
|
-
const { t } = props;
|
75
|
-
return (_jsx(Modal, { title: "Settings", isOpen: props.open, onClose: onClose, variant: ModalVariant.medium, tabIndex: 0, actions: [
|
76
|
-
_jsx(Button, { variant: "primary", onClick: onClose, children: t('Close') }, "close"),
|
77
|
-
], children: _jsxs(Form, { isHorizontal: settings.formLayout === 'horizontal', children: [_jsxs(SingleSelect, { label: "Theme", value: settings.theme ?? 'system', onChange: (theme) => setSettings({ ...settings, theme: theme }), children: [_jsx(SelectOption, { value: "system", children: t('System default') }), _jsx(SelectOption, { value: "light", children: t('Light') }), _jsx(SelectOption, { value: "dark", children: t('Dark') })] }), _jsxs(SingleSelect, { label: "Table Layout", value: settings.tableLayout ?? 'comfortable', onChange: (tableLayout) => setSettings({
|
78
|
-
...settings,
|
79
|
-
tableLayout: tableLayout,
|
80
|
-
}), children: [_jsx(SelectOption, { value: "comfortable", children: t('Comfortable') }), _jsx(SelectOption, { value: "compact", children: t('Compact') })] }), _jsxs(SingleSelect, { label: "Form Columns", value: settings.formColumns ?? 'multiple', onChange: (formColumns) => setSettings({
|
81
|
-
...settings,
|
82
|
-
formColumns: formColumns,
|
83
|
-
}), children: [_jsx(SelectOption, { value: "multiple", children: t('Multiple columns') }), _jsx(SelectOption, { value: "single", children: t('Single column') })] }), _jsxs(SingleSelect, { label: "Form Layout", value: settings.formLayout ?? 'vertical', onChange: (formLayout) => setSettings({
|
84
|
-
...settings,
|
85
|
-
formLayout: formLayout,
|
86
|
-
}), children: [_jsx(SelectOption, { value: "vertical", children: t('Vertical labels') }), _jsx(SelectOption, { value: "horizontal", children: t('Horizontal labels') })] }), _jsxs(SingleSelect, { label: "Borders", value: settings.borders ? 'true' : 'false', onChange: (value) => setSettings({ ...settings, borders: value === 'true' }), style: { paddingBottom: 120 }, children: [_jsx(SelectOption, { value: "true", children: t('Yes') }), _jsx(SelectOption, { value: "false", children: t('No') })] })] }) }));
|
87
|
-
}
|
@@ -1,190 +0,0 @@
|
|
1
|
-
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import { ButtonVariant, Dropdown, DropdownItem, DropdownSeparator, DropdownToggle, KebabToggle, Split, SplitItem, Tooltip, } from '@patternfly/react-core';
|
3
|
-
import { CircleIcon } from '@patternfly/react-icons';
|
4
|
-
import { useCallback, useMemo, useState } from 'react';
|
5
|
-
import { useBreakpoint } from '../components/useBreakPoint';
|
6
|
-
import { TypedActionButton, TypedActionsButtons } from './TypedActionsButtons';
|
7
|
-
export var TypedActionType;
|
8
|
-
(function (TypedActionType) {
|
9
|
-
TypedActionType["seperator"] = "seperator";
|
10
|
-
TypedActionType["button"] = "button";
|
11
|
-
TypedActionType["single"] = "single";
|
12
|
-
TypedActionType["bulk"] = "bulk";
|
13
|
-
TypedActionType["dropdown"] = "dropdown";
|
14
|
-
})(TypedActionType || (TypedActionType = {}));
|
15
|
-
export function TypedActionsDropdown(props) {
|
16
|
-
const { actions, label, isPrimary = false, selectedItems, selectedItem } = props;
|
17
|
-
const [dropdownOpen, setDropdownOpen] = useState(false);
|
18
|
-
const hasItemActions = useMemo(() => !actions.every((action) => action.type !== TypedActionType.bulk), [actions]);
|
19
|
-
const hasIcons = useMemo(() => actions.find((action) => action.type !== TypedActionType.seperator && action.icon !== undefined) !== undefined, [actions]);
|
20
|
-
if (actions.length === 0)
|
21
|
-
return _jsx(_Fragment, {});
|
22
|
-
const Toggle = label ? DropdownToggle : KebabToggle;
|
23
|
-
return (_jsx(Dropdown, { onSelect: () => setDropdownOpen(false), toggle: _jsx(Toggle, { id: "toggle-kebab", onToggle: () => setDropdownOpen(!dropdownOpen), toggleVariant: hasItemActions && selectedItems?.length ? 'primary' : undefined, isPrimary: isPrimary, style: isPrimary && !label
|
24
|
-
? {
|
25
|
-
color: 'var(--pf-global--Color--light-100)',
|
26
|
-
}
|
27
|
-
: {}, children: label }), isOpen: dropdownOpen, isPlain: !label, dropdownItems: actions.map((action, index) => (_jsx(DropdownActionItem, { action: action, selectedItems: selectedItems ?? [], selectedItem: selectedItem, hasIcons: hasIcons, index: index }, 'label' in action ? action.label : `action-${index}`))), position: props.position, style: { zIndex: 201 } }));
|
28
|
-
}
|
29
|
-
export function DropdownActionItem(props) {
|
30
|
-
const { action, selectedItems, selectedItem, hasIcons, index } = props;
|
31
|
-
switch (action.type) {
|
32
|
-
case TypedActionType.single: {
|
33
|
-
let Icon = action.icon;
|
34
|
-
if (!Icon && hasIcons)
|
35
|
-
Icon = TransparentIcon;
|
36
|
-
const tooltip = action.tooltip;
|
37
|
-
const isDisabled = false;
|
38
|
-
return (_jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(DropdownItem, { onClick: () => selectedItem && action.onClick(selectedItem), isAriaDisabled: isDisabled, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, style: {
|
39
|
-
color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
|
40
|
-
}, children: action.label }) }, action.label));
|
41
|
-
}
|
42
|
-
case TypedActionType.button:
|
43
|
-
case TypedActionType.bulk: {
|
44
|
-
let Icon = action.icon;
|
45
|
-
if (!Icon && hasIcons)
|
46
|
-
Icon = TransparentIcon;
|
47
|
-
let tooltip = action.tooltip;
|
48
|
-
let isDisabled = false;
|
49
|
-
if (action.type === TypedActionType.bulk && !selectedItems.length) {
|
50
|
-
tooltip = 'No selections';
|
51
|
-
isDisabled = true;
|
52
|
-
}
|
53
|
-
return (_jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(DropdownItem, { onClick: () => action.onClick(selectedItems), isAriaDisabled: isDisabled, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, style: {
|
54
|
-
color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
|
55
|
-
}, children: action.label }) }, action.label));
|
56
|
-
}
|
57
|
-
case TypedActionType.dropdown:
|
58
|
-
return (_jsx(TypedActionsDropdown, { label: action.label, actions: action.options }, action.label));
|
59
|
-
case TypedActionType.seperator:
|
60
|
-
return _jsx(DropdownSeparator, {}, `separator-${index}`);
|
61
|
-
default:
|
62
|
-
return _jsx(_Fragment, {});
|
63
|
-
}
|
64
|
-
}
|
65
|
-
export function TypedActions(props) {
|
66
|
-
const { actions } = props;
|
67
|
-
const collapseButtons = !useBreakpoint(props.collapse ?? 'lg');
|
68
|
-
const isButtonAction = useCallback((action) => {
|
69
|
-
const actionVariants = [
|
70
|
-
ButtonVariant.primary,
|
71
|
-
ButtonVariant.secondary,
|
72
|
-
ButtonVariant.danger,
|
73
|
-
];
|
74
|
-
return action.type !== TypedActionType.seperator && actionVariants.includes(action.variant);
|
75
|
-
}, []);
|
76
|
-
const buttonActions = useMemo(() => {
|
77
|
-
if (collapseButtons) {
|
78
|
-
return [];
|
79
|
-
}
|
80
|
-
return actions?.filter(isButtonAction) ?? [];
|
81
|
-
}, [collapseButtons, actions, isButtonAction]);
|
82
|
-
const dropdownActions = useMemo(() => {
|
83
|
-
if (collapseButtons) {
|
84
|
-
return actions ?? [];
|
85
|
-
}
|
86
|
-
const dropdownActions = actions?.filter((action) => !isButtonAction(action)) ?? [];
|
87
|
-
while (dropdownActions.length && dropdownActions[0].type === TypedActionType.seperator)
|
88
|
-
dropdownActions.shift();
|
89
|
-
while (dropdownActions.length &&
|
90
|
-
dropdownActions[dropdownActions.length - 1].type === TypedActionType.seperator)
|
91
|
-
dropdownActions.pop();
|
92
|
-
return dropdownActions;
|
93
|
-
}, [collapseButtons, actions, isButtonAction]);
|
94
|
-
return (_jsxs(Split, { hasGutter: true, children: [_jsx(TypedActionsButtons, { ...props, actions: buttonActions }), _jsx(TypedActionsDropdown, { ...props, actions: dropdownActions, position: props.position, isPrimary: !!props.selectedItems?.length })] }));
|
95
|
-
}
|
96
|
-
const TransparentIcon = () => _jsx(CircleIcon, { style: { opacity: 0 } });
|
97
|
-
export function useTypedActionsToTableActions(props) {
|
98
|
-
const { actions } = props;
|
99
|
-
const collapseButtons = !useBreakpoint(props.collapse ?? 'lg');
|
100
|
-
const buttonActions = useMemo(() => {
|
101
|
-
if (collapseButtons) {
|
102
|
-
return [];
|
103
|
-
}
|
104
|
-
else {
|
105
|
-
const buttonActions = actions?.filter((action) => (action.type === TypedActionType.button ||
|
106
|
-
action.type === TypedActionType.bulk ||
|
107
|
-
action.type === TypedActionType.single) &&
|
108
|
-
(action.variant === ButtonVariant.primary ||
|
109
|
-
action.variant === ButtonVariant.secondary ||
|
110
|
-
action.variant === ButtonVariant.danger));
|
111
|
-
return buttonActions ?? [];
|
112
|
-
}
|
113
|
-
}, [collapseButtons, actions]);
|
114
|
-
const dropdownActions = useMemo(() => {
|
115
|
-
if (collapseButtons) {
|
116
|
-
return actions ?? [];
|
117
|
-
}
|
118
|
-
else {
|
119
|
-
let dropdownActions = actions?.filter((action) => !((action.type === TypedActionType.button ||
|
120
|
-
action.type === TypedActionType.bulk ||
|
121
|
-
action.type === TypedActionType.single) &&
|
122
|
-
(action.variant === ButtonVariant.primary ||
|
123
|
-
action.variant === ButtonVariant.secondary ||
|
124
|
-
action.variant === ButtonVariant.danger)));
|
125
|
-
dropdownActions = dropdownActions ?? [];
|
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
|
-
}
|
133
|
-
}, [collapseButtons, actions]);
|
134
|
-
return [
|
135
|
-
...buttonActions.map((buttonAction) => {
|
136
|
-
switch (buttonAction.type) {
|
137
|
-
case TypedActionType.button:
|
138
|
-
return {
|
139
|
-
title: _jsx(TypedActionButton, { action: buttonAction }),
|
140
|
-
isOutsideDropdown: true,
|
141
|
-
};
|
142
|
-
case TypedActionType.single:
|
143
|
-
return {
|
144
|
-
title: (_jsx(TypedActionButton, { action: { ...buttonAction, tooltip: buttonAction.label }, selectedItem: props.item, iconOnly: true })),
|
145
|
-
isOutsideDropdown: true,
|
146
|
-
};
|
147
|
-
case TypedActionType.bulk:
|
148
|
-
return {
|
149
|
-
title: (_jsx(TypedActionButton, { action: buttonAction, selectedItems: props.item ? [props.item] : [] })),
|
150
|
-
isOutsideDropdown: true,
|
151
|
-
};
|
152
|
-
default:
|
153
|
-
return null;
|
154
|
-
}
|
155
|
-
}),
|
156
|
-
...dropdownActions.map((buttonAction) => {
|
157
|
-
switch (buttonAction.type) {
|
158
|
-
case TypedActionType.button: {
|
159
|
-
const Icon = buttonAction.icon;
|
160
|
-
return {
|
161
|
-
title: (_jsxs(Split, { hasGutter: true, children: [Icon && (_jsx(SplitItem, { children: _jsx(Icon, {}) })), _jsx(SplitItem, { children: buttonAction.label })] })),
|
162
|
-
onClick: () => {
|
163
|
-
buttonAction.onClick();
|
164
|
-
},
|
165
|
-
};
|
166
|
-
}
|
167
|
-
case TypedActionType.single: {
|
168
|
-
const Icon = buttonAction.icon;
|
169
|
-
return {
|
170
|
-
title: (_jsxs(Split, { hasGutter: true, children: [Icon && (_jsx(SplitItem, { children: _jsx(Icon, {}) })), _jsx(SplitItem, { children: buttonAction.label })] })),
|
171
|
-
onClick: () => {
|
172
|
-
buttonAction.onClick(props.item);
|
173
|
-
},
|
174
|
-
};
|
175
|
-
}
|
176
|
-
case TypedActionType.bulk: {
|
177
|
-
const Icon = buttonAction.icon;
|
178
|
-
return {
|
179
|
-
title: (_jsxs(Split, { hasGutter: true, children: [Icon && (_jsx(SplitItem, { children: _jsx(Icon, {}) })), _jsx(SplitItem, { children: buttonAction.label })] })),
|
180
|
-
onClick: () => {
|
181
|
-
buttonAction.onClick([props.item]);
|
182
|
-
},
|
183
|
-
};
|
184
|
-
}
|
185
|
-
default:
|
186
|
-
return { isSeparator: true };
|
187
|
-
}
|
188
|
-
}),
|
189
|
-
].filter((i) => i !== null);
|
190
|
-
}
|
@@ -1,87 +0,0 @@
|
|
1
|
-
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { Fragment } from 'react';
|
3
|
-
import { Button, ButtonVariant, Tooltip, Split } from '@patternfly/react-core';
|
4
|
-
import { TypedActionType, TypedActionsDropdown, } from './TypedActions';
|
5
|
-
export function TypedActionsButtons(props) {
|
6
|
-
const { actions, selectedItems, wrapper } = props;
|
7
|
-
if (actions.length === 0)
|
8
|
-
return _jsx(_Fragment, {});
|
9
|
-
return (_jsx(Split, { hasGutter: true, children: actions.map((action, index) => (_jsx(TypedActionButton, { action: action, selectedItems: selectedItems, wrapper: wrapper }, index))) }));
|
10
|
-
}
|
11
|
-
export function TypedActionButton(props) {
|
12
|
-
const { action, selectedItems, selectedItem, wrapper, noPrimary } = props;
|
13
|
-
switch (action.type) {
|
14
|
-
case TypedActionType.seperator: {
|
15
|
-
return _jsx(_Fragment, {});
|
16
|
-
}
|
17
|
-
case TypedActionType.single: {
|
18
|
-
return (_jsx(ActionSingleButton, { action: action, selectedItem: selectedItem, noPrimary: noPrimary, iconOnly: props.iconOnly, wrapper: wrapper }));
|
19
|
-
}
|
20
|
-
case TypedActionType.bulk: {
|
21
|
-
return (_jsx(ActionBulkButton, { action: action, selectedItems: selectedItems, noPrimary: noPrimary, wrapper: wrapper }));
|
22
|
-
}
|
23
|
-
case TypedActionType.button: {
|
24
|
-
return (_jsx(ActionButton, { action: action, selectedItems: selectedItems, noPrimary: noPrimary, wrapper: wrapper }));
|
25
|
-
}
|
26
|
-
case TypedActionType.dropdown: {
|
27
|
-
return (_jsx(TypedActionsDropdown, { actions: action.options, selectedItems: selectedItems, label: action.label, isPrimary: action.variant === ButtonVariant.primary && !selectedItems?.length }));
|
28
|
-
}
|
29
|
-
}
|
30
|
-
}
|
31
|
-
function ActionButton(props) {
|
32
|
-
const { action, selectedItems, noPrimary, wrapper } = props;
|
33
|
-
const Wrapper = wrapper ?? Fragment;
|
34
|
-
const Icon = action.icon;
|
35
|
-
const tooltip = action.tooltip;
|
36
|
-
const isDisabled = false;
|
37
|
-
let variant = action.variant ?? ButtonVariant.secondary;
|
38
|
-
if (selectedItems &&
|
39
|
-
selectedItems.length &&
|
40
|
-
[ButtonVariant.primary, ButtonVariant.danger].includes(variant)) {
|
41
|
-
variant = ButtonVariant.secondary;
|
42
|
-
}
|
43
|
-
if (variant === ButtonVariant.primary && noPrimary) {
|
44
|
-
variant = ButtonVariant.secondary;
|
45
|
-
}
|
46
|
-
if (variant === ButtonVariant.primary && action.isDanger) {
|
47
|
-
variant = ButtonVariant.danger;
|
48
|
-
}
|
49
|
-
return (_jsx(Wrapper, { children: _jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(Button, { variant: variant, isDanger: action.isDanger, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, isAriaDisabled: isDisabled, onClick: action.onClick, children: action.shortLabel ? action.shortLabel : action.label }) }) }));
|
50
|
-
}
|
51
|
-
function ActionBulkButton(props) {
|
52
|
-
const { action, noPrimary, selectedItems, wrapper } = props;
|
53
|
-
const Wrapper = wrapper ?? Fragment;
|
54
|
-
const Icon = action.icon;
|
55
|
-
let tooltip = action.tooltip;
|
56
|
-
let isDisabled = false;
|
57
|
-
let variant = action.variant ?? ButtonVariant.secondary;
|
58
|
-
if (variant === ButtonVariant.primary && noPrimary) {
|
59
|
-
variant = ButtonVariant.secondary;
|
60
|
-
}
|
61
|
-
if (variant === ButtonVariant.primary && action.isDanger) {
|
62
|
-
variant = ButtonVariant.danger;
|
63
|
-
}
|
64
|
-
if (!selectedItems || !selectedItems.length) {
|
65
|
-
tooltip = 'No selections';
|
66
|
-
isDisabled = true;
|
67
|
-
}
|
68
|
-
return (_jsx(Wrapper, { children: _jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(Button, { variant: variant, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, isAriaDisabled: isDisabled, onClick: () => action.onClick(selectedItems ?? []), isDanger: action.isDanger, children: action.shortLabel ? action.shortLabel : action.label }) }) }));
|
69
|
-
}
|
70
|
-
function ActionSingleButton(props) {
|
71
|
-
const { action, selectedItem, noPrimary, wrapper } = props;
|
72
|
-
const Wrapper = wrapper ?? Fragment;
|
73
|
-
const Icon = action.icon;
|
74
|
-
const tooltip = action.tooltip;
|
75
|
-
const isDisabled = false;
|
76
|
-
let variant = action.variant ?? ButtonVariant.secondary;
|
77
|
-
if (variant === ButtonVariant.primary && noPrimary) {
|
78
|
-
variant = ButtonVariant.secondary;
|
79
|
-
}
|
80
|
-
if (variant === ButtonVariant.primary && action.isDanger) {
|
81
|
-
variant = ButtonVariant.danger;
|
82
|
-
}
|
83
|
-
if (props.iconOnly) {
|
84
|
-
variant = ButtonVariant.plain;
|
85
|
-
}
|
86
|
-
return (_jsx(Wrapper, { children: _jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(Button, { variant: variant, icon: Icon ? (_jsx("span", { style: { marginLeft: -4, paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, isAriaDisabled: isDisabled, onClick: () => selectedItem && action.onClick(selectedItem), isDanger: action.isDanger, children: props.iconOnly && Icon ? _jsx(Icon, {}) : action.shortLabel ? action.shortLabel : action.label }) }) }));
|
87
|
-
}
|
@@ -1,56 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { Dropdown, DropdownItem, DropdownToggle, DropdownToggleCheckbox, } from '@patternfly/react-core';
|
3
|
-
import { useCallback, useMemo, useState } from 'react';
|
4
|
-
import { useBreakpoint } from './useBreakPoint';
|
5
|
-
export function BulkSelector(props) {
|
6
|
-
const [isOpen, setIsOpen] = useState(false);
|
7
|
-
const isSmallOrLarger = useBreakpoint('sm');
|
8
|
-
const { pageItems, selectedItems, selectItems, unselectAll } = props;
|
9
|
-
const allPageItemsSelected = props.itemCount !== undefined &&
|
10
|
-
props.itemCount > 0 &&
|
11
|
-
pageItems &&
|
12
|
-
pageItems.length > 0 &&
|
13
|
-
(pageItems ?? []).every((item) => selectedItems?.includes(item));
|
14
|
-
const onToggleCheckbox = useCallback(() => {
|
15
|
-
if (allPageItemsSelected) {
|
16
|
-
unselectAll?.();
|
17
|
-
}
|
18
|
-
else {
|
19
|
-
selectItems?.(pageItems ?? []);
|
20
|
-
}
|
21
|
-
}, [allPageItemsSelected, unselectAll, selectItems, pageItems]);
|
22
|
-
const toggleText = useMemo(() => {
|
23
|
-
if (isSmallOrLarger) {
|
24
|
-
if (selectedItems && selectedItems.length > 0) {
|
25
|
-
return `${selectedItems.length} selected`;
|
26
|
-
}
|
27
|
-
return '';
|
28
|
-
}
|
29
|
-
else {
|
30
|
-
if (selectedItems && selectedItems.length > 0) {
|
31
|
-
return `${selectedItems.length}`;
|
32
|
-
}
|
33
|
-
return '';
|
34
|
-
}
|
35
|
-
}, [isSmallOrLarger, selectedItems]);
|
36
|
-
const toggle = useMemo(() => {
|
37
|
-
const selectedCount = selectedItems ? selectedItems.length : 0;
|
38
|
-
return (_jsx(DropdownToggle, { splitButtonItems: [
|
39
|
-
_jsx(DropdownToggleCheckbox, { id: "select-all", "aria-label": "Select all", isChecked: allPageItemsSelected ? true : selectedCount > 0 ? null : false, onChange: onToggleCheckbox, children: toggleText }, "select-all"),
|
40
|
-
], onToggle: (isOpen) => setIsOpen(isOpen) }));
|
41
|
-
}, [selectedItems, allPageItemsSelected, onToggleCheckbox, toggleText]);
|
42
|
-
const selectNoneDropdownItem = useMemo(() => {
|
43
|
-
return (_jsx(DropdownItem, { id: "select-none", onClick: () => {
|
44
|
-
unselectAll?.();
|
45
|
-
setIsOpen(false);
|
46
|
-
}, children: props.selectNoneText ?? 'Select none' }, "select-none"));
|
47
|
-
}, [props.selectNoneText, unselectAll]);
|
48
|
-
const selectPageDropdownItem = useMemo(() => {
|
49
|
-
return (_jsx(DropdownItem, { id: "select-page", onClick: () => {
|
50
|
-
selectItems?.(pageItems ?? []);
|
51
|
-
setIsOpen(false);
|
52
|
-
}, children: `Select ${pageItems?.length ?? 0} page items` }, "select-page"));
|
53
|
-
}, [selectItems, pageItems]);
|
54
|
-
const dropdownItems = useMemo(() => [selectNoneDropdownItem, selectPageDropdownItem], [selectNoneDropdownItem, selectPageDropdownItem]);
|
55
|
-
return (_jsx(Dropdown, { isOpen: isOpen, toggle: toggle, dropdownItems: dropdownItems, style: { zIndex: 302 } }));
|
56
|
-
}
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { PageSection } from '@patternfly/react-core';
|
3
|
-
export function DetailInfo(props) {
|
4
|
-
return (_jsx(PageSection, { className: "pf-c-alert pf-m-inline pf-m-info", style: {
|
5
|
-
border: 0,
|
6
|
-
paddingTop: props.disablePaddingTop ? 0 : undefined,
|
7
|
-
}, children: props.children }));
|
8
|
-
}
|
@@ -1,68 +0,0 @@
|
|
1
|
-
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import { DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Skeleton, Split, SplitItem, Stack, Text, } from '@patternfly/react-core';
|
3
|
-
import { Link } from 'react-router-dom';
|
4
|
-
import { CopyCell, SinceCell } from '../PageCells';
|
5
|
-
import { useSettings } from '../Settings';
|
6
|
-
import { Help } from './Help';
|
7
|
-
import { IconWrapper } from './IconWrapper';
|
8
|
-
export function isDetailText(detail) {
|
9
|
-
return 'label' in detail && !('items' in detail);
|
10
|
-
}
|
11
|
-
export function isDetailList(detail) {
|
12
|
-
return 'items' in detail && 'label' in detail;
|
13
|
-
}
|
14
|
-
export function Details(props) {
|
15
|
-
const { details } = props;
|
16
|
-
return (_jsx(DescriptionList, { orientation: {
|
17
|
-
sm: 'vertical',
|
18
|
-
md: 'horizontal',
|
19
|
-
lg: 'horizontal',
|
20
|
-
xl: 'horizontal',
|
21
|
-
'2xl': 'horizontal',
|
22
|
-
}, children: details.map((detail, index) => {
|
23
|
-
if (isDetailText(detail)) {
|
24
|
-
if (!detail.text)
|
25
|
-
return _jsx(_Fragment, {});
|
26
|
-
const Icon = detail.icon;
|
27
|
-
return (_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: detail.label }), _jsx(DescriptionListDescription, { id: detail.label.toLowerCase().split(' ').join('-'), children: _jsxs(Split, { children: [Icon && (_jsx(IconWrapper, { size: "sm", children: _jsx(Icon, {}) })), detail.to ? (_jsx(Link, { to: detail.to, children: detail.text })) : detail.link ? (_jsx("a", { href: detail.link, target: "_blank", rel: "noreferrer", children: detail.text })) : detail.color ? (_jsx("span", { style: { color: detail.color }, children: detail.text })) : detail.copy ? (_jsx(CopyCell, { text: detail.text })) : detail.since ? (_jsx(SinceCell, { value: detail.text })) : (detail.text), detail.help && _jsx(Help, { title: detail.helpTitle, help: detail.help })] }, index) })] }, index));
|
28
|
-
}
|
29
|
-
else if (isDetailList(detail)) {
|
30
|
-
return (_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: detail.label }), _jsx(DescriptionListDescription, { id: detail.label.toLowerCase().split(' ').join('-'), children: _jsx(Stack, { hasGutter: true, children: detail.items.map((item, index) => {
|
31
|
-
const Icon = item.icon;
|
32
|
-
return (_jsxs(Split, { hasGutter: true, children: [Icon && _jsx(SplitItem, { children: item.icon }), _jsx(SplitItem, { children: item.text }), item.help && _jsx(Help, { title: item.helpTitle, help: item.help })] }, index));
|
33
|
-
}) }) })] }, index));
|
34
|
-
}
|
35
|
-
else
|
36
|
-
return _jsx(_Fragment, {});
|
37
|
-
}) }));
|
38
|
-
}
|
39
|
-
export function DetailsList(props) {
|
40
|
-
const settings = useSettings();
|
41
|
-
const orientation = settings.formLayout;
|
42
|
-
const columns = settings.formColumns;
|
43
|
-
const isCompact = false;
|
44
|
-
return (_jsx(DescriptionList, { orientation: {
|
45
|
-
sm: orientation,
|
46
|
-
md: orientation,
|
47
|
-
lg: orientation,
|
48
|
-
xl: orientation,
|
49
|
-
'2xl': orientation,
|
50
|
-
}, columnModifier: columns === 'multiple'
|
51
|
-
? {
|
52
|
-
default: '1Col',
|
53
|
-
sm: '1Col',
|
54
|
-
md: '2Col',
|
55
|
-
lg: '2Col',
|
56
|
-
xl: '3Col',
|
57
|
-
'2xl': '3Col',
|
58
|
-
}
|
59
|
-
: undefined, style: { maxWidth: 1200, padding: isCompact ? undefined : 8 }, isCompact: isCompact, children: props.children }));
|
60
|
-
}
|
61
|
-
export function Detail(props) {
|
62
|
-
if (!props.children)
|
63
|
-
return _jsx(_Fragment, {});
|
64
|
-
return (_jsxs(DescriptionListGroup, { children: [props.label && (_jsx(DescriptionListTerm, { children: _jsx(Text, { component: "small", style: { opacity: 0.7 }, children: props.label }) })), _jsx(DescriptionListDescription, { id: props.label?.toLowerCase().split(' ').join('-'), children: props.children })] }));
|
65
|
-
}
|
66
|
-
export function DetailsSkeleton() {
|
67
|
-
return (_jsxs(Stack, { hasGutter: true, children: [_jsx(Skeleton, {}), _jsx(Skeleton, {}), _jsx(Skeleton, {}), _jsx(Skeleton, {})] }));
|
68
|
-
}
|
package/mjs/components/Dotted.js
DELETED
@@ -1,8 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { Dropdown, KebabToggle } from '@patternfly/react-core';
|
3
|
-
import { useCallback, useState } from 'react';
|
4
|
-
export function DropdownControlled(props) {
|
5
|
-
const [open, setOpen] = useState(false);
|
6
|
-
const onToggle = useCallback(() => setOpen((open) => !open), []);
|
7
|
-
return (_jsx(Dropdown, { toggle: _jsx(KebabToggle, { onToggle: onToggle }), isOpen: open, isPlain: true, dropdownItems: props.items }));
|
8
|
-
}
|
@@ -1,25 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { Component } from 'react';
|
3
|
-
class ErrorBoundary extends Component {
|
4
|
-
constructor() {
|
5
|
-
super(...arguments);
|
6
|
-
this.state = {
|
7
|
-
hasError: false,
|
8
|
-
};
|
9
|
-
}
|
10
|
-
static getDerivedStateFromError(_) {
|
11
|
-
// Update state so the next render will show the fallback UI.
|
12
|
-
return { hasError: true };
|
13
|
-
}
|
14
|
-
componentDidCatch(error, errorInfo) {
|
15
|
-
// eslint-disable-next-line no-console
|
16
|
-
console.error('Uncaught error:', error, errorInfo);
|
17
|
-
}
|
18
|
-
render() {
|
19
|
-
if (this.state.hasError) {
|
20
|
-
return _jsx("h1", { children: this.props.message });
|
21
|
-
}
|
22
|
-
return this.props.children;
|
23
|
-
}
|
24
|
-
}
|
25
|
-
export default ErrorBoundary;
|
package/mjs/components/Grid.js
DELETED
@@ -1,27 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import useResizeObserver from '@react-hook/resize-observer';
|
3
|
-
import { useCallback, useLayoutEffect, useRef, useState } from 'react';
|
4
|
-
import { useBreakpoint } from './useBreakPoint';
|
5
|
-
export function Grid(props) {
|
6
|
-
const size = props.size ?? 350;
|
7
|
-
const target = useRef(null);
|
8
|
-
const [gridTemplateColumns, setGridTemplateColumns] = useState('1fr');
|
9
|
-
const resize = useCallback((width) => {
|
10
|
-
let columns = Math.min(props.maxColumns ?? 12, Math.max(Math.floor(width / size), 1));
|
11
|
-
if (columns < 1)
|
12
|
-
columns = 1;
|
13
|
-
setGridTemplateColumns(() => new Array(columns).fill('1fr').join(' '));
|
14
|
-
}, [props.maxColumns, size]);
|
15
|
-
useResizeObserver(target, (entry) => resize(entry.contentRect.width));
|
16
|
-
useLayoutEffect(() => {
|
17
|
-
resize(target.current?.clientWidth ?? 0);
|
18
|
-
}, [resize]);
|
19
|
-
const isMd = !useBreakpoint('lg');
|
20
|
-
const isXS = !useBreakpoint('xs');
|
21
|
-
let gap = 24;
|
22
|
-
if (isMd)
|
23
|
-
gap = 16;
|
24
|
-
if (isXS)
|
25
|
-
gap = 8;
|
26
|
-
return (_jsx("div", { ref: target, style: { display: 'grid', gridAutoRows: '1fr', gridTemplateColumns, gap }, children: props.children }));
|
27
|
-
}
|
package/mjs/components/Help.js
DELETED
@@ -1,9 +0,0 @@
|
|
1
|
-
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { Button, Popover } from '@patternfly/react-core';
|
3
|
-
import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
|
4
|
-
export function Help(props) {
|
5
|
-
const { help, title } = props;
|
6
|
-
if (!help)
|
7
|
-
return _jsx(_Fragment, {});
|
8
|
-
return (_jsx(Popover, { headerContent: title, bodyContent: help, removeFindDomNode: true, children: _jsx(Button, { variant: "link", style: { padding: 0, marginLeft: '8px', verticalAlign: 'middle' }, children: _jsx(OutlinedQuestionCircleIcon, {}) }) }));
|
9
|
-
}
|
@@ -1,40 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { Children, cloneElement, isValidElement } from 'react';
|
3
|
-
import { getPatternflyColor } from './patternfly-colors';
|
4
|
-
export function IconWrapper(props) {
|
5
|
-
const newProps = {};
|
6
|
-
if (props.color) {
|
7
|
-
newProps.color = getPatternflyColor(props.color);
|
8
|
-
}
|
9
|
-
let marginOffset = undefined;
|
10
|
-
let marginRight = undefined;
|
11
|
-
if (props.size) {
|
12
|
-
newProps.size = props.size;
|
13
|
-
switch (props.size) {
|
14
|
-
case 'sm':
|
15
|
-
marginRight = 6;
|
16
|
-
break;
|
17
|
-
case 'md':
|
18
|
-
marginOffset = -2;
|
19
|
-
marginRight = 6;
|
20
|
-
break;
|
21
|
-
case 'lg':
|
22
|
-
marginOffset = -6;
|
23
|
-
marginRight = 6;
|
24
|
-
break;
|
25
|
-
}
|
26
|
-
}
|
27
|
-
if (props.noPadding) {
|
28
|
-
marginRight = undefined;
|
29
|
-
}
|
30
|
-
const newChildren = Children.toArray(props.children).map((child) => {
|
31
|
-
if (isValidElement(child)) {
|
32
|
-
const newChild = cloneElement(child, newProps);
|
33
|
-
return newChild;
|
34
|
-
}
|
35
|
-
else {
|
36
|
-
return child;
|
37
|
-
}
|
38
|
-
});
|
39
|
-
return (_jsx("div", { style: { marginTop: marginOffset, marginBottom: marginOffset, marginRight }, children: newChildren }));
|
40
|
-
}
|
@@ -1,9 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import { PageSection, Skeleton } from '@patternfly/react-core';
|
3
|
-
import { Fragment } from 'react';
|
4
|
-
import { PageHeader } from '../PageHeader';
|
5
|
-
export function LoadingPage(props) {
|
6
|
-
return (_jsxs(Fragment, { children: [_jsx(PageHeader, { breadcrumbs: props.breadcrumbs, title: props.title ?? (_jsx(Skeleton, { width: "200px" })) }), _jsx(PageSection
|
7
|
-
// variant={theme === ThemeE.Dark ? undefined : 'light'}
|
8
|
-
, {})] }));
|
9
|
-
}
|