@mailstep/design-system 0.7.47-beta.1 → 0.7.47-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/package.json +1 -1
  2. package/ui/Blocks/CommonGrid/CommonGrid.js +2 -1
  3. package/ui/Blocks/CommonGrid/CommonGridContainer.js +1 -1
  4. package/ui/Blocks/CommonGrid/HoC/withProps.d.ts +3 -0
  5. package/ui/Blocks/CommonGrid/HoC/withProps.js +21 -0
  6. package/ui/Blocks/CommonGrid/components/ActionHead/ActionHead.d.ts +2 -2
  7. package/ui/Blocks/CommonGrid/components/ActionHead/ActionHead.js +8 -10
  8. package/ui/Blocks/CommonGrid/components/DataRow.d.ts +2 -4
  9. package/ui/Blocks/CommonGrid/components/DataRow.js +12 -62
  10. package/ui/Blocks/CommonGrid/components/FilterRow.d.ts +1 -1
  11. package/ui/Blocks/CommonGrid/components/FilterRow.js +7 -5
  12. package/ui/Blocks/CommonGrid/components/HeadRow.d.ts +2 -2
  13. package/ui/Blocks/CommonGrid/components/HeadRow.js +5 -7
  14. package/ui/Blocks/CommonGrid/components/Table.d.ts +9 -0
  15. package/ui/Blocks/CommonGrid/components/gridCells/IconButtonInCell.js +4 -10
  16. package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.d.ts +10 -5
  17. package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.js +47 -19
  18. package/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.d.ts +1 -6
  19. package/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.js +34 -16
  20. package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js +2 -4
  21. package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js +0 -4
  22. package/ui/Blocks/CommonGrid/styles.js +1 -1
  23. package/ui/Blocks/CommonGrid/types.d.ts +0 -1
  24. package/ui/Blocks/Modal/hooks/useModal.d.ts +2 -8
  25. package/ui/Blocks/Modal/hooks/useModal.js +5 -7
  26. package/ui/index.es.js +7049 -7111
  27. package/ui/index.umd.js +413 -445
  28. package/ui/Blocks/CommonGrid/components/ReadEditButtonCell/ReadEditButtonCell.d.ts +0 -6
  29. package/ui/Blocks/CommonGrid/components/ReadEditButtonCell/ReadEditButtonCell.js +0 -26
  30. package/ui/Blocks/CommonGrid/components/ReadEditButtonCell/index.d.ts +0 -2
  31. package/ui/Blocks/CommonGrid/components/ReadEditButtonCell/index.js +0 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.7.47-beta.1",
3
+ "version": "0.7.47-beta.10",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
package/ui/Blocks/CommonGrid/CommonGrid.js 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, onRowEditClick: onRowEditClick, onRowReadClick: onRowReadClick, onRowClick: onRowClick, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, displayColumnsWidth: displayColumnsWidth, groups: groups }, row.id));
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;
package/ui/Blocks/CommonGrid/CommonGridContainer.js 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, actionColumn: actionColumnDefinition, 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 })] }));
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;
package/ui/Blocks/CommonGrid/HoC/withProps.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { FC } from 'react';
2
+ declare const withProps: (input: any) => <P>(Component: FC<P>) => FC<P>;
3
+ export default withProps;
package/ui/Blocks/CommonGrid/HoC/withProps.js ADDED
@@ -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;
package/ui/Blocks/CommonGrid/components/ActionHead/ActionHead.d.ts CHANGED
@@ -2,11 +2,11 @@ import { GridActionsType, GridSelectorsType, OnBatchActionFn, RowProps, ActionCo
2
2
  type Props = {
3
3
  gridActions: GridActionsType;
4
4
  gridSelectors: GridSelectorsType;
5
- actionColumn?: ActionColumn;
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, actionColumn, onBatchAction, rowsData, processCheckedValues, processCheckedValuesTitle }: Props) => JSX.Element;
11
+ declare const ActionHead: ({ gridActions, gridSelectors, actionOptions, onBatchAction, rowsData, processCheckedValues, processCheckedValuesTitle }: Props) => JSX.Element;
12
12
  export default ActionHead;
