@ansible/ansible-ui-framework 0.0.258 → 0.0.260
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 +1 -0
- package/cjs/index.js +1 -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 -23
- 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/PageColumnModal.js
DELETED
@@ -1,64 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import { Button, DataList, DataListCell, DataListCheck, DataListControl, DataListDragButton, DataListItem, DataListItemCells, DataListItemRow, Modal, ModalVariant, } from '@patternfly/react-core';
|
3
|
-
import { useCallback, useEffect, useState } from 'react';
|
4
|
-
export function useColumnModal(columns, t) {
|
5
|
-
t = t ? t : (t) => t;
|
6
|
-
const [columnModalOpen, setColumnModalOpen] = useState(false);
|
7
|
-
const openColumnModal = useCallback(() => {
|
8
|
-
setColumnModalOpen(true);
|
9
|
-
}, []);
|
10
|
-
const [managedColumns, setManagedColumns] = useState(() => columns);
|
11
|
-
useEffect(() => {
|
12
|
-
setManagedColumns((managedColumns) => managedColumns.map((managedColumn) => columns.find((column) => column.header === managedColumn.header) ?? managedColumn));
|
13
|
-
}, [columns]);
|
14
|
-
const onClose = useCallback(() => {
|
15
|
-
setColumnModalOpen(false);
|
16
|
-
}, []);
|
17
|
-
// const selectAllColumns = useCallback(() => {
|
18
|
-
// setManagedColumns((managedColumns) => {
|
19
|
-
// for (const column of managedColumns) {
|
20
|
-
// column.enabled = true
|
21
|
-
// }
|
22
|
-
// return [...managedColumns]
|
23
|
-
// })
|
24
|
-
// }, [])
|
25
|
-
const onDragFinish = useCallback((itemOrder) => {
|
26
|
-
setManagedColumns((managedColumns) => {
|
27
|
-
return itemOrder.map((header) => managedColumns.find((column) => column.header === header));
|
28
|
-
});
|
29
|
-
}, []);
|
30
|
-
const handleChange = useCallback((checked, event) => {
|
31
|
-
const columnHeader = event.target.name;
|
32
|
-
if (columnHeader) {
|
33
|
-
setManagedColumns((managedColumns) => {
|
34
|
-
for (const column of managedColumns) {
|
35
|
-
if (column.header !== columnHeader)
|
36
|
-
continue;
|
37
|
-
column.enabled = checked;
|
38
|
-
}
|
39
|
-
return [...managedColumns];
|
40
|
-
});
|
41
|
-
}
|
42
|
-
}, []);
|
43
|
-
const columnModal = (_jsx(Modal, { variant: ModalVariant.medium, title: "Manage columns",
|
44
|
-
// description={
|
45
|
-
// <TextContent>
|
46
|
-
// <Text component={TextVariants.p}>Selected categories will be displayed in the table.</Text>
|
47
|
-
// <Button isInline onClick={selectAllColumns} variant="link">
|
48
|
-
// Select all
|
49
|
-
// </Button>
|
50
|
-
// </TextContent>
|
51
|
-
// }
|
52
|
-
isOpen: columnModalOpen, onClose: onClose, actions: [
|
53
|
-
_jsx(Button, { variant: "primary", onClick: onClose, children: t('Close') }, "save"),
|
54
|
-
// <Button key="cancel" variant="link" onClick={onClose}>
|
55
|
-
// Cancel
|
56
|
-
// </Button>,
|
57
|
-
], children: _jsx(DataList, { "aria-label": "Table column management", id: "table-column-management", isCompact: true, onDragFinish: onDragFinish, itemOrder: managedColumns.map((column) => column.header), gridBreakpoint: "none", style: { borderTopWidth: 'thin' }, children: managedColumns.map((column) => {
|
58
|
-
// if (index === 0) return <Fragment />
|
59
|
-
return (_jsx(DataListItem, { id: column.header, "aria-labelledby": "table-column-management-item1", style: { borderBottomWidth: 'thin' }, children: _jsxs(DataListItemRow, { children: [_jsxs(DataListControl, { children: [_jsx(DataListDragButton, { "aria-label": "Reorder", "aria-labelledby": "table-column-management-item1", "aria-describedby": "Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation.", "aria-pressed": "false" }), _jsx(DataListCheck, { "aria-labelledby": "table-column-management-item1", checked: column.enabled !== false, name: column.header, id: column.header, onChange: handleChange, otherControls: true })] }), _jsx(DataListItemCells, { dataListCells: [
|
60
|
-
_jsx(DataListCell, { id: "table-column-management-item1", children: _jsx("label", { htmlFor: column.header, children: column.header }) }, column.header),
|
61
|
-
] })] }) }, column.header));
|
62
|
-
}) }) }));
|
63
|
-
return { openColumnModal, columnModal, managedColumns };
|
64
|
-
}
|
package/mjs/PageDataList.js
DELETED
@@ -1,44 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
2
|
-
import { Button, DataList, DataListAction, DataListCell, DataListCheck, DataListItem, DataListItemCells, DataListItemRow, DropdownPosition, EmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateVariant, Title, } from '@patternfly/react-core';
|
3
|
-
import { ExclamationCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
|
4
|
-
import { Fragment } from 'react';
|
5
|
-
import { Scrollable } from './components/Scrollable';
|
6
|
-
import { PageBody } from './PageBody';
|
7
|
-
import { PageHeader } from './PageHeader';
|
8
|
-
import { PageLayout } from './PageLayout';
|
9
|
-
import { PagePagination } from './PagePagination';
|
10
|
-
import { useSettings } from './Settings';
|
11
|
-
import { TypedActions, TypedActionType } from './TypedActions';
|
12
|
-
export function DataListPage(props) {
|
13
|
-
return (_jsx(_Fragment, { children: _jsxs(PageLayout, { children: [_jsx(PageHeader, { ...props }), _jsx(PageBody, { children: _jsx(PageDataList, { ...props }) })] }) }));
|
14
|
-
}
|
15
|
-
export function PageDataList(props) {
|
16
|
-
const { pageItems, selectItem, unselectItem, isSelected, keyFn, toolbarActions, itemCount, perPage,
|
17
|
-
// clearAllFilters,
|
18
|
-
filters, error, dataCells, } = props;
|
19
|
-
const showSelect = toolbarActions?.find((toolbarAction) => TypedActionType.bulk === toolbarAction.type) !==
|
20
|
-
undefined;
|
21
|
-
const settings = useSettings();
|
22
|
-
if (error) {
|
23
|
-
return (_jsx("div", { style: {
|
24
|
-
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
25
|
-
height: '100%',
|
26
|
-
}, children: _jsxs(EmptyState, { variant: EmptyStateVariant.small, style: {
|
27
|
-
paddingTop: 64,
|
28
|
-
}, children: [_jsx(EmptyStateIcon, { icon: ExclamationCircleIcon, color: "var(--pf-global--danger-color--100)" }), _jsx(Title, { headingLevel: "h2", size: "lg", children: props.errorStateTitle }), _jsx(EmptyStateBody, { children: error.message })] }) }));
|
29
|
-
}
|
30
|
-
if (itemCount === 0 && Object.keys(filters ?? {}).length === 0) {
|
31
|
-
return (_jsxs(EmptyState, { variant: EmptyStateVariant.large, style: { paddingTop: 64 }, children: [_jsx(EmptyStateIcon, { icon: PlusCircleIcon }), _jsx(Title, { headingLevel: "h4", size: "lg", children: props.emptyStateTitle }), props.emptyStateDescription && (_jsx(EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && (_jsx(Button, { variant: "primary", onClick: props.emptyStateButtonClick, children: props.emptyStateButtonText }))] }));
|
32
|
-
}
|
33
|
-
return (_jsxs(Fragment, { children: [_jsx(Scrollable, { children: _jsx(DataList, { "aria-label": "Simple data list example", children: pageItems?.map((item) => (_jsx(DataListItem, { "aria-labelledby": "simple-item1", children: _jsxs(DataListItemRow, { children: [showSelect && (_jsx(DataListCheck, { "aria-labelledby": "check-action-item1", name: "check-action-check1", isChecked: isSelected?.(item), onClick: () => {
|
34
|
-
if (isSelected?.(item)) {
|
35
|
-
selectItem?.(item);
|
36
|
-
}
|
37
|
-
else {
|
38
|
-
unselectItem?.(item);
|
39
|
-
}
|
40
|
-
} })), _jsx(DataListItemCells, { dataListCells: dataCells.map((dataCell, index) => (_jsx(DataListCell, { width: index === 0 ? 5 : 1, children: _jsx("span", { id: "simple-item1", children: dataCell(item) }) }, "primary content"))) }), props.actions && _jsx(DataListActions, { actions: props.actions })] }) }, keyFn(item)))) }) }), (!props.autoHidePagination || (itemCount ?? 0) > perPage) && _jsx(PagePagination, { ...props })] }));
|
41
|
-
}
|
42
|
-
function DataListActions(props) {
|
43
|
-
return (_jsx(DataListAction, { "aria-labelledby": "check-action-item1 check-action-action1", id: "check-action-action1", "aria-label": "Actions", isPlainButtonAction: true, style: { whiteSpace: 'nowrap' }, children: _jsx(TypedActions, { actions: props.actions, position: DropdownPosition.right }) }));
|
44
|
-
}
|
package/mjs/PageDialog.js
DELETED
@@ -1,12 +0,0 @@
|
|
1
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import { createContext, useContext, useState } from 'react';
|
3
|
-
export const DialogContext = createContext(undefined);
|
4
|
-
export const SetDialogContext = createContext(() => null);
|
5
|
-
const PageDialogContext = createContext([undefined, () => alert('Use PageDialogProvider')]);
|
6
|
-
export function PageDialogProvider(props) {
|
7
|
-
const state = useState();
|
8
|
-
return (_jsxs(PageDialogContext.Provider, { value: state, children: [state[0] !== undefined && state[0], props.children] }));
|
9
|
-
}
|
10
|
-
export function usePageDialog() {
|
11
|
-
return useContext(PageDialogContext);
|
12
|
-
}
|
package/mjs/PageForm.js
DELETED
@@ -1,316 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
2
|
-
import { ajvResolver } from '@hookform/resolvers/ajv';
|
3
|
-
import { ActionGroup, Alert, Button, Checkbox, Flex, FlexItem, Form, FormGroup, FormSection, Grid, InputGroup, Menu, MenuItem, PageSection, Select, SelectGroup, SelectOption, SelectVariant, Slider, Switch, TextArea, TextInput, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Tooltip, } from '@patternfly/react-core';
|
4
|
-
import { CaretDownIcon, EyeIcon, EyeSlashIcon, SearchIcon } from '@patternfly/react-icons';
|
5
|
-
import deepEqual from 'fast-deep-equal';
|
6
|
-
import { Children, Fragment, isValidElement, useCallback, useContext, useState, } from 'react';
|
7
|
-
import { FormProvider, useController, useForm, useFormContext, useFormState, } from 'react-hook-form';
|
8
|
-
import { Collapse, PageHeader, useBreakpoint } from '.';
|
9
|
-
import { Scrollable } from './components/Scrollable';
|
10
|
-
import { SettingsContext } from './Settings';
|
11
|
-
export function FormPage(props) {
|
12
|
-
// const methods = useForm<PartialDeep<T>>({
|
13
|
-
// defaultValues: props.defaultValues,
|
14
|
-
// resolver: ajvResolver(props.schema, { strict: false }),
|
15
|
-
// })
|
16
|
-
const children = Children.toArray(props.children);
|
17
|
-
const inputs = children.filter((child) => {
|
18
|
-
if (!isValidElement(child))
|
19
|
-
return false;
|
20
|
-
if (child.type === FormPageAlerts)
|
21
|
-
return false;
|
22
|
-
if (child.type === FormPageButtons)
|
23
|
-
return false;
|
24
|
-
return true;
|
25
|
-
});
|
26
|
-
const buttons = children.find((child) => {
|
27
|
-
if (!isValidElement(child))
|
28
|
-
return false;
|
29
|
-
if (child.type === FormPageButtons)
|
30
|
-
return true;
|
31
|
-
return false;
|
32
|
-
});
|
33
|
-
const [settings] = useContext(SettingsContext);
|
34
|
-
return (_jsxs(_Fragment, { children: [!props.hideHeader && _jsx(PageHeader, { ...props }), _jsxs(Form
|
35
|
-
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
36
|
-
, {
|
37
|
-
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
38
|
-
onSubmit: props.form.handleSubmit(props.onSubmit), isHorizontal: props.isVertical ? false : settings.formLayout === 'horizontal', style: {
|
39
|
-
display: 'flex',
|
40
|
-
flexDirection: 'column',
|
41
|
-
flexGrow: 1,
|
42
|
-
overflow: 'hidden',
|
43
|
-
}, children: [_jsx(Scrollable, { style: { height: '100%', flexGrow: 1 }, children: _jsx(PageSection, { padding: { default: props.noPadding ? 'noPadding' : 'padding' }, isWidthLimited: true, children: _jsx(FormSection, { children: inputs }) }) }), buttons] })] }));
|
44
|
-
}
|
45
|
-
export function FormPageAlerts() {
|
46
|
-
const { errors } = useFormState();
|
47
|
-
const isMd = useBreakpoint('md');
|
48
|
-
return (_jsx(Fragment, { children: errors && Object.keys(errors).length > 0 && (_jsx(Alert, { title: "Please fix validation errors.", isInline: true, style: { width: '100%', paddingLeft: isMd ? 190 : undefined }, variant: "danger" })) }));
|
49
|
-
}
|
50
|
-
export function FormPageButtons(props) {
|
51
|
-
const { errors } = useFormState();
|
52
|
-
return (_jsxs("div", { children: [_jsx(FormPageAlerts, {}), _jsx(PageSection, { isFilled: true, style: {
|
53
|
-
display: 'flex',
|
54
|
-
flexDirection: 'column',
|
55
|
-
maxHeight: '100%',
|
56
|
-
borderTop: 'thin solid var(--pf-global--BorderColor--100)',
|
57
|
-
}, variant: "light", children: _jsxs(ActionGroup, { style: { marginTop: 0 }, children: [errors && Object.keys(errors).length > 0 ? (_jsx(Tooltip, { content: 'Please fix validation errors', children: _jsx(Button, { type: "submit", isAriaDisabled: true, children: props.submitText }) })) : (_jsx(Button, { type: "submit", children: props.submitText })), _jsx(Button, { type: "button", variant: "link", onClick: props.onCancel, children: props.cancelText })] }) })] }));
|
58
|
-
}
|
59
|
-
export function FormInputCheckbox(props) {
|
60
|
-
const { control } = useFormContext();
|
61
|
-
const { field } = useController({ control, name: props.name });
|
62
|
-
const id = props.name;
|
63
|
-
return (_jsx(Checkbox, { label: props.label, id: id, "aria-describedby": `${id}-helper`, description: props.description, body: field.value ? props.body : undefined, ...field, isChecked: !!field.value }));
|
64
|
-
}
|
65
|
-
export function FormTextInput(props) {
|
66
|
-
const { register, formState: { isSubmitting }, } = useFormContext();
|
67
|
-
const registration = register(props.name);
|
68
|
-
const { fieldState } = useController({ name: props.name });
|
69
|
-
const error = fieldState.error;
|
70
|
-
const id = props.id ?? props.name;
|
71
|
-
const [showSecret, setShowSecret] = useState(false);
|
72
|
-
return (_jsx(FormGroup, { id: `${id}-form-group`, fieldId: id, label: props.label, helperText: props.helperText, isRequired: props.required, validated: error?.message ? 'error' : undefined, helperTextInvalid: error?.message, children: _jsxs(InputGroup, { children: [_jsx(TextInput, { id: id, type: props.secret && !showSecret ? 'password' : 'text', "aria-describedby": `${id}-form-group`, isRequired: props.required, validated: error?.message ? 'error' : undefined, autoFocus: props.autoFocus, placeholder: props.placeholder, ...registration, onChange: (v, e) => {
|
73
|
-
void registration.onChange(e);
|
74
|
-
},
|
75
|
-
// innerRef={registration.ref}
|
76
|
-
isReadOnly: isSubmitting }), props.secret && (_jsx(Button, { variant: "control", onClick: () => setShowSecret(!showSecret), "aria-label": "Options menu", isDisabled: isSubmitting, children: showSecret ? _jsx(EyeIcon, {}) : _jsx(EyeSlashIcon, {}) }))] }) }));
|
77
|
-
}
|
78
|
-
export function FormTextArea(props) {
|
79
|
-
const { register, formState: { isSubmitting }, } = useFormContext();
|
80
|
-
const registration = register(props.name);
|
81
|
-
const { fieldState } = useController({ name: props.name });
|
82
|
-
const error = fieldState.error;
|
83
|
-
const id = props.id ?? props.name;
|
84
|
-
return (_jsx(FormGroup, { id: `${id}-form-group`, fieldId: id, label: props.label, helperText: props.helperText, isRequired: props.required, validated: error?.message ? 'error' : undefined, helperTextInvalid: error?.message, children: _jsx(TextArea, { id: id, type: props.secret ? 'password' : 'text', "aria-describedby": `${id}-form-group`, isRequired: props.required, validated: error?.message ? 'error' : undefined, autoFocus: props.autoFocus, placeholder: props.placeholder, ...registration, onChange: (v, e) => void registration.onChange(e), resizeOrientation: "vertical", isReadOnly: isSubmitting }) }));
|
85
|
-
}
|
86
|
-
export function FormNumberInput(props) {
|
87
|
-
const { formState: { isSubmitting }, } = useFormContext();
|
88
|
-
const { field, fieldState } = useController({ name: props.name });
|
89
|
-
const error = fieldState.error;
|
90
|
-
const id = props.id ?? props.name;
|
91
|
-
const max = props.max ?? 100;
|
92
|
-
const min = props.min ?? 1;
|
93
|
-
const value = Number(field.value);
|
94
|
-
return (_jsx(FormGroup, { id: `${id}-form-group`, fieldId: id, label: props.label, helperText: props.helperText, isRequired: props.required, validated: error?.message ? 'error' : undefined, helperTextInvalid: error?.message, children: _jsxs(Flex, { alignItems: { default: 'alignItemsFlexStart' }, children: [_jsxs(Flex, { alignItems: { default: 'alignItemsFlexStart' }, spaceItems: { default: 'spaceItemsSm' }, children: [_jsx(FlexItem, { style: { paddingTop: 6, minWidth: 20, textAlign: 'right' }, children: Math.floor((max - min) * value + min) }), props.valueLabel && (_jsx(FlexItem, { style: { paddingTop: 6, minWidth: 40 }, children: props.valueLabel }))] }), _jsx(FlexItem, { grow: { default: 'grow' }, children: _jsx(Slider, { id: id, "aria-describedby": `${id}-form-group`,
|
95
|
-
// isRequired={props.required}
|
96
|
-
// validated={error?.message ? 'error' : undefined}
|
97
|
-
autoFocus: props.autoFocus,
|
98
|
-
// {...registration}
|
99
|
-
value: (max - min) * value + min, onChange: (v) => field.onChange((v - min) / (max - min)), max: max, min: min,
|
100
|
-
// innerRef={registration.ref}
|
101
|
-
isDisabled: isSubmitting, showBoundaries: false }) })] }) }));
|
102
|
-
}
|
103
|
-
export function FormBooleanInput(props) {
|
104
|
-
const { formState: { isSubmitting }, } = useFormContext();
|
105
|
-
const { field, fieldState } = useController({ name: props.name });
|
106
|
-
const error = fieldState.error;
|
107
|
-
const id = props.id ?? props.name;
|
108
|
-
return (_jsx(FormGroup, { id: `${id}-form-group`, fieldId: id, label: props.label, helperText: props.helperText, isRequired: props.required, validated: error?.message ? 'error' : undefined, helperTextInvalid: error?.message, children: _jsx(Switch, { id: id, "aria-describedby": `${id}-form-group`,
|
109
|
-
// isRequired={props.required}
|
110
|
-
// validated={error?.message ? 'error' : undefined}
|
111
|
-
autoFocus: props.autoFocus,
|
112
|
-
// placeholder={props.placeholder}
|
113
|
-
// {...registration}
|
114
|
-
isChecked: typeof field.value === 'boolean' ? field.value : false, onChange: (e) => field.onChange(e),
|
115
|
-
// innerRef={registration.ref}
|
116
|
-
isDisabled: isSubmitting }) }));
|
117
|
-
}
|
118
|
-
export function FormSelect(props) {
|
119
|
-
const { field, fieldState: { error: fieldError }, } = useController({ name: props.name });
|
120
|
-
const [open, setOpen] = useState(false);
|
121
|
-
const id = props.id ?? props.name;
|
122
|
-
const error = fieldError !== undefined && fieldError.message;
|
123
|
-
const { options } = props;
|
124
|
-
options.sort((l, r) => {
|
125
|
-
if ((l.group ?? '') < (r.group ?? ''))
|
126
|
-
return -1;
|
127
|
-
if ((l.group ?? '') > (r.group ?? ''))
|
128
|
-
return 1;
|
129
|
-
if (l.label < r.label)
|
130
|
-
return -1;
|
131
|
-
if (l.label > r.label)
|
132
|
-
return 1;
|
133
|
-
return 0;
|
134
|
-
});
|
135
|
-
const selectedIndex = options.findIndex((option) => deepEqual(option.value, field.value));
|
136
|
-
const groups = options.reduce((groups, option) => {
|
137
|
-
const group = option.group ?? '';
|
138
|
-
let optionsArray = groups[group];
|
139
|
-
if (!optionsArray) {
|
140
|
-
optionsArray = [];
|
141
|
-
groups[group] = optionsArray;
|
142
|
-
}
|
143
|
-
optionsArray.push(option);
|
144
|
-
return groups;
|
145
|
-
}, {});
|
146
|
-
const isGrouped = Object.keys(groups).length > 1 ||
|
147
|
-
(Object.keys(groups).length === 1 && Object.keys(groups)[0] !== '');
|
148
|
-
const onSelect = useCallback((_event, value) => {
|
149
|
-
if (typeof value !== 'string') {
|
150
|
-
value = value.toString();
|
151
|
-
}
|
152
|
-
const selectedIndex = Number(value);
|
153
|
-
const selected = options[selectedIndex].value;
|
154
|
-
field.onChange(selected);
|
155
|
-
setOpen(false);
|
156
|
-
}, [field, options]);
|
157
|
-
let index = 0;
|
158
|
-
return (_jsx(FormGroup, { id: `${id}-form-group`, fieldId: id, label: props.label, helperTextInvalid: error, helperText: props.help, isRequired: props.required, validated: error ? 'error' : undefined, children: _jsx(Select, { id: id, variant: SelectVariant.single, "aria-describedby": `${id}-helper`, validated: error ? 'error' : undefined, ...field, isOpen: open, onToggle: () => setOpen(!open), selections: selectedIndex === -1 ? '' : selectedIndex.toString(), onSelect: onSelect, isCreatable: props.create, isInputFilterPersisted: props.create, placeholderText: props.placeholder, isGrouped: isGrouped, footer: props.footer?.label && (_jsx(Button, { variant: "link", isInline: true, onClick: () => {
|
159
|
-
setOpen(false);
|
160
|
-
props.footer?.click?.();
|
161
|
-
}, children: props.footer.label })), maxHeight: 280, children: !isGrouped
|
162
|
-
? options.map((option, index) => (_jsx(SelectOption, { value: index.toString(), label: option.label, description: option.description, children: option.label }, index)))
|
163
|
-
: Object.keys(groups).map((group) => (_jsx(SelectGroup, { label: group, children: groups[group].map((option) => (_jsx(SelectOption, { value: (index++).toString(), label: option.label, description: option.description, children: option.label }, index))) }, group))) }) }));
|
164
|
-
}
|
165
|
-
export function FormSelectInput(props) {
|
166
|
-
const { control } = useFormContext();
|
167
|
-
const { field, fieldState: { error }, } = useController({ control, name: props.name });
|
168
|
-
const menuItems = Children.toArray(props.children)
|
169
|
-
.filter((child) => isValidElement(child) && child.type === SelectOption)
|
170
|
-
.map((child) => {
|
171
|
-
if (isValidElement(child) && child.type === SelectOption) {
|
172
|
-
return (_jsx(MenuItem, { children: child.props.children }, child.props.value));
|
173
|
-
}
|
174
|
-
return _jsx(_Fragment, {});
|
175
|
-
});
|
176
|
-
const [open, setOpen] = useState(false);
|
177
|
-
const id = props.name;
|
178
|
-
let errorMessage;
|
179
|
-
switch (error?.type) {
|
180
|
-
case 'required':
|
181
|
-
errorMessage = props.label + ' is required.';
|
182
|
-
break;
|
183
|
-
default:
|
184
|
-
errorMessage = error?.type;
|
185
|
-
break;
|
186
|
-
}
|
187
|
-
return (_jsx(FormGroup, { fieldId: id, label: props.label, helperTextInvalid: errorMessage, helperText: props.helperText, isRequired: props.required, validated: errorMessage ? 'error' : undefined, children: _jsxs(TextInputGroup, { children: [_jsx(TextInputGroupMain, { ...field }), _jsx(TextInputGroupUtilities, { children: _jsx(Button, { variant: "plain", onClick: () => setOpen(!open), "aria-label": "Options menu", children: _jsx(CaretDownIcon, {}) }) }), open && (_jsx(Menu, { style: { position: 'absolute', right: 0, top: 36, width: '100%' }, children: menuItems }))] }) }));
|
188
|
-
}
|
189
|
-
export function FormTextSelect(props) {
|
190
|
-
const { register, setValue, formState: { isSubmitting }, } = useFormContext();
|
191
|
-
const registration = register(props.name);
|
192
|
-
const { fieldState } = useController({ name: props.name });
|
193
|
-
const error = fieldState.error;
|
194
|
-
let id = props.id ?? props.name;
|
195
|
-
id = id.split('.').join('-');
|
196
|
-
return (_jsx(Fragment, { children: _jsx(FormGroup, { id: `${id}-form-group`, fieldId: id, label: props.label, helperText: props.helperText, isRequired: props.required, validated: error?.message ? 'error' : undefined, helperTextInvalid: error?.message, children: _jsxs(InputGroup, { children: [_jsx(TextInput, { id: id, type: props.secret ? 'password' : 'text', "aria-describedby": `${id}-form-group`, isRequired: props.required, validated: error?.message ? 'error' : undefined, autoFocus: props.autoFocus, placeholder: props.placeholder, ...registration, onChange: (v, e) => {
|
197
|
-
void registration.onChange(e);
|
198
|
-
},
|
199
|
-
// innerRef={registration.ref}
|
200
|
-
isReadOnly: isSubmitting }), _jsx(Button, { variant: "control", onClick: () => props.selectOpen?.((item) => {
|
201
|
-
if (props.selectValue) {
|
202
|
-
const value = props.selectValue(item);
|
203
|
-
setValue(props.name, value, { shouldValidate: true });
|
204
|
-
}
|
205
|
-
}, props.selectTitle), "aria-label": "Options menu", isDisabled: isSubmitting, children: _jsx(SearchIcon, {}) })] }) }) }));
|
206
|
-
}
|
207
|
-
export function FormSchema(props) {
|
208
|
-
const { schema } = props;
|
209
|
-
const base = props.base ? props.base + '.' : '';
|
210
|
-
const p = [];
|
211
|
-
for (const propertyName in schema.properties) {
|
212
|
-
const property = schema.properties[propertyName];
|
213
|
-
switch (property) {
|
214
|
-
case true:
|
215
|
-
case false:
|
216
|
-
continue;
|
217
|
-
}
|
218
|
-
const title = typeof property.title === 'string' ? property.title : propertyName;
|
219
|
-
let placeholder = property.placeholder;
|
220
|
-
placeholder = typeof placeholder === 'string' ? placeholder : undefined;
|
221
|
-
const required = Array.isArray(schema.required) && schema.required.includes(propertyName);
|
222
|
-
switch (property.type) {
|
223
|
-
case 'string': {
|
224
|
-
switch (property.variant) {
|
225
|
-
case 'select': {
|
226
|
-
if ('options' in property) {
|
227
|
-
const formSelectProps = property;
|
228
|
-
p.push(_jsx(FormSelect, { name: base + propertyName, label: title, placeholder: placeholder, required: required, options: formSelectProps.options, footer: formSelectProps.footer }, base + propertyName));
|
229
|
-
}
|
230
|
-
else {
|
231
|
-
p.push(_jsx(FormTextSelect, { name: base + propertyName, label: title, placeholder: placeholder, required: required, selectTitle: property.selectTitle, selectValue: property.selectValue, selectOpen: property.selectOpen }, base + propertyName));
|
232
|
-
}
|
233
|
-
break;
|
234
|
-
}
|
235
|
-
case 'textarea':
|
236
|
-
p.push(_jsx(FormTextArea, { name: base + propertyName, label: title, placeholder: placeholder, required: required }, base + propertyName));
|
237
|
-
break;
|
238
|
-
case 'secret':
|
239
|
-
p.push(_jsx(FormTextInput, { name: base + propertyName, label: title, placeholder: placeholder, required: required, secret: true }, base + propertyName));
|
240
|
-
break;
|
241
|
-
default:
|
242
|
-
p.push(_jsx(FormTextInput, { name: base + propertyName, label: title, placeholder: placeholder, required: required }, base + propertyName));
|
243
|
-
break;
|
244
|
-
}
|
245
|
-
break;
|
246
|
-
}
|
247
|
-
case 'number': {
|
248
|
-
p.push(_jsx(FormNumberInput, { name: base + propertyName, label: title, required: required, min: property.min, max: property.max, valueLabel: property.valueLabel }, base + propertyName));
|
249
|
-
break;
|
250
|
-
}
|
251
|
-
case 'boolean': {
|
252
|
-
p.push(_jsx(FormBooleanInput, { name: base + propertyName, label: title, required: required }, base + propertyName));
|
253
|
-
break;
|
254
|
-
}
|
255
|
-
case 'object': {
|
256
|
-
p.push(_jsx(FormSchema, { schema: property, base: base + propertyName }, propertyName));
|
257
|
-
break;
|
258
|
-
}
|
259
|
-
}
|
260
|
-
}
|
261
|
-
return _jsx(_Fragment, { children: p });
|
262
|
-
}
|
263
|
-
export function PageForm(props) {
|
264
|
-
const { schema, defaultValue } = props;
|
265
|
-
const form = useForm({
|
266
|
-
defaultValues: defaultValue ?? {},
|
267
|
-
resolver: schema
|
268
|
-
? ajvResolver(schema, { strict: false, addFormats: true })
|
269
|
-
: undefined,
|
270
|
-
});
|
271
|
-
const { handleSubmit, setError: setFieldError } = form;
|
272
|
-
const [error, setError] = useState('');
|
273
|
-
const isMd = useBreakpoint('md');
|
274
|
-
const [settings] = useContext(SettingsContext);
|
275
|
-
const isHorizontal = props.isVertical ? false : settings.formLayout === 'horizontal';
|
276
|
-
const multipleColumns = props.singleColumn ? false : settings.formColumns === 'multiple';
|
277
|
-
const sm = multipleColumns ? (isHorizontal ? 12 : 12) : 12;
|
278
|
-
const md = multipleColumns ? (isHorizontal ? 12 : 6) : 12;
|
279
|
-
const lg = multipleColumns ? (isHorizontal ? 6 : 6) : 12;
|
280
|
-
const xl = multipleColumns ? (isHorizontal ? 6 : 6) : 12;
|
281
|
-
const xl2 = multipleColumns ? (isHorizontal ? 4 : 4) : 12;
|
282
|
-
const maxWidth = multipleColumns ? undefined : isHorizontal ? 960 : 800;
|
283
|
-
return (
|
284
|
-
// <PageBody>
|
285
|
-
_jsx(FormProvider, { ...form, children: _jsxs(Form
|
286
|
-
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
287
|
-
, {
|
288
|
-
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
289
|
-
onSubmit: handleSubmit((data) => {
|
290
|
-
setError('');
|
291
|
-
return props.onSubmit(data, setError, setFieldError);
|
292
|
-
}), isHorizontal: isHorizontal, style: {
|
293
|
-
display: 'flex',
|
294
|
-
flexDirection: 'column',
|
295
|
-
flexGrow: 1,
|
296
|
-
overflow: props.disableScrolling ? undefined : 'hidden',
|
297
|
-
gap: 0,
|
298
|
-
}, children: [props.disableScrolling ? (_jsx(PageSection, { isFilled: true,
|
299
|
-
// padding={{ default: props.onCancel ? 'padding' : 'noPadding' }}
|
300
|
-
variant: "light", style: { maxWidth }, children: _jsxs(Grid, { hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2, children: [props.schema && _jsx(FormSchema, { schema: props.schema }), props.children] }) })) : (_jsx(Scrollable, { style: { height: '100%', flexGrow: 1 }, children: _jsx(PageSection, { isFilled: true,
|
301
|
-
// padding={{ default: props.onCancel ? 'padding' : 'noPadding' }}
|
302
|
-
variant: "light", style: { maxWidth }, children: _jsxs(Grid, { hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2, children: [props.schema && _jsx(FormSchema, { schema: props.schema }), props.children] }) }) })), _jsx(Collapse, { open: !!error, children: _jsx(Alert, { variant: "danger", title: error ?? '', isInline: true, style: { paddingLeft: isMd && props.onCancel ? 190 : undefined } }) }), props.onCancel ? (_jsx(PageSection, { isFilled: false, style: {
|
303
|
-
borderTop: 'thin solid var(--pf-global--BorderColor--100)',
|
304
|
-
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--400)' : undefined,
|
305
|
-
}, variant: "light", children: _jsxs(ActionGroup, { style: { marginTop: 0 }, children: [_jsx(PageFormSubmitButton, { children: props.submitText }), props.onCancel && (_jsx(PageFormCancelButton, { onCancel: props.onCancel, children: props.cancelText }))] }) })) : (_jsx(PageFormSubmitButton, { style: { marginTop: 48 }, children: props.submitText }))] }) })
|
306
|
-
// </PageBody>
|
307
|
-
);
|
308
|
-
}
|
309
|
-
export function PageFormSubmitButton(props) {
|
310
|
-
const { isSubmitting, errors } = useFormState();
|
311
|
-
const hasErrors = errors && Object.keys(errors).length > 0;
|
312
|
-
return (_jsx(Tooltip, { content: "Please fix errors", trigger: hasErrors ? undefined : 'manual', children: _jsx(Button, { type: "submit", isDisabled: isSubmitting, isLoading: isSubmitting, isDanger: hasErrors, variant: hasErrors ? 'secondary' : undefined, style: props.style, children: props.children }) }));
|
313
|
-
}
|
314
|
-
export function PageFormCancelButton(props) {
|
315
|
-
return (_jsx(Button, { type: "button", variant: "link", onClick: props.onCancel, children: props.children }));
|
316
|
-
}
|
package/mjs/PageFramework.js
DELETED
@@ -1,8 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { PageAlertToasterProvider } from './PageAlertToaster';
|
3
|
-
import { PageDialogProvider } from './PageDialog';
|
4
|
-
import { SettingsProvider } from './Settings';
|
5
|
-
import { FrameworkTranslationsProvider } from './useFrameworkTranslations';
|
6
|
-
export function PageFrameworkProvider(props) {
|
7
|
-
return (_jsx(FrameworkTranslationsProvider, { children: _jsx(SettingsProvider, { children: _jsx(PageDialogProvider, { children: _jsx(PageAlertToasterProvider, { children: props.children }) }) }) }));
|
8
|
-
}
|
package/mjs/PageHeader.js
DELETED
@@ -1,86 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import { Breadcrumb, BreadcrumbItem, Button, Flex, FlexItem, PageNavigation, PageSection, PageSectionVariants, Popover, Skeleton, Stack, StackItem, Text, Title, Truncate, } from '@patternfly/react-core';
|
3
|
-
import { ExternalLinkAltIcon, OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
|
4
|
-
import { Fragment } from 'react';
|
5
|
-
import { useNavigate } from 'react-router-dom';
|
6
|
-
import { useBreakpoint } from './components/useBreakPoint';
|
7
|
-
import { useSettings } from './Settings';
|
8
|
-
function Breadcrumbs(props) {
|
9
|
-
const history = useNavigate();
|
10
|
-
if (!props.breadcrumbs)
|
11
|
-
return _jsx(Fragment, {});
|
12
|
-
return (_jsx(Breadcrumb, { style: props.style, children: props.breadcrumbs.map((breadcrumb) => {
|
13
|
-
if (!breadcrumb.label)
|
14
|
-
return _jsx(_Fragment, {});
|
15
|
-
return (_jsx(BreadcrumbItem, { id: breadcrumb.id, component: breadcrumb.component, onClick: breadcrumb.to ? () => breadcrumb.to && history(breadcrumb.to) : undefined, style: {
|
16
|
-
color: breadcrumb.to ? 'var(--pf-c-breadcrumb__link--Color)' : undefined,
|
17
|
-
cursor: breadcrumb.to ? 'pointer' : undefined,
|
18
|
-
}, isActive: breadcrumb.to === undefined, children: breadcrumb.label }, breadcrumb.id ?? breadcrumb.label));
|
19
|
-
}) }));
|
20
|
-
}
|
21
|
-
/**
|
22
|
-
* PageHeader enables the responsive layout of the header.
|
23
|
-
*
|
24
|
-
* @param {Breadcrumb[]} breadcrumbs - The breadcrumbs for the page.
|
25
|
-
* @param {string} title - The title of the page.
|
26
|
-
* @param {string} titleHelpTitle - The title of help popover.
|
27
|
-
* @param {ReactNode} titleHelp - The content for the help popover.
|
28
|
-
* @param {string} description - The description of the page.
|
29
|
-
* @param {ReactNode} controls - Support for extra page controls.
|
30
|
-
* @param {ReactNode} headerActions - The actions for the page.
|
31
|
-
*
|
32
|
-
* @example
|
33
|
-
* <Page>
|
34
|
-
* <PageLayout>
|
35
|
-
* <PageHeader
|
36
|
-
* breadcrumbs={[{ label: 'Home', to: '/home' }, { label: 'Page title' }]}
|
37
|
-
* title='Page title'
|
38
|
-
* description='Page description'
|
39
|
-
* headerActions={<PageActions actions={actions} />}
|
40
|
-
* />
|
41
|
-
* <PageBody />...</PageBody>
|
42
|
-
* </PageLayout>
|
43
|
-
* <Page>
|
44
|
-
*/
|
45
|
-
export function PageHeader(props) {
|
46
|
-
const { navigation, breadcrumbs, title, description, controls, headerActions: pageActions, } = props;
|
47
|
-
const lg = useBreakpoint('lg');
|
48
|
-
const xl = useBreakpoint('xl');
|
49
|
-
const xxl = useBreakpoint('xxl');
|
50
|
-
const isMdOrLarger = useBreakpoint('md');
|
51
|
-
// const isSmLarger = useBreakpoint('sm')
|
52
|
-
const settings = useSettings();
|
53
|
-
let { t } = props;
|
54
|
-
t = t ? t : (t) => t;
|
55
|
-
return (_jsxs(_Fragment, { children: [navigation && (_jsx(PageSection, { variant: PageSectionVariants.light, style: {
|
56
|
-
paddingLeft: 0,
|
57
|
-
paddingTop: 0,
|
58
|
-
paddingBottom: 0,
|
59
|
-
borderTop: settings.theme !== 'light' && settings.borders
|
60
|
-
? 'thin solid var(--pf-global--BorderColor--100)'
|
61
|
-
: undefined,
|
62
|
-
borderBottom: !props.disableBorderBottom && settings.borders
|
63
|
-
? 'thin solid var(--pf-global--BorderColor--100)'
|
64
|
-
: undefined,
|
65
|
-
backgroundColor: 'var(--pf-global--BackgroundColor--100)',
|
66
|
-
}, children: _jsx(Flex, { direction: { default: 'row' }, flexWrap: { default: 'nowrap' }, style: { maxWidth: '100%' }, children: _jsx(PageNavigation, { style: { paddingTop: 0, flexShrink: 1, flexGrow: 1 }, hasOverflowScroll: true, children: navigation }) }) })), (isMdOrLarger || !navigation) && (_jsx(PageSection, { variant: PageSectionVariants.light, style: {
|
67
|
-
paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
|
68
|
-
paddingBottom: xl ? 20 : 12,
|
69
|
-
borderTop: !navigation && settings.theme !== 'light' && settings.borders
|
70
|
-
? 'thin solid var(--pf-global--BorderColor--100)'
|
71
|
-
: undefined,
|
72
|
-
borderBottom: !props.disableBorderBottom && settings.borders
|
73
|
-
? 'thin solid var(--pf-global--BorderColor--100)'
|
74
|
-
: undefined,
|
75
|
-
backgroundColor: settings.theme === 'dark'
|
76
|
-
? xxl
|
77
|
-
? 'var(--pf-global--BackgroundColor--300)'
|
78
|
-
: 'var(--pf-global--BackgroundColor--400)'
|
79
|
-
: undefined,
|
80
|
-
}, children: _jsxs(Flex, { flexWrap: { default: 'nowrap' }, alignItems: { default: 'alignItemsStretch' }, children: [_jsxs(FlexItem, { grow: { default: 'grow' }, children: [breadcrumbs && (_jsx(Breadcrumbs, { breadcrumbs: breadcrumbs, style: { paddingBottom: lg ? 6 : 4 } })), title ? (props.titleHelp ? (_jsx(Popover, { headerContent: props.titleHelpTitle, bodyContent: _jsxs(Stack, { hasGutter: true, children: [typeof props.titleHelp === 'string' ? (_jsx(StackItem, { children: props.titleHelp })) : (props.titleHelp.map((help, index) => (_jsx(StackItem, { children: help }, index)))), props.titleDocLink && (_jsx(StackItem, { children: _jsx(Button, { icon: _jsx(ExternalLinkAltIcon, {}), variant: "link", onClick: () => window.open(props.titleDocLink, '_blank'), isInline: true, children: t('Documentation') }) }))] }), position: "bottom-start", removeFindDomNode: true, children: _jsxs(Title, { headingLevel: "h1", children: [title, _jsx(Button, { variant: "link", style: {
|
81
|
-
padding: 0,
|
82
|
-
marginTop: 1,
|
83
|
-
marginLeft: 8,
|
84
|
-
verticalAlign: 'top',
|
85
|
-
}, children: _jsx(OutlinedQuestionCircleIcon, {}) })] }) })) : (_jsx(Title, { headingLevel: "h1", children: title }))) : (_jsx(Title, { headingLevel: "h1", children: _jsx(Skeleton, { width: "160px" }) })), isMdOrLarger && description && (_jsx(Text, { component: "p", style: { paddingTop: xl ? 4 : 2, opacity: 0.8 }, children: typeof description === 'string' ? (_jsx(Truncate, { content: description })) : (_jsx(Stack, { children: description.map((d) => (_jsx(StackItem, { children: d }, d))) })) }))] }), title && (pageActions || controls) && (_jsxs(Flex, { direction: { default: 'column' }, spaceItems: { default: 'spaceItemsSm', xl: 'spaceItemsMd' }, justifyContent: { default: 'justifyContentCenter' }, children: [controls && _jsx(FlexItem, { grow: { default: 'grow' }, children: controls }), pageActions && _jsx(FlexItem, { children: pageActions })] }))] }) }))] }));
|
86
|
-
}
|
package/mjs/PageLayout.js
DELETED
@@ -1,23 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { useTranslation } from 'react-i18next';
|
3
|
-
import ErrorBoundary from './components/ErrorBoundary';
|
4
|
-
/**
|
5
|
-
* PageLayout enables the responsive layout of the page.
|
6
|
-
*
|
7
|
-
* @example
|
8
|
-
* <Page>
|
9
|
-
* <PageLayout>
|
10
|
-
* <PageHeader />
|
11
|
-
* <PageBody />...</PageBody>
|
12
|
-
* </PageLayout>
|
13
|
-
* <Page>
|
14
|
-
*/
|
15
|
-
export function PageLayout(props) {
|
16
|
-
const { t } = useTranslation();
|
17
|
-
return (_jsx(ErrorBoundary, { message: t('Error'), children: _jsx("div", { style: {
|
18
|
-
display: 'flex',
|
19
|
-
flexDirection: 'column',
|
20
|
-
height: '100%',
|
21
|
-
maxHeight: '100%',
|
22
|
-
}, children: props.children }) }));
|
23
|
-
}
|
package/mjs/PagePagination.js
DELETED
@@ -1,22 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { Pagination, PaginationVariant } from '@patternfly/react-core';
|
3
|
-
import { useCallback } from 'react';
|
4
|
-
import { useBreakpoint } from './components/useBreakPoint';
|
5
|
-
import { useSettings } from './Settings';
|
6
|
-
export function PagePagination(props) {
|
7
|
-
const { setPage, setPerPage } = props;
|
8
|
-
const onSetPage = useCallback((_event, page) => setPage(page), [setPage]);
|
9
|
-
const onPerPageSelect = useCallback((_event, perPage) => setPerPage(perPage), [setPerPage]);
|
10
|
-
const compact = !useBreakpoint('sm');
|
11
|
-
const settings = useSettings();
|
12
|
-
return (_jsx(Pagination, { variant: PaginationVariant.bottom, itemCount: props.itemCount, page: props.page, perPage: props.perPage, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: {
|
13
|
-
...props.style,
|
14
|
-
borderTop: 'thin solid var(--pf-global--BorderColor--100)',
|
15
|
-
boxShadow: 'none',
|
16
|
-
zIndex: 301,
|
17
|
-
// marginTop: -1,
|
18
|
-
paddingTop: compact ? 6 : undefined,
|
19
|
-
paddingBottom: compact ? 6 : undefined,
|
20
|
-
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
21
|
-
} }));
|
22
|
-
}
|