@ansible/ansible-ui-framework 0.0.537 → 0.0.539
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/PageActions/PageDropdownAction.js +1 -3
- package/cjs/PageBody.js +1 -5
- package/cjs/PageDetails/PageDetails.js +1 -5
- package/cjs/PageForm/PageForm.js +1 -6
- package/cjs/PageFramework.d.ts +1 -0
- package/cjs/PageFramework.js +1 -0
- package/cjs/PageHeader.d.ts +1 -1
- package/cjs/PageHeader.js +2 -23
- package/cjs/PageTable/PagePagination.js +2 -4
- package/cjs/PageTable/PageTable.js +2 -9
- package/cjs/PageTable/PageTableCard.js +2 -8
- package/cjs/PageTable/PageToolbar.d.ts +1 -1
- package/cjs/PageTable/PageToolbar.js +4 -19
- package/cjs/PageTabs.js +2 -2
- package/cjs/Settings.d.ts +0 -1
- package/cjs/Settings.js +1 -3
- package/cjs/components/Collapse.d.ts +1 -0
- package/cjs/components/Collapse.js +1 -0
- package/package.json +1 -1
@@ -64,9 +64,7 @@ function PageDropdownAction(props) {
|
|
64
64
|
var toggleIcon = Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : label;
|
65
65
|
var isPrimary = hasBulkActions && !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length);
|
66
66
|
var Toggle = label || Icon ? ((0, jsx_runtime_1.jsx)(react_core_1.DropdownToggle, __assign({ id: "toggle-dropdown", isDisabled: isDisabled, onToggle: function () { return setDropdownOpen(!dropdownOpen); }, toggleVariant: isPrimary ? 'primary' : undefined, toggleIndicator: null, style: isPrimary && !label ? { color: 'var(--pf-global--Color--light-100)' } : {} }, { children: toggleIcon }))) : ((0, jsx_runtime_1.jsx)(react_core_1.KebabToggle, __assign({ id: "toggle-kebab", isDisabled: isDisabled, onToggle: function () { return setDropdownOpen(!dropdownOpen); }, toggleVariant: isPrimary ? 'primary' : undefined, style: isPrimary && !label ? { color: 'var(--pf-global--Color--light-100)' } : {} }, { children: toggleIcon })));
|
67
|
-
var dropdown = ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { onSelect: function () { return setDropdownOpen(false); }, toggle: Toggle, isOpen: dropdownOpen, isPlain: !label || iconOnly, dropdownItems: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(PageDropdownActionItem, { action: action, selectedItems: selectedItems !== null && selectedItems !== void 0 ? selectedItems : [], selectedItem: selectedItem, hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: {
|
68
|
-
zIndex: 201,
|
69
|
-
} }));
|
67
|
+
var dropdown = ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { onSelect: function () { return setDropdownOpen(false); }, toggle: Toggle, isOpen: dropdownOpen, isPlain: !label || iconOnly, dropdownItems: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(PageDropdownActionItem, { action: action, selectedItems: selectedItems !== null && selectedItems !== void 0 ? selectedItems : [], selectedItem: selectedItem, hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: { zIndex: dropdownOpen ? 201 : undefined } }));
|
70
68
|
return tooltip && (iconOnly || isDisabled) ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: dropdown }))) : (__assign({}, dropdown));
|
71
69
|
}
|
72
70
|
exports.PageDropdownAction = PageDropdownAction;
|
package/cjs/PageBody.js
CHANGED
@@ -34,11 +34,9 @@ exports.PageBody = void 0;
|
|
34
34
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
35
35
|
var ErrorBoundary_1 = __importDefault(require("./components/ErrorBoundary"));
|
36
36
|
var useBreakPoint_1 = require("./components/useBreakPoint");
|
37
|
-
var Settings_1 = require("./Settings");
|
38
37
|
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
39
38
|
function PageBody(props) {
|
40
39
|
var usePadding = (0, useBreakPoint_1.useBreakpoint)('xxl') && props.disablePadding !== true;
|
41
|
-
var settings = (0, Settings_1.useSettings)();
|
42
40
|
var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
|
43
41
|
return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.default, __assign({ message: translations.errorText }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: __assign({ display: 'flex', flexDirection: 'column', height: '100%', maxHeight: '100%', overflow: 'hidden', backgroundColor: 'var(--pf-c-page__main-section--BackgroundColor)' }, props.style) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
44
42
|
display: 'flex',
|
@@ -47,9 +45,7 @@ function PageBody(props) {
|
|
47
45
|
maxHeight: '100%',
|
48
46
|
margin: usePadding ? 24 : 0,
|
49
47
|
overflow: 'hidden',
|
50
|
-
border:
|
51
|
-
? 'thin solid var(--pf-global--BorderColor--100)'
|
52
|
-
: undefined,
|
48
|
+
border: 'thin solid var(--pf-global--BorderColor--100)',
|
53
49
|
backgroundColor: 'var(--pf-global--BackgroundColor--100)',
|
54
50
|
} }, { children: props.children })) })) })));
|
55
51
|
}
|
@@ -21,11 +21,7 @@ function PageDetails(props) {
|
|
21
21
|
var orientation = settings.formLayout;
|
22
22
|
var columns = settings.formColumns;
|
23
23
|
var isCompact = false;
|
24
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ padding: { default: 'noPadding' },
|
25
|
-
backgroundColor: settings.activeTheme === 'dark'
|
26
|
-
? 'var(--pf-global--BackgroundColor--300)'
|
27
|
-
: 'var(--pf-global--BackgroundColor--100)',
|
28
|
-
} }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ orientation: {
|
24
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: "light", padding: { default: 'noPadding' }, className: "dark-1" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ orientation: {
|
29
25
|
sm: orientation,
|
30
26
|
md: orientation,
|
31
27
|
lg: orientation,
|
package/cjs/PageForm/PageForm.js
CHANGED
@@ -127,12 +127,7 @@ function PageForm(props) {
|
|
127
127
|
flexGrow: 1,
|
128
128
|
overflow: props.disableScrolling ? undefined : 'hidden',
|
129
129
|
gap: 0,
|
130
|
-
} }, { children: [props.disableScrolling ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: disablePadding ? undefined : 24 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: props.children })) }))) : ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, __assign({ style: { height: '100%', flexGrow: 1 } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: disablePadding ? undefined : 24 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: props.children })) })) }))), error && ((0, jsx_runtime_1.jsx)(react_core_1.Alert, { variant: "danger", title: error !== null && error !== void 0 ? error : '', isInline: true, style: { paddingLeft: isMd && props.onCancel ? 190 : undefined } })), props.onCancel ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
131
|
-
backgroundColor: settings.activeTheme === 'dark'
|
132
|
-
? 'var(--pf-global--BackgroundColor--400)'
|
133
|
-
: undefined,
|
134
|
-
padding: disablePadding ? undefined : 24,
|
135
|
-
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ActionGroup, __assign({ style: { marginTop: 0 } }, { children: [(0, jsx_runtime_1.jsx)(PageFormSubmitButton, { children: props.submitText }), props.onCancel && ((0, jsx_runtime_1.jsx)(PageFormCancelButton, __assign({ onCancel: props.onCancel }, { children: (_a = props.cancelText) !== null && _a !== void 0 ? _a : frameworkTranslations.cancelText })))] })) }))) : ((0, jsx_runtime_1.jsx)(PageFormSubmitButton, __assign({ style: { marginTop: 48 } }, { children: props.submitText })))] })) })));
|
130
|
+
} }, { children: [props.disableScrolling ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: disablePadding ? undefined : 24 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: props.children })) }))) : ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, __assign({ style: { height: '100%', flexGrow: 1 } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: disablePadding ? undefined : 24 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: props.children })) })) }))), error && ((0, jsx_runtime_1.jsx)(react_core_1.Alert, { variant: "danger", title: error !== null && error !== void 0 ? error : '', isInline: true, style: { paddingLeft: isMd && props.onCancel ? 190 : undefined } })), props.onCancel ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "dark-2 border-top", style: { padding: disablePadding ? undefined : 24 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ActionGroup, __assign({ style: { marginTop: 0 } }, { children: [(0, jsx_runtime_1.jsx)(PageFormSubmitButton, { children: props.submitText }), props.onCancel && ((0, jsx_runtime_1.jsx)(PageFormCancelButton, __assign({ onCancel: props.onCancel }, { children: (_a = props.cancelText) !== null && _a !== void 0 ? _a : frameworkTranslations.cancelText })))] })) }))) : ((0, jsx_runtime_1.jsx)(PageFormSubmitButton, __assign({ style: { marginTop: 48 } }, { children: props.submitText })))] })) })));
|
136
131
|
if (!disableBody) {
|
137
132
|
Component = (0, jsx_runtime_1.jsx)(PageBody_1.PageBody, { children: Component });
|
138
133
|
}
|
package/cjs/PageFramework.d.ts
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
|
+
import './PageFramework.css';
|
2
3
|
/**
|
3
4
|
* The `PageFramework` component bundles up all the context providers in the Ansible UI framework in a convienent component for framework consumers. Examples of internal context providers are translations, navigation, settings, alerts, and dialogs.
|
4
5
|
*
|
package/cjs/PageFramework.js
CHANGED
@@ -16,6 +16,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
16
|
var usePageNavigate_1 = require("./components/usePageNavigate");
|
17
17
|
var PageAlertToaster_1 = require("./PageAlertToaster");
|
18
18
|
var PageDialog_1 = require("./PageDialog");
|
19
|
+
require("./PageFramework.css");
|
19
20
|
var Settings_1 = require("./Settings");
|
20
21
|
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
21
22
|
/**
|
package/cjs/PageHeader.d.ts
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
|
+
import './PageFramework.css';
|
2
3
|
export interface ICatalogBreadcrumb {
|
3
4
|
id?: string;
|
4
5
|
label?: string;
|
@@ -17,7 +18,6 @@ export interface PageHeaderProps {
|
|
17
18
|
controls?: ReactNode;
|
18
19
|
headerActions?: ReactNode;
|
19
20
|
t?: (t: string) => string;
|
20
|
-
disableBorderBottom?: boolean;
|
21
21
|
}
|
22
22
|
/**
|
23
23
|
* PageHeader enables the responsive layout of the header.
|
package/cjs/PageHeader.js
CHANGED
@@ -20,7 +20,7 @@ var react_2 = require("react");
|
|
20
20
|
var useBreakPoint_1 = require("./components/useBreakPoint");
|
21
21
|
var usePageNavigate_1 = require("./components/usePageNavigate");
|
22
22
|
var PageAlerts_1 = require("./PageAlerts");
|
23
|
-
|
23
|
+
require("./PageFramework.css");
|
24
24
|
function Breadcrumbs(props) {
|
25
25
|
var navigate = (0, usePageNavigate_1.usePageNavigate)();
|
26
26
|
if (!props.breadcrumbs)
|
@@ -62,32 +62,11 @@ function PageHeader(props) {
|
|
62
62
|
var lg = (0, useBreakPoint_1.useBreakpoint)('lg');
|
63
63
|
var xl = (0, useBreakPoint_1.useBreakpoint)('xl');
|
64
64
|
var isMdOrLarger = (0, useBreakPoint_1.useBreakpoint)('md');
|
65
|
-
var settings = (0, Settings_1.useSettings)();
|
66
65
|
var t = props.t;
|
67
66
|
t = t ? t : function (t) { return t; };
|
68
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [navigation && ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, style: {
|
69
|
-
paddingLeft: 0,
|
70
|
-
paddingTop: 0,
|
71
|
-
paddingBottom: 0,
|
72
|
-
borderTop: settings.activeTheme !== 'light' && settings.borders
|
73
|
-
? 'thin solid var(--pf-global--BorderColor--100)'
|
74
|
-
: undefined,
|
75
|
-
borderBottom: !props.disableBorderBottom && settings.borders
|
76
|
-
? 'thin solid var(--pf-global--BorderColor--100)'
|
77
|
-
: undefined,
|
78
|
-
backgroundColor: 'var(--pf-global--BackgroundColor--100)',
|
79
|
-
} }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, __assign({ direction: { default: 'row' }, flexWrap: { default: 'nowrap' }, style: { maxWidth: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.PageNavigation, __assign({ style: { paddingTop: 0, flexShrink: 1, flexGrow: 1 } }, { children: navigation })) })) }))), true && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, style: {
|
67
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [navigation && ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, className: "border-top dark-1", style: { paddingLeft: 0, paddingTop: 0, paddingBottom: 0 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, __assign({ direction: { default: 'row' }, flexWrap: { default: 'nowrap' }, style: { maxWidth: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.PageNavigation, __assign({ style: { paddingTop: 0, flexShrink: 1, flexGrow: 1 } }, { children: navigation })) })) }))), true && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, className: "border-top border-bottom dark-3", style: {
|
80
68
|
paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
|
81
69
|
paddingBottom: xl ? 16 : 12,
|
82
|
-
borderTop: !navigation && settings.activeTheme !== 'light' && settings.borders
|
83
|
-
? 'thin solid var(--pf-global--BorderColor--100)'
|
84
|
-
: undefined,
|
85
|
-
borderBottom: !props.disableBorderBottom && settings.borders
|
86
|
-
? 'thin solid var(--pf-global--BorderColor--100)'
|
87
|
-
: undefined,
|
88
|
-
backgroundColor: settings.activeTheme !== 'light'
|
89
|
-
? 'var(--pf-global--BackgroundColor--300)'
|
90
|
-
: undefined,
|
91
70
|
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ flexWrap: { default: 'nowrap' }, alignItems: { default: 'alignItemsStretch' } }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(Breadcrumbs, { breadcrumbs: breadcrumbs, style: { paddingBottom: lg ? 6 : 4 } })), title ? (props.titleHelp ? ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: props.titleHelpTitle, bodyContent: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [typeof props.titleHelp === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: props.titleHelp })) : (props.titleHelp.map(function (help, index) { return ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: help }, index)); })), props.titleDocLink && ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkAltIcon, {}), variant: "link", onClick: function () { return window.open(props.titleDocLink, '_blank'); }, isInline: true }, { children: t('Documentation') })) }))] })), position: "bottom-start", removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: [title, (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", style: {
|
92
71
|
padding: 0,
|
93
72
|
marginTop: 1,
|
@@ -16,15 +16,13 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
16
|
var react_core_1 = require("@patternfly/react-core");
|
17
17
|
var react_1 = require("react");
|
18
18
|
var useBreakPoint_1 = require("../components/useBreakPoint");
|
19
|
-
var Settings_1 = require("../Settings");
|
20
19
|
function PagePagination(props) {
|
21
20
|
var setPage = props.setPage, setPerPage = props.setPerPage;
|
22
21
|
var onSetPage = (0, react_1.useCallback)(function (_event, page) { return setPage(page); }, [setPage]);
|
23
22
|
var onPerPageSelect = (0, react_1.useCallback)(function (_event, perPage) { return setPerPage(perPage); }, [setPerPage]);
|
24
23
|
var compact = !(0, useBreakPoint_1.useBreakpoint)('md');
|
25
|
-
|
26
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.Pagination, { variant: react_core_1.PaginationVariant.bottom, itemCount: props.itemCount, page: props.page, perPage: props.perPage, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: __assign(__assign({}, props.style), { borderTop: 'thin solid var(--pf-global--BorderColor--100)', boxShadow: 'none', zIndex: 301,
|
24
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.Pagination, { variant: react_core_1.PaginationVariant.bottom, itemCount: props.itemCount, page: props.page, perPage: props.perPage, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: __assign(__assign({}, props.style), { boxShadow: 'none', zIndex: 301,
|
27
25
|
// marginTop: -1,
|
28
|
-
paddingTop: compact ? 4 : 6, paddingBottom: compact ? 4 : 6,
|
26
|
+
paddingTop: compact ? 4 : 6, paddingBottom: compact ? 4 : 6 }), className: "dark-2" }));
|
29
27
|
}
|
30
28
|
exports.PagePagination = PagePagination;
|
@@ -86,13 +86,9 @@ function PageTable(props) {
|
|
86
86
|
? PageTableViewType_1.PageTableViewTypeE.List
|
87
87
|
: PageTableViewType_1.PageTableViewTypeE.Cards);
|
88
88
|
}), 2), viewType = _c[0], setViewType = _c[1];
|
89
|
-
var settings = (0, Settings_1.useSettings)();
|
90
89
|
var usePadding = (0, useBreakPoint_1.useBreakpoint)('md') && props.disableBodyPadding !== true;
|
91
90
|
if (error) {
|
92
|
-
return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
93
|
-
backgroundColor: settings.activeTheme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
94
|
-
height: '100%',
|
95
|
-
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.small, style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.ExclamationCircleIcon, color: "var(--pf-global--danger-color--100)" }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: props.errorStateTitle })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: error.message })] })) })));
|
91
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "dark-2", style: { height: '100%' } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.small, style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.ExclamationCircleIcon, color: "var(--pf-global--danger-color--100)" }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: props.errorStateTitle })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: error.message })] })) })));
|
96
92
|
}
|
97
93
|
if (itemCount === 0 && Object.keys(filters !== null && filters !== void 0 ? filters : {}).length === 0) {
|
98
94
|
return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.PlusCircleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4", size: "lg" }, { children: props.emptyStateTitle })), props.emptyStateDescription && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: props.emptyStateButtonClick }, { children: props.emptyStateButtonText })))] })) }));
|
@@ -146,7 +142,6 @@ function PageTableView(props) {
|
|
146
142
|
}
|
147
143
|
function TableHead(props) {
|
148
144
|
var columns = props.tableColumns, itemActions = props.rowActions, sort = props.sort, setSort = props.setSort, sortDirection = props.sortDirection, setSortDirection = props.setSortDirection, showSelect = props.showSelect, onSelect = props.onSelect, expandedRow = props.expandedRow;
|
149
|
-
var settings = (0, Settings_1.useSettings)();
|
150
145
|
var getColumnSort = (0, react_1.useCallback)(function (columnIndex, column) {
|
151
146
|
if (!column.sort)
|
152
147
|
return undefined;
|
@@ -165,9 +160,7 @@ function TableHead(props) {
|
|
165
160
|
columnIndex: columnIndex,
|
166
161
|
};
|
167
162
|
}, [setSort, setSortDirection, sort, sortDirection]);
|
168
|
-
return ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ style: {
|
169
|
-
backgroundColor: settings.activeTheme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : 'white',
|
170
|
-
} }, { children: [expandedRow && (0, jsx_runtime_1.jsx)(react_table_1.Th, { style: { padding: 0, backgroundColor: 'inherit' } }), (showSelect || onSelect) && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft, style: { backgroundColor: 'inherit' } }, { children: "\u00A0" }))), columns
|
163
|
+
return ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ className: "light dark-2" }, { children: [expandedRow && (0, jsx_runtime_1.jsx)(react_table_1.Th, { style: { padding: 0, backgroundColor: 'inherit' } }), (showSelect || onSelect) && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft, style: { backgroundColor: 'inherit' } }, { children: "\u00A0" }))), columns
|
171
164
|
.filter(function (column) { return column.enabled !== false; })
|
172
165
|
.map(function (column, index) {
|
173
166
|
return ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ sort: getColumnSort(index, column), style: {
|
@@ -51,19 +51,13 @@ function PageTableCard(props) {
|
|
51
51
|
transition: 'box-shadow 0.25s',
|
52
52
|
cursor: 'default',
|
53
53
|
maxWidth: '100%',
|
54
|
-
|
55
|
-
} }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.CardHeader, __assign({ style: { display: 'flex', flexWrap: 'nowrap', maxWidth: '100%', overflow: 'hidden' } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: {
|
56
|
-
display: 'flex',
|
57
|
-
flexWrap: 'nowrap',
|
58
|
-
maxWidth: '100%',
|
59
|
-
overflow: 'hidden',
|
60
|
-
} }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: {
|
54
|
+
} }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.CardHeader, __assign({ style: { display: 'flex', flexWrap: 'nowrap', maxWidth: '100%' } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', flexWrap: 'nowrap', maxWidth: '100%' } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: {
|
61
55
|
display: 'flex',
|
62
56
|
flexWrap: 'wrap',
|
63
57
|
alignItems: 'center',
|
64
58
|
gap: 16,
|
65
59
|
maxWidth: '100%',
|
66
|
-
} }, { children: [card.icon && (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "xl" }, { children: card.icon })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: '100%' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { children: card.title }), card.subtitle ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: card.subtitle }))) : (defaultCardSubtitle && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: defaultCardSubtitle }))))] }))] })), card.badge && card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: card.badgeTooltipTitle, bodyContent: card.badgeTooltip, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) })) })) })), card.badge && !card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) }))] })), showActions && ((0, jsx_runtime_1.jsxs)(react_core_1.CardActions, { children: [itemActions && itemActions.length && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: itemActions, position: react_core_1.DropdownPosition.right, selectedItem: item, iconOnly: true, collapse: "always" })), showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onChange: onSelectClick,
|
60
|
+
} }, { children: [card.icon && (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "xl" }, { children: card.icon })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: '100%' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: card.title }) }), card.subtitle ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: card.subtitle }))) : (defaultCardSubtitle && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: defaultCardSubtitle }))))] }))] })), card.badge && card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: card.badgeTooltipTitle, bodyContent: card.badgeTooltip, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) })) })) })), card.badge && !card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) }))] })), showActions && ((0, jsx_runtime_1.jsxs)(react_core_1.CardActions, { children: [itemActions && itemActions.length && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: itemActions, position: react_core_1.DropdownPosition.right, selectedItem: item, iconOnly: true, collapse: "always" })), showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onChange: onSelectClick,
|
67
61
|
// aria-label="card checkbox example"
|
68
62
|
id: "check-1" }))] }))] })), card.cardBody, card.labels && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
69
63
|
display: 'flex',
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import { Dispatch, SetStateAction } from 'react';
|
2
2
|
import { IPageAction } from '../PageActions/PageAction';
|
3
3
|
import { PageTableViewType } from './PageTableViewType';
|
4
|
+
import './PageToolbar.css';
|
4
5
|
export interface IItemFilter<T extends object> {
|
5
6
|
label: string;
|
6
7
|
type?: 'search' | 'filter';
|
@@ -52,7 +53,6 @@ export type PagetableToolbarProps<T extends object> = {
|
|
52
53
|
selectItems?: (items: T[]) => void;
|
53
54
|
unselectAll?: () => void;
|
54
55
|
onSelect?: (item: T) => void;
|
55
|
-
disableBorderBottom?: boolean;
|
56
56
|
showSelect?: boolean;
|
57
57
|
viewType: PageTableViewType;
|
58
58
|
setViewType: (viewType: PageTableViewType) => void;
|
@@ -48,9 +48,9 @@ var useBreakPoint_1 = require("../components/useBreakPoint");
|
|
48
48
|
var PageActions_1 = require("../PageActions/PageActions");
|
49
49
|
var PageActionType_1 = require("../PageActions/PageActionType");
|
50
50
|
var FormGroupSelect_1 = require("../PageForm/Inputs/FormGroupSelect");
|
51
|
-
var Settings_1 = require("../Settings");
|
52
51
|
var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
|
53
52
|
var PageTableViewType_1 = require("./PageTableViewType");
|
53
|
+
require("./PageToolbar.css");
|
54
54
|
function toolbarActionsHaveBulkActions(actions) {
|
55
55
|
var e_1, _a;
|
56
56
|
if (!actions)
|
@@ -74,7 +74,7 @@ function toolbarActionsHaveBulkActions(actions) {
|
|
74
74
|
exports.toolbarActionsHaveBulkActions = toolbarActionsHaveBulkActions;
|
75
75
|
function PageTableToolbar(props) {
|
76
76
|
var _a;
|
77
|
-
var itemCount = props.itemCount, page = props.page, perPage = props.perPage, setPage = props.setPage, setPerPage = props.setPerPage, toolbarFilters = props.toolbarFilters, selectedItems = props.selectedItems, filters = props.filters, setFilters = props.setFilters, clearAllFilters = props.clearAllFilters, openColumnModal = props.openColumnModal
|
77
|
+
var itemCount = props.itemCount, page = props.page, perPage = props.perPage, setPage = props.setPage, setPerPage = props.setPerPage, toolbarFilters = props.toolbarFilters, selectedItems = props.selectedItems, filters = props.filters, setFilters = props.setFilters, clearAllFilters = props.clearAllFilters, openColumnModal = props.openColumnModal;
|
78
78
|
var sm = (0, useBreakPoint_1.useBreakpoint)('md');
|
79
79
|
var viewType = props.viewType, setViewType = props.setViewType;
|
80
80
|
var toolbarActions = props.toolbarActions;
|
@@ -91,7 +91,6 @@ function PageTableToolbar(props) {
|
|
91
91
|
var _b = __read((0, react_1.useState)(function () {
|
92
92
|
return toolbarFilters ? ((toolbarFilters === null || toolbarFilters === void 0 ? void 0 : toolbarFilters.length) > 0 ? toolbarFilters[0].key : '') : '';
|
93
93
|
}), 2), selectedFilter = _b[0], setSeletedFilter = _b[1];
|
94
|
-
var settings = (0, Settings_1.useSettings)();
|
95
94
|
var viewTypeCount = 0;
|
96
95
|
if (!props.disableTableView)
|
97
96
|
viewTypeCount++;
|
@@ -103,23 +102,9 @@ function PageTableToolbar(props) {
|
|
103
102
|
return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
|
104
103
|
}
|
105
104
|
if (itemCount === undefined) {
|
106
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.Toolbar, __assign({ style: {
|
107
|
-
borderBottom: disableBorderBottom
|
108
|
-
? undefined
|
109
|
-
: 'thin solid var(--pf-global--BorderColor--100)',
|
110
|
-
paddingBottom: sm ? undefined : 8,
|
111
|
-
paddingTop: sm ? undefined : 8,
|
112
|
-
backgroundColor: settings.activeTheme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
113
|
-
} }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarContent, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ style: { width: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "36px" }) })) }) })));
|
105
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.Toolbar, __assign({ className: "border-bottom dark-2", style: { paddingBottom: sm ? undefined : 8, paddingTop: sm ? undefined : 8 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarContent, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ style: { width: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "36px" }) })) }) })));
|
114
106
|
}
|
115
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.Toolbar, __assign({ clearAllFilters: clearAllFilters, style: {
|
116
|
-
borderBottom: disableBorderBottom
|
117
|
-
? undefined
|
118
|
-
: 'thin solid var(--pf-global--BorderColor--100)',
|
119
|
-
paddingBottom: sm ? undefined : 8,
|
120
|
-
paddingTop: sm ? undefined : 8,
|
121
|
-
backgroundColor: settings.activeTheme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
122
|
-
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "bulk-select" }, { children: (0, jsx_runtime_1.jsx)(BulkSelector_1.BulkSelector, __assign({}, props)) })) })), toolbarFilters && toolbarFilters.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, __assign({ toggleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "filter-group" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "filter", onSelect: function (_, v) { return setSeletedFilter(v.toString()); }, value: selectedFilter, placeholderText: "Select filter" }, { children: toolbarFilters.map(function (filter) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: filter.key }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' }, alignItems: { default: 'alignItemsCenter' }, flexWrap: { default: 'nowrap' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingLeft: 4, paddingRight: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: filter.label })] })) }), filter.key)); }) })) }), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(ToolbarFilterInput, { id: "filter-input", filter: toolbarFilters.find(function (filter) { return filter.key === selectedFilter; }), addFilter: function (value) {
|
107
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.Toolbar, __assign({ clearAllFilters: clearAllFilters, className: "dark-2", style: { paddingBottom: sm ? undefined : 8, paddingTop: sm ? undefined : 8 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "bulk-select" }, { children: (0, jsx_runtime_1.jsx)(BulkSelector_1.BulkSelector, __assign({}, props)) })) })), toolbarFilters && toolbarFilters.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, __assign({ toggleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "filter-group" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "filter", onSelect: function (_, v) { return setSeletedFilter(v.toString()); }, value: selectedFilter, placeholderText: "Select filter" }, { children: toolbarFilters.map(function (filter) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: filter.key }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' }, alignItems: { default: 'alignItemsCenter' }, flexWrap: { default: 'nowrap' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingLeft: 4, paddingRight: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: filter.label })] })) }), filter.key)); }) })) }), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(ToolbarFilterInput, { id: "filter-input", filter: toolbarFilters.find(function (filter) { return filter.key === selectedFilter; }), addFilter: function (value) {
|
123
108
|
var _a;
|
124
109
|
var values = filters === null || filters === void 0 ? void 0 : filters[selectedFilter];
|
125
110
|
if (!values)
|
package/cjs/PageTabs.js
CHANGED
@@ -50,7 +50,7 @@ function PageTabs(props) {
|
|
50
50
|
if (loading) {
|
51
51
|
return ((0, jsx_runtime_1.jsx)(PageTabs, { children: (0, jsx_runtime_1.jsx)(PageTab, { children: (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: "light" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, {}) })) }) }));
|
52
52
|
}
|
53
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ type: react_core_1.PageSectionTypes.tabs }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' } }, { children: [props.preComponents && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem
|
53
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ type: react_core_1.PageSectionTypes.tabs, className: "border-bottom" }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' } }, { children: [props.preComponents && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem
|
54
54
|
// style={{ paddingLeft: 16 }}
|
55
55
|
, { children: props.preComponents }), (0, jsx_runtime_1.jsx)(react_core_1.Divider, { orientation: { default: 'vertical' }, component: "div" })] })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tabs, __assign({ activeKey: activeKey, onSelect: onSelect, inset: props.preComponents
|
56
56
|
? undefined
|
@@ -62,7 +62,7 @@ function PageTabs(props) {
|
|
62
62
|
xl: 'insetSm'
|
63
63
|
},
|
64
64
|
_a['2xl'] = 'insetSm',
|
65
|
-
_a), hasBorderBottom: false }, { children: tabs })) })), props.postComponents && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Divider, { orientation: { default: 'vertical' } }), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingRight: 16 } }, { children: props.postComponents }))] }))] })) })),
|
65
|
+
_a), hasBorderBottom: false }, { children: tabs })) })), props.postComponents && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Divider, { orientation: { default: 'vertical' } }), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingRight: 16 } }, { children: props.postComponents }))] }))] })) })), content] }));
|
66
66
|
}
|
67
67
|
exports.PageTabs = PageTabs;
|
68
68
|
function PageTab(props) {
|
package/cjs/Settings.d.ts
CHANGED
@@ -5,7 +5,6 @@ export interface Settings {
|
|
5
5
|
tableLayout?: 'compact' | 'comfortable';
|
6
6
|
formColumns?: 'single' | 'multiple';
|
7
7
|
formLayout?: 'vertical' | 'horizontal';
|
8
|
-
borders?: boolean;
|
9
8
|
}
|
10
9
|
export declare const SettingsContext: import("react").Context<[Settings, (settings: Settings) => void]>;
|
11
10
|
export declare function useSettings(): Settings;
|
package/cjs/Settings.js
CHANGED
@@ -57,7 +57,6 @@ function SettingsProvider(props) {
|
|
57
57
|
tableLayout: localStorage.getItem('tableLayout'),
|
58
58
|
formColumns: localStorage.getItem('formColumns'),
|
59
59
|
formLayout: localStorage.getItem('formLayout'),
|
60
|
-
borders: localStorage.getItem('borders') !== 'false',
|
61
60
|
};
|
62
61
|
if (activeTheme === 'dark') {
|
63
62
|
document.documentElement.classList.add('pf-theme-dark');
|
@@ -73,7 +72,6 @@ function SettingsProvider(props) {
|
|
73
72
|
localStorage.setItem('tableLayout', (_b = settings.tableLayout) !== null && _b !== void 0 ? _b : 'comfortable');
|
74
73
|
localStorage.setItem('formColumns', (_c = settings.formColumns) !== null && _c !== void 0 ? _c : 'multiple');
|
75
74
|
localStorage.setItem('formLayout', (_d = settings.formLayout) !== null && _d !== void 0 ? _d : 'vertical');
|
76
|
-
localStorage.setItem('borders', settings.borders ? 'true' : 'false');
|
77
75
|
var activeTheme = settings.theme !== 'light' && settings.theme !== 'dark'
|
78
76
|
? window.matchMedia('(prefers-color-scheme: dark)').matches
|
79
77
|
? 'dark'
|
@@ -121,6 +119,6 @@ function SettingsDialog(props) {
|
|
121
119
|
return setSettings(__assign(__assign({}, settings), { formColumns: formColumns }));
|
122
120
|
}, placeholderText: "Select form columns" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "multiple" }, { children: 'Multiple columns' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "single" }, { children: 'Single column' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "form-layout", label: "Form Layout", value: (_d = settings.formLayout) !== null && _d !== void 0 ? _d : 'vertical', onSelect: function (_, formLayout) {
|
123
121
|
return setSettings(__assign(__assign({}, settings), { formLayout: formLayout }));
|
124
|
-
}, placeholderText: "Select form layout" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "vertical" }, { children: 'Vertical labels' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "horizontal" }, { children: 'Horizontal labels' }))] }))
|
122
|
+
}, placeholderText: "Select form layout" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "vertical" }, { children: 'Vertical labels' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "horizontal" }, { children: 'Horizontal labels' }))] }))] })) })));
|
125
123
|
}
|
126
124
|
exports.SettingsDialog = SettingsDialog;
|
@@ -13,6 +13,7 @@ var __assign = (this && this.__assign) || function () {
|
|
13
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
14
14
|
exports.Collapse = void 0;
|
15
15
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
|
+
require("./Collapse.css");
|
16
17
|
function Collapse(props) {
|
17
18
|
var className = 'collapsed';
|
18
19
|
if (props.open)
|