package/ui/Blocks/CommonGrid/components/ActionHead/ActionHead.js CHANGED
@@ -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 _b;
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 _c = (gridSelectors || {}).uxState, uxState = _c === void 0 ? {} : _c;
24
- var _d = useToggleAllCheckbox(rowsData, uxState, handleUxChange), checked = _d[0], toggleCheckbox = _d[1];
25
- var _e = useGridActionTrigger(rowsData, uxState, actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions, onBatchAction), enabledActions = _e[0], onSubmit = _e[1];
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
- var _a;
34
- if ((_a = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _a === void 0 ? void 0 : _a.length) {
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
- }, [actionColumn, onSubmit]);
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 ? (processCheckedValuesTitle) : (_jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" })) })), ((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) && (_jsx(ButtonMore, { items: actionsOptions, disabled: !enabledActions.length || !rowsData.length, dropdownPosition: "top" }))] })] }) })) }));
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;
package/ui/Blocks/CommonGrid/components/DataRow.d.ts CHANGED
@@ -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;
@@ -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, onRowEditClick, onRowReadClick, onRowClick, onRowAction, displayColumnsWidth, groups, isEven }: DataRowProps) => JSX.Element;
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;
package/ui/Blocks/CommonGrid/components/DataRow.js CHANGED
@@ -9,67 +9,24 @@ var __assign = (this && this.__assign) || function () {
9
9
  };
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
- var __rest = (this && this.__rest) || function (s, e) {
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, _c, _d;
43
- 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;
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, 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
- if (onRowAction)
69
- onRowAction(id, field, value, rowData);
70
- if (onUxChange && allowRowSelectOnAction)
71
- onUxChange('selectedRow', id);
72
- }, [onRowReadClick, rowData]);
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]);
73
30
  var handleRowClick = React.useCallback(function (e) {
74
31
  // test whether I should trigger event or not (because of possible button/link/input/etc in cell)
75
32
  var classes = Object.values(e.target.classList);
@@ -82,29 +39,22 @@ var DataRow = function (_a) {
82
39
  },
83
40
  // eslint-disable-next-line react-hooks/exhaustive-deps
84
41
  [onRowClick, onUxChange, rowData]);
85
- var _e = useTimeMeasurement({ handleRowClick: handleRowClick }), handleMouseDown = _e.handleMouseDown, handleMouseUp = _e.handleMouseUp;
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)
96
46
  classes.push('checked');
97
- if (uxState.selectedRow == rowData.id && (allowRowSelect || allowRowSelectOnAction))
47
+ if (uxState.selectedRow === rowData.id && (allowRowSelect || allowRowSelectOnAction))
98
48
  classes.push('selected');
99
49
  if (rowData[rowClassSymbol])
100
50
  classes.push(rowData[rowClassSymbol] || '');
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
- var displayReadEditCell = ((_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _c === void 0 ? void 0 : _c.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);
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;
package/ui/Blocks/CommonGrid/components/FilterRow.d.ts CHANGED
@@ -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, }: Props) => JSX.Element;
15
+ declare const FilterRow: ({ columns, groups, actionColumn, onChange, filterValues, displayColumnsWidth, filters, comparators, handleUxChange, rowsData, uxState }: Props) => JSX.Element;
16
16
  export default FilterRow;
package/ui/Blocks/CommonGrid/components/FilterRow.js CHANGED
@@ -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 = (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.checkAllPosition) === 'top' && (((_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));
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.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)); })] }));
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
+ .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;
package/ui/Blocks/CommonGrid/components/HeadRow.d.ts CHANGED
@@ -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[];
package/ui/Blocks/CommonGrid/components/HeadRow.js CHANGED
@@ -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 columns = _a.columns, actionColumn = _a.actionColumn, onAddSort = _a.onAddSort, handleDragEnd = _a.handleDragEnd, _c = _a.sortingValues, sortingValues = _c === void 0 ? [] : _c, displayColumnsWidth = _a.displayColumnsWidth, columnLayout = _a.columnLayout, handleResizeDrag = _a.handleResizeDrag, groups = _a.groups;
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 _e = useState(false), isDragDisabled = _e[0], setIsDragDisabled = _e[1];
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: [actionColumn && (_jsxs(_Fragment, { children: [displayReadEditCell && (_jsx(Cell, { className: "cell", style: Object.assign(__assign({}, getActionCellSizeProps(actionColumn))) })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: Object.assign(__assign({}, getActionCellSizeProps(actionColumn))) }))] })), getStickyComponent(columns, 'left', displayColumnsWidth), columns
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;
package/ui/Blocks/CommonGrid/components/Table.d.ts CHANGED
@@ -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>;
package/ui/Blocks/CommonGrid/components/gridCells/IconButtonInCell.js CHANGED
@@ -1,15 +1,9 @@
1
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
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
- var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n width: 100%;\n & > * {\n cursor: pointer;\n color: gray1;\n :hover {\n color: blue2;\n }\n }\n"], ["\n display: flex;\n justify-content: center;\n width: 100%;\n & > * {\n cursor: pointer;\n color: gray1;\n :hover {\n color: blue2;\n }\n }\n"])));
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(Center, { children: isLoading ? (_jsx(Spinner, { variant: "sm" })) : linkTo ? (_jsx(ReactLink, { to: linkTo, "data-cy": "".concat(icon, "IconBtn"), children: _jsx(Icon, { icon: icon || 'warning', size: "16px" }) })) : (_jsx("span", { onClick: onClick, "data-cy": "".concat(icon, "IconBtn"), children: _jsx(Icon, { icon: icon || 'warning', size: "16px" }) })) }));
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" }) })) }));
14
9
  };
