@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
@@ -1,69 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { Grid, GridItem, Stack } from '@patternfly/react-core';
|
3
|
-
import useResizeObserver from '@react-hook/resize-observer';
|
4
|
-
import { Children, useLayoutEffect, useMemo, useRef, useState, } from 'react';
|
5
|
-
export function Masonry(props) {
|
6
|
-
const target = useRef(null);
|
7
|
-
const [columns, setColumns] = useState(1);
|
8
|
-
useResizeObserver(target, (entry) => {
|
9
|
-
setColumns(Math.min(props.maxColumns ?? 12, Math.max(Math.floor(entry.contentRect.width / props.minSize), 1)));
|
10
|
-
});
|
11
|
-
const [span, setSpan] = useState(12);
|
12
|
-
const [sizes, setSizes] = useState({});
|
13
|
-
useLayoutEffect(() => {
|
14
|
-
switch (columns) {
|
15
|
-
case 1:
|
16
|
-
setSpan(12);
|
17
|
-
break;
|
18
|
-
case 2:
|
19
|
-
setSpan(6);
|
20
|
-
break;
|
21
|
-
case 3:
|
22
|
-
setSpan(4);
|
23
|
-
break;
|
24
|
-
case 4:
|
25
|
-
setSpan(3);
|
26
|
-
break;
|
27
|
-
case 5:
|
28
|
-
setSpan(2);
|
29
|
-
break;
|
30
|
-
case 6:
|
31
|
-
setSpan(2);
|
32
|
-
break;
|
33
|
-
default:
|
34
|
-
setSpan(1);
|
35
|
-
break;
|
36
|
-
}
|
37
|
-
}, [columns]);
|
38
|
-
const realColumns = 12 / span;
|
39
|
-
const itemColumns = useMemo(() => {
|
40
|
-
const itemColumns = new Array(realColumns).fill(0).map(() => []);
|
41
|
-
const columnHeights = new Array(realColumns).fill(0);
|
42
|
-
Children.forEach(props.children, (child, index) => {
|
43
|
-
const smallest = Math.min(...columnHeights);
|
44
|
-
const columnIndex = columnHeights.findIndex((column) => column === smallest);
|
45
|
-
if (columnIndex !== undefined && columnIndex !== -1) {
|
46
|
-
itemColumns[columnIndex].push(_jsx(MasonryItem, { index: index, sizes: sizes, setSizes: setSizes, children: child }, index));
|
47
|
-
const height = sizes[index];
|
48
|
-
if (height !== undefined) {
|
49
|
-
columnHeights[columnIndex] += height + 16;
|
50
|
-
}
|
51
|
-
}
|
52
|
-
});
|
53
|
-
return itemColumns;
|
54
|
-
}, [props.children, realColumns, sizes]);
|
55
|
-
return (_jsx("div", { ref: target, children: _jsx(Grid, { hasGutter: true, style: { maxWidth: realColumns * props.minSize }, children: itemColumns.map((column, index) => (_jsx(GridItem, { span: span, children: _jsx(Stack, { hasGutter: true, children: column }) }, index))) }) }));
|
56
|
-
}
|
57
|
-
function MasonryItem(props) {
|
58
|
-
const target = useRef(null);
|
59
|
-
useResizeObserver(target, (entry) => {
|
60
|
-
props.setSizes((sizes) => {
|
61
|
-
if (props.sizes[props.index] !== entry.contentRect.height) {
|
62
|
-
sizes = { ...sizes };
|
63
|
-
sizes[props.index] = entry.contentRect.height;
|
64
|
-
}
|
65
|
-
return sizes;
|
66
|
-
});
|
67
|
-
});
|
68
|
-
return _jsx("div", { ref: target, children: props.children });
|
69
|
-
}
|
@@ -1,60 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import useResizeObserver from '@react-hook/resize-observer';
|
3
|
-
import { useCallback, useEffect, useRef, useState } from 'react';
|
4
|
-
export function Scrollable(props) {
|
5
|
-
const divEl = useRef(null);
|
6
|
-
const [topShadow, setTopShadow] = useState(0);
|
7
|
-
const [bottomShadow, setBottomShadow] = useState(0);
|
8
|
-
const update = useCallback(() => {
|
9
|
-
/* istanbul ignore else */
|
10
|
-
if (divEl.current) {
|
11
|
-
setTopShadow(Math.min(1, divEl.current.scrollTop / 8));
|
12
|
-
const scrollBottom = divEl.current.scrollHeight - divEl.current.scrollTop - divEl.current.clientHeight - 1;
|
13
|
-
setBottomShadow(Math.max(0, Math.min(1, scrollBottom / 8)));
|
14
|
-
}
|
15
|
-
}, []);
|
16
|
-
useEffect(() => update(), [update, props.children]);
|
17
|
-
useResizeObserver(divEl, () => {
|
18
|
-
update();
|
19
|
-
});
|
20
|
-
const shadowOpacityTop = 0.2 * topShadow;
|
21
|
-
const shadowOpacityBottom = 0.2 * bottomShadow;
|
22
|
-
// const [theme] = useTheme()
|
23
|
-
// if (theme === ThemeE.Dark) {
|
24
|
-
// shadowOpacityTop *= 6
|
25
|
-
// shadowOpacityBottom *= 6
|
26
|
-
// }
|
27
|
-
/* istanbul ignore next */
|
28
|
-
const borderTop = props.borderTop ? 'thin solid rgba(0, 0, 0, 0.12)' : '';
|
29
|
-
/* istanbul ignore next */
|
30
|
-
const borderBottom = props.borderBottom ? 'thin solid rgba(0, 0, 0, 0.12)' : '';
|
31
|
-
return (_jsxs("div", { style: {
|
32
|
-
...props.style,
|
33
|
-
display: 'flex',
|
34
|
-
flexDirection: 'column',
|
35
|
-
flexGrow: 1,
|
36
|
-
overflowY: 'hidden',
|
37
|
-
position: 'relative',
|
38
|
-
}, children: [_jsx("div", { ref: divEl, style: {
|
39
|
-
display: 'flex',
|
40
|
-
flexDirection: 'column',
|
41
|
-
flexGrow: 1,
|
42
|
-
overflowY: 'auto',
|
43
|
-
borderTop,
|
44
|
-
borderBottom,
|
45
|
-
}, onScroll: update, children: props.children }),
|
46
|
-
/* istanbul ignore next */ shadowOpacityTop > 0 && (_jsx("div", { style: {
|
47
|
-
position: 'absolute',
|
48
|
-
top: 0,
|
49
|
-
height: '10px',
|
50
|
-
width: '100%',
|
51
|
-
background: `linear-gradient(rgba(0,0,0,${shadowOpacityTop}), rgba(0,0,0,0))`,
|
52
|
-
} })),
|
53
|
-
/* istanbul ignore next */ shadowOpacityBottom > 0 && (_jsx("div", { style: {
|
54
|
-
position: 'absolute',
|
55
|
-
bottom: 0,
|
56
|
-
height: '10px',
|
57
|
-
width: '100%',
|
58
|
-
background: `linear-gradient(rgba(0,0,0,0), rgba(0,0,0,${shadowOpacityBottom}))`,
|
59
|
-
} }))] }));
|
60
|
-
}
|
@@ -1,37 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { FormGroup, Select } from '@patternfly/react-core';
|
3
|
-
import { useCallback, useState } from 'react';
|
4
|
-
import { useOpen } from './useOpen';
|
5
|
-
export function SingleSelect(props) {
|
6
|
-
const { onChange } = props;
|
7
|
-
const [open, setOpen, onToggle] = useOpen(props);
|
8
|
-
const onSelect = useCallback((_e, v) => {
|
9
|
-
if (typeof v === 'string') {
|
10
|
-
onChange(v);
|
11
|
-
}
|
12
|
-
else {
|
13
|
-
onChange(v.toString());
|
14
|
-
}
|
15
|
-
setOpen(false);
|
16
|
-
}, [onChange, setOpen]);
|
17
|
-
const id = props.id ?? props.label.toLocaleLowerCase().split(' ').join('-');
|
18
|
-
return (_jsx(FormGroup, { label: props.label, fieldId: id, style: props.style, children: _jsx(Select, { id: id, selections: props.value, isOpen: open, onToggle: onToggle, onSelect: onSelect, children: props.children }) }));
|
19
|
-
}
|
20
|
-
export function SingleSelect2(props) {
|
21
|
-
const { onChange } = props;
|
22
|
-
const { id } = props;
|
23
|
-
const [open, setOpen] = useState(false);
|
24
|
-
const onToggle = useCallback(() => {
|
25
|
-
setOpen((open) => !open);
|
26
|
-
}, []);
|
27
|
-
const onSelect = useCallback((_e, v) => {
|
28
|
-
if (typeof v === 'string') {
|
29
|
-
onChange(v);
|
30
|
-
}
|
31
|
-
else {
|
32
|
-
onChange(v.toString());
|
33
|
-
}
|
34
|
-
setOpen(false);
|
35
|
-
}, [onChange]);
|
36
|
-
return (_jsx(Select, { id: id, selections: props.value, isOpen: open, onToggle: onToggle, onSelect: onSelect, children: props.children }));
|
37
|
-
}
|
@@ -1,38 +0,0 @@
|
|
1
|
-
export var PatternFlyColor;
|
2
|
-
(function (PatternFlyColor) {
|
3
|
-
PatternFlyColor["Green"] = "green";
|
4
|
-
PatternFlyColor["Blue"] = "blue";
|
5
|
-
PatternFlyColor["Red"] = "red";
|
6
|
-
PatternFlyColor["Yellow"] = "yellow";
|
7
|
-
PatternFlyColor["Grey"] = "grey";
|
8
|
-
})(PatternFlyColor || (PatternFlyColor = {}));
|
9
|
-
export function getPatternflyColor(color) {
|
10
|
-
switch (color) {
|
11
|
-
case 'green':
|
12
|
-
return pfSuccess;
|
13
|
-
case 'red':
|
14
|
-
return pfDanger;
|
15
|
-
case 'yellow':
|
16
|
-
return pfWarning;
|
17
|
-
case 'blue':
|
18
|
-
return pfInfo;
|
19
|
-
case 'grey':
|
20
|
-
return pfDisabled;
|
21
|
-
}
|
22
|
-
return undefined;
|
23
|
-
}
|
24
|
-
export const pfSuccess = 'var(--pf-global--success-color--100)';
|
25
|
-
export const pfDanger = 'var(--pf-global--danger-color--100)';
|
26
|
-
export const pfWarning = 'var(--pf-global--warning-color--100)';
|
27
|
-
export const pfInfo = 'var(--pf-global--info-color--100)';
|
28
|
-
export const pfDisabled = 'var(--pf-global--disabled-color--100)';
|
29
|
-
export var LabelColorE;
|
30
|
-
(function (LabelColorE) {
|
31
|
-
LabelColorE["blue"] = "blue";
|
32
|
-
LabelColorE["cyan"] = "cyan";
|
33
|
-
LabelColorE["green"] = "green";
|
34
|
-
LabelColorE["orange"] = "orange";
|
35
|
-
LabelColorE["purple"] = "purple";
|
36
|
-
LabelColorE["red"] = "red";
|
37
|
-
LabelColorE["grey"] = "grey";
|
38
|
-
})(LabelColorE || (LabelColorE = {}));
|
@@ -1,118 +0,0 @@
|
|
1
|
-
import xl2Breakpoint from '@patternfly/react-tokens/dist/esm/global_breakpoint_2xl';
|
2
|
-
import lgBreakpoint from '@patternfly/react-tokens/dist/esm/global_breakpoint_lg';
|
3
|
-
import mdBreakpoint from '@patternfly/react-tokens/dist/esm/global_breakpoint_md';
|
4
|
-
import smBreakpoint from '@patternfly/react-tokens/dist/esm/global_breakpoint_sm';
|
5
|
-
import xlBreakpoint from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl';
|
6
|
-
import xsBreakpoint from '@patternfly/react-tokens/dist/esm/global_breakpoint_xs';
|
7
|
-
import { useCallback, useEffect, useState } from 'react';
|
8
|
-
const breakpoints = {
|
9
|
-
xs: Number(xsBreakpoint.value.replace('px', '')),
|
10
|
-
sm: Number(smBreakpoint.value.replace('px', '')),
|
11
|
-
md: Number(mdBreakpoint.value.replace('px', '')),
|
12
|
-
lg: Number(lgBreakpoint.value.replace('px', '')),
|
13
|
-
xl: Number(xlBreakpoint.value.replace('px', '')),
|
14
|
-
xxl: Number(xl2Breakpoint.value.replace('px', '')),
|
15
|
-
};
|
16
|
-
export function useWindowSize() {
|
17
|
-
const [windowSize, setWindowSize] = useState(() => {
|
18
|
-
if (window.innerWidth <= breakpoints.sm)
|
19
|
-
return 'xs';
|
20
|
-
else if (window.innerWidth <= breakpoints.md)
|
21
|
-
return 'sm';
|
22
|
-
else if (window.innerWidth <= breakpoints.lg)
|
23
|
-
return 'md';
|
24
|
-
else if (window.innerWidth <= breakpoints.xl)
|
25
|
-
return 'lg';
|
26
|
-
else if (window.innerWidth <= breakpoints.xxl)
|
27
|
-
return 'xl';
|
28
|
-
else
|
29
|
-
return 'xxl';
|
30
|
-
});
|
31
|
-
const handleResize = useCallback(() => {
|
32
|
-
if (window.innerWidth <= breakpoints.sm)
|
33
|
-
setWindowSize('xs');
|
34
|
-
else if (window.innerWidth <= breakpoints.md)
|
35
|
-
setWindowSize('sm');
|
36
|
-
else if (window.innerWidth <= breakpoints.lg)
|
37
|
-
setWindowSize('md');
|
38
|
-
else if (window.innerWidth <= breakpoints.xl)
|
39
|
-
setWindowSize('lg');
|
40
|
-
else if (window.innerWidth <= breakpoints.xxl)
|
41
|
-
setWindowSize('xl');
|
42
|
-
else
|
43
|
-
setWindowSize('xxl');
|
44
|
-
}, []);
|
45
|
-
useEffect(() => {
|
46
|
-
const handler = handleResize;
|
47
|
-
window.addEventListener('resize', handler);
|
48
|
-
return () => window.removeEventListener('resize', handler);
|
49
|
-
}, [handleResize]);
|
50
|
-
useEffect(() => handleResize(), [handleResize]);
|
51
|
-
return windowSize;
|
52
|
-
}
|
53
|
-
/** Returns true if the window size is equal to or larger than the indicated size. */
|
54
|
-
export function useBreakpoint(size) {
|
55
|
-
const windowSize = useWindowSize();
|
56
|
-
switch (size) {
|
57
|
-
case 'xs':
|
58
|
-
return true;
|
59
|
-
case 'sm':
|
60
|
-
switch (windowSize) {
|
61
|
-
case 'sm':
|
62
|
-
case 'md':
|
63
|
-
case 'lg':
|
64
|
-
case 'xl':
|
65
|
-
case 'xxl':
|
66
|
-
return true;
|
67
|
-
default:
|
68
|
-
return false;
|
69
|
-
}
|
70
|
-
case 'md':
|
71
|
-
switch (windowSize) {
|
72
|
-
case 'md':
|
73
|
-
case 'lg':
|
74
|
-
case 'xl':
|
75
|
-
case 'xxl':
|
76
|
-
return true;
|
77
|
-
default:
|
78
|
-
return false;
|
79
|
-
}
|
80
|
-
case 'lg':
|
81
|
-
switch (windowSize) {
|
82
|
-
case 'lg':
|
83
|
-
case 'xl':
|
84
|
-
case 'xxl':
|
85
|
-
return true;
|
86
|
-
default:
|
87
|
-
return false;
|
88
|
-
}
|
89
|
-
case 'xl':
|
90
|
-
switch (windowSize) {
|
91
|
-
case 'xl':
|
92
|
-
case 'xxl':
|
93
|
-
return true;
|
94
|
-
default:
|
95
|
-
return false;
|
96
|
-
}
|
97
|
-
case 'xxl':
|
98
|
-
switch (windowSize) {
|
99
|
-
case 'xxl':
|
100
|
-
return true;
|
101
|
-
default:
|
102
|
-
return false;
|
103
|
-
}
|
104
|
-
}
|
105
|
-
}
|
106
|
-
export function useOrientation() {
|
107
|
-
const [orientation, setOrientation] = useState(() => window.innerWidth > window.innerHeight ? 'landscape' : 'portrait');
|
108
|
-
const handleResize = useCallback(() => {
|
109
|
-
setOrientation(window.innerWidth > window.innerHeight ? 'landscape' : 'portrait');
|
110
|
-
}, []);
|
111
|
-
useEffect(() => {
|
112
|
-
const handler = handleResize;
|
113
|
-
window.addEventListener('resize', handler);
|
114
|
-
return () => window.removeEventListener('resize', handler);
|
115
|
-
}, [handleResize]);
|
116
|
-
useEffect(() => handleResize(), [handleResize]);
|
117
|
-
return orientation;
|
118
|
-
}
|
@@ -1,16 +0,0 @@
|
|
1
|
-
import { useCallback, useEffect, useState } from 'react';
|
2
|
-
export function useOpen(props) {
|
3
|
-
const [open, setOpenState] = useState(() => props.open ?? false);
|
4
|
-
useEffect(() => {
|
5
|
-
if (props.open !== undefined) {
|
6
|
-
setOpenState(props.open);
|
7
|
-
}
|
8
|
-
}, [props.open, setOpenState]);
|
9
|
-
const setOpen = useCallback((open) => {
|
10
|
-
props.setOpen ? props.setOpen(open) : setOpenState(open);
|
11
|
-
}, [props]);
|
12
|
-
const onToggle = useCallback(() => {
|
13
|
-
setOpen(!open);
|
14
|
-
}, [open, setOpen]);
|
15
|
-
return [open, setOpen, onToggle];
|
16
|
-
}
|
@@ -1,48 +0,0 @@
|
|
1
|
-
import { useCallback, useEffect, useMemo, useState } from 'react';
|
2
|
-
function useIsMounted() {
|
3
|
-
const [isMounted, setIsMounted] = useState(true);
|
4
|
-
useEffect(() => () => {
|
5
|
-
setIsMounted(false);
|
6
|
-
}, []);
|
7
|
-
return isMounted;
|
8
|
-
}
|
9
|
-
export function useWindowHistory() {
|
10
|
-
const isMounted = useIsMounted();
|
11
|
-
const [location, setLocation] = useState(isMounted ? window.location : undefined);
|
12
|
-
const setWindowLocation = useCallback(() => {
|
13
|
-
setLocation(window.location);
|
14
|
-
}, []);
|
15
|
-
useEffect(() => {
|
16
|
-
if (!isMounted)
|
17
|
-
return;
|
18
|
-
if (!location) {
|
19
|
-
setWindowLocation();
|
20
|
-
}
|
21
|
-
window.addEventListener('popstate', setWindowLocation);
|
22
|
-
return () => {
|
23
|
-
window.removeEventListener('popstate', setWindowLocation);
|
24
|
-
};
|
25
|
-
}, [isMounted, location, setWindowLocation]);
|
26
|
-
const push = useCallback((url) => {
|
27
|
-
window.history.replaceState(null, '', url);
|
28
|
-
setWindowLocation();
|
29
|
-
}, [setWindowLocation]);
|
30
|
-
const update = useCallback((url) => {
|
31
|
-
window.history.replaceState(null, '', url);
|
32
|
-
setWindowLocation();
|
33
|
-
}, [setWindowLocation]);
|
34
|
-
return { location, push, update };
|
35
|
-
}
|
36
|
-
export function useSearchParams() {
|
37
|
-
const history = useWindowHistory();
|
38
|
-
const pathname = history.location?.pathname || '/';
|
39
|
-
const searchParams = useMemo(() => new URLSearchParams(history.location?.search ?? '/'), [history.location?.search]);
|
40
|
-
const setSearchParams = useCallback((searchParams) => {
|
41
|
-
const newSearch = searchParams.toString();
|
42
|
-
if (newSearch)
|
43
|
-
history.update('?' + newSearch);
|
44
|
-
else
|
45
|
-
history.update(pathname); // retain the existing pathname
|
46
|
-
}, [history, pathname]);
|
47
|
-
return [searchParams, setSearchParams];
|
48
|
-
}
|
package/mjs/index.js
DELETED
@@ -1,23 +0,0 @@
|
|
1
|
-
export * from './BulkActionDialog';
|
2
|
-
export * from './components/BulkSelector';
|
3
|
-
export * from './components/Collapse';
|
4
|
-
export * from './components/Details';
|
5
|
-
export * from './components/Help';
|
6
|
-
export * from './components/patternfly-colors';
|
7
|
-
export * from './components/useBreakPoint';
|
8
|
-
export * from './PageBody';
|
9
|
-
export * from './PageCells';
|
10
|
-
export * from './PageDataList';
|
11
|
-
export * from './PageDialog';
|
12
|
-
export * from './PageForm';
|
13
|
-
export * from './PageFramework';
|
14
|
-
export * from './PageHeader';
|
15
|
-
export * from './PageLayout';
|
16
|
-
export * from './PageTable';
|
17
|
-
export * from './PageTableCards';
|
18
|
-
export * from './PageTabs';
|
19
|
-
export * from './PageToolbar';
|
20
|
-
export * from './TypedActions';
|
21
|
-
export * from './useSelectDialog';
|
22
|
-
export * from './useTableItems';
|
23
|
-
export * from './utils/compare';
|
@@ -1,22 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { createContext, useContext, useState } from 'react';
|
3
|
-
const defaultTranslations = {
|
4
|
-
errorText: 'Error',
|
5
|
-
cancelText: 'Cancel',
|
6
|
-
closeText: 'Close',
|
7
|
-
confirmText: 'Confirm',
|
8
|
-
pendingText: 'Pending',
|
9
|
-
submitText: 'Submit',
|
10
|
-
submittingText: 'Submitting',
|
11
|
-
successText: 'Success',
|
12
|
-
processingText: 'Processing',
|
13
|
-
noItemsFound: 'No items found',
|
14
|
-
};
|
15
|
-
const FrameworkTranslationsContext = createContext([defaultTranslations, () => alert('Use FrameworkTranslationsProvider')]);
|
16
|
-
export function FrameworkTranslationsProvider(props) {
|
17
|
-
const state = useState(defaultTranslations);
|
18
|
-
return (_jsx(FrameworkTranslationsContext.Provider, { value: state, children: props.children }));
|
19
|
-
}
|
20
|
-
export function useFrameworkTranslations() {
|
21
|
-
return useContext(FrameworkTranslationsContext);
|
22
|
-
}
|
package/mjs/useInMemoryView.js
DELETED
@@ -1,60 +0,0 @@
|
|
1
|
-
import getValue from 'get-value';
|
2
|
-
import { useEffect, useMemo } from 'react';
|
3
|
-
import { useFiltered, usePaged, useSelectedInMemory, useSorted } from './useTableItems';
|
4
|
-
import { useView } from './useView';
|
5
|
-
import { compareUnknowns } from './utils/compare';
|
6
|
-
export function useInMemoryView(options) {
|
7
|
-
const { items, keyFn, tableColumns, toolbarFilters, disableQueryString } = options;
|
8
|
-
const view = useView({
|
9
|
-
sort: tableColumns && tableColumns.length ? tableColumns[0].sort : undefined,
|
10
|
-
}, disableQueryString);
|
11
|
-
const { page, perPage, sort, sortDirection, filters } = view;
|
12
|
-
const sorted = useSorted(items ?? []);
|
13
|
-
const { setSort } = sorted;
|
14
|
-
useEffect(() => setSort({
|
15
|
-
id: sort,
|
16
|
-
sortFn: (l, r) => {
|
17
|
-
const lv = getValue(l, sort);
|
18
|
-
const rv = getValue(r, sort);
|
19
|
-
return compareUnknowns(lv, rv);
|
20
|
-
},
|
21
|
-
direction: sortDirection,
|
22
|
-
}), [sort, sortDirection, setSort]);
|
23
|
-
const filtered = useFiltered(sorted.sorted, keyFn);
|
24
|
-
const { setFilterFn } = filtered;
|
25
|
-
useEffect(() => {
|
26
|
-
if (Object.keys(filters).length === 0) {
|
27
|
-
setFilterFn(undefined);
|
28
|
-
}
|
29
|
-
else {
|
30
|
-
setFilterFn((item) => {
|
31
|
-
for (const key in filters) {
|
32
|
-
const toolbarFilter = toolbarFilters?.find((filter) => filter.key === key);
|
33
|
-
if (toolbarFilter) {
|
34
|
-
const value = getValue(item, toolbarFilter.query);
|
35
|
-
if (typeof value === 'string') {
|
36
|
-
for (const filterValue of filters[key]) {
|
37
|
-
if (value.toLowerCase().includes(filterValue.toLowerCase()))
|
38
|
-
return true;
|
39
|
-
}
|
40
|
-
}
|
41
|
-
}
|
42
|
-
}
|
43
|
-
return false;
|
44
|
-
});
|
45
|
-
}
|
46
|
-
}, [filters, setFilterFn, toolbarFilters]);
|
47
|
-
const paged = usePaged(filtered.filtered);
|
48
|
-
const { setPage, setPerPage } = paged;
|
49
|
-
useEffect(() => setPage(page), [page, paged, setPage]);
|
50
|
-
useEffect(() => setPerPage(perPage), [perPage, paged, setPerPage]);
|
51
|
-
const selection = useSelectedInMemory(items ?? [], keyFn);
|
52
|
-
return useMemo(() => {
|
53
|
-
return {
|
54
|
-
itemCount: items ? filtered.filtered.length : 0,
|
55
|
-
pageItems: items ? paged.paged : undefined,
|
56
|
-
...view,
|
57
|
-
...selection,
|
58
|
-
};
|
59
|
-
}, [filtered.filtered.length, items, paged.paged, selection, view]);
|
60
|
-
}
|
package/mjs/useSelectDialog.js
DELETED
@@ -1,49 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import { Button, Modal, ModalBoxBody, ModalVariant, Skeleton, Split, SplitItem, } from '@patternfly/react-core';
|
3
|
-
import { useCallback, useEffect, useState } from 'react';
|
4
|
-
import { Collapse } from './components/Collapse';
|
5
|
-
import { usePageDialog } from './PageDialog';
|
6
|
-
import { PageTable } from './PageTable';
|
7
|
-
export function useSelectDialog(options) {
|
8
|
-
const { view, tableColumns, toolbarFilters, confirm, cancel, selected } = options;
|
9
|
-
const [title, setTitle] = useState('');
|
10
|
-
const [onSelect, setOnSelect] = useState();
|
11
|
-
const openSetting = useCallback((onSelect, title) => {
|
12
|
-
setTitle(title ?? '');
|
13
|
-
setOnSelect(() => onSelect);
|
14
|
-
}, []);
|
15
|
-
const [_, setDialog] = usePageDialog();
|
16
|
-
useEffect(() => {
|
17
|
-
if (onSelect !== undefined) {
|
18
|
-
setDialog(_jsx(SelectDialog, { title: title, open: true, setOpen: () => setOnSelect(undefined), onSelect: onSelect, view: view, tableColumns: tableColumns, toolbarFilters: toolbarFilters, confirm: confirm, cancel: cancel, selected: selected, keyFn: view.keyFn }));
|
19
|
-
}
|
20
|
-
else {
|
21
|
-
setDialog(undefined);
|
22
|
-
view.unselectAll();
|
23
|
-
}
|
24
|
-
}, [cancel, confirm, onSelect, selected, setDialog, tableColumns, title, toolbarFilters, view]);
|
25
|
-
return openSetting;
|
26
|
-
}
|
27
|
-
export function SelectDialog(props) {
|
28
|
-
const { title, open, setOpen, onSelect, view, tableColumns, toolbarFilters, confirm, cancel, selected, } = props;
|
29
|
-
const onClose = () => setOpen(false);
|
30
|
-
return (_jsxs(Modal, { title: title, isOpen: open, onClose: onClose, variant: ModalVariant.medium, tabIndex: 0, actions: [
|
31
|
-
_jsx(Button, { variant: "primary", onClick: () => {
|
32
|
-
if (view.selectedItems.length > 0) {
|
33
|
-
onSelect(view.selectedItems[0]);
|
34
|
-
}
|
35
|
-
onClose();
|
36
|
-
}, isAriaDisabled: view.selectedItems.length === 0, children: confirm }, "confirm"),
|
37
|
-
_jsx(Button, { variant: "link", onClick: onClose, children: cancel }, "cancel"),
|
38
|
-
], hasNoBodyWrapper: true, children: [_jsx(ModalBoxBody, { style: { overflow: 'hidden' }, children: _jsxs(Split, { hasGutter: true, children: [_jsx(SplitItem, { style: { opacity: view.selectedItems.length === 0 ? 0 : undefined }, children: selected }), _jsxs("b", { children: [view.selectedItems.map((item) => {
|
39
|
-
if (tableColumns && tableColumns.length > 0) {
|
40
|
-
return _jsx("span", { children: tableColumns[0].cell(item) }, props.keyFn(item));
|
41
|
-
}
|
42
|
-
return _jsx(_Fragment, {});
|
43
|
-
}), _jsx(_Fragment, {})] })] }) }), _jsx(Collapse, { open: view.itemCount === undefined, children: _jsx(Skeleton, { height: "80px" }) }), _jsx(Collapse, { open: view.itemCount !== undefined, children: _jsx("div", { style: {
|
44
|
-
display: 'flex',
|
45
|
-
flexDirection: 'column',
|
46
|
-
maxHeight: 400,
|
47
|
-
overflow: 'hidden',
|
48
|
-
}, children: _jsx(PageTable, { tableColumns: tableColumns, toolbarFilters: toolbarFilters, emptyStateTitle: "No organizations found", errorStateTitle: "Error loading organizations", ...view, onSelect: () => null }) }) })] }));
|
49
|
-
}
|
@@ -1,29 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { Button, Modal, ModalVariant } from '@patternfly/react-core';
|
3
|
-
import { useCallback } from 'react';
|
4
|
-
import { usePageDialog } from './PageDialog';
|
5
|
-
import { PageTable } from './PageTable';
|
6
|
-
import { useFrameworkTranslations } from './useFrameworkTranslations';
|
7
|
-
export function SelectMultipleDialog(props) {
|
8
|
-
const { title, view, tableColumns, toolbarFilters, confirmText, cancelText, onSelect } = props;
|
9
|
-
const [_, setDialog] = usePageDialog();
|
10
|
-
const onClose = useCallback(() => setDialog(undefined), [setDialog]);
|
11
|
-
const [translations] = useFrameworkTranslations();
|
12
|
-
return (_jsx(Modal, { title: title, isOpen: true, onClose: onClose, variant: ModalVariant.medium, tabIndex: 0, actions: [
|
13
|
-
_jsx(Button, { variant: "primary", onClick: () => {
|
14
|
-
onClose();
|
15
|
-
onSelect(view.selectedItems);
|
16
|
-
}, isAriaDisabled: view.selectedItems.length === 0, children: confirmText ?? translations.confirmText }, "confirm"),
|
17
|
-
_jsx(Button, { variant: "link", onClick: onClose, children: cancelText ?? translations.cancelText }, "cancel"),
|
18
|
-
], hasNoBodyWrapper: true, children: _jsx("div", { style: {
|
19
|
-
display: 'flex',
|
20
|
-
flexDirection: 'column',
|
21
|
-
maxHeight: 500,
|
22
|
-
overflow: 'hidden',
|
23
|
-
}, children: _jsx(PageTable, { tableColumns: tableColumns, toolbarFilters: toolbarFilters, ...view, emptyStateTitle: props.emptyStateTitle ?? translations.noItemsFound, errorStateTitle: props.errorStateTitle ?? translations.errorText, showSelect: true }) }) }));
|
24
|
-
}
|
25
|
-
export function useSelectMultipleDialog() {
|
26
|
-
const [_, setDialog] = usePageDialog();
|
27
|
-
const openSelectMultipleDialog = useCallback((props) => setDialog(_jsx(SelectMultipleDialog, { ...props })), [setDialog]);
|
28
|
-
return openSelectMultipleDialog;
|
29
|
-
}
|