@mailstep/design-system 0.8.12 → 0.8.14
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/CommonGridContainer.js +3 -10
- package/ui/Blocks/CommonGrid/HoC/withReduxActions.js +0 -1
- package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.d.ts +1 -3
- package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.js +7 -14
- package/ui/Blocks/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.d.ts +0 -1
- package/ui/Blocks/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.js +7 -27
- package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.d.ts +0 -1
- package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.js +5 -17
- package/ui/Blocks/CommonGrid/components/GridInfo/index.js +0 -2
- package/ui/Blocks/CommonGrid/components/QuickFilter/QuickFilter.d.ts +1 -1
- package/ui/Blocks/CommonGrid/components/QuickFilter/QuickFilter.js +2 -2
- package/ui/Blocks/CommonGrid/hooks/useManageColumn.js +1 -1
- package/ui/Blocks/CommonGrid/hooks/useQuickFilter.d.ts +2 -2
- package/ui/Blocks/CommonGrid/hooks/useQuickFilter.js +2 -2
- package/ui/Blocks/CommonGrid/store/index.d.ts +6 -4
- package/ui/Blocks/CommonGrid/store/index.js +2 -9
- package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.d.ts +0 -18
- package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js +9 -37
- package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.d.ts +0 -2
- package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js +14 -18
- package/ui/Blocks/CommonGrid/styles.d.ts +0 -1
- package/ui/Blocks/CommonGrid/styles.js +3 -6
- package/ui/Blocks/CommonGrid/types.d.ts +1 -1
- package/ui/Blocks/CommonGrid/utils/index.d.ts +0 -2
- package/ui/Blocks/CommonGrid/utils/index.js +2 -10
- package/ui/Elements/DropdownMenu/components/MenuItem.js +1 -1
- package/ui/Elements/Icon/icons/index.d.ts +0 -2
- package/ui/Elements/Icon/icons/index.js +0 -2
- package/ui/index.es.js +16062 -16884
- package/ui/index.umd.js +454 -494
- package/ui/utils/translations.js +1 -1
- package/ui/Blocks/CommonGrid/components/MobileFilterDropdown.d.ts +0 -4
- package/ui/Blocks/CommonGrid/components/MobileFilterDropdown.js +0 -13
- package/ui/Blocks/CommonGrid/components/MobileFilterModal.d.ts +0 -20
- package/ui/Blocks/CommonGrid/components/MobileFilterModal.js +0 -69
- package/ui/Blocks/CommonGrid/components/MobileSortModal.d.ts +0 -13
- package/ui/Blocks/CommonGrid/components/MobileSortModal.js +0 -34
- package/ui/Elements/Icon/icons/Filter.d.ts +0 -4
- package/ui/Elements/Icon/icons/Filter.js +0 -13
- package/ui/Elements/Icon/icons/Sort.d.ts +0 -4
- package/ui/Elements/Icon/icons/Sort.js +0 -13
|
@@ -21,17 +21,14 @@ export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3
|
|
|
21
21
|
var withPagination = _a.withPagination;
|
|
22
22
|
return (withPagination ? gridFooterHeight : 0);
|
|
23
23
|
});
|
|
24
|
-
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: ", "px;\n flex-wrap: wrap;\n z-index: 3;\n
|
|
25
|
-
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 border-top: 1px solid ", ";\n }\n
|
|
24
|
+
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: ", "px;\n flex-wrap: wrap;\n z-index: 3;\n"], ["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: ", "px;\n flex-wrap: wrap;\n z-index: 3;\n"])), gridButtonStripHeight);
|
|
25
|
+
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 border-top: 1px solid ", ";\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 & .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: 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 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 border-top: 1px solid ", ";\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 & .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: 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"])), function (_a) {
|
|
26
26
|
var withButtonStrip = _a.withButtonStrip;
|
|
27
27
|
return (withButtonStrip ? gridButtonStripHeight : 0);
|
|
28
28
|
}, th('fonts.primary'), gridRowHeight, function (_a) {
|
|
29
29
|
var hasGroupsOrFilters = _a.hasGroupsOrFilters;
|
|
30
30
|
return gridHeadHeight + (hasGroupsOrFilters ? gridFilterHeight : 0);
|
|
31
|
-
}, th('colors.lightGray6'), function (_a) {
|
|
32
|
-
var hasGroups = _a.hasGroups;
|
|
33
|
-
return gridHeadHeight + (hasGroups ? gridFilterHeight : 0);
|
|
34
|
-
}, th('fonts.primary'), function (_a) {
|
|
31
|
+
}, th('colors.lightGray6'), th('fonts.primary'), function (_a) {
|
|
35
32
|
var theme = _a.theme;
|
|
36
33
|
return theme.colors.white;
|
|
37
34
|
});
|
|
@@ -128,6 +128,7 @@ export type ColumnDefinition<ColumnName extends string = string> = ColumnBasePro
|
|
|
128
128
|
flexShrink?: number;
|
|
129
129
|
fixedSize?: boolean;
|
|
130
130
|
alwaysOn?: boolean;
|
|
131
|
+
alwaysOff?: boolean;
|
|
131
132
|
defaultHidden?: boolean;
|
|
132
133
|
sticky?: boolean;
|
|
133
134
|
stickTo?: StickTo;
|
|
@@ -228,7 +229,6 @@ export type GridActionsType = {
|
|
|
228
229
|
setFilters?: (filters: Filtering) => void;
|
|
229
230
|
resetFilters?: () => void;
|
|
230
231
|
addSorting?: (column: string, direction: SortingValueType) => void;
|
|
231
|
-
resetSorting?: () => void;
|
|
232
232
|
openConfigForm?: () => void;
|
|
233
233
|
closeConfigForm?: () => void;
|
|
234
234
|
clearSettings?: () => void;
|
|
@@ -19,7 +19,5 @@ export declare const getGroups: (columns: ColumnDefinition[]) => Group[];
|
|
|
19
19
|
export declare const getGroupClassNames: (group?: Group) => string;
|
|
20
20
|
export declare const getStickyCollClassNames: (sticky: boolean, stickTo?: StickTo) => string;
|
|
21
21
|
export declare const getFilters: (optimizeFilters: boolean) => FiltersConfig;
|
|
22
|
-
/** Returns true when a filter value should be counted / applied */
|
|
23
|
-
export declare const isFilterActive: (value: any) => boolean;
|
|
24
22
|
export declare const checksColumnsOrder: (colsOrder: string[], columnsDefinitions: ColumnDefinition[]) => void;
|
|
25
23
|
export {};
|
|
@@ -26,6 +26,8 @@ export var isColumnOn = function (column, columnConfig) {
|
|
|
26
26
|
var _a;
|
|
27
27
|
if (column.alwaysOn)
|
|
28
28
|
return true;
|
|
29
|
+
if (column.alwaysOff)
|
|
30
|
+
return false;
|
|
29
31
|
var isHidden = (_a = columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig[column.name]) === null || _a === void 0 ? void 0 : _a.isHidden;
|
|
30
32
|
if (typeof isHidden === 'boolean')
|
|
31
33
|
return !isHidden; // isHidden is defined/stored => use user value
|
|
@@ -74,16 +76,6 @@ export var getFilters = function (optimizeFilters) {
|
|
|
74
76
|
}
|
|
75
77
|
return filters;
|
|
76
78
|
};
|
|
77
|
-
/** Returns true when a filter value should be counted / applied */
|
|
78
|
-
export var isFilterActive = function (value) {
|
|
79
|
-
if (value == null)
|
|
80
|
-
return false;
|
|
81
|
-
if (Array.isArray(value))
|
|
82
|
-
return !!value.length;
|
|
83
|
-
if (typeof value === 'object')
|
|
84
|
-
return value.value != null && value.value !== '';
|
|
85
|
-
return value !== '';
|
|
86
|
-
};
|
|
87
79
|
export var checksColumnsOrder = function (colsOrder, columnsDefinitions) {
|
|
88
80
|
var stickyRightColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo === 'right'; });
|
|
89
81
|
var stickyLeftColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo !== 'right'; });
|
|
@@ -18,7 +18,7 @@ import { useCallback } from 'react';
|
|
|
18
18
|
import { useLocation } from 'react-router';
|
|
19
19
|
import Link from '../../Link/Link';
|
|
20
20
|
import styled, { css } from '@xstyled/styled-components';
|
|
21
|
-
var StyledLink = styled(Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n border-top: ", ";\n padding-top: ", ";\n color: typoPrimary;\n
|
|
21
|
+
var StyledLink = styled(Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n border-top: ", ";\n padding-top: ", ";\n color: typoPrimary;\n\n :hover > * {\n color: typoPrimary;\n background-color: bgLightGray1;\n border-radius: 6px;\n }\n ", "\n"], ["\n display: block;\n border-top: ", ";\n padding-top: ", ";\n color: typoPrimary;\n\n :hover > * {\n color: typoPrimary;\n background-color: bgLightGray1;\n border-radius: 6px;\n }\n ", "\n"])), function (_a) {
|
|
22
22
|
var $hasSeparator = _a.$hasSeparator;
|
|
23
23
|
return ($hasSeparator ? '1px solid #D2D8DF' : 'none');
|
|
24
24
|
}, function (_a) {
|