@ansible/ansible-ui-framework 0.0.225 → 0.0.227
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/PagePagination.js +4 -2
- package/cjs/PageToolbar.js +1 -1
- package/mjs/PagePagination.js +4 -4
- package/mjs/PageToolbar.js +1 -1
- package/package.json +1 -1
package/cjs/PagePagination.js
CHANGED
|
@@ -21,8 +21,10 @@ function PagePagination(props) {
|
|
|
21
21
|
var setPage = props.setPage, setPerPage = props.setPerPage;
|
|
22
22
|
var onSetPage = (0, react_1.useCallback)(function (_event, page) { return setPage(page); }, [setPage]);
|
|
23
23
|
var onPerPageSelect = (0, react_1.useCallback)(function (_event, perPage) { return setPerPage(perPage); }, [setPerPage]);
|
|
24
|
-
var
|
|
24
|
+
var compact = !(0, useBreakPoint_1.useBreakpoint)('sm');
|
|
25
25
|
var settings = (0, Settings_1.useSettings)();
|
|
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,
|
|
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,
|
|
27
|
+
// marginTop: -1,
|
|
28
|
+
paddingTop: compact ? 6 : undefined, paddingBottom: compact ? 6 : undefined, backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined }) }));
|
|
27
29
|
}
|
|
28
30
|
exports.PagePagination = PagePagination;
|
package/cjs/PageToolbar.js
CHANGED
|
@@ -156,7 +156,7 @@ function PageTableToolbar(props) {
|
|
|
156
156
|
return newState;
|
|
157
157
|
});
|
|
158
158
|
}, showToolbarItem: false }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }), filter.label));
|
|
159
|
-
})] })) }))), (0, jsx_runtime_1.
|
|
159
|
+
})] })) }))), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: react_core_1.ToolbarItem }) }) })), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: openColumnModal && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Manage columns' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "plain", icon: (0, jsx_runtime_1.jsx)(react_icons_1.ColumnsIcon, {}), onClick: openColumnModal }) })) })) })), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "pagination", visibility: { default: 'hidden', '2xl': 'visible' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Pagination, { variant: react_core_1.PaginationVariant.top, isCompact: true, itemCount: itemCount, perPage: perPage, page: page, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: { marginTop: -8, marginBottom: -8 } }) }))] }) })));
|
|
160
160
|
}
|
|
161
161
|
exports.PageTableToolbar = PageTableToolbar;
|
|
162
162
|
function ToolbarFilterInput(props) {
|
package/mjs/PagePagination.js
CHANGED
|
@@ -7,16 +7,16 @@ export function PagePagination(props) {
|
|
|
7
7
|
const { setPage, setPerPage } = props;
|
|
8
8
|
const onSetPage = useCallback((_event, page) => setPage(page), [setPage]);
|
|
9
9
|
const onPerPageSelect = useCallback((_event, perPage) => setPerPage(perPage), [setPerPage]);
|
|
10
|
-
const
|
|
10
|
+
const compact = !useBreakpoint('sm');
|
|
11
11
|
const settings = useSettings();
|
|
12
12
|
return (_jsx(Pagination, { variant: PaginationVariant.bottom, itemCount: props.itemCount, page: props.page, perPage: props.perPage, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: {
|
|
13
13
|
...props.style,
|
|
14
14
|
borderTop: 'thin solid var(--pf-global--BorderColor--100)',
|
|
15
15
|
boxShadow: 'none',
|
|
16
16
|
zIndex: 301,
|
|
17
|
-
marginTop: -1,
|
|
18
|
-
paddingTop:
|
|
19
|
-
paddingBottom:
|
|
17
|
+
// marginTop: -1,
|
|
18
|
+
paddingTop: compact ? 6 : undefined,
|
|
19
|
+
paddingBottom: compact ? 6 : undefined,
|
|
20
20
|
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
|
21
21
|
} }));
|
|
22
22
|
}
|
package/mjs/PageToolbar.js
CHANGED
|
@@ -96,7 +96,7 @@ export function PageTableToolbar(props) {
|
|
|
96
96
|
return newState;
|
|
97
97
|
});
|
|
98
98
|
}, showToolbarItem: false, children: _jsx(_Fragment, {}) }, filter.label));
|
|
99
|
-
})] }) })),
|
|
99
|
+
})] }) })), _jsx(ToolbarGroup, { variant: "button-group", style: { zIndex: 302 }, children: _jsx(ToolbarItem, { children: _jsx(TypedActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: ToolbarItem }) }) }), _jsx(ToolbarGroup, { variant: "button-group", style: { zIndex: 302 }, children: openColumnModal && (_jsx(ToolbarItem, { children: _jsx(Tooltip, { content: 'Manage columns', children: _jsx(Button, { variant: "plain", icon: _jsx(ColumnsIcon, {}), onClick: openColumnModal }) }) })) }), _jsx(ToolbarItem, { variant: "pagination", 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 } }) })] }) }));
|
|
100
100
|
}
|
|
101
101
|
function ToolbarFilterInput(props) {
|
|
102
102
|
const { filter } = props;
|
package/package.json
CHANGED