@mailstep/design-system 0.7.47-beta.1 → 0.7.47-beta.3
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 +1 -1
- 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 +1 -1
- package/ui/Blocks/CommonGrid/components/DataRow.js +5 -55
- package/ui/Blocks/CommonGrid/components/ReadEditButtonCell/ReadEditButtonCell.d.ts +2 -2
- package/ui/Blocks/CommonGrid/components/ReadEditButtonCell/ReadEditButtonCell.js +5 -5
- 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 +7 -1
- package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.js +31 -10
- package/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.d.ts +1 -6
- package/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.js +15 -12
- package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js +1 -0
- package/ui/Blocks/CommonGrid/styles.js +1 -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 +12077 -12140
- package/ui/index.umd.js +465 -495
package/package.json
CHANGED
|
@@ -66,6 +66,6 @@ var CommonGridContainer = function (props) {
|
|
|
66
66
|
onClose: onClose
|
|
67
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;
|
|
68
68
|
var _k = usePresetState(), isPresetsModalOpen = _k.isPresetsModalOpen, onClosePresetsModal = _k.onClosePresetsModal, onOpenPresetsModal = _k.onOpenPresetsModal, setSelectedPresetName = _k.setSelectedPresetName, selectedPresetName = _k.selectedPresetName;
|
|
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,
|
|
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, actionOptions: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions, 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 })] }));
|
|
70
70
|
};
|
|
71
71
|
export default CommonGridContainer;
|
|
@@ -2,11 +2,11 @@ import { GridActionsType, GridSelectorsType, OnBatchActionFn, RowProps, ActionCo
|
|
|
2
2
|
type Props = {
|
|
3
3
|
gridActions: GridActionsType;
|
|
4
4
|
gridSelectors: GridSelectorsType;
|
|
5
|
-
|
|
5
|
+
actionOptions?: ActionColumn['actionOptions'];
|
|
6
6
|
onBatchAction?: OnBatchActionFn;
|
|
7
7
|
rowsData: RowProps[];
|
|
8
8
|
processCheckedValues?: () => void;
|
|
9
9
|
processCheckedValuesTitle?: string;
|
|
10
10
|
};
|
|
11
|
-
declare const ActionHead: ({ gridActions, gridSelectors,
|
|
11
|
+
declare const ActionHead: ({ gridActions, gridSelectors, actionOptions, onBatchAction, rowsData, processCheckedValues, processCheckedValuesTitle }: Props) => JSX.Element;
|
|
12
12
|
export default ActionHead;
|
|
@@ -17,12 +17,11 @@ var StyledText = styled.span(templateObject_3 || (templateObject_3 = __makeTempl
|
|
|
17
17
|
var ContentWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
18
18
|
var ButtonsWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-left: 10px;\n\n & > * {\n margin-left: 10px;\n }\n"], ["\n display: flex;\n align-items: center;\n margin-left: 10px;\n\n & > * {\n margin-left: 10px;\n }\n"])));
|
|
19
19
|
var ActionHead = function (_a) {
|
|
20
|
-
var
|
|
21
|
-
var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, actionColumn = _a.actionColumn, onBatchAction = _a.onBatchAction, rowsData = _a.rowsData, processCheckedValues = _a.processCheckedValues, processCheckedValuesTitle = _a.processCheckedValuesTitle;
|
|
20
|
+
var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, actionOptions = _a.actionOptions, onBatchAction = _a.onBatchAction, rowsData = _a.rowsData, processCheckedValues = _a.processCheckedValues, processCheckedValuesTitle = _a.processCheckedValuesTitle;
|
|
22
21
|
var handleUxChange = (gridActions || {}).handleUxChange;
|
|
23
|
-
var
|
|
24
|
-
var
|
|
25
|
-
var
|
|
22
|
+
var _b = (gridSelectors || {}).uxState, uxState = _b === void 0 ? {} : _b;
|
|
23
|
+
var _c = useToggleAllCheckbox(rowsData, uxState, handleUxChange), checked = _c[0], toggleCheckbox = _c[1];
|
|
24
|
+
var _d = useGridActionTrigger(rowsData, uxState, actionOptions, onBatchAction), enabledActions = _d[0], onSubmit = _d[1];
|
|
26
25
|
var checkedRowsCount = Object.keys((uxState === null || uxState === void 0 ? void 0 : uxState.checkedRows) || []).length;
|
|
27
26
|
var checkAll = useCallback(function () {
|
|
28
27
|
if (!checked) {
|
|
@@ -30,21 +29,20 @@ var ActionHead = function (_a) {
|
|
|
30
29
|
}
|
|
31
30
|
}, [checked, toggleCheckbox]);
|
|
32
31
|
var actionsOptions = useMemo(function () {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
return actionColumn.actionOptions.map(function (option) { return ({
|
|
32
|
+
if (actionOptions === null || actionOptions === void 0 ? void 0 : actionOptions.length) {
|
|
33
|
+
return actionOptions.map(function (option) { return ({
|
|
36
34
|
title: option.label,
|
|
37
35
|
onClick: function () { return onSubmit(option.value); },
|
|
38
36
|
link: '#'
|
|
39
37
|
}); });
|
|
40
38
|
}
|
|
41
39
|
return [];
|
|
42
|
-
}, [
|
|
40
|
+
}, [actionOptions, onSubmit]);
|
|
43
41
|
return (_jsx(Wrap, { children: checkedRowsCount > 0 && (_jsx(ActionsWrap, { children: _jsxs(ContentWrap, { children: [_jsx(StyledText, { children: i18n._({
|
|
44
42
|
id: 'dataGrid.checkedRowsCount',
|
|
45
43
|
message: "Selected {checkedRowsCount} items",
|
|
46
44
|
values: { checkedRowsCount: checkedRowsCount }
|
|
47
|
-
}) }), _jsxs(ButtonsWrap, { children: [_jsx(Button, { type: "button", onClick: checkAll, appearance: "secondary", variant: "default", "data-cy": "checkAllBtn", disabled: checked, children: _jsx(Trans, { id: "dataGrid.checkAll", message: "Check all" }) }), processCheckedValues && (_jsx(Button, { type: "button", onClick: processCheckedValues, appearance: "primary", variant: "default", "data-cy": "exportBtn", disabled: !rowsData.length, children: processCheckedValuesTitle
|
|
45
|
+
}) }), _jsxs(ButtonsWrap, { children: [_jsx(Button, { type: "button", onClick: checkAll, appearance: "secondary", variant: "default", "data-cy": "checkAllBtn", disabled: checked, children: _jsx(Trans, { id: "dataGrid.checkAll", message: "Check all" }) }), processCheckedValues && (_jsx(Button, { type: "button", onClick: processCheckedValues, appearance: "primary", variant: "default", "data-cy": "exportBtn", disabled: !rowsData.length, children: processCheckedValuesTitle || _jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" }) })), (actionOptions === null || actionOptions === void 0 ? void 0 : actionOptions.length) && (_jsx(ButtonMore, { items: actionsOptions, disabled: !enabledActions.length || !rowsData.length, dropdownPosition: "top" }))] })] }) })) }));
|
|
48
46
|
};
|
|
49
47
|
export default ActionHead;
|
|
50
48
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ColumnDefinition, ActionColumn, RowProps, UxState, GridSelectorsType, Group } from '../types';
|
|
1
|
+
import type { ColumnDefinition, ActionColumn, RowProps, UxState, GridSelectorsType, Group } from '../types';
|
|
2
2
|
type DataRowProps = {
|
|
3
3
|
columns: ColumnDefinition[];
|
|
4
4
|
actionColumn?: ActionColumn;
|
|
@@ -9,61 +9,18 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
12
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
13
|
import React from 'react';
|
|
25
|
-
import { Link } from 'react-router-dom';
|
|
26
|
-
import Button from '../../../Elements/Button/Button';
|
|
27
|
-
import Checkbox from '../../../Forms/Checkbox';
|
|
28
14
|
import { rowClassSymbol } from '../types';
|
|
29
15
|
import { getActionCellSizeProps } from '../utils';
|
|
30
|
-
import EditIcon from './icons/Edit';
|
|
31
|
-
import EyeOpenIcon from './icons/EyeOpen';
|
|
32
16
|
import { x } from '@xstyled/styled-components';
|
|
33
|
-
import { isFunction } from 'lodash/fp';
|
|
34
17
|
import MemoDataCell from './DataCell';
|
|
35
18
|
import { Cell, StyledDataRow } from './Table';
|
|
36
19
|
import { useTimeMeasurement } from './utils';
|
|
37
|
-
var EmptySpan = function (_a) {
|
|
38
|
-
var children = _a.children, props = __rest(_a, ["children"]);
|
|
39
|
-
return _jsx("span", __assign({}, props, { children: children }));
|
|
40
|
-
};
|
|
41
20
|
var DataRow = function (_a) {
|
|
42
|
-
var _b
|
|
21
|
+
var _b;
|
|
43
22
|
var columns = _a.columns, actionColumn = _a.actionColumn, rowData = _a.rowData, rowIndex = _a.rowIndex, uxState = _a.uxState, allowRowSelect = _a.allowRowSelect, allowRowSelectOnAction = _a.allowRowSelectOnAction, onUxChange = _a.onUxChange, onRowEditClick = _a.onRowEditClick, onRowReadClick = _a.onRowReadClick, onRowClick = _a.onRowClick, onRowAction = _a.onRowAction, displayColumnsWidth = _a.displayColumnsWidth, groups = _a.groups, isEven = _a.isEven;
|
|
44
23
|
var isChecked = !!((_b = uxState.checkedRows) === null || _b === void 0 ? void 0 : _b[rowData.id]);
|
|
45
|
-
var onCheckboxChange = React.useCallback(function () {
|
|
46
|
-
var checkedRows = __assign({}, (uxState.checkedRows || {}));
|
|
47
|
-
if (!isChecked) {
|
|
48
|
-
checkedRows[rowData.id] = true;
|
|
49
|
-
}
|
|
50
|
-
else {
|
|
51
|
-
delete checkedRows[rowData.id];
|
|
52
|
-
}
|
|
53
|
-
onUxChange && onUxChange('checkedRows', checkedRows);
|
|
54
|
-
}, [onUxChange, isChecked, uxState, rowData]);
|
|
55
|
-
var handleEditClick = React.useCallback(function () {
|
|
56
|
-
if (onRowEditClick)
|
|
57
|
-
onRowEditClick(rowData.id, rowData);
|
|
58
|
-
if (onUxChange && allowRowSelectOnAction)
|
|
59
|
-
onUxChange('selectedRow', rowData.id);
|
|
60
|
-
}, [onRowEditClick, rowData]);
|
|
61
|
-
var handleReadClick = React.useCallback(function () {
|
|
62
|
-
if (onRowReadClick)
|
|
63
|
-
onRowReadClick(rowData.id, rowData);
|
|
64
|
-
if (onUxChange && allowRowSelectOnAction)
|
|
65
|
-
onUxChange('selectedRow', rowData.id);
|
|
66
|
-
}, [onRowReadClick, rowData]);
|
|
67
24
|
var handleRowAction = React.useCallback(function (id, field, value, rowData) {
|
|
68
25
|
if (onRowAction)
|
|
69
26
|
onRowAction(id, field, value, rowData);
|
|
@@ -82,14 +39,7 @@ var DataRow = function (_a) {
|
|
|
82
39
|
},
|
|
83
40
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
84
41
|
[onRowClick, onUxChange, rowData]);
|
|
85
|
-
var
|
|
86
|
-
var RowActionComponent = ((actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.createLink) ? Link : EmptySpan);
|
|
87
|
-
var rowActionProps = React.useCallback(function (mode) {
|
|
88
|
-
var _a;
|
|
89
|
-
return (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.createLink)
|
|
90
|
-
? { to: (_a = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.createLink) === null || _a === void 0 ? void 0 : _a.call(actionColumn, { mode: mode, id: rowData.id }) }
|
|
91
|
-
: { onClick: { read: handleReadClick, edit: handleEditClick }[mode] };
|
|
92
|
-
}, [actionColumn, handleReadClick, handleEditClick]);
|
|
42
|
+
var _c = useTimeMeasurement({ handleRowClick: handleRowClick }), handleMouseDown = _c.handleMouseDown, handleMouseUp = _c.handleMouseUp;
|
|
93
43
|
var rowClassName = React.useMemo(function () {
|
|
94
44
|
var classes = ['dataRow'];
|
|
95
45
|
if (isChecked)
|
|
@@ -101,10 +51,10 @@ var DataRow = function (_a) {
|
|
|
101
51
|
return classes.join(' ');
|
|
102
52
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
103
53
|
}, [isChecked, uxState, rowData]);
|
|
54
|
+
// @TODO remove this
|
|
104
55
|
var actionColumnStyle = React.useMemo(function () {
|
|
105
56
|
return actionColumn ? __assign({}, getActionCellSizeProps(actionColumn)) : {};
|
|
106
57
|
}, [actionColumn]);
|
|
107
|
-
|
|
108
|
-
return (_jsxs(StyledDataRow, { className: rowClassName, hasRowClick: !!onRowClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, isEven: !!isEven, children: [actionColumn && (_jsxs(_Fragment, { children: [displayReadEditCell && (_jsxs(Cell, { className: "cell", style: actionColumnStyle, children: [((_d = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _d === void 0 ? void 0 : _d.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes) ? (_jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" })) : null, _jsxs(x.div, { children: [(isFunction(actionColumn.canRowRead) ? actionColumn.canRowRead(rowData) : actionColumn.canRowRead) && (_jsx(RowActionComponent, __assign({}, rowActionProps('read'), { children: _jsx(Button, { type: "button", variant: "default", appearance: "primary", children: _jsx(EyeOpenIcon, { width: "16px", height: "16px" }) }) }))), (isFunction(actionColumn.canRowEdit) ? actionColumn.canRowEdit(rowData) : actionColumn.canRowEdit) && (_jsx(RowActionComponent, __assign({}, rowActionProps('edit'), { children: _jsx(Button, { type: "button", variant: "default", appearance: "primary", children: _jsx(EditIcon, { width: "16px", height: "16px" }) }) })))] })] })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(x.div, { children: rowIndex }) }))] })), columns.map(function (column, key) { return (_jsx(MemoDataCell, { column: column, rowData: rowData, onRowAction: handleRowAction, displayColumnWidth: displayColumnsWidth[column.name], group: groups === null || groups === void 0 ? void 0 : groups[key] }, column.name)); })] }));
|
|
58
|
+
return (_jsxs(StyledDataRow, { className: rowClassName, hasRowClick: !!onRowClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, isEven: !!isEven, children: [actionColumn && (_jsx(_Fragment, { children: (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(x.div, { children: rowIndex }) })) })), columns.map(function (column, key) { return (_jsx(MemoDataCell, { column: column, rowData: rowData, onRowAction: handleRowAction, displayColumnWidth: displayColumnsWidth[column.name], group: groups === null || groups === void 0 ? void 0 : groups[key] }, column.name)); })] }));
|
|
109
59
|
};
|
|
110
60
|
export default DataRow;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { DataCellProps, ActionColumn } from '../../types';
|
|
1
|
+
import type { DataCellProps, ActionColumn, UxState, GridActionsType } from '../../types';
|
|
2
2
|
type Props = DataCellProps<{
|
|
3
3
|
id: string;
|
|
4
4
|
}>;
|
|
5
|
-
declare const getReadEditButtonCell: (actionColumn?: ActionColumn) => ({ rowData, onRowAction }: Props) => JSX.Element | null;
|
|
5
|
+
declare const getReadEditButtonCell: (actionColumn?: ActionColumn, uxState?: UxState, onUxChange?: GridActionsType['handleUxChange']) => ({ rowData, onRowAction }: Props) => JSX.Element | null;
|
|
6
6
|
export default getReadEditButtonCell;
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback, useMemo } from 'react';
|
|
3
|
-
import { isFunction } from 'lodash/fp';
|
|
4
3
|
import { RowActionsCell } from '../gridCells';
|
|
5
|
-
|
|
4
|
+
import { isFunction } from 'lodash/fp';
|
|
5
|
+
var getReadEditButtonCell = function (actionColumn, uxState, onUxChange) {
|
|
6
6
|
return function ReadEditButtonCell(_a) {
|
|
7
|
+
var _b;
|
|
7
8
|
var rowData = _a.rowData, onRowAction = _a.onRowAction;
|
|
8
9
|
var canEdit = isFunction(actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit) ? actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit(rowData) : actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit;
|
|
9
10
|
var canRead = isFunction(actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead) ? actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead(rowData) : actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead;
|
|
11
|
+
var withCheckboxes = !!((_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);
|
|
10
12
|
// if canEdit and canRead are both true, canEdit supersedes canRead
|
|
11
13
|
var handleOnClick = useCallback(function () {
|
|
12
14
|
var action = canEdit ? 'row_edit' : 'row_read';
|
|
@@ -18,9 +20,7 @@ var getReadEditButtonCell = function (actionColumn) {
|
|
|
18
20
|
var mode = canEdit ? 'edit' : 'read';
|
|
19
21
|
return (_a = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.createLink) === null || _a === void 0 ? void 0 : _a.call(actionColumn, { mode: mode, id: rowData === null || rowData === void 0 ? void 0 : rowData.id });
|
|
20
22
|
}, [canEdit, rowData === null || rowData === void 0 ? void 0 : rowData.id]);
|
|
21
|
-
|
|
22
|
-
return null;
|
|
23
|
-
return _jsx(RowActionsCell, { canEdit: !!canEdit, onClick: handleOnClick, linkTo: linkTo });
|
|
23
|
+
return (_jsx(RowActionsCell, { canEdit: !!canEdit, canRead: !!canRead, onClick: handleOnClick, linkTo: linkTo, withCheckboxes: withCheckboxes, rowDataId: rowData === null || rowData === void 0 ? void 0 : rowData.id, checkedRows: uxState === null || uxState === void 0 ? void 0 : uxState.checkedRows, onUxChange: onUxChange }));
|
|
24
24
|
};
|
|
25
25
|
};
|
|
26
26
|
export default getReadEditButtonCell;
|
|
@@ -5,6 +5,9 @@ export declare const Row: import("styled-components").StyledComponent<"div", imp
|
|
|
5
5
|
}, never>;
|
|
6
6
|
export declare const Cell: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
7
7
|
align?: string | undefined;
|
|
8
|
+
flexBasis?: number | undefined;
|
|
9
|
+
flexGrow?: number | undefined;
|
|
10
|
+
flexShrink?: number | undefined;
|
|
8
11
|
}, never>;
|
|
9
12
|
export declare const StyledDataRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
10
13
|
hasRowClick?: boolean | undefined;
|
|
@@ -15,9 +18,15 @@ export declare const StyledDataRow: import("styled-components").StyledComponent<
|
|
|
15
18
|
}, never>;
|
|
16
19
|
export declare const TextCell: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
17
20
|
align?: string | undefined;
|
|
21
|
+
flexBasis?: number | undefined;
|
|
22
|
+
flexGrow?: number | undefined;
|
|
23
|
+
flexShrink?: number | undefined;
|
|
18
24
|
}, never>;
|
|
19
25
|
export declare const MessageCell: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
20
26
|
align?: string | undefined;
|
|
27
|
+
flexBasis?: number | undefined;
|
|
28
|
+
flexGrow?: number | undefined;
|
|
29
|
+
flexShrink?: number | undefined;
|
|
21
30
|
} & {
|
|
22
31
|
width: number;
|
|
23
32
|
}, never>;
|
|
@@ -1,15 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
-
return cooked;
|
|
4
|
-
};
|
|
5
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
-
import styled from '@xstyled/styled-components';
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
7
2
|
import { Link as ReactLink } from 'react-router-dom';
|
|
8
|
-
import Spinner from '../../../../Elements/Spinner/Spinner';
|
|
9
3
|
import Icon from '../../../../Elements/Icon/Icon';
|
|
10
|
-
|
|
4
|
+
import Spinner from '../../../../Elements/Spinner/Spinner';
|
|
5
|
+
import { x } from '@xstyled/styled-components';
|
|
11
6
|
export var IconButtonInCell = function (_a) {
|
|
12
7
|
var icon = _a.icon, isLoading = _a.isLoading, onClick = _a.onClick, linkTo = _a.linkTo;
|
|
13
|
-
return (_jsx(
|
|
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" }) })) }));
|
|
14
9
|
};
|
|
15
|
-
var templateObject_1;
|
|
@@ -1,7 +1,13 @@
|
|
|
1
|
+
import type { GridActionsType, UxState } from '../../types';
|
|
1
2
|
type Props = {
|
|
2
3
|
canEdit: boolean;
|
|
4
|
+
canRead: boolean;
|
|
3
5
|
onClick: () => void;
|
|
4
6
|
linkTo?: string;
|
|
7
|
+
withCheckboxes?: boolean;
|
|
8
|
+
rowDataId: string;
|
|
9
|
+
checkedRows?: UxState['checkedRows'];
|
|
10
|
+
onUxChange?: GridActionsType['handleUxChange'];
|
|
5
11
|
};
|
|
6
|
-
export declare const RowActionsCell: ({ canEdit, onClick, linkTo }: Props) => JSX.Element;
|
|
12
|
+
export declare const RowActionsCell: ({ canEdit, canRead, onClick, linkTo, withCheckboxes, rowDataId, checkedRows, onUxChange }: Props) => JSX.Element;
|
|
7
13
|
export {};
|
|
@@ -1,15 +1,34 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
4
11
|
};
|
|
5
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
13
|
import { useCallback, useMemo } from 'react';
|
|
7
|
-
import
|
|
14
|
+
import Checkbox from '../../../../Forms/Checkbox';
|
|
15
|
+
import { x } from '@xstyled/styled-components';
|
|
8
16
|
import { isFunction } from 'lodash/fp';
|
|
9
17
|
import { IconButtonInCell } from './IconButtonInCell';
|
|
10
|
-
var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n cursor: pointer;\n width: 100%;\n\n svg {\n color: blue2;\n }\n"], ["\n display: flex;\n justify-content: center;\n cursor: pointer;\n width: 100%;\n\n svg {\n color: blue2;\n }\n"])));
|
|
11
18
|
export var RowActionsCell = function (_a) {
|
|
12
|
-
var canEdit = _a.canEdit, onClick = _a.onClick, linkTo = _a.linkTo;
|
|
19
|
+
var canEdit = _a.canEdit, canRead = _a.canRead, onClick = _a.onClick, linkTo = _a.linkTo, withCheckboxes = _a.withCheckboxes, rowDataId = _a.rowDataId, checkedRows = _a.checkedRows, onUxChange = _a.onUxChange;
|
|
20
|
+
var isChecked = !!(checkedRows === null || checkedRows === void 0 ? void 0 : checkedRows[rowDataId]);
|
|
21
|
+
// @TODO this should be in reducer
|
|
22
|
+
var onCheckboxChange = useCallback(function () {
|
|
23
|
+
var newCheckedRows = __assign({}, (checkedRows || {}));
|
|
24
|
+
if (!isChecked) {
|
|
25
|
+
newCheckedRows[rowDataId] = true;
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
delete newCheckedRows[rowDataId];
|
|
29
|
+
}
|
|
30
|
+
onUxChange === null || onUxChange === void 0 ? void 0 : onUxChange('checkedRows', newCheckedRows);
|
|
31
|
+
}, [onUxChange, isChecked, rowDataId, checkedRows]);
|
|
13
32
|
var handleOnClick = useCallback(function () {
|
|
14
33
|
if (isFunction(onClick)) {
|
|
15
34
|
onClick();
|
|
@@ -17,14 +36,16 @@ export var RowActionsCell = function (_a) {
|
|
|
17
36
|
}, [onClick]);
|
|
18
37
|
var actions = useMemo(function () {
|
|
19
38
|
var actionOptions = [];
|
|
39
|
+
if (withCheckboxes) {
|
|
40
|
+
actionOptions.push(_jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" }));
|
|
41
|
+
}
|
|
20
42
|
if (canEdit) {
|
|
21
43
|
actionOptions.push(_jsx(IconButtonInCell, { icon: "pen", onClick: handleOnClick, linkTo: linkTo }, "edit"));
|
|
22
44
|
}
|
|
23
|
-
|
|
45
|
+
if (!canEdit && canRead) {
|
|
24
46
|
actionOptions.push(_jsx(IconButtonInCell, { icon: "chevronRight", onClick: handleOnClick, linkTo: linkTo }, "read"));
|
|
25
47
|
}
|
|
26
48
|
return actionOptions;
|
|
27
|
-
}, [canEdit, handleOnClick, linkTo]);
|
|
28
|
-
return _jsx(
|
|
49
|
+
}, [canEdit, canRead, handleOnClick, linkTo, isChecked, withCheckboxes, onCheckboxChange]);
|
|
50
|
+
return (_jsx(x.div, { w: "100%", display: "flex", alignItems: "center", gap: "16px", children: actions }));
|
|
29
51
|
};
|
|
30
|
-
var templateObject_1;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CommonGridProps } from '../types';
|
|
1
|
+
import type { CommonGridProps } from '../types';
|
|
2
2
|
type ExcludedProps = 'components' | 'filters' | 'onBatchAction' | 'extraControlButtons';
|
|
3
3
|
type Props = Omit<CommonGridProps, ExcludedProps>;
|
|
4
4
|
type UseEditReadAsColumnHook = {
|
|
@@ -6,10 +6,5 @@ type UseEditReadAsColumnHook = {
|
|
|
6
6
|
actionColumnDefinition: CommonGridProps['actionColumnDefinition'];
|
|
7
7
|
onRowAction: CommonGridProps['onRowAction'];
|
|
8
8
|
};
|
|
9
|
-
/**
|
|
10
|
-
* Because in new design we are displaying lot of the controlls differently, including read and edit buttons in grid,
|
|
11
|
-
* easiest way to make all the definition changes is to just overwrite the here once, instead of modifying every single grid (33 instances atm).
|
|
12
|
-
* This will also allow to easily swap back to grid provided logic, if it becomes usable for redesigned grid or if design changes again
|
|
13
|
-
* */
|
|
14
9
|
declare const useEditReadAsColumn: (props: Props) => UseEditReadAsColumnHook;
|
|
15
10
|
export default useEditReadAsColumn;
|
|
@@ -10,18 +10,18 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
10
10
|
import { useCallback, useMemo } from 'react';
|
|
11
11
|
import getReadEditButtonCell from '../components/ReadEditButtonCell';
|
|
12
12
|
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
13
|
var useEditReadAsColumn = function (props) {
|
|
19
|
-
var onRowAction = props.onRowAction, actionColumnDefinition = props.actionColumnDefinition, columnsDefinitions = props.columnsDefinitions, onRowEditClick = props.onRowEditClick, onRowReadClick = props.onRowReadClick;
|
|
14
|
+
var onRowAction = props.onRowAction, actionColumnDefinition = props.actionColumnDefinition, columnsDefinitions = props.columnsDefinitions, gridSelectors = props.gridSelectors, gridActions = props.gridActions, onRowEditClick = props.onRowEditClick, onRowReadClick = props.onRowReadClick;
|
|
20
15
|
var modifiedActionColumnDefinition = useMemo(function () {
|
|
21
16
|
var _a;
|
|
22
17
|
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
18
|
// note: this also removes actions, because we render action trigger outside the grid anyway
|
|
24
|
-
return {
|
|
19
|
+
return {
|
|
20
|
+
flexBasis: 40,
|
|
21
|
+
forceCheckboxes: true,
|
|
22
|
+
addRowNumbers: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers,
|
|
23
|
+
checkAllPosition: 'top'
|
|
24
|
+
};
|
|
25
25
|
}
|
|
26
26
|
else if (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers) {
|
|
27
27
|
return { flexBasis: 40, addRowNumbers: true };
|
|
@@ -42,13 +42,16 @@ var useEditReadAsColumn = function (props) {
|
|
|
42
42
|
}
|
|
43
43
|
}, [onRowAction, onRowEditClick, onRowReadClick]);
|
|
44
44
|
// TODO Entire logic of row edit / row read need to be completely refactored.
|
|
45
|
-
var CellComponent = useMemo(function () { return getReadEditButtonCell(actionColumnDefinition); }, [actionColumnDefinition]);
|
|
45
|
+
var CellComponent = useMemo(function () { return getReadEditButtonCell(actionColumnDefinition, gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.uxState, gridActions === null || gridActions === void 0 ? void 0 : gridActions.handleUxChange); }, [actionColumnDefinition, gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.uxState, gridActions === null || gridActions === void 0 ? void 0 : gridActions.handleUxChange]);
|
|
46
|
+
var canRowEdit = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit) !== undefined;
|
|
47
|
+
var canRowRead = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead) !== undefined;
|
|
48
|
+
var stickTo = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.stickTo) || 'right';
|
|
49
|
+
var flexBasis = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.flexBasis) || 88;
|
|
46
50
|
var modifiedColumnsDefinitions = useMemo(function () {
|
|
47
|
-
if (
|
|
48
|
-
var stickTo = actionColumnDefinition.stickTo || 'right';
|
|
51
|
+
if (canRowEdit || canRowRead) {
|
|
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,
|
|
@@ -66,7 +69,7 @@ var useEditReadAsColumn = function (props) {
|
|
|
66
69
|
else {
|
|
67
70
|
return columnsDefinitions;
|
|
68
71
|
}
|
|
69
|
-
}, [CellComponent,
|
|
72
|
+
}, [CellComponent, flexBasis, stickTo, canRowEdit, canRowRead, columnsDefinitions]);
|
|
70
73
|
return {
|
|
71
74
|
columnsDefinitions: modifiedColumnsDefinitions,
|
|
72
75
|
actionColumnDefinition: modifiedActionColumnDefinition,
|
|
@@ -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 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 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 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 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) {
|
|
26
26
|
var withButtonStrip = _a.withButtonStrip;
|
|
27
27
|
return (withButtonStrip ? gridButtonStripHeight : 0);
|
|
28
28
|
}, th('fonts.primary'), gridRowHeight, function (_a) {
|
|
@@ -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);
|