@reltio/components 1.4.2017 → 1.4.2019

package/cjs/UploadImageDialog/components/TargetBox/TargetBox.js

@@ -1,40 +1,74 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TargetBox = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var react_dnd_1 = require("react-dnd");
-var react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
 var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var SelectImageButton_1 = require("../SelectImageButton");
 var UploadIcon_1 = __importDefault(require("../../../icons/UploadIcon"));
 var constants_1 = require("../../constants");
 var styles_1 = require("./styles");
+var ACCEPTABLE_FILE_TYPE = 'Files';
 var TargetBox = function (_a) {
     var _b;
     var onAppendFile = _a.onAppendFile, className = _a.className;
     var styles = (0, styles_1.useStyles)();
-    var _c = (0, react_dnd_1.useDrop)({
-        accept: [react_dnd_html5_backend_1.NativeTypes.FILE],
-        drop: function (item) {
-            if (item) {
-                // TODO remove after update react-dnd
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                onAppendFile(item.files[0]);
-            }
-        },
-        collect: function (monitor) { return ({
-            isOver: monitor.isOver(),
-            canDrop: monitor.canDrop()
-        }); }
-    }), _d = _c[0], canDrop = _d.canDrop, isOver = _d.isOver, drop = _c[1];
-    var isActive = canDrop && isOver;
-    return (react_1.default.createElement("div", { ref: drop, className: (0, classnames_1.default)(styles.root, (_b = {}, _b[styles.isActive] = isActive, _b), className) },
+    var _c = (0, react_1.useState)(false), isActive = _c[0], setIsActive = _c[1];
+    var handleDragOver = (0, react_1.useCallback)(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var filesType = e.dataTransfer.types[0];
+        var isValidType = filesType === ACCEPTABLE_FILE_TYPE;
+        e.dataTransfer.dropEffect = isValidType ? 'copy' : 'none';
+        setIsActive(isValidType);
+    }, []);
+    var handleDragLeave = (0, react_1.useCallback)(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var relatedTarget = e.relatedTarget;
+        var isLeave = relatedTarget && !e.currentTarget.contains(relatedTarget);
+        if (isLeave || !relatedTarget) {
+            setIsActive(false);
+        }
+    }, []);
+    var handleDrop = (0, react_1.useCallback)(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsActive(false);
+        var filesType = e.dataTransfer.types[0];
+        if (filesType === ACCEPTABLE_FILE_TYPE) {
+            var file = e.dataTransfer.files[0];
+            onAppendFile(file);
+        }
+    }, [onAppendFile]);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.root, (_b = {}, _b[styles.isActive] = isActive, _b), className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop },
         react_1.default.createElement(UploadIcon_1.default, { className: styles.icon }),
         react_1.default.createElement(Typography_1.default, { className: styles.title }, ui_i18n_1.default.text('Drag an image here')),
         react_1.default.createElement(Typography_1.default, { className: styles.description }, ui_i18n_1.default.text('Acceptable image types would include JPG, PNG, TIFF, GIF, BMP. Maximum image size: ${MAX_IMAGE_SIZE}Mb', {

package/cjs/UploadImageDialog/components/TargetBox/TargetBox.specs.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/cjs/UploadImageDialog/components/TargetBox/TargetBox.specs.js

@@ -4,24 +4,65 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
-var react_dnd_1 = require("react-dnd");
-var react_dnd_test_backend_1 = __importDefault(require("react-dnd-test-backend"));
-var SelectImageButton_1 = require("../SelectImageButton");
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
 var TargetBox_1 = require("./TargetBox");
-describe('TargetBox tests', function () {
-    var onAppendFile;
-    beforeEach(function () {
-        onAppendFile = jest.fn();
+var mockOnAppendFile = jest.fn();
+var setUp = function () {
+    return (0, react_2.render)(react_1.default.createElement(TargetBox_1.TargetBox, { onAppendFile: mockOnAppendFile }));
+};
+describe('TargetBox', function () {
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should renders well', function () {
+        var getByText = setUp().getByText;
+        expect(getByText('Drag an image here')).toBeInTheDocument();
+    });
+    it('should activates drag state on drag over with acceptable file type', function () {
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        react_2.fireEvent.dragOver(dropZone, {
+            dataTransfer: { types: ['Files'], dropEffect: 'copy' }
+        });
+        expect(dropZone).toHaveClass('isActive');
+    });
+    it('should does not activate drag state with unacceptable file type', function () {
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        react_2.fireEvent.dragOver(dropZone, {
+            dataTransfer: { types: ['Text'], dropEffect: 'none' }
+        });
+        expect(dropZone).not.toHaveClass('isActive');
+    });
+    it('should deactivates drag state on drag leave', function () {
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        react_2.fireEvent.dragOver(dropZone, { dataTransfer: { types: ['Files'] } });
+        expect(dropZone).toHaveClass('isActive');
+        react_2.fireEvent.dragLeave(dropZone);
+        expect(dropZone).not.toHaveClass('isActive');
     });
-    it('should not pass .isActive className to root element if dnd zone is not active', function () {
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_test_backend_1.default },
-            react_1.default.createElement(TargetBox_1.TargetBox, { onAppendFile: onAppendFile })));
-        expect(component.find('.root').prop('className')).toBe('root');
+    it('should calls onAppendFile with the dropped file', function () {
+        var file = new File(['test content'], 'test.png', { type: 'image/png' });
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        react_2.fireEvent.drop(dropZone, {
+            dataTransfer: {
+                files: [file],
+                types: ['Files']
+            }
+        });
+        expect(mockOnAppendFile).toHaveBeenCalledWith(file);
     });
-    it('should onAppendFile prop correctly to SelectImageButton', function () {
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_test_backend_1.default },
-            react_1.default.createElement(TargetBox_1.TargetBox, { onAppendFile: onAppendFile })));
-        expect(component.find(SelectImageButton_1.SelectImageButton).prop('onAppendFile')).toEqual(onAppendFile);
+    it('should does not call onAppendFile if dropped item is not of file type', function () {
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        react_2.fireEvent.drop(dropZone, {
+            dataTransfer: {
+                types: ['Text']
+            }
+        });
+        expect(mockOnAppendFile).not.toHaveBeenCalled();
     });
 });

package/cjs/UploadImageDialog/components/TargetBox/styles.js

@@ -12,7 +12,8 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     icon: {
         width: '190px',
         height: '190px',
-        marginBottom: '24px'
+        marginBottom: '24px',
+        pointerEvents: 'none'
     },
     title: {
         marginBottom: '8px',

package/cjs/VerticalHeadingsTable/DndVerticalHeadingsTable.test.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/VerticalHeadingsTable/DndVerticalHeadingsTable.test.js

@@ -0,0 +1,119 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+var dndKit_1 = require("../test-utils/dndKit");
+jest.mock('@dnd-kit/core', function () { return dndKit_1.mockDndKit; });
+var VerticalHeadingsTable_1 = __importDefault(require("./VerticalHeadingsTable"));
+var setUp = function (props) {
+    var containerRef = {
+        current: {
+            clientHeight: 500,
+            clientWidth: 500,
+            getBoundingClientRect: function () {
+                return {
+                    top: 0,
+                    left: 0
+                };
+            }
+        }
+    };
+    return (0, react_2.render)(react_1.default.createElement(VerticalHeadingsTable_1.default, __assign({ containerRef: containerRef }, props)));
+};
+describe('VerticalHeadingsTable drag and drop tests', function () {
+    var rowsData = [
+        { id: 'entityCard', label: '' },
+        { id: 'matchMethod', label: 'Match Method' },
+        { id: 'workflowCard', label: '' },
+        { id: 'attributes.FirstName', label: 'First Name' },
+        { id: 'attributes.LastName', label: 'Last Name' },
+        { id: 'attributes.Int', label: 'Int' }
+    ];
+    var columnsData = __spreadArray([], new Array(3), true).map(function (_, index) { return ({
+        entityCard: "entityCard-".concat(index),
+        matchMethod: "matchMethod-".concat(index),
+        workflowCard: "workflowCard-".concat(index),
+        'attributes.FirstName': "attributes.FirstName-".concat(index),
+        'attributes.LastName': "attributes.LastName-".concat(index),
+        'attributes.Int': "attributes.Int-".concat(index),
+        id: "entities/".concat(index),
+        isDraggable: index !== 0
+    }); });
+    var defaultProps = {
+        theadRowsNumber: 2,
+        rowsData: rowsData,
+        columnsData: columnsData,
+        onMoveColumn: jest.fn(),
+        onDropColumn: jest.fn(),
+        onMoveRow: jest.fn(),
+        onDropRow: jest.fn()
+    };
+    it('should reorder draggable columns correctly', function () {
+        setUp(defaultProps);
+        var from = react_2.screen.getByText(columnsData[1].entityCard);
+        var to = react_2.screen.getByText(columnsData[2].entityCard);
+        react_2.fireEvent.mouseDown(from.firstChild);
+        react_2.fireEvent.mouseOver(to.parentNode);
+        react_2.fireEvent.mouseUp(from.firstChild);
+        expect(defaultProps.onMoveColumn).toHaveBeenCalledWith(columnsData[1].id, columnsData[2].id);
+        expect(defaultProps.onDropColumn).toHaveBeenCalled();
+    });
+    it('should reorder draggable rows correctly', function () {
+        setUp(defaultProps);
+        var from = react_2.screen.getByText(rowsData[3].label);
+        var to = react_2.screen.getByText(rowsData[5].label);
+        react_2.fireEvent.mouseDown(from.firstChild);
+        react_2.fireEvent.mouseOver(to.parentNode);
+        react_2.fireEvent.mouseUp(from.firstChild);
+        expect(defaultProps.onMoveRow).toHaveBeenCalledWith(rowsData[3].id, rowsData[5].id);
+        expect(defaultProps.onDropRow).toHaveBeenCalled();
+    });
+    it('should render backdrop during drag', function () {
+        setUp(defaultProps);
+        var draggingRow = react_2.screen.getByText(rowsData[3].label);
+        react_2.fireEvent.mouseDown(draggingRow.firstChild);
+        expect(document.getElementsByClassName('backDrop')).toHaveLength(1);
+        react_2.fireEvent.mouseUp(draggingRow.firstChild);
+        expect(document.getElementsByClassName('backDrop')).toHaveLength(0);
+        var draggingColumn = react_2.screen.getByText(columnsData[1].entityCard);
+        react_2.fireEvent.mouseDown(draggingColumn.firstChild);
+        expect(document.getElementsByClassName('backDrop')).toHaveLength(1);
+        react_2.fireEvent.mouseUp(draggingColumn.firstChild);
+        expect(document.getElementsByClassName('backDrop')).toHaveLength(0);
+    });
+    it('should render column overlay', function () {
+        setUp(defaultProps);
+        var draggingColumn = react_2.screen.getByText(columnsData[1].entityCard);
+        react_2.fireEvent.mouseDown(draggingColumn.firstChild);
+        expect(react_2.screen.getAllByText(columnsData[1].entityCard)).toHaveLength(2);
+    });
+    it('should render row overlay', function () {
+        setUp(defaultProps);
+        var draggingRow = react_2.screen.getByText(rowsData[3].label);
+        react_2.fireEvent.mouseDown(draggingRow.firstChild);
+        expect(react_2.screen.getAllByText(rowsData[3].label)).toHaveLength(2);
+    });
+});

package/cjs/VerticalHeadingsTable/VerticalHeadingsTable.d.ts

@@ -4,6 +4,7 @@ type Props = {
     className?: string;
     rowsData: RowData[];
     columnsData: ColumnData[];
+    containerRef: React.MutableRefObject<HTMLDivElement>;
     theadRowsNumber?: number;
     onMoveRow?: (dragId: string, hoverId: string) => void;
     onDropRow?: () => void;
@@ -12,5 +13,5 @@ type Props = {
     setHoveredColumn?: (columnValue: ColumnData) => void;
     resetHoveredColumn?: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ className, rowsData, columnsData, theadRowsNumber, onMoveRow, onDropRow, onMoveColumn, onDropColumn, setHoveredColumn, resetHoveredColumn }: Props) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ className, rowsData, columnsData, containerRef, theadRowsNumber, onMoveRow, onDropRow, onMoveColumn, onDropColumn, setHoveredColumn, resetHoveredColumn }: Props) => React.JSX.Element>;
 export default _default;

package/cjs/VerticalHeadingsTable/VerticalHeadingsTable.js

@@ -26,20 +26,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var TableRow_1 = require("./components/TableRow");
 var TableRowWithDnd_1 = require("./components/TableRowWithDnd");
-var TableColumnDragLayer_1 = require("./components/TableColumnDragLayer");
+var DndComponent_1 = require("./components/DndComponent");
 var VerticalHeadingsTable = function (_a) {
-    var _b;
-    var className = _a.className, rowsData = _a.rowsData, columnsData = _a.columnsData, _c = _a.theadRowsNumber, theadRowsNumber = _c === void 0 ? 0 : _c, onMoveRow = _a.onMoveRow, onDropRow = _a.onDropRow, onMoveColumn = _a.onMoveColumn, onDropColumn = _a.onDropColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
-    var _d = (0, react_1.useState)(false), someRowIsDragging = _d[0], setSomeRowIsDragging = _d[1];
-    var tableRef = (0, react_1.useRef)(null);
-    var tableHeight = (_b = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
-    var isDNDActive = !!onMoveRow || !!onMoveColumn;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        isDNDActive && react_1.default.createElement(TableColumnDragLayer_1.TableColumnDragLayer, { columnHeight: tableHeight }),
-        react_1.default.createElement("table", { ref: tableRef, className: className },
-            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, onDropColumn: onDropColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })); }))),
+    var className = _a.className, rowsData = _a.rowsData, columnsData = _a.columnsData, containerRef = _a.containerRef, _b = _a.theadRowsNumber, theadRowsNumber = _b === void 0 ? 0 : _b, onMoveRow = _a.onMoveRow, onDropRow = _a.onDropRow, onMoveColumn = _a.onMoveColumn, onDropColumn = _a.onDropColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
+    var columnsId = (0, react_1.useMemo)(function () { return columnsData.map(function (columnData) { return columnData.id; }); }, [columnsData]);
+    var rowsId = (0, react_1.useMemo)(function () { return rowsData.map(function (rowData) { return rowData.id; }); }, [rowsData]);
+    var isMoveColumnEnabled = !!onMoveColumn;
+    return (react_1.default.createElement(DndComponent_1.DndComponent, { containerRef: containerRef, onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, onMoveRow: onMoveRow, onDropRow: onDropRow, columnsId: columnsId, rowsId: rowsId, tableClassName: className },
+        react_1.default.createElement("table", { className: className },
+            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, isMoveColumnEnabled: isMoveColumnEnabled, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })); }))),
             react_1.default.createElement("tbody", null, rowsData.slice(theadRowsNumber).map(function (rowData, index) {
-                return onMoveRow ? (react_1.default.createElement(TableRowWithDnd_1.TableRowWithDnd, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveRow: onMoveRow, onDropRow: onDropRow, onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, 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, onDropColumn: onDropColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
+                return onMoveRow ? (react_1.default.createElement(TableRowWithDnd_1.TableRowWithDnd, { key: rowData.id || index, rowData: rowData, columnsData: columnsData, isMoveColumnEnabled: isMoveColumnEnabled, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (react_1.default.createElement(TableRow_1.TableRow, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, isMoveColumnEnabled: isMoveColumnEnabled, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
             })))));
 };
 exports.default = (0, react_1.memo)(VerticalHeadingsTable);