@mailstep/design-system 0.7.45-beta.3 → 0.7.45-beta.5
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 +3 -1
- package/ui/Blocks/CommonGrid/CommonGrid.js +5 -5
- package/ui/Blocks/CommonGrid/CommonGridContainer.js +6 -3
- package/ui/Blocks/CommonGrid/styles.d.ts +4 -1
- package/ui/Blocks/CommonGrid/styles.js +5 -2
- package/ui/Blocks/CommonGrid/utils/constants.d.ts +2 -1
- package/ui/Blocks/CommonGrid/utils/constants.js +2 -1
- package/ui/Blocks/CommonGrid/utils/getRowsPerPage.d.ts +1 -1
- package/ui/Blocks/CommonGrid/utils/getRowsPerPage.js +3 -3
- package/ui/index.es.js +8106 -8105
- package/ui/index.umd.js +390 -390
package/package.json
CHANGED
|
@@ -4,6 +4,8 @@ type Props = CommonGridProps & {
|
|
|
4
4
|
filters?: FiltersConfig;
|
|
5
5
|
handleDragEnd: (item: DropResult) => void;
|
|
6
6
|
displayColumnsDefinitions: ColumnDefinition[];
|
|
7
|
+
hasGroups: boolean;
|
|
8
|
+
hasFilters: boolean;
|
|
7
9
|
};
|
|
8
|
-
declare const CommonGrid: ({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows,
|
|
10
|
+
declare const CommonGrid: ({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, displayColumnsDefinitions, className, minColumnWidth, errorMessage, floatingButtonProps, hasGroups, hasFilters }: Props) => JSX.Element;
|
|
9
11
|
export default CommonGrid;
|
|
@@ -40,9 +40,9 @@ 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,
|
|
44
|
-
var _c = gridSelectors.uxState, uxState = _c === void 0 ? defaultUxState : _c,
|
|
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
|
|
43
|
+
isLoading = _a.isLoading, rowsData = _a.rowsData, hasColouredRows = _a.hasColouredRows, 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, hasGroups = _a.hasGroups, hasFilters = _a.hasFilters;
|
|
44
|
+
var _c = gridSelectors.uxState, uxState = _c === void 0 ? defaultUxState : _c, _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
|
+
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;
|
|
46
46
|
var handleRowsKeyDown = useRowsKeyControls(rowsData, uxState, handleUxChange);
|
|
47
47
|
useUxReset(rowsData, uxState, clearUxState);
|
|
48
48
|
var GridMessage;
|
|
@@ -55,14 +55,14 @@ var CommonGrid = function (_a) {
|
|
|
55
55
|
GridMessage = errorMessage;
|
|
56
56
|
messageClass = 'error';
|
|
57
57
|
}
|
|
58
|
-
var
|
|
58
|
+
var _k = useColumnSizes(displayColumnsDefinitions, columnsWidth, columnsWidthVariant, setColumnWidth, columnLayout, minColumnWidth), displayColumnsWidth = _k.displayColumnsWidth, totalColumnsWidth = _k.totalColumnsWidth, gridBoxRef = _k.gridBoxRef, handleResizeDrag = _k.handleResizeDrag;
|
|
59
59
|
var groups = React.useMemo(function () {
|
|
60
60
|
return getGroups(displayColumnsDefinitions);
|
|
61
61
|
}, [displayColumnsDefinitions]);
|
|
62
62
|
var commonGridRef = React.useCallback(function (node) {
|
|
63
63
|
gridBoxRef.current = node;
|
|
64
64
|
}, []);
|
|
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: [
|
|
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: [hasGroups && (_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 }), hasFilters && (_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 &&
|
|
66
66
|
rowsData &&
|
|
67
67
|
displayColumnsDefinitions &&
|
|
68
68
|
rowsData.map(function (row, index) {
|
|
@@ -43,8 +43,11 @@ var CommonGridContainer = function (props) {
|
|
|
43
43
|
var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
|
|
44
44
|
var _g = useState(false), displayManageColumnButton = _g[0], setDisplayManageColumnButton = _g[1];
|
|
45
45
|
var gridRef = useRef(null);
|
|
46
|
-
var withButtonStrip = !!(extraControlButtons === null || extraControlButtons === void 0 ? void 0 : extraControlButtons.length) ||
|
|
47
|
-
var
|
|
46
|
+
var withButtonStrip = !!(extraControlButtons === null || extraControlButtons === void 0 ? void 0 : extraControlButtons.length) || !hideControlButtons || !!withPresets || !!withManageColumnButton;
|
|
47
|
+
var hasGroups = !!props.columnsDefinitions.find(function (col) { return col.group; });
|
|
48
|
+
var hasFilters = !!props.columnsDefinitions.find(function (col) { return col.filtering; });
|
|
49
|
+
var hasGroupsOrFilters = hasGroups || hasFilters;
|
|
50
|
+
var autoRowsPerPage = getRowsPerPage(gridRef, withPagination, withButtonStrip, hasGroupsOrFilters);
|
|
48
51
|
useGridAutoRowsPerPage({
|
|
49
52
|
autoHeight: autoHeight,
|
|
50
53
|
gridActions: gridActions,
|
|
@@ -63,6 +66,6 @@ var CommonGridContainer = function (props) {
|
|
|
63
66
|
onClose: onClose
|
|
64
67
|
}), columnsConfigValues = _j.columnsConfigValues, setColumnsConfigOptions = _j.setColumnsConfigOptions, onConfirmForm = _j.onConfirmForm, resetColumnConfig = _j.resetColumnConfig, handleDragEnd = _j.handleDragEnd, onCloseForm = _j.onCloseForm, displayColumnsDefinitions = _j.displayColumnsDefinitions, manageColumnsFormDefinitions = _j.manageColumnsFormDefinitions;
|
|
65
68
|
var _k = usePresetState(), isPresetsModalOpen = _k.isPresetsModalOpen, onClosePresetsModal = _k.onClosePresetsModal, onOpenPresetsModal = _k.onOpenPresetsModal, setSelectedPresetName = _k.setSelectedPresetName, selectedPresetName = _k.selectedPresetName;
|
|
66
|
-
return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { ref: gridRef, children: [_jsxs(CommonGridWrap, { withPagination: withPagination, children: [withButtonStrip && (_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, withManageColumnButton: withManageColumnButton }) }) })), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { withButtonStrip: withButtonStrip, filters: filters, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsxs(BottomWrapper, { withPagination: withPagination, 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 })), withPagination && (_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, autoRowsPerPage: autoRowsPerPage })] }))] })] }), _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 })] }));
|
|
69
|
+
return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { ref: gridRef, children: [_jsxs(CommonGridWrap, { withPagination: withPagination, children: [withButtonStrip && (_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, withManageColumnButton: withManageColumnButton }) }) })), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { withButtonStrip: withButtonStrip, hasGroupsOrFilters: hasGroupsOrFilters, filters: filters, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasFilters: hasFilters, hasGroups: hasGroups, hasColouredRows: true }))] }), _jsxs(BottomWrapper, { withPagination: withPagination, 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 })), withPagination && (_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, autoRowsPerPage: autoRowsPerPage })] }))] })] }), _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 })] }));
|
|
67
70
|
};
|
|
68
71
|
export default CommonGridContainer;
|
|
@@ -7,10 +7,13 @@ export declare const CommonGridWrap: import("styled-components").StyledComponent
|
|
|
7
7
|
withPagination: boolean;
|
|
8
8
|
}, "color">;
|
|
9
9
|
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">;
|
|
10
|
-
export declare const CommonGridWithStyles: import("styled-components").StyledComponent<({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows,
|
|
10
|
+
export declare const CommonGridWithStyles: import("styled-components").StyledComponent<({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, displayColumnsDefinitions, className, minColumnWidth, errorMessage, floatingButtonProps, hasGroups, hasFilters }: import("./types").CommonGridProps & {
|
|
11
11
|
filters?: import("./types").FiltersConfig | undefined;
|
|
12
12
|
handleDragEnd: (item: import("react-beautiful-dnd").DropResult) => void;
|
|
13
13
|
displayColumnsDefinitions: import("./types").ColumnDefinition[];
|
|
14
|
+
hasGroups: boolean;
|
|
15
|
+
hasFilters: boolean;
|
|
14
16
|
}) => JSX.Element, import("@xstyled/system").Theme, {
|
|
15
17
|
withButtonStrip: boolean;
|
|
18
|
+
hasGroupsOrFilters: boolean;
|
|
16
19
|
}, never>;
|
|
@@ -2,7 +2,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
2
2
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
|
-
import { gridRowHeight, gridFooterHeight, gridButtonStripHeight, gridHeadHeight } from './utils/constants';
|
|
5
|
+
import { gridRowHeight, gridFooterHeight, gridButtonStripHeight, gridHeadHeight, gridFilterHeight } from './utils/constants';
|
|
6
6
|
import styled, { x } from '@xstyled/styled-components';
|
|
7
7
|
import { th } from '@xstyled/system';
|
|
8
8
|
import CommonGrid from './CommonGrid';
|
|
@@ -22,7 +22,10 @@ export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject
|
|
|
22
22
|
export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: calc(100% - ", "px);\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: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\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 max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n flex-grow: 1;\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: auto;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: 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 padding-left: 12px;\n\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right,\n .sticky-left {\n background: white;\n z-index: 1;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left,\n .sticky-right {\n background-color: bgLightGray;\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: calc(100% - ", "px);\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: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\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 max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n flex-grow: 1;\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: auto;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: 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 padding-left: 12px;\n\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right,\n .sticky-left {\n background: white;\n z-index: 1;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left,\n .sticky-right {\n background-color: bgLightGray;\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"])), function (_a) {
|
|
23
23
|
var withButtonStrip = _a.withButtonStrip;
|
|
24
24
|
return (withButtonStrip ? gridButtonStripHeight : 0);
|
|
25
|
-
}, th('fonts.primary'), gridRowHeight,
|
|
25
|
+
}, th('fonts.primary'), gridRowHeight, function (_a) {
|
|
26
|
+
var hasGroupsOrFilters = _a.hasGroupsOrFilters;
|
|
27
|
+
return gridHeadHeight + (hasGroupsOrFilters ? gridFilterHeight : 0);
|
|
28
|
+
}, th('colors.lightGray6'), th('fonts.primary'), function (_a) {
|
|
26
29
|
var theme = _a.theme;
|
|
27
30
|
return theme.colors.white;
|
|
28
31
|
});
|
|
@@ -3,6 +3,7 @@ export declare const rowsPerPageOptions: {
|
|
|
3
3
|
label: number;
|
|
4
4
|
}[];
|
|
5
5
|
export declare const gridButtonStripHeight = 75;
|
|
6
|
-
export declare const gridHeadHeight =
|
|
6
|
+
export declare const gridHeadHeight = 40;
|
|
7
|
+
export declare const gridFilterHeight = 39;
|
|
7
8
|
export declare const gridFooterHeight = 60;
|
|
8
9
|
export declare const gridRowHeight = 40;
|
|
@@ -5,6 +5,7 @@ export var rowsPerPageOptions = [
|
|
|
5
5
|
{ value: 100, label: 100 }
|
|
6
6
|
];
|
|
7
7
|
export var gridButtonStripHeight = 75;
|
|
8
|
-
export var gridHeadHeight =
|
|
8
|
+
export var gridHeadHeight = 40;
|
|
9
|
+
export var gridFilterHeight = 39;
|
|
9
10
|
export var gridFooterHeight = 60;
|
|
10
11
|
export var gridRowHeight = 40;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const getRowsPerPage: (ref: React.RefObject<HTMLElement> | null, withPagination: boolean, withButtonStrip: boolean) => number;
|
|
1
|
+
export declare const getRowsPerPage: (ref: React.RefObject<HTMLElement> | null, withPagination: boolean, withButtonStrip: boolean, hasGroupsOrFilters: boolean) => number;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { gridHeadHeight, gridButtonStripHeight, gridFooterHeight, gridRowHeight } from './constants';
|
|
2
|
-
export var getRowsPerPage = function (ref, withPagination, withButtonStrip) {
|
|
1
|
+
import { gridHeadHeight, gridFilterHeight, gridButtonStripHeight, gridFooterHeight, gridRowHeight } from './constants';
|
|
2
|
+
export var getRowsPerPage = function (ref, withPagination, withButtonStrip, hasGroupsOrFilters) {
|
|
3
3
|
var _a;
|
|
4
4
|
var containerHeight = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
|
|
5
|
-
var gridHeaderHeight = gridHeadHeight + (withButtonStrip ? gridButtonStripHeight : 0);
|
|
5
|
+
var gridHeaderHeight = gridHeadHeight + (hasGroupsOrFilters ? gridFilterHeight : 0) + (withButtonStrip ? gridButtonStripHeight : 0);
|
|
6
6
|
if (containerHeight) {
|
|
7
7
|
return Math.floor((containerHeight - gridHeaderHeight - (withPagination ? gridFooterHeight : 0)) / gridRowHeight);
|
|
8
8
|
}
|