@mailstep/design-system 0.7.47-beta.4 → 0.7.47-beta.6
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 +1 -0
- package/ui/Blocks/CommonGrid/components/FilterRow.js +2 -2
- package/ui/Blocks/CommonGrid/components/HeadRow.js +3 -5
- package/ui/Blocks/CommonGrid/components/gridCells/IconButtonInCell.js +1 -1
- package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.js +1 -1
- package/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.js +1 -2
- package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js +3 -3
- package/ui/Blocks/CommonGrid/styles.js +1 -1
- package/ui/Blocks/CommonGrid/types.d.ts +0 -1
- package/ui/index.es.js +7105 -7115
- package/ui/index.umd.js +396 -397
package/package.json
CHANGED
|
@@ -62,6 +62,7 @@ var CommonGrid = function (_a) {
|
|
|
62
62
|
var commonGridRef = React.useCallback(function (node) {
|
|
63
63
|
gridBoxRef.current = node;
|
|
64
64
|
}, []);
|
|
65
|
+
console.log(actionColumnDefinition);
|
|
65
66
|
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
67
|
rowsData &&
|
|
67
68
|
displayColumnsDefinitions &&
|
|
@@ -26,10 +26,10 @@ var FilterRow = function (_a) {
|
|
|
26
26
|
return actionColumn ? __assign({}, getActionCellSizeProps(actionColumn)) : {};
|
|
27
27
|
}, [actionColumn]);
|
|
28
28
|
var _e = useToggleAllCheckbox(rowsData, uxState, handleUxChange), allChecked = _e[0], toggleCheckbox = _e[1];
|
|
29
|
-
var displayCheckbox = (
|
|
29
|
+
var displayCheckbox = ((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes);
|
|
30
30
|
var displayRowNumberLabel = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers;
|
|
31
31
|
var rowsNumberLabel = (_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbersLabel) !== null && _c !== void 0 ? _c : '#';
|
|
32
|
-
return (_jsxs(Row, { className: "filterRow", children: [displayCheckbox && (_jsx(Cell, { className: "cell sticky sticky-left", style: actionColumnStyle, children: _jsx(Checkbox, { checked: allChecked, onChange: toggleCheckbox, label: "" }, "check-all") })), displayRowNumberLabel && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx("div", { children: rowsNumberLabel }) })), !!(!displayCheckbox && !displayRowNumberLabel && actionColumn) && (_jsx(Cell, { className: "cell", style: actionColumnStyle }
|
|
32
|
+
return (_jsxs(Row, { className: "filterRow", children: [displayCheckbox && (_jsx(Cell, { className: "cell sticky sticky-left", style: actionColumnStyle, children: _jsx(Checkbox, { checked: allChecked, onChange: toggleCheckbox, label: "" }, "check-all") })), displayRowNumberLabel && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx("div", { children: rowsNumberLabel }) })), !!(!displayCheckbox && !displayRowNumberLabel && actionColumn) && (_jsx(Cell, { className: "cell sticky sticky-left", style: actionColumnStyle })), columns
|
|
33
33
|
.filter(function (column) { return !column.sticky; })
|
|
34
34
|
.map(function (column, index) { return (_jsx(ColumnFilterCell, { column: column, onChange: handleOnChange, value: get([getFilterName(column), 'value'], filterValues), others: get([getFilterName(column), 'others'], filterValues), displayColumnWidth: displayColumnsWidth[column.name], filters: filters, comparators: comparators, group: groups === null || groups === void 0 ? void 0 : groups[index] }, index)); })] }));
|
|
35
35
|
};
|
|
@@ -24,20 +24,18 @@ var getStickyComponent = function (columns, stickyTo, displayColumnsWidth) {
|
|
|
24
24
|
});
|
|
25
25
|
};
|
|
26
26
|
var HeadRow = function (_a) {
|
|
27
|
-
var _b;
|
|
28
|
-
var
|
|
29
|
-
var _d = useState(false), showUIElements = _d[0], setShowUIElements = _d[1];
|
|
27
|
+
var columns = _a.columns, actionColumn = _a.actionColumn, onAddSort = _a.onAddSort, handleDragEnd = _a.handleDragEnd, _b = _a.sortingValues, sortingValues = _b === void 0 ? [] : _b, displayColumnsWidth = _a.displayColumnsWidth, columnLayout = _a.columnLayout, handleResizeDrag = _a.handleResizeDrag, groups = _a.groups;
|
|
28
|
+
var _c = useState(false), showUIElements = _c[0], setShowUIElements = _c[1];
|
|
30
29
|
useEffect(function () {
|
|
31
30
|
setShowUIElements(true);
|
|
32
31
|
}, []);
|
|
33
|
-
var
|
|
32
|
+
var _d = useState(false), isDragDisabled = _d[0], setIsDragDisabled = _d[1];
|
|
34
33
|
var onResizeOver = React.useCallback(function () {
|
|
35
34
|
setIsDragDisabled(true);
|
|
36
35
|
}, [setIsDragDisabled]);
|
|
37
36
|
var onResizeOut = React.useCallback(function () {
|
|
38
37
|
setIsDragDisabled(false);
|
|
39
38
|
}, [setIsDragDisabled]);
|
|
40
|
-
var displayReadEditCell = ((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes);
|
|
41
39
|
var onResize = React.useCallback(function (name) { return function (width) {
|
|
42
40
|
handleResizeDrag === null || handleResizeDrag === void 0 ? void 0 : handleResizeDrag(name, width);
|
|
43
41
|
}; }, [handleResizeDrag]);
|
|
@@ -5,5 +5,5 @@ import Spinner from '../../../../Elements/Spinner/Spinner';
|
|
|
5
5
|
import { x } from '@xstyled/styled-components';
|
|
6
6
|
export var IconButtonInCell = function (_a) {
|
|
7
7
|
var icon = _a.icon, isLoading = _a.isLoading, onClick = _a.onClick, linkTo = _a.linkTo;
|
|
8
|
-
return (_jsx(_Fragment, { children: isLoading ? (_jsx(Spinner, { variant: "sm" })) : linkTo ? (_jsx(ReactLink, { to: linkTo, "data-cy": "".concat(icon, "IconBtn"), children: _jsx(Icon, { icon: icon || 'warning', size: "16px", fill: "blue2" }) })) : (_jsx(x.span, { onClick: onClick, "data-cy": "".concat(icon, "IconBtn"), cursor: "pointer", children: _jsx(Icon, { icon: icon || 'warning', size: "16px", fill: "blue2" }) })) }));
|
|
8
|
+
return (_jsx(_Fragment, { children: isLoading ? (_jsx(Spinner, { variant: "sm" })) : linkTo ? (_jsx(ReactLink, { to: linkTo, "data-cy": "".concat(icon, "IconBtn"), children: _jsx(Icon, { icon: icon || 'warning', size: "16px", fill: "blue2" }) })) : (_jsx(x.span, { onClick: onClick, "data-cy": "".concat(icon, "IconBtn"), cursor: "pointer", h: "100%", w: "100%", display: "flex", alignItems: "center", justifyContent: "center", children: _jsx(Icon, { icon: icon || 'warning', size: "16px", fill: "blue2" }) })) }));
|
|
9
9
|
};
|
|
@@ -58,7 +58,7 @@ export var RowActionsCell = function (_a) {
|
|
|
58
58
|
var actions = useMemo(function () {
|
|
59
59
|
var actionOptions = [];
|
|
60
60
|
if (withCheckboxes) {
|
|
61
|
-
actionOptions.push(_jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" }));
|
|
61
|
+
actionOptions.push(_jsx(x.div, { w: "100%", h: "100%", display: "flex", children: _jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" }) }));
|
|
62
62
|
}
|
|
63
63
|
if (canEdit) {
|
|
64
64
|
actionOptions.push(_jsx(IconButtonInCell, { icon: "pen", onClick: handleOnClick, linkTo: linkTo }, "edit"));
|
|
@@ -21,7 +21,6 @@ var useEditReadAsColumn = function (props) {
|
|
|
21
21
|
flexBasis: (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.flexBasis) || 88,
|
|
22
22
|
forceCheckboxes: true,
|
|
23
23
|
addRowNumbers: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers,
|
|
24
|
-
checkAllPosition: 'top'
|
|
25
24
|
};
|
|
26
25
|
}
|
|
27
26
|
else if (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers) {
|
|
@@ -75,7 +74,7 @@ var useEditReadAsColumn = function (props) {
|
|
|
75
74
|
}, [flexBasis, stickTo, canRowEdit, canRowRead, columnsDefinitions]);
|
|
76
75
|
return {
|
|
77
76
|
columnsDefinitions: modifiedColumnsDefinitions,
|
|
78
|
-
actionColumnDefinition:
|
|
77
|
+
actionColumnDefinition: actionColumnDefinition,
|
|
79
78
|
onRowAction: modifiedOnRowAction
|
|
80
79
|
};
|
|
81
80
|
};
|
|
@@ -9,11 +9,11 @@ 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:
|
|
12
|
+
flexBasis: 80,
|
|
13
13
|
canRowRead: true,
|
|
14
14
|
stickTo: 'left',
|
|
15
|
-
forceCheckboxes:
|
|
16
|
-
canRowEdit:
|
|
15
|
+
forceCheckboxes: false,
|
|
16
|
+
canRowEdit: true
|
|
17
17
|
};
|
|
18
18
|
var FilterSetter = function (_a) {
|
|
19
19
|
var gridActions = _a.gridActions;
|
|
@@ -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 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 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 &.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
|
|
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 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 &.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 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 &.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;
|