@reltio/components 1.4.1187 → 1.4.1188

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 (23) hide show
  1. package/cjs/components/VerticalHeadingsTable/TableCell/TableCell.d.ts +2 -1
  2. package/cjs/components/VerticalHeadingsTable/TableCell/TableCell.js +7 -2
  3. package/cjs/components/VerticalHeadingsTable/TableCell/styles.d.ts +1 -0
  4. package/cjs/components/VerticalHeadingsTable/TableCell/styles.js +9 -0
  5. package/cjs/components/VerticalHeadingsTable/TableCellWithDnd/TableCellWithDnd.d.ts +2 -1
  6. package/cjs/components/VerticalHeadingsTable/TableCellWithDnd/TableCellWithDnd.js +11 -8
  7. package/cjs/components/VerticalHeadingsTable/TableCellWithDnd/styles.d.ts +1 -1
  8. package/cjs/components/VerticalHeadingsTable/TableCellWithDnd/styles.js +3 -0
  9. package/cjs/components/VerticalHeadingsTable/TableRowWithDnd/TableRowWithDnd.d.ts +3 -1
  10. package/cjs/components/VerticalHeadingsTable/TableRowWithDnd/TableRowWithDnd.js +9 -5
  11. package/cjs/components/VerticalHeadingsTable/VerticalHeadingsTable.js +2 -1
  12. package/esm/components/VerticalHeadingsTable/TableCell/TableCell.d.ts +2 -1
  13. package/esm/components/VerticalHeadingsTable/TableCell/TableCell.js +7 -2
  14. package/esm/components/VerticalHeadingsTable/TableCell/styles.d.ts +1 -0
  15. package/esm/components/VerticalHeadingsTable/TableCell/styles.js +6 -0
  16. package/esm/components/VerticalHeadingsTable/TableCellWithDnd/TableCellWithDnd.d.ts +2 -1
  17. package/esm/components/VerticalHeadingsTable/TableCellWithDnd/TableCellWithDnd.js +11 -8
  18. package/esm/components/VerticalHeadingsTable/TableCellWithDnd/styles.d.ts +1 -1
  19. package/esm/components/VerticalHeadingsTable/TableCellWithDnd/styles.js +3 -0
  20. package/esm/components/VerticalHeadingsTable/TableRowWithDnd/TableRowWithDnd.d.ts +3 -1
  21. package/esm/components/VerticalHeadingsTable/TableRowWithDnd/TableRowWithDnd.js +9 -5
  22. package/esm/components/VerticalHeadingsTable/VerticalHeadingsTable.js +3 -2
  23. package/package.json +3 -3
package/cjs/components/VerticalHeadingsTable/TableCell/TableCell.d.ts CHANGED
@@ -5,6 +5,7 @@ declare type Props = {
5
5
  rowData: RowData;
6
6
  setHoveredColumn: (columnValue: ColumnData) => void;
7
7
  resetHoveredColumn: () => void;
8
+ someRowIsDragging?: boolean;
8
9
  };
9
- export declare const TableCell: ({ columnValue, rowData, setHoveredColumn, resetHoveredColumn }: Props) => JSX.Element;
10
+ export declare const TableCell: ({ columnValue, rowData, setHoveredColumn, resetHoveredColumn, someRowIsDragging }: Props) => JSX.Element;
10
11
  export {};
package/cjs/components/VerticalHeadingsTable/TableCell/TableCell.js CHANGED
@@ -5,12 +5,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.TableCell = void 0;
7
7
  var react_1 = __importDefault(require("react"));
8
+ var classnames_1 = __importDefault(require("classnames"));
8
9
  var helpers_1 = require("../helpers");
10
+ var styles_1 = require("./styles");
9
11
  var TableCell = function (_a) {
10
- var columnValue = _a.columnValue, rowData = _a.rowData, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
12
+ var _b;
13
+ var columnValue = _a.columnValue, rowData = _a.rowData, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn, someRowIsDragging = _a.someRowIsDragging;
14
+ var styles = styles_1.useStyles();
11
15
  var CellRenderer = rowData.cellRenderer || helpers_1.DefaultCellRenderer;
12
16
  var onMouseOver = setHoveredColumn ? function () { return setHoveredColumn(columnValue); } : undefined;
13
17
  return (react_1.default.createElement("td", { onMouseOver: onMouseOver, onMouseLeave: resetHoveredColumn },
14
- react_1.default.createElement(CellRenderer, { value: columnValue[rowData.id] })));
18
+ react_1.default.createElement("div", { className: classnames_1.default((_b = {}, _b[styles.hidden] = someRowIsDragging, _b)) },
19
+ react_1.default.createElement(CellRenderer, { value: columnValue[rowData.id] }))));
15
20
  };
