@ansible/ansible-ui-framework 0.0.259 → 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 +0 -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/PageTable.js
DELETED
@@ -1,191 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
2
|
-
import { Button, EmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateSecondaryActions, EmptyStateVariant, Skeleton, Title, } from '@patternfly/react-core';
|
3
|
-
import { ExclamationCircleIcon, PlusCircleIcon, SearchIcon } from '@patternfly/react-icons';
|
4
|
-
import { ActionsColumn, TableComposable, Tbody, Td, Th, Thead, Tr, } from '@patternfly/react-table';
|
5
|
-
import useResizeObserver from '@react-hook/resize-observer';
|
6
|
-
import { Fragment, useCallback, useEffect, useRef, useState, } from 'react';
|
7
|
-
import { Scrollable } from './components/Scrollable';
|
8
|
-
import { useBreakpoint } from './components/useBreakPoint';
|
9
|
-
import { PageBody } from './PageBody';
|
10
|
-
import { useColumnModal } from './PageColumnModal';
|
11
|
-
import { PageHeader } from './PageHeader';
|
12
|
-
import { PageLayout } from './PageLayout';
|
13
|
-
import { PagePagination } from './PagePagination';
|
14
|
-
import { PageTableCards } from './PageTableCards';
|
15
|
-
import { PageTableList } from './PageTableList';
|
16
|
-
import { PageTableViewTypeE } from './PageTableViewType';
|
17
|
-
import { PageTableToolbar } from './PageToolbar';
|
18
|
-
import { useSettings } from './Settings';
|
19
|
-
import { TypedActionType, useTypedActionsToTableActions } from './TypedActions';
|
20
|
-
export function TablePage(props) {
|
21
|
-
return (_jsxs(PageLayout, { children: [_jsx(PageHeader, { ...props }), _jsx(PageTable, { ...props })] }));
|
22
|
-
}
|
23
|
-
export function PageTable(props) {
|
24
|
-
let { disableBodyPadding } = props;
|
25
|
-
disableBodyPadding = true;
|
26
|
-
const { toolbarActions } = props;
|
27
|
-
const { openColumnModal, columnModal, managedColumns } = useColumnModal(props.tableColumns);
|
28
|
-
const showSelect = toolbarActions?.find((toolbarAction) => TypedActionType.bulk === toolbarAction.type) !==
|
29
|
-
undefined;
|
30
|
-
const hasTableViewType = !props.disableTableView;
|
31
|
-
const hasListViewType = !props.disableListView;
|
32
|
-
// const hasCardViewType = !props.disableCardView
|
33
|
-
const [viewType, setViewType] = useState(() => props.defaultTableView ??
|
34
|
-
(hasTableViewType
|
35
|
-
? PageTableViewTypeE.Table
|
36
|
-
: hasListViewType
|
37
|
-
? PageTableViewTypeE.List
|
38
|
-
: PageTableViewTypeE.Cards));
|
39
|
-
return (_jsxs(_Fragment, { children: [_jsx(PageTableToolbar, { ...props, openColumnModal: openColumnModal, showSelect: showSelect, viewType: viewType, setViewType: setViewType }), viewType === PageTableViewTypeE.Table && (_jsx(PageBody, { disablePadding: disableBodyPadding, children: _jsx(PageTableView, { ...props, tableColumns: managedColumns }) })), viewType === PageTableViewTypeE.List && (_jsx(PageBody, { disablePadding: true, children: _jsx(Scrollable, { children: _jsx(PageTableList, { ...props, showSelect: showSelect }) }) })), viewType === PageTableViewTypeE.Cards && (_jsx(Scrollable, { children: _jsx(PageTableCards, { ...props, showSelect: showSelect }) })), (!props.autoHidePagination || (props.itemCount ?? 0) > props.perPage) && (_jsx(PagePagination, { ...props })), columnModal] }));
|
40
|
-
}
|
41
|
-
function PageTableView(props) {
|
42
|
-
const { tableColumns, pageItems, selectItem, unselectItem, isSelected, keyFn, rowActions, toolbarActions, itemCount, perPage, clearAllFilters, filters, error, onSelect, unselectAll, } = props;
|
43
|
-
let { t } = props;
|
44
|
-
t = t ? t : (t) => t;
|
45
|
-
const showSelect = props.showSelect ||
|
46
|
-
toolbarActions?.find((toolbarAction) => TypedActionType.bulk === toolbarAction.type) !==
|
47
|
-
undefined;
|
48
|
-
const containerRef = useRef(null);
|
49
|
-
const [scroll, setScroll] = useState({
|
50
|
-
left: 0,
|
51
|
-
right: 0,
|
52
|
-
top: 0,
|
53
|
-
bottom: 0,
|
54
|
-
});
|
55
|
-
const updateScroll = useCallback((div) => {
|
56
|
-
if (!div)
|
57
|
-
return;
|
58
|
-
setScroll({
|
59
|
-
top: div.scrollTop,
|
60
|
-
bottom: div.scrollHeight - div.clientHeight - div.scrollTop,
|
61
|
-
left: div.scrollLeft,
|
62
|
-
right: div.scrollWidth - div.clientWidth - div.scrollLeft,
|
63
|
-
});
|
64
|
-
}, []);
|
65
|
-
const onScroll = useCallback((event) => updateScroll(event.currentTarget), [updateScroll]);
|
66
|
-
useResizeObserver(containerRef, () => updateScroll(containerRef.current));
|
67
|
-
useEffect(() => updateScroll(containerRef.current), [updateScroll]);
|
68
|
-
const settings = useSettings();
|
69
|
-
if (error) {
|
70
|
-
return (_jsx("div", { style: {
|
71
|
-
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
72
|
-
height: '100%',
|
73
|
-
}, children: _jsxs(EmptyState, { variant: EmptyStateVariant.small, style: {
|
74
|
-
paddingTop: 64,
|
75
|
-
}, 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 })] }) }));
|
76
|
-
}
|
77
|
-
if (itemCount === 0 && Object.keys(filters ?? {}).length === 0) {
|
78
|
-
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 }))] }));
|
79
|
-
}
|
80
|
-
return (_jsxs("div", { className: "pf-c-scroll-inner-wrapper", style: { height: '100%', marginBottom: -1 }, ref: containerRef, onScroll: onScroll, children: [_jsxs(TableComposable, { "aria-label": "Simple table", variant: props.compact ? 'compact' : settings.tableLayout === 'compact' ? 'compact' : undefined, gridBreakPoint: "", isStickyHeader: true, children: [itemCount === undefined ? (_jsx(Thead, { children: _jsx(Tr, { children: _jsx(Th, { children: _jsx(Skeleton, {}) }) }) })) : (_jsx(TableHead, { ...props, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, tableColumns: tableColumns, onSelect: onSelect })), _jsx(Tbody, { children: itemCount === undefined
|
81
|
-
? new Array(perPage).fill(0).map((_, index) => (_jsx(Tr, { children: _jsx(Td, { children: _jsx("div", { style: { paddingTop: 5, paddingBottom: 5 }, children: _jsx(Skeleton, { height: "27px" }) }) }) }, index)))
|
82
|
-
: pageItems === undefined
|
83
|
-
? new Array(Math.min(perPage, itemCount)).fill(0).map((_, index) => (_jsxs(Tr, { children: [showSelect && _jsx(Td, {}), _jsx(Td, { colSpan: tableColumns.length, children: _jsx("div", { style: { paddingTop: 5, paddingBottom: 5 }, children: _jsx(Skeleton, { height: "27px" }) }) })] }, index)))
|
84
|
-
: pageItems?.map((item, rowIndex) => (_jsx(TableRow, { columns: tableColumns, item: item, isItemSelected: isSelected?.(item), selectItem: selectItem, unselectItem: unselectItem, rowActions: rowActions, rowIndex: rowIndex, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, unselectAll: unselectAll, onSelect: onSelect }, keyFn ? keyFn(item) : rowIndex))) })] }), itemCount === 0 && (_jsx("div", { style: { margin: 'auto' }, children: _jsxs(EmptyState, { children: [_jsx(EmptyStateIcon, { icon: SearchIcon }), _jsx(Title, { headingLevel: "h2", size: "lg", children: t('No results found') }), _jsx(EmptyStateBody, { children: t('No results match this filter criteria. Adjust your filters and try again.') }), clearAllFilters && (_jsx(EmptyStateSecondaryActions, { children: _jsx(Button, { variant: "link", onClick: clearAllFilters, children: t('Clear all filters') }) }))] }) }))] }));
|
85
|
-
}
|
86
|
-
function TableHead(props) {
|
87
|
-
const { tableColumns: columns, rowActions: itemActions, sort, setSort, sortDirection, setSortDirection, showSelect, onSelect, } = props;
|
88
|
-
const settings = useSettings();
|
89
|
-
const getColumnSort = useCallback((columnIndex, column) => {
|
90
|
-
if (!column.sort)
|
91
|
-
return undefined;
|
92
|
-
return {
|
93
|
-
onSort: (_event, _columnIndex, sortByDirection) => {
|
94
|
-
if (column.sort) {
|
95
|
-
setSort?.(column.sort);
|
96
|
-
setSortDirection?.(sortByDirection);
|
97
|
-
}
|
98
|
-
},
|
99
|
-
sortBy: {
|
100
|
-
index: column.sort === sort ? columnIndex : undefined,
|
101
|
-
direction: column.sort === sort ? sortDirection : undefined,
|
102
|
-
defaultDirection: column.defaultSortDirection,
|
103
|
-
},
|
104
|
-
columnIndex,
|
105
|
-
};
|
106
|
-
}, [setSort, setSortDirection, sort, sortDirection]);
|
107
|
-
return (_jsx(Thead, { children: _jsxs(Tr, { children: [(showSelect || onSelect) && (_jsx(Th, { isStickyColumn: true, style: {
|
108
|
-
width: '0%',
|
109
|
-
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
110
|
-
}, stickyMinWidth: "45px", hasRightBorder: props.scrollLeft, children: "\u00A0" })), columns
|
111
|
-
.filter((column) => column.enabled !== false)
|
112
|
-
.map((column, index) => {
|
113
|
-
return (_jsx(Th, { modifier: "fitContent", style: {
|
114
|
-
minWidth: column.minWidth,
|
115
|
-
maxWidth: column.maxWidth,
|
116
|
-
backgroundColor: settings.theme === 'dark'
|
117
|
-
? 'var(--pf-global--BackgroundColor--300)'
|
118
|
-
: undefined,
|
119
|
-
}, sort: getColumnSort(index, column), children: column.header }, column.header));
|
120
|
-
}), itemActions !== undefined && (_jsx(Th, { style: {
|
121
|
-
paddingRight: 8,
|
122
|
-
paddingLeft: 0,
|
123
|
-
width: '0%',
|
124
|
-
right: 0,
|
125
|
-
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
126
|
-
}, isStickyColumn: true, stickyMinWidth: "45px", className: props.scrollRight ? 'pf-m-border-left' : undefined, children: "\u00A0" }))] }) }));
|
127
|
-
}
|
128
|
-
function TableRow(props) {
|
129
|
-
const { columns, selectItem, unselectItem, unselectAll, isItemSelected, item, rowActions, rowIndex, showSelect, onSelect, } = props;
|
130
|
-
const md = useBreakpoint('xl');
|
131
|
-
return (_jsxs(Tr, { className: isItemSelected ? 'selected' : undefined,
|
132
|
-
// style={{ backgroundColor: theme === ThemeE.Dark ? 'transparent' : undefined }}
|
133
|
-
isRowSelected: isItemSelected, style: { boxShadow: 'unset' }, children: [showSelect && (_jsx(Th, { select: isItemSelected !== undefined
|
134
|
-
? {
|
135
|
-
onSelect: (_event, isSelecting) => {
|
136
|
-
if (isSelecting) {
|
137
|
-
selectItem?.(item);
|
138
|
-
}
|
139
|
-
else {
|
140
|
-
unselectItem?.(item);
|
141
|
-
}
|
142
|
-
},
|
143
|
-
isSelected: isItemSelected,
|
144
|
-
}
|
145
|
-
: undefined, style: { width: '0%', paddingLeft: md ? undefined : 20, paddingRight: 16 }, isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), onSelect && (_jsx(Td, { select: {
|
146
|
-
rowIndex,
|
147
|
-
onSelect: () => {
|
148
|
-
unselectAll?.();
|
149
|
-
selectItem?.(item);
|
150
|
-
onSelect?.(item);
|
151
|
-
},
|
152
|
-
isSelected: isItemSelected ?? false,
|
153
|
-
// disable: !isRepoSelectable(repo),
|
154
|
-
variant: 'radio',
|
155
|
-
}, style: {
|
156
|
-
width: '0%',
|
157
|
-
paddingLeft: md ? undefined : 20,
|
158
|
-
position: 'sticky',
|
159
|
-
left: 0,
|
160
|
-
background: 'var(--pf-c-table__sticky-column--BackgroundColor)',
|
161
|
-
zIndex: 1,
|
162
|
-
} })), _jsx(TableCells, { rowIndex: rowIndex, columns: columns, item: item, rowActions: rowActions, scrollLeft: props.scrollLeft, scrollRight: props.scrollRight })] }));
|
163
|
-
}
|
164
|
-
function TableCells(props) {
|
165
|
-
const { columns, item, rowActions, rowIndex } = props;
|
166
|
-
const actions = useTypedActionsToTableActions({
|
167
|
-
actions: rowActions ?? [],
|
168
|
-
item,
|
169
|
-
collapse: 'xxl',
|
170
|
-
});
|
171
|
-
return (_jsxs(Fragment, { children: [columns
|
172
|
-
.filter((column) => column.enabled !== false)
|
173
|
-
.map((column) => {
|
174
|
-
return (_jsx(Td, { dataLabel: column.header, modifier: "nowrap", children: column.cell(item) }, column.header));
|
175
|
-
}), actions !== undefined && actions.length > 0 && (_jsx(Th
|
176
|
-
// isActionCell
|
177
|
-
, {
|
178
|
-
// isActionCell
|
179
|
-
style: {
|
180
|
-
zIndex: 100 - rowIndex,
|
181
|
-
paddingRight: 8,
|
182
|
-
paddingLeft: 8,
|
183
|
-
width: '0%',
|
184
|
-
right: 0,
|
185
|
-
// display: 'flex',
|
186
|
-
}, isStickyColumn: true, stickyMinWidth: "0px", className: props.scrollRight ? 'pf-m-border-left' : undefined, children: _jsx("div", { style: { display: 'flex' }, children: _jsx(ActionsColumn
|
187
|
-
// dropdownDirection="up" // TODO handle....
|
188
|
-
, {
|
189
|
-
// dropdownDirection="up" // TODO handle....
|
190
|
-
items: actions }) }) }))] }));
|
191
|
-
}
|
package/mjs/PageTableCard.js
DELETED
@@ -1,69 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
3
|
-
/* eslint-disable @typescript-eslint/no-empty-function */
|
4
|
-
import { Alert, Card, CardActions, CardBody, CardFooter, CardHeader, CardTitle, Checkbox, DescriptionList, DropdownPosition, Label, LabelGroup, Popover, Split, SplitItem, Stack, Text, Truncate, } from '@patternfly/react-core';
|
5
|
-
import { useCallback, useMemo } from 'react';
|
6
|
-
import { Detail } from './components/Details';
|
7
|
-
import { IconWrapper } from './components/IconWrapper';
|
8
|
-
import { TypedActions } from './TypedActions';
|
9
|
-
export function PageTableCard(props) {
|
10
|
-
const { item, itemToCardFn, isSelected, selectItem, unselectItem, itemActions, showSelect, defaultCardSubtitle, } = props;
|
11
|
-
const card = useMemo(() => itemToCardFn(item), [item, itemToCardFn]);
|
12
|
-
const isItemSelected = !!isSelected?.(item);
|
13
|
-
const onSelectClick = useCallback(() => {
|
14
|
-
if (isSelected?.(item)) {
|
15
|
-
unselectItem?.(item);
|
16
|
-
}
|
17
|
-
else {
|
18
|
-
selectItem?.(item);
|
19
|
-
}
|
20
|
-
}, [isSelected, item, selectItem, unselectItem]);
|
21
|
-
const showDropdown = itemActions !== undefined && itemActions.length > 0;
|
22
|
-
const showActions = showSelect || showDropdown;
|
23
|
-
return (_jsxs(Card, { id: card.id, isFlat: true, isLarge: true, isRounded: true, isSelectable: isItemSelected, isSelected: isItemSelected, style: {
|
24
|
-
transition: 'box-shadow 0.25s',
|
25
|
-
cursor: 'default',
|
26
|
-
}, children: [_jsxs(CardHeader, { children: [_jsxs(Split, { hasGutter: true, style: { width: '100%' }, children: [_jsx(SplitItem, { isFilled: true, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [card.icon && (_jsx("div", { style: {
|
27
|
-
display: 'flex',
|
28
|
-
height: 40,
|
29
|
-
width: 40,
|
30
|
-
marginTop: -20,
|
31
|
-
marginBottom: -20,
|
32
|
-
marginRight: 12,
|
33
|
-
alignItems: 'center',
|
34
|
-
justifyItems: 'stretch',
|
35
|
-
}, children: _jsx(IconWrapper, { size: "lg", children: card.icon }) })), _jsxs(Stack, { children: [_jsx(CardTitle, { children: card.title }), card.description ? (_jsx(Text, { component: "small", style: { opacity: 0.7 }, children: card.description })) : (defaultCardSubtitle && _jsx(Text, { component: "small", children: defaultCardSubtitle }))] })] }) }), card.badge && card.badgeTooltip && (_jsx(SplitItem, { children: _jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsx(Popover, { headerContent: card.badgeTooltipTitle, bodyContent: card.badgeTooltip, removeFindDomNode: true, children: _jsx(Label, { color: card.badgeColor, children: card.badge }) }) }) })), card.badge && !card.badgeTooltip && (_jsx(SplitItem, { children: _jsx(Label, { color: card.badgeColor, children: card.badge }) }))] }), showActions && (_jsxs(CardActions, { children: [itemActions && itemActions.length && (_jsx(TypedActions, { actions: itemActions, position: DropdownPosition.right, selectedItem: item })), showSelect && (_jsx(Checkbox, { isChecked: isSelected?.(item), onChange: onSelectClick,
|
36
|
-
// aria-label="card checkbox example"
|
37
|
-
id: "check-1" }))] }))] }), card.cardBody, card.labels && (_jsx(CardFooter, { children: _jsx("div", { style: {
|
38
|
-
display: 'flex',
|
39
|
-
flexDirection: 'row',
|
40
|
-
alignItems: 'end',
|
41
|
-
gap: 16,
|
42
|
-
}, children: _jsx("div", { style: { flexGrow: 1 }, children: card.labels && (_jsx(LabelGroup, { children: card.labels.map((item) => (_jsx(Label, { color: item.color, children: _jsx(Truncate, { content: item.label, style: { minWidth: 0 } }) }, item.label))) })) }) }) })), card.alertTitle && (_jsx(Alert, { title: card.alertTitle, isInline: true, variant: card.alertVariant, children: card.alertContent }))] }, card.id ?? card.title));
|
43
|
-
}
|
44
|
-
export function useColumnsToTableCardFn(columns, keyFn) {
|
45
|
-
const cardData = useMemo(() => {
|
46
|
-
let cols = columns.filter((column) => column.card !== 'hidden');
|
47
|
-
const nameColumn = cols.shift();
|
48
|
-
const descriptionColumn = cols.find((column) => column.card === 'description');
|
49
|
-
if (descriptionColumn) {
|
50
|
-
cols = cols.filter((column) => column !== descriptionColumn);
|
51
|
-
}
|
52
|
-
return {
|
53
|
-
nameColumn: nameColumn,
|
54
|
-
descriptionColumn: descriptionColumn,
|
55
|
-
columns: cols,
|
56
|
-
};
|
57
|
-
}, [columns]);
|
58
|
-
return useMemo(() => {
|
59
|
-
return (item) => {
|
60
|
-
const pageTableCard = {
|
61
|
-
id: keyFn(item),
|
62
|
-
title: cardData.nameColumn?.cell(item),
|
63
|
-
description: cardData.descriptionColumn?.cell(item),
|
64
|
-
cardBody: (_jsx(CardBody, { children: _jsx(DescriptionList, { isCompact: true, children: cardData.columns.map((column) => (_jsx(Detail, { label: column.hideLabel ? undefined : column.header, children: column.cell(item) }, column.id))) }) })),
|
65
|
-
};
|
66
|
-
return pageTableCard;
|
67
|
-
};
|
68
|
-
}, [cardData.columns, cardData.descriptionColumn, cardData.nameColumn, keyFn]);
|
69
|
-
}
|
package/mjs/PageTableCards.js
DELETED
@@ -1,23 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { PageSection } from '@patternfly/react-core';
|
3
|
-
import { useMemo } from 'react';
|
4
|
-
import { Grid } from './components/Grid';
|
5
|
-
import { PageTableCard, useColumnsToTableCardFn } from './PageTableCard';
|
6
|
-
export function PageTableCards(props) {
|
7
|
-
const { keyFn, pageItems: items, tableColumns, isSelected, selectItem, unselectItem, rowActions, showSelect, defaultCardSubtitle, } = props;
|
8
|
-
const itemToCardFn = useColumnsToTableCardFn(tableColumns, keyFn);
|
9
|
-
const catalogCards = useMemo(() => {
|
10
|
-
return (_jsx(Grid, { size: 470, children: items?.map((item) => (_jsx(PageTableCard, { item: item, itemToCardFn: itemToCardFn, isSelected: isSelected, selectItem: selectItem, unselectItem: unselectItem, itemActions: rowActions, showSelect: showSelect, defaultCardSubtitle: defaultCardSubtitle }, keyFn(item)))) }));
|
11
|
-
}, [
|
12
|
-
items,
|
13
|
-
keyFn,
|
14
|
-
itemToCardFn,
|
15
|
-
isSelected,
|
16
|
-
selectItem,
|
17
|
-
unselectItem,
|
18
|
-
rowActions,
|
19
|
-
showSelect,
|
20
|
-
defaultCardSubtitle,
|
21
|
-
]);
|
22
|
-
return _jsx(PageSection, { style: { flexGrow: 1 }, children: catalogCards });
|
23
|
-
}
|
package/mjs/PageTableDetails.js
DELETED
@@ -1,11 +0,0 @@
|
|
1
|
-
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
3
|
-
/* eslint-disable @typescript-eslint/no-empty-function */
|
4
|
-
import { DescriptionList } from '@patternfly/react-core';
|
5
|
-
import { Detail } from './components/Details';
|
6
|
-
export function TableDetails(props) {
|
7
|
-
const { item, columns } = props;
|
8
|
-
if (!item)
|
9
|
-
return _jsx(_Fragment, {});
|
10
|
-
return (_jsx(DescriptionList, { isCompact: true, children: columns.map((column) => (_jsx(Detail, { label: column.hideLabel ? undefined : column.header, children: column.cell(item) }, column.id))) }));
|
11
|
-
}
|
package/mjs/PageTableList.js
DELETED
@@ -1,62 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
2
|
-
import { DataList, DataListAction, DataListCell, DataListCheck, DataListItem, DataListItemCells, DataListItemRow, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, DropdownPosition, Flex, Stack, Text, Title, } from '@patternfly/react-core';
|
3
|
-
import { useCallback, useMemo } from 'react';
|
4
|
-
import { TypedActions } from './TypedActions';
|
5
|
-
export function PageTableList(props) {
|
6
|
-
const { keyFn, pageItems, tableColumns, isSelected, selectItem, unselectItem, rowActions, defaultCardSubtitle, showSelect, } = props;
|
7
|
-
const columnsToDataList = useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unselectItem, rowActions, defaultCardSubtitle, showSelect);
|
8
|
-
return (_jsx(DataList, { "aria-label": "TODO", style: { marginTop: -1 }, children: pageItems?.map(columnsToDataList) }));
|
9
|
-
}
|
10
|
-
export function useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unselectItem, rowActions, defaultCardSubtitle, showSelect) {
|
11
|
-
const data = useMemo(() => {
|
12
|
-
let cols = tableColumns.filter((column) => column.card !== 'hidden');
|
13
|
-
const nameColumn = cols.shift();
|
14
|
-
const descriptionColumn = cols.find((column) => column.card === 'description');
|
15
|
-
if (descriptionColumn) {
|
16
|
-
cols = cols.filter((column) => column !== descriptionColumn);
|
17
|
-
}
|
18
|
-
return {
|
19
|
-
nameColumn: nameColumn,
|
20
|
-
descriptionColumn: descriptionColumn,
|
21
|
-
columns: cols.filter((column) => column.list !== 'secondary'),
|
22
|
-
secondary: cols.filter((column) => column.list === 'secondary'),
|
23
|
-
};
|
24
|
-
}, [tableColumns]);
|
25
|
-
const onSelectClick = useCallback((item) => {
|
26
|
-
if (isSelected?.(item)) {
|
27
|
-
unselectItem?.(item);
|
28
|
-
}
|
29
|
-
else {
|
30
|
-
selectItem?.(item);
|
31
|
-
}
|
32
|
-
}, [isSelected, selectItem, unselectItem]);
|
33
|
-
return useCallback((item) => {
|
34
|
-
const key = keyFn(item);
|
35
|
-
const isItemSelected = isSelected?.(item);
|
36
|
-
return (_jsx(DataListItem, { "aria-labelledby": `data-list-${key}`, isExpanded: isItemSelected, children: _jsxs(DataListItemRow, { children: [showSelect && (_jsx(DataListCheck, { "aria-labelledby": `data-list-check-${key}`, name: `data-list-check-${key}`, isChecked: isSelected?.(item), onClick: () => onSelectClick(item) })), _jsx(DataListItemCells, { dataListCells: [
|
37
|
-
_jsx(DataListCell, { children: _jsx(Flex, { children: _jsxs(Stack, { hasGutter: true, children: [_jsxs(Stack, { children: [_jsx(Title, { headingLevel: "h2", style: { marginTop: -4 }, children: _jsx("span", { id: `data-list-${key}`, children: data.nameColumn?.cell(item) }) }), data.descriptionColumn ? (_jsx(Text, { component: "small", style: { opacity: 0.7 }, children: data.descriptionColumn.cell(item) })) : (defaultCardSubtitle && (_jsx(Text, { component: "small", style: { opacity: 0.7 }, children: defaultCardSubtitle })))] }), _jsx(DescriptionList, { isCompact: true, children: data.columns.map((column) => {
|
38
|
-
const value = column.cell(item);
|
39
|
-
if (!value)
|
40
|
-
return _jsx(_Fragment, {});
|
41
|
-
return (_jsxs(DescriptionListGroup, { children: [!column.hideLabel && (_jsx(DescriptionListTerm, { children: _jsx(Text, { component: "small", style: { opacity: 0.7 }, children: column.header }) })), _jsx(DescriptionListDescription, { children: column.cell(item) })] }, column.header));
|
42
|
-
}) })] }) }) }, "primary"),
|
43
|
-
data.secondary.length > 0 ? (_jsx(DataListCell, { children: _jsx(Flex, { children: _jsx(DescriptionList, { isCompact: true, children: data.secondary.map((column) => {
|
44
|
-
const value = column.cell(item);
|
45
|
-
if (!value)
|
46
|
-
return _jsx(_Fragment, {});
|
47
|
-
return (_jsxs(DescriptionListGroup, { children: [!column.hideLabel && (_jsx(DescriptionListTerm, { children: _jsx(Text, { component: "small", style: { opacity: 0.7 }, children: column.header }) })), _jsx(DescriptionListDescription, { children: column.cell(item) })] }, column.header));
|
48
|
-
}) }) }) }, "secondary")) : null,
|
49
|
-
] }), rowActions && (_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: rowActions, position: DropdownPosition.right, selectedItem: item }) }))] }) }, key));
|
50
|
-
}, [
|
51
|
-
data.columns,
|
52
|
-
data.descriptionColumn,
|
53
|
-
data.nameColumn,
|
54
|
-
data.secondary,
|
55
|
-
defaultCardSubtitle,
|
56
|
-
isSelected,
|
57
|
-
keyFn,
|
58
|
-
onSelectClick,
|
59
|
-
rowActions,
|
60
|
-
showSelect,
|
61
|
-
]);
|
62
|
-
}
|
package/mjs/PageTableViewType.js
DELETED
package/mjs/PageTabs.js
DELETED
@@ -1,45 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import { Divider, Flex, FlexItem, PageSection, PageSectionTypes, Skeleton, Tab, Tabs, } from '@patternfly/react-core';
|
3
|
-
import { Children, isValidElement, useCallback, useState, } from 'react';
|
4
|
-
export function PageTabs(props) {
|
5
|
-
const [activeKey, setActiveKey] = useState(0);
|
6
|
-
const onSelect = useCallback((_, key) => setActiveKey(key), [setActiveKey]);
|
7
|
-
const children = Children.toArray(props.children);
|
8
|
-
const tabs = children.map((child, index) => {
|
9
|
-
if (isValidElement(child)) {
|
10
|
-
if (child.type === PageTab) {
|
11
|
-
const title = child.props.title;
|
12
|
-
return (_jsx(Tab, { title: title ? title : _jsx(Skeleton, { width: "60px" }), eventKey: index }, title ?? index));
|
13
|
-
}
|
14
|
-
}
|
15
|
-
return child;
|
16
|
-
});
|
17
|
-
const content = children[activeKey];
|
18
|
-
return (_jsxs(_Fragment, { children: [_jsx(PageSection, { type: PageSectionTypes.tabs, children: _jsxs(Flex, { spaceItems: { default: 'spaceItemsNone' }, children: [props.preComponents && (_jsxs(_Fragment, { children: [_jsx(FlexItem
|
19
|
-
// style={{ paddingLeft: 16 }}
|
20
|
-
, { children: props.preComponents }), _jsx(Divider, { orientation: { default: 'vertical' }, component: "div" })] })), _jsx(FlexItem, { grow: { default: 'grow' }, children: _jsx(Tabs, { activeKey: activeKey, onSelect: onSelect, inset: props.preComponents
|
21
|
-
? undefined
|
22
|
-
: {
|
23
|
-
default: 'insetNone',
|
24
|
-
sm: 'insetNone',
|
25
|
-
md: 'insetNone',
|
26
|
-
lg: 'insetNone',
|
27
|
-
xl: 'insetSm',
|
28
|
-
['2xl']: 'insetSm',
|
29
|
-
}, hasBorderBottom: false, children: tabs }) }), props.postComponents && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: { default: 'vertical' } }), _jsx(FlexItem, { style: { paddingRight: 16 }, children: props.postComponents })] }))] }) }), _jsx(Divider, {}), content] }));
|
30
|
-
}
|
31
|
-
export function PageTab(props) {
|
32
|
-
return _jsx(_Fragment, { children: props.children });
|
33
|
-
}
|
34
|
-
export function PageTabsOld(props) {
|
35
|
-
const { activeKey, setActiveKey } = props;
|
36
|
-
const onSelect = useCallback((_, key) => setActiveKey(key), [setActiveKey]);
|
37
|
-
return (_jsx(PageSection, { type: PageSectionTypes.tabs, style: { flexGrow: 1 }, children: _jsx(Tabs, { activeKey: activeKey, onSelect: onSelect, inset: {
|
38
|
-
default: 'insetNone',
|
39
|
-
sm: 'insetNone',
|
40
|
-
md: 'insetNone',
|
41
|
-
lg: 'insetNone',
|
42
|
-
xl: 'insetSm',
|
43
|
-
['2xl']: 'insetSm',
|
44
|
-
}, children: props.children }) }));
|
45
|
-
}
|
package/mjs/PageToolbar.js
DELETED
@@ -1,172 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
2
|
-
import { Button, Flex, FlexItem, InputGroup, Pagination, PaginationVariant, Select, SelectOption, SelectVariant, Skeleton, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, ToggleGroup, ToggleGroupItem, Toolbar, ToolbarContent, ToolbarFilter, ToolbarGroup, ToolbarItem, ToolbarToggleGroup, Tooltip, } from '@patternfly/react-core';
|
3
|
-
import { ArrowRightIcon, ColumnsIcon, FilterIcon, ListIcon, TableIcon, ThLargeIcon, TimesIcon, } from '@patternfly/react-icons';
|
4
|
-
import { Fragment, useCallback, useState } from 'react';
|
5
|
-
import { useTranslation } from 'react-i18next';
|
6
|
-
import { BulkSelector } from './components/BulkSelector';
|
7
|
-
import { SingleSelect2 } from './components/SingleSelect';
|
8
|
-
import { useBreakpoint } from './components/useBreakPoint';
|
9
|
-
import { PageTableViewTypeE } from './PageTableViewType';
|
10
|
-
import { useSettings } from './Settings';
|
11
|
-
import { TypedActions, TypedActionType } from './TypedActions';
|
12
|
-
export function toolbarActionsHaveBulkActions(actions) {
|
13
|
-
if (!actions)
|
14
|
-
return false;
|
15
|
-
for (const action of actions) {
|
16
|
-
if (action.type === 'bulk')
|
17
|
-
return true;
|
18
|
-
}
|
19
|
-
return false;
|
20
|
-
}
|
21
|
-
export function PageTableToolbar(props) {
|
22
|
-
const { itemCount, page, perPage, setPage, setPerPage, toolbarFilters, selectedItems, filters, setFilters, clearAllFilters, openColumnModal, disableBorderBottom, } = props;
|
23
|
-
const sm = useBreakpoint('md');
|
24
|
-
const { viewType, setViewType } = props;
|
25
|
-
let { toolbarActions } = props;
|
26
|
-
toolbarActions = toolbarActions ?? [];
|
27
|
-
const onSetPage = useCallback((_event, page) => setPage(page), [setPage]);
|
28
|
-
const onPerPageSelect = useCallback((_event, perPage) => setPerPage(perPage), [setPerPage]);
|
29
|
-
const showSearchAndFilters = toolbarFilters !== undefined;
|
30
|
-
const showToolbarActions = toolbarActions !== undefined && toolbarActions.length > 0;
|
31
|
-
const showSelect = props.showSelect === true ||
|
32
|
-
(selectedItems !== undefined &&
|
33
|
-
toolbarActions &&
|
34
|
-
toolbarActions.find((toolbarAction) => TypedActionType.bulk === toolbarAction.type));
|
35
|
-
const showToolbar = showSelect || showSearchAndFilters || showToolbarActions;
|
36
|
-
const [selectedFilter, setSeletedFilter] = useState(() => toolbarFilters ? (toolbarFilters?.length > 0 ? toolbarFilters[0].key : '') : '');
|
37
|
-
const settings = useSettings();
|
38
|
-
if (!showToolbar) {
|
39
|
-
return _jsx(Fragment, {});
|
40
|
-
}
|
41
|
-
if (itemCount === undefined) {
|
42
|
-
return (_jsx(Toolbar, { style: {
|
43
|
-
borderBottom: disableBorderBottom
|
44
|
-
? undefined
|
45
|
-
: 'thin solid var(--pf-global--BorderColor--100)',
|
46
|
-
paddingBottom: sm ? undefined : 8,
|
47
|
-
paddingTop: sm ? undefined : 8,
|
48
|
-
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
49
|
-
}, children: _jsx(ToolbarContent, { children: _jsx(ToolbarItem, { style: { width: '100%' }, children: _jsx(Skeleton, { height: "36px" }) }) }) }));
|
50
|
-
}
|
51
|
-
return (_jsx(Toolbar, { clearAllFilters: clearAllFilters, style: {
|
52
|
-
borderBottom: disableBorderBottom
|
53
|
-
? undefined
|
54
|
-
: 'thin solid var(--pf-global--BorderColor--100)',
|
55
|
-
paddingBottom: sm ? undefined : 8,
|
56
|
-
paddingTop: sm ? undefined : 8,
|
57
|
-
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
58
|
-
}, children: _jsxs(ToolbarContent, { children: [showSelect && (_jsx(ToolbarGroup, { children: _jsx(ToolbarItem, { variant: "bulk-select", children: _jsx(BulkSelector, { ...props }) }) })), toolbarFilters && toolbarFilters.length > 0 && (_jsx(ToolbarToggleGroup, { toggleIcon: _jsx(FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 }, children: _jsxs(ToolbarGroup, { variant: "filter-group", children: [_jsx(ToolbarItem, { children: _jsx(SingleSelect2, { onChange: setSeletedFilter, value: selectedFilter, children: toolbarFilters.map((filter) => (_jsx(SelectOption, { value: filter.key, children: _jsxs(Flex, { spaceItems: { default: 'spaceItemsNone' }, alignItems: { default: 'alignItemsCenter' }, flexWrap: { default: 'nowrap' }, children: [_jsx(FlexItem, { style: { paddingLeft: 4, paddingRight: 8 }, children: _jsx(FilterIcon, {}) }), _jsx(FlexItem, { children: filter.label })] }) }, filter.key))) }) }), _jsx(ToolbarItem, { children: _jsx(ToolbarFilterInput, { filter: toolbarFilters.find((filter) => filter.key === selectedFilter), addFilter: (value) => {
|
59
|
-
let values = filters?.[selectedFilter];
|
60
|
-
if (!values)
|
61
|
-
values = [];
|
62
|
-
if (!values.includes(value))
|
63
|
-
values.push(value);
|
64
|
-
setFilters?.({ ...filters, [selectedFilter]: values });
|
65
|
-
}, removeFilter: (value) => {
|
66
|
-
let values = filters?.[selectedFilter];
|
67
|
-
if (!values)
|
68
|
-
values = [];
|
69
|
-
values = values.filter((v) => v !== value);
|
70
|
-
setFilters?.({ ...filters, [selectedFilter]: values });
|
71
|
-
}, values: filters?.[selectedFilter] ?? [] }) }), toolbarFilters.map((filter) => {
|
72
|
-
const values = filters?.[filter.key] ?? [];
|
73
|
-
return (_jsx(ToolbarFilter, { categoryName: filter.label, chips: values.map((value) => {
|
74
|
-
return 'options' in filter
|
75
|
-
? filter.options.find((o) => o.value === value)?.label ?? value
|
76
|
-
: value;
|
77
|
-
}), deleteChip: (_group, value) => {
|
78
|
-
setFilters?.((filters) => {
|
79
|
-
//TODO bug here where value is actually select filter option label... need to map
|
80
|
-
const newState = { ...filters };
|
81
|
-
value = typeof value === 'string' ? value : value.key;
|
82
|
-
let values = filters[filter.key];
|
83
|
-
if (values) {
|
84
|
-
values = values.filter((v) => v !== value);
|
85
|
-
if (values.length === 0) {
|
86
|
-
delete newState[filter.key];
|
87
|
-
}
|
88
|
-
else {
|
89
|
-
newState[filter.key] = values;
|
90
|
-
}
|
91
|
-
}
|
92
|
-
return newState;
|
93
|
-
});
|
94
|
-
}, deleteChipGroup: () => {
|
95
|
-
setFilters?.((filters) => {
|
96
|
-
const newState = { ...filters };
|
97
|
-
delete newState[filter.key];
|
98
|
-
return newState;
|
99
|
-
});
|
100
|
-
}, showToolbarItem: false, children: _jsx(_Fragment, {}) }, filter.label));
|
101
|
-
})] }) })), _jsx(ToolbarGroup, { variant: "button-group", style: { zIndex: 302 }, children: _jsx(ToolbarItem, { children: _jsx(TypedActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: ToolbarItem }) }) }), _jsx("div", { style: { flexGrow: 1 } }), _jsxs(ToolbarGroup, { variant: "button-group", style: { zIndex: 302 }, children: [openColumnModal && viewType === 'table' && (_jsx(ToolbarItem, { children: _jsx(Tooltip, { content: 'Manage columns', children: _jsx(Button, { variant: "plain", icon: _jsx(ColumnsIcon, {}), onClick: openColumnModal }) }) })), _jsx(ToolbarItem, { children: _jsx(ToggleGroup, { children: [PageTableViewTypeE.Table, PageTableViewTypeE.List, PageTableViewTypeE.Cards]
|
102
|
-
// .filter((vt) => {
|
103
|
-
// switch (vt) {
|
104
|
-
// case PageTableViewTypeE.Cards:
|
105
|
-
// return props.itemToCardFn !== undefined
|
106
|
-
// case PageTableViewTypeE.list:
|
107
|
-
// return false
|
108
|
-
// case PageTableViewTypeE.table:
|
109
|
-
// return props.tableColumns !== undefined
|
110
|
-
// default:
|
111
|
-
// return false
|
112
|
-
// }
|
113
|
-
// })
|
114
|
-
.map((vt) => {
|
115
|
-
switch (vt) {
|
116
|
-
case PageTableViewTypeE.Cards:
|
117
|
-
return (_jsx(Tooltip, { content: 'Card view', position: "top-end", enableFlip: false, children: _jsx(ToggleGroupItem, { icon: _jsx(ThLargeIcon, {}), isSelected: viewType === PageTableViewTypeE.Cards, onClick: () => setViewType?.(PageTableViewTypeE.Cards) }) }, vt));
|
118
|
-
case PageTableViewTypeE.List:
|
119
|
-
return (_jsx(Tooltip, { content: 'List view', position: "top-end", enableFlip: false, children: _jsx(ToggleGroupItem, { icon: _jsx(ListIcon, {}), isSelected: viewType === PageTableViewTypeE.List, onClick: () => setViewType?.(PageTableViewTypeE.List) }) }));
|
120
|
-
case PageTableViewTypeE.Table:
|
121
|
-
return (_jsx(Tooltip, { content: 'Table view', position: "top-end", enableFlip: false, children: _jsx(ToggleGroupItem, { icon: _jsx(TableIcon, {}), isSelected: viewType === PageTableViewTypeE.Table, onClick: () => setViewType?.(PageTableViewTypeE.Table) }) }));
|
122
|
-
}
|
123
|
-
}) }) })] }), _jsx(ToolbarItem, { visibility: { default: 'hidden', '2xl': 'visible' }, children: _jsx(Pagination, { variant: PaginationVariant.top, isCompact: true, itemCount: itemCount, perPage: perPage, page: page, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: { marginTop: -8, marginBottom: -8 } }) })] }) }));
|
124
|
-
}
|
125
|
-
function ToolbarFilterInput(props) {
|
126
|
-
const { filter } = props;
|
127
|
-
switch (filter?.type) {
|
128
|
-
case 'string':
|
129
|
-
return _jsx(ToolbarTextFilter, { ...props, placeholder: filter.placeholder });
|
130
|
-
case 'select':
|
131
|
-
return (_jsx(ToolbarSelectFilter, { ...props, options: filter.options, placeholder: filter.placeholder }));
|
132
|
-
}
|
133
|
-
return _jsx(_Fragment, {});
|
134
|
-
}
|
135
|
-
function ToolbarTextFilter(props) {
|
136
|
-
const [value, setValue] = useState('');
|
137
|
-
return (_jsxs(InputGroup, { children: [_jsxs(TextInputGroup, { style: { minWidth: 220 }, children: [_jsx(TextInputGroupMain
|
138
|
-
// ref={ref}
|
139
|
-
, {
|
140
|
-
// ref={ref}
|
141
|
-
value: value, onChange: setValue, onKeyUp: (event) => {
|
142
|
-
if (value && event.key === 'Enter') {
|
143
|
-
props.addFilter(value);
|
144
|
-
setValue('');
|
145
|
-
// ref.current?.focus() // Does not work because PF does not expose ref
|
146
|
-
}
|
147
|
-
}, placeholder: props.placeholder }), value !== '' && (_jsx(TextInputGroupUtilities, { children: _jsx(Button, { variant: "plain", "aria-label": "add filter", onClick: () => setValue(''), style: { opacity: value ? undefined : 0 },
|
148
|
-
// tabIndex={value ? undefined : -1}
|
149
|
-
tabIndex: -1, children: _jsx(TimesIcon, {}) }) }))] }), !value ? (_jsx(_Fragment, {})) : (
|
150
|
-
// <Button variant={'control'} aria-label="add filter">
|
151
|
-
// <SearchIcon />
|
152
|
-
// </Button>
|
153
|
-
_jsx(Button, { variant: value ? 'primary' : 'control', "aria-label": "add filter", onClick: () => {
|
154
|
-
props.addFilter(value);
|
155
|
-
setValue('');
|
156
|
-
}, children: _jsx(ArrowRightIcon, {}) }))] }));
|
157
|
-
}
|
158
|
-
function ToolbarSelectFilter(props) {
|
159
|
-
const { t } = useTranslation();
|
160
|
-
const { addFilter, removeFilter, options, values } = props;
|
161
|
-
const [open, setOpen] = useState(false);
|
162
|
-
const onSelect = useCallback((e, value) => {
|
163
|
-
if (values.includes(value.toString())) {
|
164
|
-
removeFilter(value.toString());
|
165
|
-
}
|
166
|
-
else {
|
167
|
-
addFilter(value.toString());
|
168
|
-
}
|
169
|
-
}, [addFilter, removeFilter, values]);
|
170
|
-
const selections = values;
|
171
|
-
return (_jsx(_Fragment, { children: _jsx(Select, { variant: SelectVariant.checkbox, isOpen: open, onToggle: setOpen, selections: selections, onSelect: onSelect, placeholderText: values.length ? t('Selected') : _jsx("span", { style: { opacity: 0.7 }, children: props.placeholder }), children: options.map((option) => (_jsx(SelectOption, { id: option.value, value: option.value, children: option.label }, option.value))) }) }));
|
172
|
-
}
|