@mailstep/design-system 0.7.15-beta.1 → 0.7.16-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/ui/Blocks/CommonGrid/CommonGrid.d.ts +1 -1
- package/ui/Blocks/CommonGrid/CommonGrid.js +1 -2
- package/ui/Blocks/CommonGrid/CommonGridContainer.js +11 -4
- package/ui/Blocks/CommonGrid/hooks/useGetGridHeight.d.ts +0 -1
- package/ui/Blocks/CommonGrid/hooks/useGetGridHeight.js +6 -20
- package/ui/Blocks/CommonGrid/hooks/{useGridAutoHeight.d.ts → useGridAutoRowsPerPage.d.ts} +1 -1
- package/ui/Blocks/CommonGrid/hooks/{useGridAutoHeight.js → useGridAutoRowsPerPage.js} +1 -1
- package/ui/Blocks/CommonGrid/styles.d.ts +3 -9
- package/ui/Blocks/CommonGrid/styles.js +8 -22
- package/ui/Blocks/CommonGrid/types.d.ts +0 -1
- package/ui/index.es.js +6848 -6851
- package/ui/index.umd.js +370 -356
package/package.json
CHANGED
|
@@ -5,5 +5,5 @@ type Props = CommonGridProps & {
|
|
|
5
5
|
handleDragEnd: (item: DropResult) => void;
|
|
6
6
|
displayColumnsDefinitions: ColumnDefinition[];
|
|
7
7
|
};
|
|
8
|
-
declare const CommonGrid: ({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, displayColumnsDefinitions, className,
|
|
8
|
+
declare const CommonGrid: ({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, displayColumnsDefinitions, className, minColumnWidth, errorMessage, floatingButtonProps }: Props) => JSX.Element;
|
|
9
9
|
export default CommonGrid;
|
|
@@ -40,7 +40,7 @@ var CommonGrid = function (_a) {
|
|
|
40
40
|
// redux props
|
|
41
41
|
gridSelectors = _a.gridSelectors, gridActions = _a.gridActions,
|
|
42
42
|
// input props
|
|
43
|
-
isLoading = _a.isLoading, rowsData = _a.rowsData, hasColouredRows = _a.hasColouredRows, columnsDefinitions = _a.columnsDefinitions, actionColumnDefinition = _a.actionColumnDefinition, allowRowSelect = _a.allowRowSelect, allowRowSelectOnAction = _a.allowRowSelectOnAction, onRowAction = _a.onRowAction, onRowEditClick = _a.onRowEditClick, onRowReadClick = _a.onRowReadClick, onRowClick = _a.onRowClick, _b = _a.columnLayout, columnLayout = _b === void 0 ? 'normal' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, className = _a.className,
|
|
43
|
+
isLoading = _a.isLoading, rowsData = _a.rowsData, hasColouredRows = _a.hasColouredRows, columnsDefinitions = _a.columnsDefinitions, actionColumnDefinition = _a.actionColumnDefinition, allowRowSelect = _a.allowRowSelect, allowRowSelectOnAction = _a.allowRowSelectOnAction, onRowAction = _a.onRowAction, onRowEditClick = _a.onRowEditClick, onRowReadClick = _a.onRowReadClick, onRowClick = _a.onRowClick, _b = _a.columnLayout, columnLayout = _b === void 0 ? 'normal' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, className = _a.className, minColumnWidth = _a.minColumnWidth, errorMessage = _a.errorMessage, floatingButtonProps = _a.floatingButtonProps;
|
|
44
44
|
var _c = gridSelectors.uxState, uxState = _c === void 0 ? defaultUxState : _c, columnConfig = gridSelectors.columnConfig, _d = gridSelectors.columnsWidth, columnsWidth = _d === void 0 ? defaultColumnsWidth : _d, columnsWidthVariant = gridSelectors.columnsWidthVariant, _e = gridSelectors.page, page = _e === void 0 ? 1 : _e, filter = gridSelectors.filter, sorting = gridSelectors.sorting, _f = gridSelectors.rowsPerPage, rowsPerPage = _f === void 0 ? 10 : _f;
|
|
45
45
|
var clearUxState = gridActions.clearUxState, handleUxChange = gridActions.handleUxChange, _g = gridActions.addFilter, addFilter = _g === void 0 ? defaultVoidFunction : _g, _h = gridActions.addSorting, addSorting = _h === void 0 ? defaultVoidFunction : _h, _j = gridActions.setColumnWidth, setColumnWidth = _j === void 0 ? defaultVoidFunction : _j, _k = gridActions.setColumnsOrder, setColumnsOrder = _k === void 0 ? defaultVoidFunction : _k;
|
|
46
46
|
var handleRowsKeyDown = useRowsKeyControls(rowsData, uxState, handleUxChange);
|
|
@@ -61,7 +61,6 @@ var CommonGrid = function (_a) {
|
|
|
61
61
|
}, [displayColumnsDefinitions]);
|
|
62
62
|
var commonGridRef = React.useCallback(function (node) {
|
|
63
63
|
gridBoxRef.current = node;
|
|
64
|
-
!!gridRef && (gridRef.current = node);
|
|
65
64
|
}, []);
|
|
66
65
|
return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), width: window.innerWidth, children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [columnsDefinitions.find(function (col) { return col.group; }) && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd }), columnsDefinitions.find(function (col) { return col.filtering; }) && (_jsx(FilterRow, { filters: filters, comparators: comparators, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
|
|
67
66
|
rowsData &&
|
|
@@ -31,19 +31,26 @@ import { GridModals } from './components/GridModals';
|
|
|
31
31
|
import TablePagination from './components/TablePagination';
|
|
32
32
|
import useEditReadAsColumn from './hooks/useEditReadAsColumn';
|
|
33
33
|
import useGetGridHeight from './hooks/useGetGridHeight';
|
|
34
|
+
import { useGridAutoRowsPerPage } from './hooks/useGridAutoRowsPerPage';
|
|
34
35
|
import useManageColumn from './hooks/useManageColumn';
|
|
35
36
|
import { usePresetState } from './hooks/usePresetsState';
|
|
36
37
|
import { x } from '@xstyled/styled-components';
|
|
37
38
|
import { CommonGridWithStyles, BottomWrapper, CommonGridWrap, ContentContainer, StyledButtonStrip } from './styles';
|
|
38
39
|
import { getFilters } from './utils';
|
|
39
|
-
import { useGridAutoHeight } from './hooks/useGridAutoHeight';
|
|
40
40
|
var CommonGridContainer = function (props) {
|
|
41
41
|
var _a;
|
|
42
42
|
var _b = props.optimizeFilters, optimizeFilters = _b === void 0 ? false : _b, extraControlButtons = props.extraControlButtons, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, quickFilter = props.quickFilter, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, _c = props.autoHeight, autoHeight = _c === void 0 ? true : _c, gridName = props.gridName, _d = props.withPresets, withPresets = _d === void 0 ? true : _d, getRowsPerPage = props.getRowsPerPage, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler", "autoHeight", "gridName", "withPresets", "getRowsPerPage"]);
|
|
43
43
|
var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
|
|
44
44
|
var _e = useState(false), displayManageColumnButton = _e[0], setDisplayManageColumnButton = _e[1];
|
|
45
|
-
var _f = useGetGridHeight(), gridHeight = _f.gridHeight, gridRef = _f.gridRef
|
|
46
|
-
|
|
45
|
+
var _f = useGetGridHeight(), gridHeight = _f.gridHeight, gridRef = _f.gridRef;
|
|
46
|
+
useGridAutoRowsPerPage({
|
|
47
|
+
gridHeight: gridHeight,
|
|
48
|
+
autoHeight: autoHeight,
|
|
49
|
+
gridActions: gridActions,
|
|
50
|
+
queryRowsParam: queryRowsParam,
|
|
51
|
+
rowsPerPage: gridSelectors.rowsPerPage,
|
|
52
|
+
getRowsPerPage: getRowsPerPage
|
|
53
|
+
});
|
|
47
54
|
var modifiedPassDownProps = useEditReadAsColumn(passDownProps);
|
|
48
55
|
var filters = useMemo(function () { return getFilters(optimizeFilters); }, [optimizeFilters]);
|
|
49
56
|
var columns = modifiedPassDownProps.columnsDefinitions;
|
|
@@ -55,6 +62,6 @@ var CommonGridContainer = function (props) {
|
|
|
55
62
|
onClose: onClose
|
|
56
63
|
}), columnsConfigValues = _h.columnsConfigValues, setColumnsConfigOptions = _h.setColumnsConfigOptions, onConfirmForm = _h.onConfirmForm, resetColumnConfig = _h.resetColumnConfig, handleDragEnd = _h.handleDragEnd, onCloseForm = _h.onCloseForm, displayColumnsDefinitions = _h.displayColumnsDefinitions, manageColumnsFormDefinitions = _h.manageColumnsFormDefinitions;
|
|
57
64
|
var _j = usePresetState(), isPresetsModalOpen = _j.isPresetsModalOpen, onClosePresetsModal = _j.onClosePresetsModal, onOpenPresetsModal = _j.onOpenPresetsModal, setSelectedPresetName = _j.setSelectedPresetName, selectedPresetName = _j.selectedPresetName;
|
|
58
|
-
return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton, displayManageColumnButton: displayManageColumnButton, openManageColumnForm: openManageColumnForm, onOpenPresetsModal: onOpenPresetsModal, selectedPresetName: selectedPresetName, withPresets: withPresets, gridName: gridName }) }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters,
|
|
65
|
+
return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { ref: gridRef, children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton, displayManageColumnButton: displayManageColumnButton, openManageColumnForm: openManageColumnForm, onOpenPresetsModal: onOpenPresetsModal, selectedPresetName: selectedPresetName, withPresets: withPresets, gridName: gridName }) }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsxs(BottomWrapper, { children: [(processCheckedValues || !!((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler, getRowsPerPage: getRowsPerPage, gridHeight: gridHeight })] })] })] }), _jsx(GridModals, { manageColumnFormVisible: manageColumnFormVisible, onCloseForm: onCloseForm, resetColumnConfig: resetColumnConfig, onConfirmForm: onConfirmForm, manageColumnsFormDefinitions: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true), gridName: gridName, gridActions: gridActions, gridSelectors: gridSelectors, onClosePresetsModal: onClosePresetsModal, isPresetsModalOpen: isPresetsModalOpen, selectedPresetName: selectedPresetName, setSelectedPresetName: setSelectedPresetName })] }));
|
|
59
66
|
};
|
|
60
67
|
export default CommonGridContainer;
|
|
@@ -1,16 +1,11 @@
|
|
|
1
|
-
import { useEffect,
|
|
1
|
+
import { useEffect, useRef, useState } from 'react';
|
|
2
2
|
var useGetGridHeight = function () {
|
|
3
|
-
var _a = useState(
|
|
4
|
-
var _b = useState(0), topDistance = _b[0], setTopDistance = _b[1];
|
|
5
|
-
var _c = useState(0), bottomDistance = _c[0], setBottomDistance = _c[1];
|
|
3
|
+
var _a = useState(), gridHeight = _a[0], setGridHeight = _a[1];
|
|
6
4
|
var gridRef = useRef(null);
|
|
7
|
-
var paginationRef = useRef(null);
|
|
8
5
|
useEffect(function () {
|
|
9
6
|
var handleResize = function () {
|
|
10
|
-
var _a
|
|
11
|
-
|
|
12
|
-
setBottomDistance(((_b = paginationRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0);
|
|
13
|
-
setWindowHeight(window.innerHeight);
|
|
7
|
+
var _a;
|
|
8
|
+
setGridHeight((_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight);
|
|
14
9
|
};
|
|
15
10
|
handleResize();
|
|
16
11
|
window.addEventListener('resize', handleResize);
|
|
@@ -18,16 +13,7 @@ var useGetGridHeight = function () {
|
|
|
18
13
|
window.removeEventListener('resize', handleResize);
|
|
19
14
|
};
|
|
20
15
|
}, []);
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
if (calculatedHeight !== windowHeight && calculatedHeight > 360) {
|
|
24
|
-
return calculatedHeight - 25;
|
|
25
|
-
}
|
|
26
|
-
else {
|
|
27
|
-
// grids inside modals
|
|
28
|
-
return undefined;
|
|
29
|
-
}
|
|
30
|
-
}, [bottomDistance, topDistance, windowHeight]);
|
|
31
|
-
return { gridHeight: gridHeight, gridRef: gridRef, paginationRef: paginationRef };
|
|
16
|
+
console.log('gridHeight', gridHeight);
|
|
17
|
+
return { gridHeight: gridHeight, gridRef: gridRef };
|
|
32
18
|
};
|
|
33
19
|
export default useGetGridHeight;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
2
|
import { rowsPerPageOptions } from '../utils/constants';
|
|
3
|
-
export var
|
|
3
|
+
export var useGridAutoRowsPerPage = function (_a) {
|
|
4
4
|
var gridHeight = _a.gridHeight, gridActions = _a.gridActions, queryRowsParam = _a.queryRowsParam, rowsPerPage = _a.rowsPerPage, getRowsPerPage = _a.getRowsPerPage, autoHeight = _a.autoHeight;
|
|
5
5
|
useEffect(function () {
|
|
6
6
|
var _a;
|
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const BottomWrapper: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme
|
|
3
|
-
isFixed?: boolean | undefined;
|
|
4
|
-
}, "color">;
|
|
2
|
+
export declare const BottomWrapper: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
|
|
5
3
|
export declare const ContentContainer: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
|
|
6
4
|
export declare const CommonGridWrap: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
|
|
7
5
|
export declare const StyledButtonStrip: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
|
|
8
|
-
export declare const CommonGridWithStyles: import("styled-components").StyledComponent<({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, displayColumnsDefinitions, className,
|
|
6
|
+
export declare const CommonGridWithStyles: import("styled-components").StyledComponent<({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, displayColumnsDefinitions, className, minColumnWidth, errorMessage, floatingButtonProps }: import("./types").CommonGridProps & {
|
|
9
7
|
filters?: import("./types").FiltersConfig | undefined;
|
|
10
8
|
handleDragEnd: (item: import("react-beautiful-dnd").DropResult) => void;
|
|
11
9
|
displayColumnsDefinitions: import("./types").ColumnDefinition[];
|
|
12
|
-
}) => JSX.Element, import("@xstyled/system").Theme, {
|
|
13
|
-
onRowClick?: Function | undefined;
|
|
14
|
-
height?: number | undefined;
|
|
15
|
-
minHeight?: number | undefined;
|
|
16
|
-
}, never>;
|
|
10
|
+
}) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
|
|
@@ -5,30 +5,16 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
5
5
|
import styled, { x } from '@xstyled/styled-components';
|
|
6
6
|
import { th } from '@xstyled/system';
|
|
7
7
|
import CommonGrid from './CommonGrid';
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
});
|
|
15
|
-
export var ContentContainer = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n"])));
|
|
16
|
-
export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-grow: 1;\n"], ["\n flex-grow: 1;\n"])));
|
|
8
|
+
var FooterHeight = {
|
|
9
|
+
mobile: '38px',
|
|
10
|
+
desktop: '60px'
|
|
11
|
+
};
|
|
12
|
+
export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n height: ", ";\n background-color: bgLightGray;\n\n @media (min-width: 1024px) {\n position: relative;\n padding-top: 10px;\n padding-bottom: 11px;\n margin-bottom: 0;\n height: ", ";\n background-color: transparent;\n }\n\n & > * {\n @media (min-width: 1024px) {\n justify-content: flex-end;\n }\n }\n\n @media print {\n display: none;\n }\n"], ["\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n height: ", ";\n background-color: bgLightGray;\n\n @media (min-width: 1024px) {\n position: relative;\n padding-top: 10px;\n padding-bottom: 11px;\n margin-bottom: 0;\n height: ", ";\n background-color: transparent;\n }\n\n & > * {\n @media (min-width: 1024px) {\n justify-content: flex-end;\n }\n }\n\n @media print {\n display: none;\n }\n"])), FooterHeight.mobile, FooterHeight.desktop);
|
|
13
|
+
export var ContentContainer = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n height: 100%;\n"])));
|
|
14
|
+
export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: calc(100% - ", ");\n\n @media (min-width: 1024px) {\n height: calc(100% - ", ");\n }\n"], ["\n height: calc(100% - ", ");\n\n @media (min-width: 1024px) {\n height: calc(100% - ", ");\n }\n"])), FooterHeight.mobile, FooterHeight.desktop);
|
|
17
15
|
export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: 75px;\n flex-wrap: wrap;\n z-index: 2;\n"], ["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: 75px;\n flex-wrap: wrap;\n z-index: 2;\n"])));
|
|
18
|
-
export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: 40px;\n }\n & .gridHead {\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 1;\n padding-left: 12px;\n border-top: 1px solid ", ";\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n position: relative;\n }\n & .sticky {\n background-color: #fafbfc;\n }\n }\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n & .sticky {\n background-color: #fafbfc;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 12px;\n flex-grow: 1;\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n & .gridWrapper {\n background-color: ", ";\n width:
|
|
16
|
+
export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 100%;\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: 40px;\n }\n & .gridHead {\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 1;\n padding-left: 12px;\n border-top: 1px solid ", ";\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n position: relative;\n }\n & .sticky {\n background-color: #fafbfc;\n }\n }\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n & .sticky {\n background-color: #fafbfc;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 12px;\n flex-grow: 1;\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n & .gridWrapper {\n background-color: ", ";\n width: fit-content;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n width: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 2px;\n padding-right: 2px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n max-width: 88px;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"], ["\n height: 100%;\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: 40px;\n }\n & .gridHead {\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 1;\n padding-left: 12px;\n border-top: 1px solid ", ";\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n position: relative;\n }\n & .sticky {\n background-color: #fafbfc;\n }\n }\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n & .sticky {\n background-color: #fafbfc;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 12px;\n flex-grow: 1;\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n & .gridWrapper {\n background-color: ", ";\n width: fit-content;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n width: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 2px;\n padding-right: 2px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n max-width: 88px;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"])), th('fonts.primary'), th('colors.lightGray6'), th('fonts.primary'), function (_a) {
|
|
19
17
|
var theme = _a.theme;
|
|
20
18
|
return theme.colors.white;
|
|
21
|
-
}, function (_a) {
|
|
22
|
-
var height = _a.height;
|
|
23
|
-
return (height ? 'fit-content' : 'auto');
|
|
24
|
-
}, function (_a) {
|
|
25
|
-
var height = _a.height;
|
|
26
|
-
return (height ? '35px' : '0');
|
|
27
|
-
}, function (_a) {
|
|
28
|
-
var minHeight = _a.minHeight;
|
|
29
|
-
return (minHeight ? "".concat(minHeight, "px") : '0');
|
|
30
|
-
}, function (_a) {
|
|
31
|
-
var height = _a.height;
|
|
32
|
-
return (height ? "".concat(height, "px") : '475px');
|
|
33
19
|
});
|
|
34
20
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -254,7 +254,6 @@ export type CommonGridProps<TData extends RowProps = RowProps> = {
|
|
|
254
254
|
gridActions: GridActionsType;
|
|
255
255
|
isLoading?: boolean;
|
|
256
256
|
autoHeight?: boolean;
|
|
257
|
-
minHeight?: number;
|
|
258
257
|
rowsData: TData[];
|
|
259
258
|
hasColouredRows?: boolean;
|
|
260
259
|
columnsDefinitions: ColumnDefinition[];
|