@reltio/components 1.4.2018 → 1.4.2020

package/cjs/features/crosswalks/CrosswalkDragLayer/CrosswalkDragLayer.test.js

@@ -1,93 +0,0 @@
-"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 __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 });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@testing-library/react");
-var reactDnd = __importStar(require("react-dnd"));
-var CrosswalkDragLayer_1 = require("./CrosswalkDragLayer");
-var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
-jest.mock('react-dnd', function () { return (__assign(__assign({}, jest.requireActual('react-dnd')), { useDragLayer: jest.fn() })); });
-var metadata = {
-    sources: [
-        {
-            uri: 'configuration/sources/FB',
-            label: 'Facebook',
-            icon: 'images/source/fb.png',
-            abbreviation: 'Facebook'
-        }
-    ]
-};
-describe('CrosswalkDragLayer tests', function () {
-    var monitor = {};
-    jest.spyOn(reactDnd, 'useDragLayer').mockImplementation(function (fn) { return fn(monitor); });
-    it('should not render drag layer if nothing is being dragged', function () {
-        monitor = {
-            isDragging: function () { return false; },
-            getClientOffset: function () { return null; },
-            getItem: function () { return null; }
-        };
-        var container = (0, react_2.render)(react_1.default.createElement(CrosswalkDragLayer_1.CrosswalkDragLayer, null)).container;
-        expect(container.querySelector('.dragLayer')).toBeNull();
-    });
-    it('should render drag item with correct offset', function () {
-        monitor = {
-            isDragging: function () { return true; },
-            getClientOffset: function () { return ({ x: 100, y: 200 }); },
-            getItem: function () { return ({ type: 'Some Item' }); }
-        };
-        var container = (0, react_2.render)(react_1.default.createElement(CrosswalkDragLayer_1.CrosswalkDragLayer, null)).container;
-        expect(container.querySelector('.dragLayer')).toBeInTheDocument();
-        expect(container.querySelector('.dragLayer > div')).toHaveStyle('transform: translate(100px, 200px');
-    });
-    it('should render CrosswalkDragPreview for crosswalk item', function () {
-        var crosswalk = { uri: 'entities/1/crosswalks/1', type: 'configuration/sources/FB', value: '123' };
-        monitor = {
-            isDragging: function () { return true; },
-            getClientOffset: function () { return ({ x: 100, y: 200 }); },
-            getItem: function () { return ({
-                type: 'Crosswalk',
-                crosswalk: crosswalk
-            }); }
-        };
-        (0, react_2.render)(react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: { metadata: metadata } },
-            react_1.default.createElement(CrosswalkDragLayer_1.CrosswalkDragLayer, null)));
-        expect(react_2.screen.getByTestId('cw-colored-block')).toBeInTheDocument();
-        expect(react_2.screen.getByText('Facebook')).toBeInTheDocument();
-    });
-});

package/cjs/features/crosswalks/CrosswalkDragLayer/index.d.ts

@@ -1 +0,0 @@
-export { CrosswalkDragLayer } from './CrosswalkDragLayer';

package/cjs/features/crosswalks/CrosswalkDragLayer/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CrosswalkDragLayer = void 0;
-var CrosswalkDragLayer_1 = require("./CrosswalkDragLayer");
-Object.defineProperty(exports, "CrosswalkDragLayer", { enumerable: true, get: function () { return CrosswalkDragLayer_1.CrosswalkDragLayer; } });

package/cjs/features/crosswalks/CrosswalkDragLayer/styles.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@mui/styles");
-var constants_1 = require("../../../constants");
-exports.useStyles = (0, styles_1.makeStyles)({
-    dragLayer: {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        overflow: 'hidden',
-        zIndex: constants_1.POPUP_Z_INDEX,
-        pointerEvents: 'none'
-    }
-});

package/features/crosswalks/CrosswalkDragLayer/CrosswalkDragLayer.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const CrosswalkDragLayer: React.MemoExoticComponent<() => React.JSX.Element>;

package/features/crosswalks/CrosswalkDragLayer/CrosswalkDragLayer.js