16
21
  exports.TableCell = TableCell;
package/cjs/components/VerticalHeadingsTable/TableCell/styles.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"hidden">;
package/cjs/components/VerticalHeadingsTable/TableCell/styles.js ADDED
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useStyles = void 0;
4
+ var styles_1 = require("@material-ui/core/styles");
5
+ exports.useStyles = styles_1.makeStyles(function () { return ({
6
+ hidden: {
7
+ display: 'none'
8
+ }
9
+ }); });
package/cjs/components/VerticalHeadingsTable/TableCellWithDnd/TableCellWithDnd.d.ts CHANGED
@@ -8,6 +8,7 @@ declare type Props = {
8
8
  shouldRenderDragIndicator: boolean;
9
9
  setHoveredColumn: (columnValue: ColumnData) => void;
10
10
  resetHoveredColumn: () => void;
11
+ someRowIsDragging?: boolean;
11
12
  };
12
- export declare const TableCellWithDnd: ({ columnValue, rowData, index, onMoveColumn, shouldRenderDragIndicator, setHoveredColumn, resetHoveredColumn }: Props) => JSX.Element;
13
+ export declare const TableCellWithDnd: ({ columnValue, rowData, index, onMoveColumn, shouldRenderDragIndicator, setHoveredColumn, resetHoveredColumn, someRowIsDragging }: Props) => JSX.Element;
13
14
  export {};
package/cjs/components/VerticalHeadingsTable/TableCellWithDnd/TableCellWithDnd.js CHANGED
@@ -24,6 +24,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
24
24
  Object.defineProperty(exports, "__esModule", { value: true });
25
25
  exports.TableCellWithDnd = void 0;
26
26
  var react_1 = __importStar(require("react"));
27
+ var classnames_1 = __importDefault(require("classnames"));
27
28
  var DragIndicator_1 = __importDefault(require("@material-ui/icons/DragIndicator"));
28
29
  var react_dnd_1 = require("react-dnd");
29
30
  var react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
@@ -31,13 +32,14 @@ var types_1 = require("../types");
31
32
  var helpers_1 = require("../helpers");
32
33
  var styles_1 = require("./styles");
