@mailstep/design-system 0.8.22-beta.4 → 0.8.23-beta.0
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/components/MobileFilterModal.js +2 -2
- package/ui/Blocks/CommonGrid/components/MobileSortModal.js +1 -1
- package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js +1 -1
- package/ui/Blocks/CommonGrid/styles.js +7 -10
- package/ui/index.es.js +2181 -2160
- package/ui/index.umd.js +125 -103
package/package.json
CHANGED
|
@@ -54,7 +54,7 @@ var MobileFilterModal = function (_a) {
|
|
|
54
54
|
setLocalFilterValues({});
|
|
55
55
|
onClearSettings === null || onClearSettings === void 0 ? void 0 : onClearSettings();
|
|
56
56
|
}, [onClearSettings]);
|
|
57
|
-
return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), onCancel: handleReset, cancelLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), onConfirm: handleApplyFilters, confirmLabel: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), hasFooter: hasActiveFilters, width: "narrow", children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "16px", p: "8px 4px", children: filterableColumns.map(function (column) {
|
|
57
|
+
return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), onCancel: handleReset, cancelLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), onConfirm: handleApplyFilters, confirmLabel: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), hasFooter: hasActiveFilters, width: "narrow", ignoreClickOutside: true, children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "16px", p: "8px 4px", children: filterableColumns.map(function (column) {
|
|
58
58
|
var filterType = createFilterType(column);
|
|
59
59
|
var filterConfig = filters === null || filters === void 0 ? void 0 : filters[filterType];
|
|
60
60
|
var defaultComparators = comparators === null || comparators === void 0 ? void 0 : comparators[filterType];
|
|
@@ -63,7 +63,7 @@ var MobileFilterModal = function (_a) {
|
|
|
63
63
|
if (!(filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.CellComponent))
|
|
64
64
|
return null;
|
|
65
65
|
var RenderComponent = filterConfig.CellComponent;
|
|
66
|
-
return (_jsxs(x.div, { display: "flex", flexDirection: "column", gap: "6px", position: "relative", children: [column.title && (_jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: column.title })), _jsx(RenderComponent, __assign({ asyncLoadKey: column.asyncLoadKey, "data-test": column.name, name: column.name, onChange: handleChange(column), value: value, others: others, OverlayComponent: MobileOverlayWrapper, comparators: defaultComparators, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions }, (filterType === 'date' && { compact: true }), (filterType === 'options' && { options: column.filterOptions }), filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, column.filterExtraProps))] }, column.name));
|
|
66
|
+
return (_jsxs(x.div, { display: "flex", flexDirection: "column", gap: "6px", position: "relative", children: [column.title && (_jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: column.title })), _jsx(RenderComponent, __assign({ asyncLoadKey: column.asyncLoadKey, "data-test": column.name, name: column.name, onChange: handleChange(column), value: value, others: others, OverlayComponent: MobileOverlayWrapper, comparators: defaultComparators, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions }, (filterType === 'date' && { compact: true }), (filterType === 'options' && { options: column.filterOptions, columnWidth: column === null || column === void 0 ? void 0 : column.flexBasis }), filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, column.filterExtraProps))] }, column.name));
|
|
67
67
|
}) }) }));
|
|
68
68
|
};
|
|
69
69
|
export default MobileFilterModal;
|
|
@@ -29,6 +29,6 @@ var MobileSortModal = function (_a) {
|
|
|
29
29
|
var handleClearSort = useCallback(function () {
|
|
30
30
|
onResetSorting === null || onResetSorting === void 0 ? void 0 : onResetSorting();
|
|
31
31
|
}, [onResetSorting]);
|
|
32
|
-
return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.sort", message: "Sort" }), onConfirm: activeSortedColumn ? handleClearSort : undefined, confirmLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), width: "narrow", children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "8px", p: "8px 4px", children: sortableColumns.map(function (column) { return (_jsx(SortRow, { column: column, currentDirection: getCurrentDirection(column), onCycle: handleCycle }, column.name)); }) }) }));
|
|
32
|
+
return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.sort", message: "Sort" }), onConfirm: activeSortedColumn ? handleClearSort : undefined, confirmLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), width: "narrow", ignoreClickOutside: true, children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "8px", p: "8px 4px", children: sortableColumns.map(function (column) { return (_jsx(SortRow, { column: column, currentDirection: getCurrentDirection(column), onCycle: handleCycle }, column.name)); }) }) }));
|
|
33
33
|
};
|
|
34
34
|
export default MobileSortModal;
|
|
@@ -63,7 +63,7 @@ export default {
|
|
|
63
63
|
title: 'Blocks/CommonGrid',
|
|
64
64
|
decorators: [withRedux]
|
|
65
65
|
};
|
|
66
|
-
export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(
|
|
66
|
+
export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(100), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName" })] })); };
|
|
67
67
|
ComplexWithPaginationAndRedux.story = {
|
|
68
68
|
name: 'Complex, with pagination and redux'
|
|
69
69
|
};
|
|
@@ -6,32 +6,29 @@ import { gridRowHeight, gridFooterHeight, gridButtonStripHeight, gridHeadHeight,
|
|
|
6
6
|
import styled, { x } from '@xstyled/styled-components';
|
|
7
7
|
import { th } from '@xstyled/system';
|
|
8
8
|
import CommonGrid from './CommonGrid';
|
|
9
|
-
export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position:
|
|
9
|
+
export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n z-index: 2;\n flex-shrink: 0;\n padding: ", ";\n width: 100%;\n height: ", "px;\n background-color: bgLightGray;\n\n @media print {\n display: none;\n }\n\n @media (min-width: 1024px) {\n position: relative;\n bottom: 0;\n margin-bottom: 0;\n }\n"], ["\n position: relative;\n z-index: 2;\n flex-shrink: 0;\n padding: ", ";\n width: 100%;\n height: ", "px;\n background-color: bgLightGray;\n\n @media print {\n display: none;\n }\n\n @media (min-width: 1024px) {\n position: relative;\n bottom: 0;\n margin-bottom: 0;\n }\n"])), function (_a) {
|
|
10
10
|
var withPagination = _a.withPagination;
|
|
11
11
|
return (withPagination ? '10px 0' : '0px');
|
|
12
12
|
}, function (_a) {
|
|
13
13
|
var withPagination = _a.withPagination;
|
|
14
14
|
return (withPagination ? gridFooterHeight : 0);
|
|
15
15
|
});
|
|
16
|
-
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"])));
|
|
17
|
-
export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height:
|
|
18
|
-
var withPagination = _a.withPagination;
|
|
19
|
-
return (withPagination ? gridFooterHeight : 0);
|
|
20
|
-
}, function (_a) {
|
|
16
|
+
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: 100svh;\n overflow: hidden;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow: visible;\n }\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: 100svh;\n overflow: hidden;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow: visible;\n }\n"])));
|
|
17
|
+
export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n min-height: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n\n @media (min-width: 1024px) {\n display: block;\n height: calc(100% - ", "px);\n flex: unset;\n min-height: unset;\n overflow: visible;\n }\n"], ["\n flex: 1;\n min-height: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n\n @media (min-width: 1024px) {\n display: block;\n height: calc(100% - ", "px);\n flex: unset;\n min-height: unset;\n overflow: visible;\n }\n"])), function (_a) {
|
|
21
18
|
var withPagination = _a.withPagination;
|
|
22
19
|
return (withPagination ? gridFooterHeight : 0);
|
|
23
20
|
});
|
|
24
21
|
export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: auto;\n padding: 10px;\n flex-wrap: wrap;\n z-index: 3;\n\n @media (min-width: 768px) {\n min-height: ", "px;\n padding: 18px 20px;\n }\n"], ["\n position: relative;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: auto;\n padding: 10px;\n flex-wrap: wrap;\n z-index: 3;\n\n @media (min-width: 768px) {\n min-height: ", "px;\n padding: 18px 20px;\n }\n"])), gridButtonStripHeight);
|
|
25
|
-
export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n
|
|
26
|
-
var withButtonStrip = _a.withButtonStrip;
|
|
27
|
-
return (withButtonStrip ? gridButtonStripHeight : 0);
|
|
28
|
-
}, th('fonts.primary'), gridRowHeight, function (_a) {
|
|
22
|
+
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: ", "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 border-top: 1px solid ", ";\n }\n\n & .filterRow {\n display: none;\n }\n\n @media (min-width: 1023px) {\n & .gridHead {\n height: ", "px;\n }\n & .filterRow {\n display: flex;\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 flex-grow: 1;\n }\n\n flex: 1;\n min-height: 0;\n\n @media (min-width: 1024px) {\n flex: unset;\n min-height: unset;\n height: calc(100% - ", "px);\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: auto;\n height: 100%;\n overflow-y: auto;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\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: 4px;\n padding-right: 4px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right,\n .sticky-left {\n background: white;\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 &:hover,\n &.checked,\n &.selected {\n background-color: red30;\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 z-index: 1;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\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 border-top: 1px solid ", ";\n }\n\n & .filterRow {\n display: none;\n }\n\n @media (min-width: 1023px) {\n & .gridHead {\n height: ", "px;\n }\n & .filterRow {\n display: flex;\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 flex-grow: 1;\n }\n\n flex: 1;\n min-height: 0;\n\n @media (min-width: 1024px) {\n flex: unset;\n min-height: unset;\n height: calc(100% - ", "px);\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: auto;\n height: 100%;\n overflow-y: auto;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\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: 4px;\n padding-right: 4px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right,\n .sticky-left {\n background: white;\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 &:hover,\n &.checked,\n &.selected {\n background-color: red30;\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 z-index: 1;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"])), th('fonts.primary'), gridRowHeight, function (_a) {
|
|
29
23
|
var hasGroups = _a.hasGroups;
|
|
30
24
|
return gridHeadHeight + (hasGroups ? gridFilterHeight : 0);
|
|
31
25
|
}, th('colors.lightGray6'), function (_a) {
|
|
32
26
|
var hasGroupsOrFilters = _a.hasGroupsOrFilters;
|
|
33
27
|
return gridHeadHeight + (hasGroupsOrFilters ? gridFilterHeight : 0);
|
|
34
28
|
}, th('fonts.primary'), function (_a) {
|
|
29
|
+
var withButtonStrip = _a.withButtonStrip;
|
|
30
|
+
return (withButtonStrip ? gridButtonStripHeight : 0);
|
|
31
|
+
}, function (_a) {
|
|
35
32
|
var theme = _a.theme;
|
|
36
33
|
return theme.colors.white;
|
|
37
34
|
});
|