@@ -1,25 +0,0 @@
-import React, { memo, useRef } from 'react';
-import { useDragLayer } from 'react-dnd';
-import { CrosswalkDragPreview } from './components/CrosswalkDragPreview';
-import { useStyles } from './styles';
-export var CrosswalkDragLayer = memo(function () {
-    var _a;
-    var styles = useStyles();
-    var _b = useDragLayer(function (monitor) { return ({
-        isDragging: monitor.isDragging(),
-        clientOffset: monitor.getClientOffset(),
-        item: monitor.getItem()
-    }); }), isDragging = _b.isDragging, clientOffset = _b.clientOffset, item = _b.item;
-    var dragLayerRef = useRef();
-    var dragLayerRect = ((_a = dragLayerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || { x: 0, y: 0 };
-    var dragItemX = (clientOffset === null || clientOffset === void 0 ? void 0 : clientOffset.x) - (dragLayerRect === null || dragLayerRect === void 0 ? void 0 : dragLayerRect.x);
-    var dragItemY = (clientOffset === null || clientOffset === void 0 ? void 0 : clientOffset.y) - (dragLayerRect === null || dragLayerRect === void 0 ? void 0 : dragLayerRect.y);
-    var dragItemTransform = "translate(".concat(dragItemX, "px, ").concat(dragItemY, "px");
-    return (isDragging && (React.createElement("div", { ref: dragLayerRef, className: styles.dragLayer },
-        React.createElement("div", { style: {
-                display: 'flex',
-                transform: dragItemTransform,
-                WebkitTransform: dragItemTransform
-            } }, item.type === 'Crosswalk' && React.createElement(CrosswalkDragPreview, { crosswalk: item.crosswalk })))));
-});
-CrosswalkDragLayer.displayName = 'CrosswalkDragLayer';

package/features/crosswalks/CrosswalkDragLayer/CrosswalkDragLayer.test.js

@@ -1,65 +0,0 @@
-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);
-};
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import * as reactDnd from 'react-dnd';
-import { CrosswalkDragLayer } from './CrosswalkDragLayer';
-import { MdmModuleProvider } from '../../../contexts/MdmModuleContext';
-jest.mock('react-dnd', function () { return (__assign(__assign({}, jest.requireActual('react-dnd')), { useDragLayer: jest.fn() })); });
-var metadata = {
-    sources: [
-        {
-            uri: 'configuration/sources/FB',
-            label: 'Facebook',
-            icon: 'images/source/fb.png',
-            abbreviation: 'Facebook'
-        }
-    ]
-};
-describe('CrosswalkDragLayer tests', function () {
-    var monitor = {};
-    jest.spyOn(reactDnd, 'useDragLayer').mockImplementation(function (fn) { return fn(monitor); });
-    it('should not render drag layer if nothing is being dragged', function () {
-        monitor = {
-            isDragging: function () { return false; },
-            getClientOffset: function () { return null; },
-            getItem: function () { return null; }
-        };
-        var container = render(React.createElement(CrosswalkDragLayer, null)).container;
-        expect(container.querySelector('.dragLayer')).toBeNull();
-    });
-    it('should render drag item with correct offset', function () {
-        monitor = {
-            isDragging: function () { return true; },
-            getClientOffset: function () { return ({ x: 100, y: 200 }); },
-            getItem: function () { return ({ type: 'Some Item' }); }
-        };
-        var container = render(React.createElement(CrosswalkDragLayer, null)).container;
-        expect(container.querySelector('.dragLayer')).toBeInTheDocument();
-        expect(container.querySelector('.dragLayer > div')).toHaveStyle('transform: translate(100px, 200px');
-    });
-    it('should render CrosswalkDragPreview for crosswalk item', function () {
-        var crosswalk = { uri: 'entities/1/crosswalks/1', type: 'configuration/sources/FB', value: '123' };
-        monitor = {
-            isDragging: function () { return true; },
-            getClientOffset: function () { return ({ x: 100, y: 200 }); },
-            getItem: function () { return ({
-                type: 'Crosswalk',
-                crosswalk: crosswalk
-            }); }
-        };
-        render(React.createElement(MdmModuleProvider, { values: { metadata: metadata } },
-            React.createElement(CrosswalkDragLayer, null)));
-        expect(screen.getByTestId('cw-colored-block')).toBeInTheDocument();
-        expect(screen.getByText('Facebook')).toBeInTheDocument();
-    });
-});

package/features/crosswalks/CrosswalkDragLayer/components/CrosswalkDragPreview/CrosswalkDragPreview.js

@@ -1,19 +0,0 @@
-import React, { memo } from 'react';
-import { getSourceSystemLabel } from '@reltio/mdm-sdk';
-import Typography from '@mui/material/Typography';
-import { useMdmMetadata } from '../../../../../contexts/MdmModuleContext';
-import { useCrosswalkColor } from '../../../../../contexts/CrosswalksDisplayContext';
-import { SourceIcon } from '../../../../../SourceIcon';
-import { ColoredBlock } from '../../../ColoredBlock';
-import { useStyles } from './styles';
-export var CrosswalkDragPreview = memo(function (_a) {
-    var crosswalk = _a.crosswalk;
-    var styles = useStyles();
-    var metadata = useMdmMetadata();
-    var color = useCrosswalkColor(crosswalk);
-    var sourceSystemLabel = getSourceSystemLabel(metadata, crosswalk.type);
-    return (React.createElement(ColoredBlock, { color: color, className: styles.crosswalkPreview },
-        React.createElement(SourceIcon, { className: styles.sourceIcon, sourceType: crosswalk.type }),
-        React.createElement(Typography, { className: styles.sourceLabel, variant: 'body2' }, sourceSystemLabel)));
-});
-CrosswalkDragPreview.displayName = 'CrosswalkDragPreview';

package/features/crosswalks/CrosswalkDragLayer/index.d.ts

@@ -1 +0,0 @@
-export { CrosswalkDragLayer } from './CrosswalkDragLayer';

package/features/crosswalks/CrosswalkDragLayer/index.js

@@ -1 +0,0 @@
-export { CrosswalkDragLayer } from './CrosswalkDragLayer';

package/features/crosswalks/CrosswalkDragLayer/styles.js

@@ -1,14 +0,0 @@
-import { makeStyles } from '@mui/styles';
-import { POPUP_Z_INDEX } from '../../../constants';
-export var useStyles = makeStyles({
-    dragLayer: {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        overflow: 'hidden',
-        zIndex: POPUP_Z_INDEX,
-        pointerEvents: 'none'
-    }
-});