33
34
  var TableCellWithDnd = function (_a) {
34
- var columnValue = _a.columnValue, rowData = _a.rowData, index = _a.index, onMoveColumn = _a.onMoveColumn, shouldRenderDragIndicator = _a.shouldRenderDragIndicator, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
35
+ var _b;
36
+ var columnValue = _a.columnValue, rowData = _a.rowData, index = _a.index, onMoveColumn = _a.onMoveColumn, shouldRenderDragIndicator = _a.shouldRenderDragIndicator, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn, someRowIsDragging = _a.someRowIsDragging;
35
37
  var styles = styles_1.useStyles();
36
38
  var dropRef = react_1.default.useRef(null);
37
39
  var dragRef = react_1.default.useRef(null);
38
40
  var getColumnWidth = function () { var _a; return (_a = dropRef === null || dropRef === void 0 ? void 0 : dropRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth; };
39
41
  var CellRenderer = rowData.cellRenderer || helpers_1.DefaultCellRenderer;
40
- var _b = react_dnd_1.useDrop({
42
+ var _c = react_dnd_1.useDrop({
41
43
  accept: types_1.DndItemTypes.Column,
42
44
  hover: function (item, monitor) {
43
45
  var _a;
@@ -65,8 +67,8 @@ var TableCellWithDnd = function (_a) {
65
67
  collect: function (monitor) { return ({
66
68
  targetId: monitor.getHandlerId()
67
69
  }); }
68
- }), targetId = _b[0].targetId, drop = _b[1];
69
- var _c = react_dnd_1.useDrag({
70
+ }), targetId = _c[0].targetId, drop = _c[1];
71
+ var _d = react_dnd_1.useDrag({
70
72
  item: { type: types_1.DndItemTypes.Column, index: index, getColumnWidth: getColumnWidth, columnValue: columnValue, rowData: rowData },
71
73
  isDragging: function (monitor) {
72
74
  return monitor.getItem().index === index;
@@ -75,7 +77,7 @@ var TableCellWithDnd = function (_a) {
75
77
  opacity: monitor.isDragging() ? 0 : 1,
76
78
  sourceId: monitor.getHandlerId()
77
79
  }); }
78
- }), _d = _c[0], opacity = _d.opacity, sourceId = _d.sourceId, drag = _c[1], preview = _c[2];
80
+ }), _e = _d[0], opacity = _e.opacity, sourceId = _e.sourceId, drag = _d[1], preview = _d[2];
79
81
  react_1.useEffect(function () {
80
82
  preview(react_dnd_html5_backend_1.getEmptyImage(), { captureDraggingState: true });
81
83
  drop(dropRef);
@@ -83,8 +85,9 @@ var TableCellWithDnd = function (_a) {
83
85
  }, []);
84
86
  var onMouseOver = setHoveredColumn ? function () { return setHoveredColumn(columnValue); } : undefined;
85
87
  return (react_1.default.createElement("td", { style: { opacity: opacity }, ref: dropRef, className: styles.tableData, "data-source-id": sourceId, "data-target-id": targetId, onMouseOver: onMouseOver, onMouseLeave: resetHoveredColumn },
86
- shouldRenderDragIndicator && (react_1.default.createElement("div", { ref: dragRef, className: styles.dragIndicator },
87
- react_1.default.createElement(DragIndicator_1.default, { className: styles.dragIndicatorIcon }))),
88
- react_1.default.createElement(CellRenderer, { value: columnValue[rowData.id] })));
88
+ react_1.default.createElement("div", { className: classnames_1.default((_b = {}, _b[styles.hidden] = someRowIsDragging, _b)) },
89
+ shouldRenderDragIndicator && (react_1.default.createElement("div", { ref: dragRef, className: styles.dragIndicator },
90
+ react_1.default.createElement(DragIndicator_1.default, { className: styles.dragIndicatorIcon }))),
91
+ react_1.default.createElement(CellRenderer, { value: columnValue[rowData.id] }))));
89
92
  };
90
93
  exports.TableCellWithDnd = TableCellWithDnd;
package/cjs/components/VerticalHeadingsTable/TableCellWithDnd/styles.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"tableData" | "dragIndicator" | "dragIndicatorIcon">;
1
+ export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"hidden" | "tableData" | "dragIndicator" | "dragIndicatorIcon">;
package/cjs/components/VerticalHeadingsTable/TableCellWithDnd/styles.js CHANGED
@@ -25,5 +25,8 @@ exports.useStyles = styles_1.makeStyles(function (theme) { return ({
25
25
  width: '14.4px',
26
26
  height: '18px',
27
27
  color: theme.palette.text.secondary
28
+ },
29
+ hidden: {
30
+ display: 'none'
28
31
  }
29
32
  }); });
package/cjs/components/VerticalHeadingsTable/TableRowWithDnd/TableRowWithDnd.d.ts CHANGED
@@ -8,6 +8,8 @@ declare type Props = {
8
8
  onMoveColumn?: (dragId: string, hoverId: string) => void;
9
9
  setHoveredColumn: (columnValue: ColumnData) => void;
10
10
  resetHoveredColumn: () => void;
11
+ someRowIsDragging: boolean;
12
+ setSomeRowIsDragging: (isDragging: boolean) => void;
11
13
  };
12
- export declare const TableRowWithDnd: ({ rowData, index, columnsData, onMoveRow, onMoveColumn, setHoveredColumn, resetHoveredColumn }: Props) => JSX.Element;
14
+ export declare const TableRowWithDnd: ({ rowData, index, columnsData, onMoveRow, onMoveColumn, setHoveredColumn, resetHoveredColumn, someRowIsDragging, setSomeRowIsDragging }: Props) => JSX.Element;
13
15
  export {};