15
- var templateObject_1;
package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.d.ts CHANGED
@@ -1,7 +1,12 @@
1
- type Props = {
2
- canEdit: boolean;
3
- onClick: () => void;
4
- linkTo?: string;
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;
8
+ onUxChange?: GridActionsType['handleUxChange'];
9
+ withCheckboxes?: boolean;
5
10
  };
6
- export declare const RowActionsCell: ({ canEdit, onClick, linkTo }: Props) => JSX.Element;
11
+ export declare const RowActionsCell: FC<Props>;
7
12
  export {};
package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.js CHANGED
@@ -1,30 +1,58 @@
1
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
2
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
- return cooked;
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
- import { jsx as _jsx } from "react/jsx-runtime";
12
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
6
13
  import { useCallback, useMemo } from 'react';
7
- import styled from '@xstyled/styled-components';
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 actionColumnDefinition = _a.actionColumnDefinition, rowData = _a.rowData, uxState = _a.uxState, withCheckboxes = _a.withCheckboxes, onUxChange = _a.onUxChange, onRowAction = _a.onRowAction;
20
+ var rowDataId = rowData === null || rowData === void 0 ? void 0 : rowData.id;
21
+ // @TODO this should be in parent component
22
+ console.log('uxState', uxState);
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
+ // if canEdit and canRead are both true, canEdit supersedes canRead
31
+ var onClick = useCallback(function () {
32
+ var action = canEdit ? 'row_edit' : 'row_read';
33
+ onRowAction === null || onRowAction === void 0 ? void 0 : onRowAction(rowData === null || rowData === void 0 ? void 0 : rowData.id, action, rowData);
34
+ }, [canEdit, onRowAction, rowData]);
35
+ var linkTo = useMemo(function () {
36
+ var _a;
37
+ var mode = canEdit ? 'edit' : 'read';
38
+ 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 });
39
+ }, [canEdit, rowData === null || rowData === void 0 ? void 0 : rowData.id]);
40
+ var isChecked = !!(checkedRows === null || checkedRows === void 0 ? void 0 : checkedRows[rowDataId]);
41
+ // @TODO this should be in reducer
42
+ var onCheckboxChange = useCallback(function () {
43
+ var newCheckedRows = __assign({}, (checkedRows || {}));
44
+ if (!isChecked) {
45
+ newCheckedRows[rowDataId] = true;
46
+ }
47
+ else {
48
+ delete newCheckedRows[rowDataId];
49
+ }
50
+ onUxChange === null || onUxChange === void 0 ? void 0 : onUxChange('checkedRows', newCheckedRows);
51
+ }, [onUxChange, isChecked, rowDataId, checkedRows]);
13
52
  var handleOnClick = useCallback(function () {
14
53
  if (isFunction(onClick)) {
15
54
  onClick();
16
55
  }
17
56
  }, [onClick]);
18
- var actions = useMemo(function () {
19
- var actionOptions = [];
20
- if (canEdit) {
21
- actionOptions.push(_jsx(IconButtonInCell, { icon: "pen", onClick: handleOnClick, linkTo: linkTo }, "edit"));
22
- }
23
- else {
24
- actionOptions.push(_jsx(IconButtonInCell, { icon: "chevronRight", onClick: handleOnClick, linkTo: linkTo }, "read"));
25
- }
26
- return actionOptions;
27
- }, [canEdit, handleOnClick, linkTo]);
28
- return _jsx(Center, { onClick: handleOnClick, children: actions });
57
+ return (_jsxs(x.div, { w: "100%", display: "flex", alignItems: "center", gap: "16px", children: [withCheckboxes && (_jsx(x.div, { w: "100%", h: "100%", display: "flex", children: _jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" }) })), canEdit && _jsx(IconButtonInCell, { icon: "pen", onClick: handleOnClick, linkTo: linkTo }, "edit"), !canEdit && canRead && _jsx(IconButtonInCell, { icon: "chevronRight", onClick: handleOnClick, linkTo: linkTo }, "read")] }));
29
58
  };
30
- var templateObject_1;
package/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.d.ts CHANGED
@@ -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;