@mailstep/design-system 0.7.47-beta.3 → 0.7.47-beta.5
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/HoC/withProps.d.ts +3 -0
- package/ui/Blocks/CommonGrid/HoC/withProps.js +21 -0
- package/ui/Blocks/CommonGrid/components/DataRow.d.ts +1 -3
- package/ui/Blocks/CommonGrid/components/DataRow.js +7 -7
- 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/gridCells/RowActionsCell.d.ts +8 -10
- package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.js +24 -1
- package/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.js +10 -8
- package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js +1 -1
- 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/index.es.js +9614 -9617
- package/ui/index.umd.js +414 -415
- 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
package/package.json
CHANGED
|
@@ -62,12 +62,13 @@ 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 &&
|
|
68
69
|
rowsData.map(function (row, index) {
|
|
69
70
|
var rowIndex = rowsPerPage * page + (index + 1) - rowsPerPage;
|
|
70
|
-
return (_jsx(DataRow, { rowData: row, rowIndex: rowIndex, uxState: uxState, isEven: hasColouredRows && (index + 1) % 2 === 0, allowRowSelect: allowRowSelect, allowRowSelectOnAction: allowRowSelectOnAction, onRowAction: onRowAction, onUxChange: handleUxChange,
|
|
71
|
+
return (_jsx(DataRow, { rowData: row, rowIndex: rowIndex, uxState: uxState, isEven: hasColouredRows && (index + 1) % 2 === 0, allowRowSelect: allowRowSelect, allowRowSelectOnAction: allowRowSelectOnAction, onRowAction: onRowAction, onUxChange: handleUxChange, onRowClick: onRowClick, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, displayColumnsWidth: displayColumnsWidth, groups: groups }, row.id));
|
|
71
72
|
}) })] }) }), floatingButtonProps && _jsx(FloatingButton, __assign({}, floatingButtonProps))] }));
|
|
72
73
|
};
|
|
73
74
|
export default CommonGrid;
|
|
@@ -0,0 +1,21 @@
|
|
|
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);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
var withProps = function (input) {
|
|
14
|
+
return function (Component) {
|
|
15
|
+
return function ComponentWithProps(props) {
|
|
16
|
+
var additinalProps = typeof input === 'function' ? input(props) : input;
|
|
17
|
+
return _jsx(Component, __assign({}, props, additinalProps));
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
export default withProps;
|
|
@@ -8,8 +8,6 @@ type DataRowProps = {
|
|
|
8
8
|
allowRowSelect?: boolean;
|
|
9
9
|
allowRowSelectOnAction?: boolean;
|
|
10
10
|
onUxChange?: (uxKey: keyof UxState, uxValue: any) => void;
|
|
11
|
-
onRowEditClick?: (id: string, props: RowProps) => void;
|
|
12
|
-
onRowReadClick?: (id: string, props: RowProps) => void;
|
|
13
11
|
onRowClick?: (id: string, props: RowProps) => void;
|
|
14
12
|
onRowAction?: (id: string, field: string, value: any, rowData?: RowProps) => void;
|
|
15
13
|
createLink?: (params?: object) => string;
|
|
@@ -17,5 +15,5 @@ type DataRowProps = {
|
|
|
17
15
|
groups: Group[];
|
|
18
16
|
isEven?: boolean;
|
|
19
17
|
};
|
|
20
|
-
declare const DataRow: ({ columns, actionColumn, rowData, rowIndex, uxState, allowRowSelect, allowRowSelectOnAction, onUxChange,
|
|
18
|
+
declare const DataRow: ({ columns, actionColumn, rowData, rowIndex, uxState, allowRowSelect, allowRowSelectOnAction, onUxChange, onRowClick, onRowAction, displayColumnsWidth, groups, isEven }: DataRowProps) => JSX.Element;
|
|
21
19
|
export default DataRow;
|
|
@@ -19,14 +19,14 @@ import { Cell, StyledDataRow } from './Table';
|
|
|
19
19
|
import { useTimeMeasurement } from './utils';
|
|
20
20
|
var DataRow = function (_a) {
|
|
21
21
|
var _b;
|
|
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,
|
|
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, onRowClick = _a.onRowClick, onRowAction = _a.onRowAction, displayColumnsWidth = _a.displayColumnsWidth, groups = _a.groups, isEven = _a.isEven;
|
|
23
23
|
var isChecked = !!((_b = uxState.checkedRows) === null || _b === void 0 ? void 0 : _b[rowData.id]);
|
|
24
24
|
var handleRowAction = React.useCallback(function (id, field, value, rowData) {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}, [
|
|
25
|
+
onRowAction === null || onRowAction === void 0 ? void 0 : onRowAction(id, field, value, rowData);
|
|
26
|
+
if (allowRowSelectOnAction) {
|
|
27
|
+
onUxChange === null || onUxChange === void 0 ? void 0 : onUxChange('selectedRow', id);
|
|
28
|
+
}
|
|
29
|
+
}, [onRowAction, allowRowSelectOnAction, onUxChange]);
|
|
30
30
|
var handleRowClick = React.useCallback(function (e) {
|
|
31
31
|
// test whether I should trigger event or not (because of possible button/link/input/etc in cell)
|
|
32
32
|
var classes = Object.values(e.target.classList);
|
|
@@ -44,7 +44,7 @@ var DataRow = function (_a) {
|
|
|
44
44
|
var classes = ['dataRow'];
|
|
45
45
|
if (isChecked)
|
|
46
46
|
classes.push('checked');
|
|
47
|
-
if (uxState.selectedRow
|
|
47
|
+
if (uxState.selectedRow === rowData.id && (allowRowSelect || allowRowSelectOnAction))
|
|
48
48
|
classes.push('selected');
|
|
49
49
|
if (rowData[rowClassSymbol])
|
|
50
50
|
classes.push(rowData[rowClassSymbol] || '');
|
|
@@ -12,5 +12,5 @@ type Props = {
|
|
|
12
12
|
rowsData: RowProps[];
|
|
13
13
|
uxState: UxState;
|
|
14
14
|
};
|
|
15
|
-
declare const FilterRow: ({ columns, groups, actionColumn, onChange, filterValues, displayColumnsWidth, filters, comparators, handleUxChange, rowsData, uxState
|
|
15
|
+
declare const FilterRow: ({ columns, groups, actionColumn, onChange, filterValues, displayColumnsWidth, filters, comparators, handleUxChange, rowsData, uxState }: Props) => JSX.Element;
|
|
16
16
|
export default FilterRow;
|
|
@@ -11,13 +11,13 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import React from 'react';
|
|
14
|
+
import Checkbox from '../../../Forms/Checkbox';
|
|
15
|
+
import { useToggleAllCheckbox } from '../hooks/useToggleAllCheckbox';
|
|
16
|
+
import { getActionCellSizeProps, getFilterName } from '../utils';
|
|
14
17
|
import get from 'lodash/fp/get';
|
|
15
18
|
import throttle from 'lodash/throttle';
|
|
16
19
|
import ColumnFilterCell from './ColumnFilterCell';
|
|
17
20
|
import { Row, Cell } from './Table';
|
|
18
|
-
import { getActionCellSizeProps, getFilterName } from '../utils';
|
|
19
|
-
import { useToggleAllCheckbox } from '../hooks/useToggleAllCheckbox';
|
|
20
|
-
import Checkbox from '../../../Forms/Checkbox';
|
|
21
21
|
var FilterRow = function (_a) {
|
|
22
22
|
var _b, _c;
|
|
23
23
|
var columns = _a.columns, groups = _a.groups, actionColumn = _a.actionColumn, onChange = _a.onChange, _d = _a.filterValues, filterValues = _d === void 0 ? {} : _d, displayColumnsWidth = _a.displayColumnsWidth, filters = _a.filters, comparators = _a.comparators, handleUxChange = _a.handleUxChange, rowsData = _a.rowsData, uxState = _a.uxState;
|
|
@@ -26,9 +26,11 @@ 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", 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 }, 'actions')), columns
|
|
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 }, 'actions')), columns
|
|
33
|
+
.filter(function (column) { return !column.sticky; })
|
|
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)); })] }));
|
|
33
35
|
};
|
|
34
36
|
export default FilterRow;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { DropResult } from 'react-beautiful-dnd';
|
|
2
|
-
import { Settings, ColumnDefinition, ActionColumn, GridSelectorsType, Group, CommonGridProps, GridActionsType } from '../types';
|
|
1
|
+
import type { DropResult } from 'react-beautiful-dnd';
|
|
2
|
+
import type { Settings, ColumnDefinition, ActionColumn, GridSelectorsType, Group, CommonGridProps, GridActionsType } from '../types';
|
|
3
3
|
type HeadRowProps = {
|
|
4
4
|
actionColumn?: ActionColumn;
|
|
5
5
|
columns: ColumnDefinition[];
|
|
@@ -19,32 +19,30 @@ import { Row, Cell } from './Table';
|
|
|
19
19
|
var getStickyComponent = function (columns, stickyTo, displayColumnsWidth) {
|
|
20
20
|
var _a;
|
|
21
21
|
return (_a = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) { return item.sticky && item.stickTo === stickyTo; })) === null || _a === void 0 ? void 0 : _a.map(function (column) {
|
|
22
|
-
var cellClassName = "cell".concat(getStickyCollClassNames(!!column.sticky, column.stickTo)
|
|
22
|
+
var cellClassName = "cell".concat(getStickyCollClassNames(!!column.sticky, column.stickTo));
|
|
23
23
|
return (_jsx(Cell, __assign({}, getCellSizeProps(column, displayColumnsWidth[column.name]), { className: cellClassName, children: _jsx(ColumnTitle, { title: column === null || column === void 0 ? void 0 : column.title, isSortable: false, sortValue: null }) }), column.name));
|
|
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]);
|
|
44
42
|
var onSetSort = React.useCallback(function (name, systemName) { return function (value) {
|
|
45
43
|
onAddSort && onAddSort(systemName || name, value);
|
|
46
44
|
}; }, [onAddSort]);
|
|
47
|
-
return (_jsx(_Fragment, { children: showUIElements && (_jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", isDropDisabled: isDragDisabled, isCombineEnabled: false, ignoreContainerClipping: false, children: function (droppableProvided) { return (_jsxs(Row, __assign({ className: "headRow", accountForScrollbar: false, ref: droppableProvided.innerRef }, droppableProvided.droppableProps, { children: [
|
|
45
|
+
return (_jsx(_Fragment, { children: showUIElements && (_jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", isDropDisabled: isDragDisabled, isCombineEnabled: false, ignoreContainerClipping: false, children: function (droppableProvided) { return (_jsxs(Row, __assign({ className: "headRow", accountForScrollbar: false, ref: droppableProvided.innerRef }, droppableProvided.droppableProps, { children: [(actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(_Fragment, { children: _jsx(Cell, { className: "cell", style: Object.assign(__assign({}, getActionCellSizeProps(actionColumn))) }) })), getStickyComponent(columns, 'left', displayColumnsWidth), columns
|
|
48
46
|
.filter(function (item) { return !item.sticky; })
|
|
49
47
|
.map(function (column, index) { return (_jsx(Draggable, { draggableId: column.name, index: index, isDragDisabled: isDragDisabled || column.sticky, children: function (_a) {
|
|
50
48
|
var _b;
|
|
@@ -1,13 +1,11 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
type
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
rowDataId: string;
|
|
9
|
-
checkedRows?: UxState['checkedRows'];
|
|
1
|
+
import type { FC } from 'react';
|
|
2
|
+
import type { DataCellProps, ActionColumn, UxState, GridActionsType } from '../../types';
|
|
3
|
+
type Props = DataCellProps<{
|
|
4
|
+
id: string;
|
|
5
|
+
}> & {
|
|
6
|
+
actionColumnDefinition?: ActionColumn;
|
|
7
|
+
uxState?: UxState;
|
|
10
8
|
onUxChange?: GridActionsType['handleUxChange'];
|
|
11
9
|
};
|
|
12
|
-
export declare const RowActionsCell:
|
|
10
|
+
export declare const RowActionsCell: FC<Props>;
|
|
13
11
|
export {};
|
|
@@ -16,7 +16,28 @@ import { x } from '@xstyled/styled-components';
|
|
|
16
16
|
import { isFunction } from 'lodash/fp';
|
|
17
17
|
import { IconButtonInCell } from './IconButtonInCell';
|
|
18
18
|
export var RowActionsCell = function (_a) {
|
|
19
|
-
var
|
|
19
|
+
var _b;
|
|
20
|
+
var actionColumnDefinition = _a.actionColumnDefinition, rowData = _a.rowData, uxState = _a.uxState, onUxChange = _a.onUxChange, onRowAction = _a.onRowAction;
|
|
21
|
+
var rowDataId = rowData === null || rowData === void 0 ? void 0 : rowData.id;
|
|
22
|
+
// @TODO this should be in parent component
|
|
23
|
+
var checkedRows = uxState === null || uxState === void 0 ? void 0 : uxState.checkedRows;
|
|
24
|
+
var canEdit = isFunction(actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit)
|
|
25
|
+
? actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit(rowData)
|
|
26
|
+
: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit;
|
|
27
|
+
var canRead = isFunction(actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead)
|
|
28
|
+
? actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead(rowData)
|
|
29
|
+
: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead;
|
|
30
|
+
var withCheckboxes = !!((_b = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _b === void 0 ? void 0 : _b.length) || (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.forceCheckboxes);
|
|
31
|
+
// if canEdit and canRead are both true, canEdit supersedes canRead
|
|
32
|
+
var onClick = useCallback(function () {
|
|
33
|
+
var action = canEdit ? 'row_edit' : 'row_read';
|
|
34
|
+
onRowAction === null || onRowAction === void 0 ? void 0 : onRowAction(rowData === null || rowData === void 0 ? void 0 : rowData.id, action, rowData);
|
|
35
|
+
}, [canEdit, onRowAction, rowData]);
|
|
36
|
+
var linkTo = useMemo(function () {
|
|
37
|
+
var _a;
|
|
38
|
+
var mode = canEdit ? 'edit' : 'read';
|
|
39
|
+
return (_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.createLink) === null || _a === void 0 ? void 0 : _a.call(actionColumnDefinition, { mode: mode, id: rowData === null || rowData === void 0 ? void 0 : rowData.id });
|
|
40
|
+
}, [canEdit, rowData === null || rowData === void 0 ? void 0 : rowData.id]);
|
|
20
41
|
var isChecked = !!(checkedRows === null || checkedRows === void 0 ? void 0 : checkedRows[rowDataId]);
|
|
21
42
|
// @TODO this should be in reducer
|
|
22
43
|
var onCheckboxChange = useCallback(function () {
|
|
@@ -47,5 +68,7 @@ export var RowActionsCell = function (_a) {
|
|
|
47
68
|
}
|
|
48
69
|
return actionOptions;
|
|
49
70
|
}, [canEdit, canRead, handleOnClick, linkTo, isChecked, withCheckboxes, onCheckboxChange]);
|
|
71
|
+
if (actions.length === 0)
|
|
72
|
+
return null;
|
|
50
73
|
return (_jsx(x.div, { w: "100%", display: "flex", alignItems: "center", gap: "16px", children: actions }));
|
|
51
74
|
};
|
|
@@ -8,7 +8,8 @@ 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
|
var useEditReadAsColumn = function (props) {
|
|
14
15
|
var onRowAction = props.onRowAction, actionColumnDefinition = props.actionColumnDefinition, columnsDefinitions = props.columnsDefinitions, gridSelectors = props.gridSelectors, gridActions = props.gridActions, onRowEditClick = props.onRowEditClick, onRowReadClick = props.onRowReadClick;
|
|
@@ -17,10 +18,9 @@ var useEditReadAsColumn = function (props) {
|
|
|
17
18
|
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)) {
|
|
18
19
|
// note: this also removes actions, because we render action trigger outside the grid anyway
|
|
19
20
|
return {
|
|
20
|
-
flexBasis:
|
|
21
|
+
flexBasis: (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.flexBasis) || 88,
|
|
21
22
|
forceCheckboxes: true,
|
|
22
23
|
addRowNumbers: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers,
|
|
23
|
-
checkAllPosition: 'top'
|
|
24
24
|
};
|
|
25
25
|
}
|
|
26
26
|
else if (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers) {
|
|
@@ -41,8 +41,6 @@ var useEditReadAsColumn = function (props) {
|
|
|
41
41
|
return onRowAction(id, field, value, rowData);
|
|
42
42
|
}
|
|
43
43
|
}, [onRowAction, onRowEditClick, onRowReadClick]);
|
|
44
|
-
// TODO Entire logic of row edit / row read need to be completely refactored.
|
|
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
44
|
var canRowEdit = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit) !== undefined;
|
|
47
45
|
var canRowRead = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead) !== undefined;
|
|
48
46
|
var stickTo = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.stickTo) || 'right';
|
|
@@ -57,7 +55,11 @@ var useEditReadAsColumn = function (props) {
|
|
|
57
55
|
sticky: true,
|
|
58
56
|
stickTo: stickTo,
|
|
59
57
|
alwaysOn: true,
|
|
60
|
-
cellComponent:
|
|
58
|
+
cellComponent: withProps({
|
|
59
|
+
actionColumnDefinition: actionColumnDefinition,
|
|
60
|
+
uxState: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.uxState,
|
|
61
|
+
onUxChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.handleUxChange
|
|
62
|
+
})(RowActionsCell)
|
|
61
63
|
};
|
|
62
64
|
if (stickTo === EditReadPosition.Left) {
|
|
63
65
|
return __spreadArray([editReadColumnDefinition], columnsDefinitions, true);
|
|
@@ -69,10 +71,10 @@ var useEditReadAsColumn = function (props) {
|
|
|
69
71
|
else {
|
|
70
72
|
return columnsDefinitions;
|
|
71
73
|
}
|
|
72
|
-
}, [
|
|
74
|
+
}, [flexBasis, stickTo, canRowEdit, canRowRead, columnsDefinitions]);
|
|
73
75
|
return {
|
|
74
76
|
columnsDefinitions: modifiedColumnsDefinitions,
|
|
75
|
-
actionColumnDefinition:
|
|
77
|
+
actionColumnDefinition: actionColumnDefinition,
|
|
76
78
|
onRowAction: modifiedOnRowAction
|
|
77
79
|
};
|
|
78
80
|
};
|
|
@@ -9,7 +9,7 @@ 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: 70,
|
|
13
13
|
canRowRead: true,
|
|
14
14
|
stickTo: 'left',
|
|
15
15
|
forceCheckboxes: true,
|
|
@@ -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 border-top: 1px solid ", "
|
|
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;
|