package/cjs/components/VerticalHeadingsTable/TableRowWithDnd/TableRowWithDnd.js CHANGED
@@ -27,7 +27,7 @@ var TableCell_1 = require("../TableCell/TableCell");
27
27
  var TableCellWithDnd_1 = require("../TableCellWithDnd/TableCellWithDnd");
28
28
  var types_1 = require("../types");
29
29
  var TableRowWithDnd = function (_a) {
30
- var rowData = _a.rowData, index = _a.index, columnsData = _a.columnsData, onMoveRow = _a.onMoveRow, onMoveColumn = _a.onMoveColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
30
+ var rowData = _a.rowData, index = _a.index, columnsData = _a.columnsData, onMoveRow = _a.onMoveRow, onMoveColumn = _a.onMoveColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn, someRowIsDragging = _a.someRowIsDragging, setSomeRowIsDragging = _a.setSomeRowIsDragging;
31
31
  var dropRef = react_1.default.useRef(null);
32
32
  var dragRef = react_1.default.useRef(null);
33
33
  var _b = react_dnd_1.useDrop({
@@ -61,18 +61,22 @@ var TableRowWithDnd = function (_a) {
61
61
  var _c = react_dnd_1.useDrag({
62
62
  item: { type: types_1.DndItemTypes.Row, index: index, id: rowData.id },
63
63
  collect: function (monitor) { return ({
64
- opacity: monitor.isDragging() ? 0 : 1,
65
- sourceId: monitor.getHandlerId()
64
+ sourceId: monitor.getHandlerId(),
65
+ isDragging: monitor.isDragging()
66
66
  }); }
67
- }), _d = _c[0], opacity = _d.opacity, sourceId = _d.sourceId, drag = _c[1], preview = _c[2];
67
+ }), _d = _c[0], isDragging = _d.isDragging, sourceId = _d.sourceId, drag = _c[1], preview = _c[2];
68
68
  react_1.useEffect(function () {
69
69
  preview(drop(dropRef));
70
70
  drag(dragRef);
71
71
  }, []);
72
+ react_1.useEffect(function () {
73
+ setSomeRowIsDragging(isDragging);
74
+ }, [isDragging, setSomeRowIsDragging]);
75
+ var opacity = isDragging ? 0 : 1;
72
76
  return (react_1.default.createElement("tr", { className: rowData.rowClassName, style: { opacity: opacity }, ref: dropRef, "data-target-id": targetId, "data-source-id": sourceId },
73
77
  react_1.default.createElement(TableHeadCell_1.TableHeadCell, { rowData: rowData, isDraggable: true, dragRef: dragRef }),
74
78
  columnsData.map(function (columnValue, index) {
75
- return onMoveColumn ? (react_1.default.createElement(TableCellWithDnd_1.TableCellWithDnd, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, index: index, onMoveColumn: onMoveColumn, shouldRenderDragIndicator: false, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (react_1.default.createElement(TableCell_1.TableCell, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
79
+ return onMoveColumn ? (react_1.default.createElement(TableCellWithDnd_1.TableCellWithDnd, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, index: index, onMoveColumn: onMoveColumn, shouldRenderDragIndicator: false, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, someRowIsDragging: someRowIsDragging })) : (react_1.default.createElement(TableCell_1.TableCell, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, someRowIsDragging: someRowIsDragging }));
76
80
  })));
77
81
  };
78
82
  exports.TableRowWithDnd = TableRowWithDnd;
package/cjs/components/VerticalHeadingsTable/VerticalHeadingsTable.js CHANGED
@@ -26,6 +26,7 @@ var TableColumnDragLayer_1 = require("./TableColumnDragLayer/TableColumnDragLaye
26
26
  var VerticalHeadingsTable = function (_a) {
27
27
  var _b;
28
28
  var className = _a.className, rowsData = _a.rowsData, columnsData = _a.columnsData, _c = _a.theadRowsNumber, theadRowsNumber = _c === void 0 ? 0 : _c, onMoveRow = _a.onMoveRow, onMoveColumn = _a.onMoveColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
29
+ var _d = react_1.useState(false), someRowIsDragging = _d[0], setSomeRowIsDragging = _d[1];
29
30
  var tableRef = react_1.useRef(null);
30
31
  var tableHeight = (_b = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
31
32
  var isDNDActive = !!onMoveRow || !!onMoveColumn;
@@ -34,7 +35,7 @@ var VerticalHeadingsTable = function (_a) {
34
35
  react_1.default.createElement("table", { ref: tableRef, className: className },
35
36
  theadRowsNumber > 0 && (react_1.default.createElement("thead", null, rowsData.slice(0, theadRowsNumber).map(function (rowData, index) { return (react_1.default.createElement(TableRow_1.TableRow, { key: rowData.id || index, rowData: rowData, columnsData: columnsData, index: index, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })); }))),
36
37
  react_1.default.createElement("tbody", null, rowsData.slice(theadRowsNumber).map(function (rowData, index) {
37
- return onMoveRow ? (react_1.default.createElement(TableRowWithDnd_1.TableRowWithDnd, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveRow: onMoveRow, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (react_1.default.createElement(TableRow_1.TableRow, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
38
+ return onMoveRow ? (react_1.default.createElement(TableRowWithDnd_1.TableRowWithDnd, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveRow: onMoveRow, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, someRowIsDragging: someRowIsDragging, setSomeRowIsDragging: setSomeRowIsDragging })) : (react_1.default.createElement(TableRow_1.TableRow, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
38
39
  })))));
39
40
  };
40
41
  exports.default = react_1.memo(VerticalHeadingsTable);
package/esm/components/VerticalHeadingsTable/TableCell/TableCell.d.ts CHANGED
@@ -5,6 +5,7 @@ declare type Props = {
5
5
  rowData: RowData;
6
6
  setHoveredColumn: (columnValue: ColumnData) => void;
7
7
  resetHoveredColumn: () => void;
8
+ someRowIsDragging?: boolean;
8
9
  };
9
- export declare const TableCell: ({ columnValue, rowData, setHoveredColumn, resetHoveredColumn }: Props) => JSX.Element;
10
+ export declare const TableCell: ({ columnValue, rowData, setHoveredColumn, resetHoveredColumn, someRowIsDragging }: Props) => JSX.Element;
10
11
  export {};
package/esm/components/VerticalHeadingsTable/TableCell/TableCell.js CHANGED
@@ -1,9 +1,14 @@
1
1
  import React from 'react';
2
+ import classnames from 'classnames';
2
3
  import { DefaultCellRenderer } from '../helpers';
4
+ import { useStyles } from './styles';
3
5
  export var TableCell = function (_a) {
4
- var columnValue = _a.columnValue, rowData = _a.rowData, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
6
+ var _b;
7
+ var columnValue = _a.columnValue, rowData = _a.rowData, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn, someRowIsDragging = _a.someRowIsDragging;
8
+ var styles = useStyles();
5
9
  var CellRenderer = rowData.cellRenderer || DefaultCellRenderer;
6
10
  var onMouseOver = setHoveredColumn ? function () { return setHoveredColumn(columnValue); } : undefined;
7
11
  return (React.createElement("td", { onMouseOver: onMouseOver, onMouseLeave: resetHoveredColumn },
8
- React.createElement(CellRenderer, { value: columnValue[rowData.id] })));
12
+ React.createElement("div", { className: classnames((_b = {}, _b[styles.hidden] = someRowIsDragging, _b)) },
13
+ React.createElement(CellRenderer, { value: columnValue[rowData.id] }))));
9
14
  };
package/esm/components/VerticalHeadingsTable/TableCell/styles.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"hidden">;
package/esm/components/VerticalHeadingsTable/TableCell/styles.js ADDED
@@ -0,0 +1,6 @@
1
+ import { makeStyles } from '@material-ui/core/styles';
2
+ export var useStyles = makeStyles(function () { return ({
3
+ hidden: {
4
+ display: 'none'
5
+ }
6
+ }); });
package/esm/components/VerticalHeadingsTable/TableCellWithDnd/TableCellWithDnd.d.ts CHANGED
@@ -8,6 +8,7 @@ declare type Props = {
8
8
  shouldRenderDragIndicator: boolean;
9
9
  setHoveredColumn: (columnValue: ColumnData) => void;
10
10
  resetHoveredColumn: () => void;
11
+ someRowIsDragging?: boolean;
11
12
  };
12
- export declare const TableCellWithDnd: ({ columnValue, rowData, index, onMoveColumn, shouldRenderDragIndicator, setHoveredColumn, resetHoveredColumn }: Props) => JSX.Element;
13
+ export declare const TableCellWithDnd: ({ columnValue, rowData, index, onMoveColumn, shouldRenderDragIndicator, setHoveredColumn, resetHoveredColumn, someRowIsDragging }: Props) => JSX.Element;
13
14
  export {};
package/esm/components/VerticalHeadingsTable/TableCellWithDnd/TableCellWithDnd.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { useEffect } from 'react';
2
+ import classnames from 'classnames';
2
3
  import DragIndicatorIcon from '@material-ui/icons/DragIndicator';
3
4
  import { useDrag, useDrop } from 'react-dnd';
4
5
  import { getEmptyImage } from 'react-dnd-html5-backend';
@@ -6,13 +7,14 @@ import { DndItemTypes } from '../types';
6
7
  import { DefaultCellRenderer } from '../helpers';
7
8
  import { useStyles } from './styles';
8
9
  export var TableCellWithDnd = function (_a) {
9
- var columnValue = _a.columnValue, rowData = _a.rowData, index = _a.index, onMoveColumn = _a.onMoveColumn, shouldRenderDragIndicator = _a.shouldRenderDragIndicator, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
10
+ var _b;
11
+ var columnValue = _a.columnValue, rowData = _a.rowData, index = _a.index, onMoveColumn = _a.onMoveColumn, shouldRenderDragIndicator = _a.shouldRenderDragIndicator, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn, someRowIsDragging = _a.someRowIsDragging;
10
12
  var styles = useStyles();
11
13
  var dropRef = React.useRef(null);
12
14
  var dragRef = React.useRef(null);
13
15
  var getColumnWidth = function () { var _a; return (_a = dropRef === null || dropRef === void 0 ? void 0 : dropRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth; };
14
16
  var CellRenderer = rowData.cellRenderer || DefaultCellRenderer;
15
- var _b = useDrop({
17
+ var _c = useDrop({
16
18
  accept: DndItemTypes.Column,
17
19
  hover: function (item, monitor) {
18
20
  var _a;
@@ -40,8 +42,8 @@ export var TableCellWithDnd = function (_a) {
40
42
  collect: function (monitor) { return ({
41
43
  targetId: monitor.getHandlerId()
42
44
  }); }
43
- }), targetId = _b[0].targetId, drop = _b[1];
44
- var _c = useDrag({
45
+ }), targetId = _c[0].targetId, drop = _c[1];
46
+ var _d = useDrag({
45
47
  item: { type: DndItemTypes.Column, index: index, getColumnWidth: getColumnWidth, columnValue: columnValue, rowData: rowData },
46
48
  isDragging: function (monitor) {
47
49
  return monitor.getItem().index === index;
@@ -50,7 +52,7 @@ export var TableCellWithDnd = function (_a) {
50
52
  opacity: monitor.isDragging() ? 0 : 1,
51
53
  sourceId: monitor.getHandlerId()
52
54
  }); }
53
- }), _d = _c[0], opacity = _d.opacity, sourceId = _d.sourceId, drag = _c[1], preview = _c[2];
55
+ }), _e = _d[0], opacity = _e.opacity, sourceId = _e.sourceId, drag = _d[1], preview = _d[2];
54
56
  useEffect(function () {
55
57
  preview(getEmptyImage(), { captureDraggingState: true });
56
58
  drop(dropRef);
@@ -58,7 +60,8 @@ export var TableCellWithDnd = function (_a) {
58
60
  }, []);
59
61
  var onMouseOver = setHoveredColumn ? function () { return setHoveredColumn(columnValue); } : undefined;
60
62
  return (React.createElement("td", { style: { opacity: opacity }, ref: dropRef, className: styles.tableData, "data-source-id": sourceId, "data-target-id": targetId, onMouseOver: onMouseOver, onMouseLeave: resetHoveredColumn },
61
- shouldRenderDragIndicator && (React.createElement("div", { ref: dragRef, className: styles.dragIndicator },
62
- React.createElement(DragIndicatorIcon, { className: styles.dragIndicatorIcon }))),
63
- React.createElement(CellRenderer, { value: columnValue[rowData.id] })));
63
+ React.createElement("div", { className: classnames((_b = {}, _b[styles.hidden] = someRowIsDragging, _b)) },
64
+ shouldRenderDragIndicator && (React.createElement("div", { ref: dragRef, className: styles.dragIndicator },
65
+ React.createElement(DragIndicatorIcon, { className: styles.dragIndicatorIcon }))),
66
+ React.createElement(CellRenderer, { value: columnValue[rowData.id] }))));
64
67
  };
package/esm/components/VerticalHeadingsTable/TableCellWithDnd/styles.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"tableData" | "dragIndicator" | "dragIndicatorIcon">;
1
+ export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"hidden" | "tableData" | "dragIndicator" | "dragIndicatorIcon">;
package/esm/components/VerticalHeadingsTable/TableCellWithDnd/styles.js CHANGED
@@ -22,5 +22,8 @@ export var useStyles = makeStyles(function (theme) { return ({
22
22
  width: '14.4px',
23
23
  height: '18px',
24
24
  color: theme.palette.text.secondary
25
+ },
26
+ hidden: {
27
+ display: 'none'
25
28
  }
26
29
  }); });
package/esm/components/VerticalHeadingsTable/TableRowWithDnd/TableRowWithDnd.d.ts CHANGED
@@ -8,6 +8,8 @@ declare type Props = {
8
8
  onMoveColumn?: (dragId: string, hoverId: string) => void;
9
9
  setHoveredColumn: (columnValue: ColumnData) => void;
10
10
  resetHoveredColumn: () => void;
11
+ someRowIsDragging: boolean;
12
+ setSomeRowIsDragging: (isDragging: boolean) => void;
11
13
  };
12
- export declare const TableRowWithDnd: ({ rowData, index, columnsData, onMoveRow, onMoveColumn, setHoveredColumn, resetHoveredColumn }: Props) => JSX.Element;
14
+ export declare const TableRowWithDnd: ({ rowData, index, columnsData, onMoveRow, onMoveColumn, setHoveredColumn, resetHoveredColumn, someRowIsDragging, setSomeRowIsDragging }: Props) => JSX.Element;
13
15
  export {};
package/esm/components/VerticalHeadingsTable/TableRowWithDnd/TableRowWithDnd.js CHANGED
@@ -5,7 +5,7 @@ import { TableCell } from '../TableCell/TableCell';
5
5
  import { TableCellWithDnd } from '../TableCellWithDnd/TableCellWithDnd';
6
6
  import { DndItemTypes } from '../types';
7
7
  export var TableRowWithDnd = function (_a) {
8
- var rowData = _a.rowData, index = _a.index, columnsData = _a.columnsData, onMoveRow = _a.onMoveRow, onMoveColumn = _a.onMoveColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
8
+ var rowData = _a.rowData, index = _a.index, columnsData = _a.columnsData, onMoveRow = _a.onMoveRow, onMoveColumn = _a.onMoveColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn, someRowIsDragging = _a.someRowIsDragging, setSomeRowIsDragging = _a.setSomeRowIsDragging;
9
9
  var dropRef = React.useRef(null);
10
10
  var dragRef = React.useRef(null);
11
11
  var _b = useDrop({
@@ -39,17 +39,21 @@ export var TableRowWithDnd = function (_a) {
39
39
  var _c = useDrag({
40
40
  item: { type: DndItemTypes.Row, index: index, id: rowData.id },
41
41
  collect: function (monitor) { return ({
42
- opacity: monitor.isDragging() ? 0 : 1,
43
- sourceId: monitor.getHandlerId()
42
+ sourceId: monitor.getHandlerId(),
43
+ isDragging: monitor.isDragging()
44
44
  }); }
45
- }), _d = _c[0], opacity = _d.opacity, sourceId = _d.sourceId, drag = _c[1], preview = _c[2];
45
+ }), _d = _c[0], isDragging = _d.isDragging, sourceId = _d.sourceId, drag = _c[1], preview = _c[2];
46
46
  useEffect(function () {
47
47
  preview(drop(dropRef));
48
48
  drag(dragRef);
49
49
  }, []);
50
+ useEffect(function () {
51
+ setSomeRowIsDragging(isDragging);
52
+ }, [isDragging, setSomeRowIsDragging]);
53
+ var opacity = isDragging ? 0 : 1;
50
54
  return (React.createElement("tr", { className: rowData.rowClassName, style: { opacity: opacity }, ref: dropRef, "data-target-id": targetId, "data-source-id": sourceId },
51
55
  React.createElement(TableHeadCell, { rowData: rowData, isDraggable: true, dragRef: dragRef }),
52
56
  columnsData.map(function (columnValue, index) {
53
- return onMoveColumn ? (React.createElement(TableCellWithDnd, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, index: index, onMoveColumn: onMoveColumn, shouldRenderDragIndicator: false, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (React.createElement(TableCell, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
57
+ return onMoveColumn ? (React.createElement(TableCellWithDnd, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, index: index, onMoveColumn: onMoveColumn, shouldRenderDragIndicator: false, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, someRowIsDragging: someRowIsDragging })) : (React.createElement(TableCell, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, someRowIsDragging: someRowIsDragging }));
54
58
  })));
55
59
  };
package/esm/components/VerticalHeadingsTable/VerticalHeadingsTable.js CHANGED
@@ -1,10 +1,11 @@
1
- import React, { memo, useRef } from 'react';
1
+ import React, { memo, useRef, useState } from 'react';
2
2
  import { TableRow } from './TableRow/TableRow';
3
3
  import { TableRowWithDnd } from './TableRowWithDnd/TableRowWithDnd';
4
4
  import { TableColumnDragLayer } from './TableColumnDragLayer/TableColumnDragLayer';
5
5
  var VerticalHeadingsTable = function (_a) {
6
6
  var _b;
7
7
  var className = _a.className, rowsData = _a.rowsData, columnsData = _a.columnsData, _c = _a.theadRowsNumber, theadRowsNumber = _c === void 0 ? 0 : _c, onMoveRow = _a.onMoveRow, onMoveColumn = _a.onMoveColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
8
+ var _d = useState(false), someRowIsDragging = _d[0], setSomeRowIsDragging = _d[1];
8
9
  var tableRef = useRef(null);
9
10
  var tableHeight = (_b = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
10
11
  var isDNDActive = !!onMoveRow || !!onMoveColumn;
@@ -13,7 +14,7 @@ var VerticalHeadingsTable = function (_a) {
13
14
  React.createElement("table", { ref: tableRef, className: className },
14
15
  theadRowsNumber > 0 && (React.createElement("thead", null, rowsData.slice(0, theadRowsNumber).map(function (rowData, index) { return (React.createElement(TableRow, { key: rowData.id || index, rowData: rowData, columnsData: columnsData, index: index, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })); }))),
15
16
  React.createElement("tbody", null, rowsData.slice(theadRowsNumber).map(function (rowData, index) {
16
- return onMoveRow ? (React.createElement(TableRowWithDnd, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveRow: onMoveRow, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (React.createElement(TableRow, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
17
+ return onMoveRow ? (React.createElement(TableRowWithDnd, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveRow: onMoveRow, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, someRowIsDragging: someRowIsDragging, setSomeRowIsDragging: setSomeRowIsDragging })) : (React.createElement(TableRow, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
17
18
  })))));
18
19
  };
19
20
  export default memo(VerticalHeadingsTable);
package/package.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@reltio/components",
3
- "version": "1.4.1187",
3
+ "version": "1.4.1188",
4
4
  "license": "SEE LICENSE IN LICENSE FILE",
5
5
  "main": "./cjs/index.js",
6
6
  "module": "./esm/index.js",
7
7
  "dependencies": {
8
8
  "@date-io/moment": "^1.3.5",
9
9
  "@react-google-maps/api": "2.7.0",
10
- "@reltio/mdm-module": "^1.4.1187",
11
- "@reltio/mdm-sdk": "^1.4.1187",
10
+ "@reltio/mdm-module": "^1.4.1188",
11
+ "@reltio/mdm-sdk": "^1.4.1188",
12
12
  "classnames": "^2.2.5",
13
13
  "d3-cloud": "^1.2.5",
14
14
  "d3-geo": "^2.0.1",