@mailstep/design-system 0.7.47-beta.1 → 0.7.47-beta.10
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.js +2 -1
- package/ui/Blocks/CommonGrid/CommonGridContainer.js +1 -1
- package/ui/Blocks/CommonGrid/HoC/withProps.d.ts +3 -0
- package/ui/Blocks/CommonGrid/HoC/withProps.js +21 -0
- package/ui/Blocks/CommonGrid/components/ActionHead/ActionHead.d.ts +2 -2
- package/ui/Blocks/CommonGrid/components/ActionHead/ActionHead.js +8 -10
- package/ui/Blocks/CommonGrid/components/DataRow.d.ts +2 -4
- package/ui/Blocks/CommonGrid/components/DataRow.js +12 -62
- package/ui/Blocks/CommonGrid/components/FilterRow.d.ts +1 -1
- package/ui/Blocks/CommonGrid/components/FilterRow.js +7 -5
- package/ui/Blocks/CommonGrid/components/HeadRow.d.ts +2 -2
- package/ui/Blocks/CommonGrid/components/HeadRow.js +5 -7
- package/ui/Blocks/CommonGrid/components/Table.d.ts +9 -0
- package/ui/Blocks/CommonGrid/components/gridCells/IconButtonInCell.js +4 -10
- package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.d.ts +10 -5
- package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.js +47 -19
- package/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.d.ts +1 -6
- package/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.js +34 -16
- package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js +2 -4
- package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js +0 -4
- package/ui/Blocks/CommonGrid/styles.js +1 -1
- package/ui/Blocks/CommonGrid/types.d.ts +0 -1
- package/ui/Blocks/Modal/hooks/useModal.d.ts +2 -8
- package/ui/Blocks/Modal/hooks/useModal.js +5 -7
- package/ui/index.es.js +7049 -7111
- package/ui/index.umd.js +413 -445
- package/ui/Blocks/CommonGrid/components/ReadEditButtonCell/ReadEditButtonCell.d.ts +0 -6
- package/ui/Blocks/CommonGrid/components/ReadEditButtonCell/ReadEditButtonCell.js +0 -26
- package/ui/Blocks/CommonGrid/components/ReadEditButtonCell/index.d.ts +0 -2
- package/ui/Blocks/CommonGrid/components/ReadEditButtonCell/index.js +0 -2
|
@@ -8,20 +8,21 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
8
8
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
9
9
|
};
|
|
10
10
|
import { useCallback, useMemo } from 'react';
|
|
11
|
-
import
|
|
11
|
+
import withProps from '../HoC/withProps';
|
|
12
|
+
import { RowActionsCell } from '../components/gridCells';
|
|
12
13
|
import { EditReadPosition } from '../types';
|
|
13
|
-
/**
|
|
14
|
-
* Because in new design we are displaying lot of the controlls differently, including read and edit buttons in grid,
|
|
15
|
-
* easiest way to make all the definition changes is to just overwrite the here once, instead of modifying every single grid (33 instances atm).
|
|
16
|
-
* This will also allow to easily swap back to grid provided logic, if it becomes usable for redesigned grid or if design changes again
|
|
17
|
-
* */
|
|
18
14
|
var useEditReadAsColumn = function (props) {
|
|
19
|
-
var
|
|
15
|
+
var _a;
|
|
16
|
+
var onRowAction = props.onRowAction, actionColumnDefinition = props.actionColumnDefinition, columnsDefinitions = props.columnsDefinitions, gridSelectors = props.gridSelectors, gridActions = props.gridActions, onRowEditClick = props.onRowEditClick, onRowReadClick = props.onRowReadClick;
|
|
20
17
|
var modifiedActionColumnDefinition = useMemo(function () {
|
|
21
18
|
var _a;
|
|
22
19
|
if ((actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.forceCheckboxes) || ((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) {
|
|
23
20
|
// note: this also removes actions, because we render action trigger outside the grid anyway
|
|
24
|
-
return {
|
|
21
|
+
return {
|
|
22
|
+
flexBasis: (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.flexBasis) || 88,
|
|
23
|
+
forceCheckboxes: true,
|
|
24
|
+
addRowNumbers: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers
|
|
25
|
+
};
|
|
25
26
|
}
|
|
26
27
|
else if (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers) {
|
|
27
28
|
return { flexBasis: 40, addRowNumbers: true };
|
|
@@ -41,20 +42,27 @@ var useEditReadAsColumn = function (props) {
|
|
|
41
42
|
return onRowAction(id, field, value, rowData);
|
|
42
43
|
}
|
|
43
44
|
}, [onRowAction, onRowEditClick, onRowReadClick]);
|
|
44
|
-
|
|
45
|
-
var
|
|
45
|
+
var canRowEdit = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit) !== undefined;
|
|
46
|
+
var canRowRead = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead) !== undefined;
|
|
47
|
+
var stickTo = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.stickTo) || 'left';
|
|
48
|
+
var flexBasis = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.flexBasis) || 88;
|
|
49
|
+
var withCheckboxes = !!((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length) || (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.forceCheckboxes);
|
|
46
50
|
var modifiedColumnsDefinitions = useMemo(function () {
|
|
47
|
-
if (
|
|
48
|
-
var stickTo = actionColumnDefinition.stickTo || 'right';
|
|
51
|
+
if (canRowEdit || canRowRead || withCheckboxes) {
|
|
49
52
|
var editReadColumnDefinition = {
|
|
50
53
|
name: 'sticky',
|
|
51
|
-
flexBasis:
|
|
54
|
+
flexBasis: flexBasis,
|
|
52
55
|
filtering: false,
|
|
53
56
|
sorting: false,
|
|
54
57
|
sticky: true,
|
|
55
58
|
stickTo: stickTo,
|
|
56
59
|
alwaysOn: true,
|
|
57
|
-
cellComponent:
|
|
60
|
+
cellComponent: withProps({
|
|
61
|
+
actionColumnDefinition: actionColumnDefinition,
|
|
62
|
+
withCheckboxes: withCheckboxes,
|
|
63
|
+
uxState: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.uxState,
|
|
64
|
+
onUxChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.handleUxChange
|
|
65
|
+
})(RowActionsCell)
|
|
58
66
|
};
|
|
59
67
|
if (stickTo === EditReadPosition.Left) {
|
|
60
68
|
return __spreadArray([editReadColumnDefinition], columnsDefinitions, true);
|
|
@@ -66,10 +74,20 @@ var useEditReadAsColumn = function (props) {
|
|
|
66
74
|
else {
|
|
67
75
|
return columnsDefinitions;
|
|
68
76
|
}
|
|
69
|
-
}, [
|
|
77
|
+
}, [
|
|
78
|
+
flexBasis,
|
|
79
|
+
stickTo,
|
|
80
|
+
canRowEdit,
|
|
81
|
+
canRowRead,
|
|
82
|
+
columnsDefinitions,
|
|
83
|
+
withCheckboxes,
|
|
84
|
+
gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.uxState,
|
|
85
|
+
actionColumnDefinition,
|
|
86
|
+
gridActions === null || gridActions === void 0 ? void 0 : gridActions.handleUxChange
|
|
87
|
+
]);
|
|
70
88
|
return {
|
|
71
89
|
columnsDefinitions: modifiedColumnsDefinitions,
|
|
72
|
-
actionColumnDefinition:
|
|
90
|
+
actionColumnDefinition: actionColumnDefinition,
|
|
73
91
|
onRowAction: modifiedOnRowAction
|
|
74
92
|
};
|
|
75
93
|
};
|
|
@@ -9,10 +9,8 @@ import { columnDefinitions, enumColumn } from '../utils/columnDefinition';
|
|
|
9
9
|
import { ReduxGrid, createRandomData, enumValues, gridDummyActions } from '../utils/utils';
|
|
10
10
|
import withRedux from '../utils/withRedux';
|
|
11
11
|
var ActionColumnButtons = {
|
|
12
|
-
flexBasis:
|
|
13
|
-
|
|
14
|
-
stickTo: 'left',
|
|
15
|
-
canRowEdit: function (row) { return row.enumColumn !== 'option C'; }
|
|
12
|
+
flexBasis: 80,
|
|
13
|
+
forceCheckboxes: true
|
|
16
14
|
};
|
|
17
15
|
var FilterSetter = function (_a) {
|
|
18
16
|
var gridActions = _a.gridActions;
|
|
@@ -54,7 +54,6 @@ export var columnDefinitions = [
|
|
|
54
54
|
},
|
|
55
55
|
{
|
|
56
56
|
name: 'dateColumn',
|
|
57
|
-
group: 'group1',
|
|
58
57
|
title: 'Date Column',
|
|
59
58
|
flexBasis: 160,
|
|
60
59
|
filtering: true,
|
|
@@ -66,7 +65,6 @@ export var columnDefinitions = [
|
|
|
66
65
|
},
|
|
67
66
|
{
|
|
68
67
|
name: 'boolColumn',
|
|
69
|
-
group: 'group1',
|
|
70
68
|
title: 'Bool Column',
|
|
71
69
|
flexBasis: 160,
|
|
72
70
|
filtering: true,
|
|
@@ -78,7 +76,6 @@ export var columnDefinitions = [
|
|
|
78
76
|
},
|
|
79
77
|
{
|
|
80
78
|
name: 'advancedColumn',
|
|
81
|
-
group: 'group2',
|
|
82
79
|
title: 'Advanced Column',
|
|
83
80
|
flexBasis: 160,
|
|
84
81
|
formatRowValue: function (row) {
|
|
@@ -87,7 +84,6 @@ export var columnDefinitions = [
|
|
|
87
84
|
},
|
|
88
85
|
{
|
|
89
86
|
name: 'complexColumn',
|
|
90
|
-
group: 'group2',
|
|
91
87
|
title: 'Complex Column',
|
|
92
88
|
flexBasis: 350,
|
|
93
89
|
cellComponent: ComplexCell,
|
|
@@ -22,7 +22,7 @@ export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3
|
|
|
22
22
|
return (withPagination ? gridFooterHeight : 0);
|
|
23
23
|
});
|
|
24
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
|
|
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: 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 .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\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: 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 .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\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) {
|
|
@@ -148,7 +148,6 @@ export type ActionColumn = ColumnBaseProps & {
|
|
|
148
148
|
canRowRead?: boolean | ((row: any) => boolean);
|
|
149
149
|
createLink?: (params?: object) => string;
|
|
150
150
|
forceCheckboxes?: boolean;
|
|
151
|
-
checkAllPosition?: 'top' | 'bottom';
|
|
152
151
|
stickTo?: StickTo;
|
|
153
152
|
addRowNumbers?: boolean;
|
|
154
153
|
addRowNumbersLabel?: string;
|
|
@@ -1,8 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
initialIsOpen?: boolean;
|
|
4
|
-
onCloseModal?: () => void;
|
|
5
|
-
};
|
|
6
|
-
/** @TODO This breaking change has to be fixed in WHM */
|
|
7
|
-
export declare const useModal: <TData = ModalData>(props?: UseModalProps) => ControlProps<TData>;
|
|
8
|
-
export {};
|
|
1
|
+
import { ControlProps, ModalData } from '../types';
|
|
2
|
+
export declare const useModal: <TData = ModalData>(initialState?: boolean) => ControlProps<TData>;
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import { useCallback, useState } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var _a =
|
|
5
|
-
var
|
|
6
|
-
var _d = useState(), data = _d[0], setData = _d[1];
|
|
2
|
+
export var useModal = function (initialState) {
|
|
3
|
+
if (initialState === void 0) { initialState = false; }
|
|
4
|
+
var _a = useState(initialState), isOpen = _a[0], setIsOpen = _a[1];
|
|
5
|
+
var _b = useState(), data = _b[0], setData = _b[1];
|
|
7
6
|
var onClose = useCallback(function () {
|
|
8
7
|
setIsOpen(false);
|
|
9
8
|
setData(undefined);
|
|
10
|
-
|
|
11
|
-
}, [onCloseModal]);
|
|
9
|
+
}, []);
|
|
12
10
|
var onOpen = useCallback(function (data) {
|
|
13
11
|
data && setData(data);
|
|
14
12
|
setIsOpen(true);
|