@reltio/components 1.4.874 → 1.4.878

package/components/crosswalks/ColoredBlock/styles.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,10 +9,8 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useColoredItemStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useColoredItemStyles = styles_1.makeStyles({
+import { makeStyles } from '@material-ui/core/styles';
+export var useColoredItemStyles = makeStyles({
     item: function (_a) {
         var color = _a.color, opacity = _a.opacity, variant = _a.variant;
         return (__assign(__assign(__assign({}, (variant === 'filled' && { backgroundColor: color })), (variant === 'outlined' && { border: color + " solid 2px" })), { opacity: opacity, transition: 'opacity 0.3s', boxSizing: 'border-box' }));

package/components/crosswalks/CopyableValueField/CopyableValueField.js

@@ -1,18 +1,13 @@
-"use strict";
-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 SmallIconButton_1 = __importDefault(require("../../SmallIconButton/SmallIconButton"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var Copy_1 = __importDefault(require("../../../icons/Copy"));
-var styles_1 = require("./styles");
+import React from 'react';
+import SmallIconButton from '../../SmallIconButton/SmallIconButton';
+import Typography from '@material-ui/core/Typography';
+import CopyIcon from '../../../icons/Copy';
+import { useStyles } from './styles';
 var CopyableValueField = function (_a) {
     var value = _a.value;
-    var styles = styles_1.useStyles();
-    return (react_1.default.createElement("div", { className: styles.root },
-        react_1.default.createElement(Typography_1.default, { className: styles.text, variant: 'body2' }, value),
-        react_1.default.createElement(SmallIconButton_1.default, { size: "XXS", icon: Copy_1.default, color: "primary", className: styles.button, onClick: function () { return navigator.clipboard.writeText(value); } })));
+    var styles = useStyles();
+    return (React.createElement("div", { className: styles.root },
+        React.createElement(Typography, { className: styles.text, variant: 'body2' }, value),
+        React.createElement(SmallIconButton, { size: "XXS", icon: CopyIcon, color: "primary", className: styles.button, onClick: function () { return navigator.clipboard.writeText(value); } })));
 };
-exports.default = CopyableValueField;
+export default CopyableValueField;

package/components/crosswalks/CopyableValueField/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles(function () { return ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function () { return ({
     root: {
         display: 'flex',
         justifyContent: 'space-between',

package/components/crosswalks/CrosswalkAttributes/CrosswalkAttributes.js

@@ -1,108 +1,84 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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 = __importStar(require("react"));
-var react_redux_1 = require("react-redux");
-var ConfirmDeleteDialog_1 = __importDefault(require("../../ConfirmDeleteDialog/ConfirmDeleteDialog"));
-var MoreAttributesButton_1 = __importDefault(require("../../attributes/editMode/MoreAttributesButton"));
-var SimpleDropDownSelector_1 = __importDefault(require("../../SimpleDropDownSelector/SimpleDropDownSelector"));
-var SmallIconButton_1 = require("../../SmallIconButton");
-var SourceIcon_1 = __importDefault(require("../../SourceIcon/SourceIcon"));
-var editors_1 = require("../../editors");
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var Delete_1 = __importDefault(require("@material-ui/icons/Delete"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var ramda_1 = require("ramda");
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
-var CopyableValueField_1 = __importDefault(require("../CopyableValueField/CopyableValueField"));
-var CrosswalkDateEditor_1 = __importDefault(require("../CrosswalkDateEditor/CrosswalkDateEditor"));
-var moment_1 = __importDefault(require("moment"));
-var styles_1 = require("./styles");
+import React, { useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import ConfirmDeleteDialog from '../../ConfirmDeleteDialog/ConfirmDeleteDialog';
+import MoreAttributesButton from '../../attributes/editMode/MoreAttributesButton';
+import SimpleDropDownSelector from '../../SimpleDropDownSelector/SimpleDropDownSelector';
+import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
+import SourceIcon from '../../SourceIcon/SourceIcon';
+import { TextEditor } from '../../editors';
+import Typography from '@material-ui/core/Typography';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { CrosswalksAttrTypes, formatDateTime, getCrosswalksTypes, getSourceSystemLabel, parseTimestamp } from '@reltio/mdm-sdk';
+import { ascend, filter, has, isNil, map, pipe, prop, propEq, without } from 'ramda';
+import i18n from 'ui-i18n';
+import mdmModule from '@reltio/mdm-module';
+import CopyableValueField from '../CopyableValueField/CopyableValueField';
+import CrosswalkDateEditor from '../CrosswalkDateEditor/CrosswalkDateEditor';
+import moment from 'moment';
+import { useStyles } from './styles';
 var CrosswalkAttributes = function (_a) {
     var crosswalk = _a.crosswalk, _b = _a.canEditAttribute, canEditAttribute = _b === void 0 ? true : _b, onEditAttribute = _a.onEditAttribute, onDeleteAttribute = _a.onDeleteAttribute;
-    var styles = styles_1.useStyles();
+    var styles = useStyles();
     var isTempCrosswalk = !('uri' in crosswalk);
-    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
-    var _c = react_1.useState([]), addedAttributes = _c[0], setAddedAttributes = _c[1];
-    var _d = react_1.useState(null), pendingDeletionAttrUri = _d[0], setPendingDeletionAttrUri = _d[1];
+    var metadata = useSelector(mdmModule.selectors.getMetadata);
+    var _c = useState([]), addedAttributes = _c[0], setAddedAttributes = _c[1];
+    var _d = useState(null), pendingDeletionAttrUri = _d[0], setPendingDeletionAttrUri = _d[1];
     var addSelectedAttributes = function (selectedAttributes) {
         if (selectedAttributes.length > 0) {
-            setAddedAttributes(function (addedAttributes) { return addedAttributes.concat(ramda_1.map(ramda_1.prop('uri'), selectedAttributes)); });
+            setAddedAttributes(function (addedAttributes) { return addedAttributes.concat(map(prop('uri'), selectedAttributes)); });
         }
     };
     var handleDeleteAttribute = function (attributeName) {
-        setAddedAttributes(function (addedAttributes) { return ramda_1.without([attributeName], addedAttributes); });
-        if (!ramda_1.isNil(crosswalk[attributeName])) {
+        setAddedAttributes(function (addedAttributes) { return without([attributeName], addedAttributes); });
+        if (!isNil(crosswalk[attributeName])) {
             onDeleteAttribute(attributeName);
         }
     };
-    var attributes = react_1.useMemo(function () { return [
+    var attributes = useMemo(function () { return [
         {
-            label: mdm_sdk_1.CrosswalksAttrTypes.sourceSystems.label,
+            label: CrosswalksAttrTypes.sourceSystems.label,
             uri: 'type'
         },
         {
-            label: mdm_sdk_1.CrosswalksAttrTypes.value.label,
+            label: CrosswalksAttrTypes.value.label,
             uri: 'value'
         },
         {
-            label: mdm_sdk_1.CrosswalksAttrTypes.sourceTable.label,
+            label: CrosswalksAttrTypes.sourceTable.label,
             uri: 'sourceTable',
             canBeAdded: isTempCrosswalk,
             canBeDeleted: isTempCrosswalk
         },
         {
-            label: mdm_sdk_1.CrosswalksAttrTypes.createDate.label,
+            label: CrosswalksAttrTypes.createDate.label,
             uri: 'createDate'
         },
         {
-            label: mdm_sdk_1.CrosswalksAttrTypes.updateDate.label,
+            label: CrosswalksAttrTypes.updateDate.label,
             uri: 'updateDate'
         },
         {
-            label: mdm_sdk_1.CrosswalksAttrTypes.deleteDate.label,
+            label: CrosswalksAttrTypes.deleteDate.label,
             uri: 'deleteDate',
             canBeAdded: true,
             canBeDeleted: true
         },
         {
-            label: mdm_sdk_1.CrosswalksAttrTypes.reltioLoadDate.label,
+            label: CrosswalksAttrTypes.reltioLoadDate.label,
             uri: 'reltioLoadDate'
         },
         {
-            label: mdm_sdk_1.CrosswalksAttrTypes.publishDate.label,
+            label: CrosswalksAttrTypes.publishDate.label,
             uri: 'sourcePublishDate'
         }
     ]; }, []);
-    var extraAttributes = ramda_1.pipe(ramda_1.filter(ramda_1.propEq('canBeAdded', true)), ramda_1.filter(function (item) { return !ramda_1.has(item.uri, crosswalk); }), ramda_1.filter(function (item) { return !addedAttributes.includes(item.uri); }))(attributes);
+    var extraAttributes = pipe(filter(propEq('canBeAdded', true)), filter(function (item) { return !has(item.uri, crosswalk); }), filter(function (item) { return !addedAttributes.includes(item.uri); }))(attributes);
     var renderAttributeValue = function (attributeName, attributeValue) {
         switch (attributeName) {
             case 'type': {
-                var sourceSystemLabel = mdm_sdk_1.getSourceSystemLabel(metadata, attributeValue);
-                return isTempCrosswalk ? (react_1.default.createElement(SimpleDropDownSelector_1.default, { label: '', placeholder: attributeValue, className: styles.editor, value: { value: attributeValue, label: sourceSystemLabel }, options: mdm_sdk_1.getCrosswalksTypes(metadata)
-                        .sort(ramda_1.ascend(ramda_1.prop('label')))
+                var sourceSystemLabel = getSourceSystemLabel(metadata, attributeValue);
+                return isTempCrosswalk ? (React.createElement(SimpleDropDownSelector, { label: '', placeholder: attributeValue, className: styles.editor, value: { value: attributeValue, label: sourceSystemLabel }, options: getCrosswalksTypes(metadata)
+                        .sort(ascend(prop('label')))
                         .map(function (_a) {
                         var uri = _a.uri, label = _a.label;
                         return ({
@@ -116,40 +92,40 @@ var CrosswalkAttributes = function (_a) {
                         InputProps: {
                             disableUnderline: true
                         }
-                    } })) : (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(SourceIcon_1.default, { className: styles.sourceIcon, sourceType: attributeValue }),
-                    react_1.default.createElement(Typography_1.default, { className: styles.text, variant: 'body2' }, sourceSystemLabel)));
+                    } })) : (React.createElement(React.Fragment, null,
+                    React.createElement(SourceIcon, { className: styles.sourceIcon, sourceType: attributeValue }),
+                    React.createElement(Typography, { className: styles.text, variant: 'body2' }, sourceSystemLabel)));
             }
             case 'sourceTable':
-                return isTempCrosswalk ? (react_1.default.createElement(editors_1.TextEditor, { multiple: false, multiline: false, getValueLabel: undefined, classes: { root: styles.editor }, required: true, variant: "filled", value: attributeValue, onInput: function (e) { return onEditAttribute(attributeName, e.target.value); }, margin: "dense", InputProps: {
+                return isTempCrosswalk ? (React.createElement(TextEditor, { multiple: false, multiline: false, getValueLabel: undefined, classes: { root: styles.editor }, required: true, variant: "filled", value: attributeValue, onInput: function (e) { return onEditAttribute(attributeName, e.target.value); }, margin: "dense", InputProps: {
                         disableUnderline: true,
                         classes: { input: styles.input }
-                    } })) : (react_1.default.createElement(Typography_1.default, { className: styles.text, variant: 'body2' }, attributeValue));
+                    } })) : (React.createElement(Typography, { className: styles.text, variant: 'body2' }, attributeValue));
             case 'value':
-                return isTempCrosswalk ? (react_1.default.createElement(editors_1.TextEditor, { multiple: false, multiline: false, getValueLabel: undefined, classes: { root: styles.editor }, required: true, variant: "filled", value: attributeValue, onInput: function (e) { return onEditAttribute(attributeName, e.target.value); }, margin: "dense", InputProps: {
+                return isTempCrosswalk ? (React.createElement(TextEditor, { multiple: false, multiline: false, getValueLabel: undefined, classes: { root: styles.editor }, required: true, variant: "filled", value: attributeValue, onInput: function (e) { return onEditAttribute(attributeName, e.target.value); }, margin: "dense", InputProps: {
                         disableUnderline: true,
                         classes: { input: styles.input }
-                    } })) : (react_1.default.createElement(CopyableValueField_1.default, { value: attributeValue }));
+                    } })) : (React.createElement(CopyableValueField, { value: attributeValue }));
             case 'deleteDate':
-                return (react_1.default.createElement(CrosswalkDateEditor_1.default, { value: attributeValue && moment_1.default.utc(mdm_sdk_1.parseTimestamp(attributeValue)).valueOf(), onChange: function (value) { return onEditAttribute(attributeName, value.toString()); }, classes: { root: styles.editor }, disabled: !canEditAttribute }));
+                return (React.createElement(CrosswalkDateEditor, { value: attributeValue && moment.utc(parseTimestamp(attributeValue)).valueOf(), onChange: function (value) { return onEditAttribute(attributeName, value.toString()); }, classes: { root: styles.editor }, disabled: !canEditAttribute }));
             case 'sourcePublishDate':
             case 'createDate':
             case 'updateDate':
             case 'reltioLoadDate':
-                return (react_1.default.createElement(Typography_1.default, { className: styles.text, variant: 'body2' }, mdm_sdk_1.formatDateTime(attributeValue)));
+                return (React.createElement(Typography, { className: styles.text, variant: 'body2' }, formatDateTime(attributeValue)));
             default:
                 return null;
         }
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        extraAttributes.length > 0 && canEditAttribute && (react_1.default.createElement(MoreAttributesButton_1.default, { label: ui_i18n_1.default.text('Add attributes'), onApply: addSelectedAttributes, data: extraAttributes })),
+    return (React.createElement(React.Fragment, null,
+        extraAttributes.length > 0 && canEditAttribute && (React.createElement(MoreAttributesButton, { label: i18n.text('Add attributes'), onApply: addSelectedAttributes, data: extraAttributes })),
         attributes.map(function (attribute) {
-            return attribute.uri in crosswalk || addedAttributes.includes(attribute.uri) ? (react_1.default.createElement("div", { key: attribute.uri, className: styles.attributeWrapper },
-                react_1.default.createElement(Typography_1.default, { variant: 'body2', className: styles.attributeTitle }, attribute.label + ":"),
-                react_1.default.createElement("div", { className: styles.attributeValue },
+            return attribute.uri in crosswalk || addedAttributes.includes(attribute.uri) ? (React.createElement("div", { key: attribute.uri, className: styles.attributeWrapper },
+                React.createElement(Typography, { variant: 'body2', className: styles.attributeTitle }, attribute.label + ":"),
+                React.createElement("div", { className: styles.attributeValue },
                     renderAttributeValue(attribute.uri, crosswalk[attribute.uri]),
-                    attribute.canBeDeleted && (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { icon: Delete_1.default, disabled: !canEditAttribute, onClick: function () { return setPendingDeletionAttrUri(attribute.uri); }, size: "XS", tooltipTitle: ui_i18n_1.default.text('Delete attribute'), showForDisabled: true }))))) : null;
+                    attribute.canBeDeleted && (React.createElement(SmallIconButtonWithTooltip, { icon: DeleteIcon, disabled: !canEditAttribute, onClick: function () { return setPendingDeletionAttrUri(attribute.uri); }, size: "XS", tooltipTitle: i18n.text('Delete attribute'), showForDisabled: true }))))) : null;
         }),
-        react_1.default.createElement(ConfirmDeleteDialog_1.default, { open: !!pendingDeletionAttrUri, onClose: function () { return setPendingDeletionAttrUri(null); }, onConfirm: function () { return handleDeleteAttribute(pendingDeletionAttrUri); } })));
+        React.createElement(ConfirmDeleteDialog, { open: !!pendingDeletionAttrUri, onClose: function () { return setPendingDeletionAttrUri(null); }, onConfirm: function () { return handleDeleteAttribute(pendingDeletionAttrUri); } })));
 };
-exports.default = CrosswalkAttributes;
+export default CrosswalkAttributes;

package/components/crosswalks/CrosswalkAttributes/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function (theme) { return ({
     text: {
         fontSize: 13
     },

package/components/crosswalks/CrosswalkDateEditor/CrosswalkDateEditor.js

@@ -1,43 +1,19 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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 = __importStar(require("react"));
-var ramda_1 = require("ramda");
-var classnames_1 = __importDefault(require("classnames"));
-var TimestampEditor_1 = __importDefault(require("../../editors/TimestampEditor/TimestampEditor"));
-var styles_1 = require("./styles");
+import React, { useState } from 'react';
+import { always, unless } from 'ramda';
+import classnames from 'classnames';
+import TimestampEditor from '../../editors/TimestampEditor/TimestampEditor';
+import { useStyles } from './styles';
 var CrosswalkDateEditor = function (_a) {
     var value = _a.value, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange;
-    var styles = styles_1.useStyles();
-    var _d = react_1.useState(false), isOpen = _d[0], setIsOpen = _d[1];
+    var styles = useStyles();
+    var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
     var handleChange = function (date) { return onChange(date.valueOf()); };
     return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    react_1.default.createElement(TimestampEditor_1.default, { variant: "filled", value: value ? new Date(value) : null, disabled: disabled, onChange: ramda_1.unless(ramda_1.always(isOpen), handleChange), onAccept: handleChange, onOpen: function () { return setIsOpen(true); }, onClose: function () { return setIsOpen(false); }, InputProps: {
+    React.createElement(TimestampEditor, { variant: "filled", value: value ? new Date(value) : null, disabled: disabled, onChange: unless(always(isOpen), handleChange), onAccept: handleChange, onOpen: function () { return setIsOpen(true); }, onClose: function () { return setIsOpen(false); }, InputProps: {
             disableUnderline: true,
-            classes: { input: styles.timestampEditorInput, root: classnames_1.default(styles.timestampEditor, classes.root) }
+            classes: { input: styles.timestampEditorInput, root: classnames(styles.timestampEditor, classes.root) }
         } }));
 };
-exports.default = CrosswalkDateEditor;
+export default CrosswalkDateEditor;

package/components/crosswalks/CrosswalkDateEditor/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles(function () { return ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function () { return ({
     timestampEditorInput: {
         paddingTop: 15,
         paddingBottom: 15,

package/components/crosswalks/CrosswalkDragLayer/CrosswalkDragLayer.js

@@ -1,49 +1,25 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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 = __importStar(require("react"));
-var react_dnd_1 = require("react-dnd");
-var CrosswalkDragPreview_1 = __importDefault(require("./CrosswalkDragPreview"));
-var styles_1 = require("./styles");
+import React, { memo, useRef } from 'react';
+import { useDragLayer } from 'react-dnd';
+import CrosswalkDragPreview from './CrosswalkDragPreview';
+import { useStyles } from './styles';
 var CrosswalkDragLayer = function () {
     var _a;
-    var styles = styles_1.useStyles();
-    var _b = react_dnd_1.useDragLayer(function (monitor) { return ({
+    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 = react_1.useRef();
+    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(" + dragItemX + "px, " + dragItemY + "px";
-    return (isDragging && (react_1.default.createElement("div", { ref: dragLayerRef, className: styles.dragLayer },
-        react_1.default.createElement("div", { style: {
+    return (isDragging && (React.createElement("div", { ref: dragLayerRef, className: styles.dragLayer },
+        React.createElement("div", { style: {
                 display: 'flex',
                 transform: dragItemTransform,
                 WebkitTransform: dragItemTransform
-            } }, item.type === 'Crosswalk' && react_1.default.createElement(CrosswalkDragPreview_1.default, { crosswalk: item.crosswalk })))));
+            } }, item.type === 'Crosswalk' && React.createElement(CrosswalkDragPreview, { crosswalk: item.crosswalk })))));
 };
-exports.default = react_1.memo(CrosswalkDragLayer);
+export default memo(CrosswalkDragLayer);

package/components/crosswalks/CrosswalkDragLayer/CrosswalkDragPreview.js

@@ -1,25 +1,20 @@
-"use strict";
-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_redux_1 = require("react-redux");
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var ColoredBlock_1 = __importDefault(require("../ColoredBlock/ColoredBlock"));
-var CrosswalksDisplayContext_1 = require("../../../contexts/CrosswalksDisplayContext");
-var SourceIcon_1 = __importDefault(require("../../SourceIcon/SourceIcon"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
-var styles_1 = require("./styles");
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { getSourceSystemLabel } from '@reltio/mdm-sdk';
+import ColoredBlock from '../ColoredBlock/ColoredBlock';
+import { useCrosswalkColor } from '../../../contexts/CrosswalksDisplayContext';
+import SourceIcon from '../../SourceIcon/SourceIcon';
+import Typography from '@material-ui/core/Typography';
+import mdmModule from '@reltio/mdm-module';
+import { useStyles } from './styles';
 var CrosswalkDragPreview = function (_a) {
     var crosswalk = _a.crosswalk;
-    var styles = styles_1.useStyles();
-    var color = CrosswalksDisplayContext_1.useCrosswalkColor(crosswalk);
-    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
-    var sourceSystemLabel = mdm_sdk_1.getSourceSystemLabel(metadata, crosswalk.type);
-    return (react_1.default.createElement(ColoredBlock_1.default, { color: color, className: styles.crosswalkPreview },
-        react_1.default.createElement(SourceIcon_1.default, { className: styles.sourceIcon, sourceType: crosswalk.type }),
-        react_1.default.createElement(Typography_1.default, { className: styles.sourceLabel, variant: 'body2' }, sourceSystemLabel)));
+    var styles = useStyles();
+    var color = useCrosswalkColor(crosswalk);
+    var metadata = useSelector(mdmModule.selectors.getMetadata);
+    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)));
 };
-exports.default = CrosswalkDragPreview;
+export default CrosswalkDragPreview;

package/components/crosswalks/CrosswalkDragLayer/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     dragLayer: {
         position: 'fixed',
         top: 0,

package/components/crosswalks/CrosswalkEditor/CrosswalkEditor.js

@@ -1,51 +1,27 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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 = __importStar(require("react"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var CrosswalkAttributes_1 = __importDefault(require("../CrosswalkAttributes/CrosswalkAttributes"));
-var ramda_1 = require("ramda");
-var styles_1 = require("./styles");
+import React, { useState } from 'react';
+import i18n from 'ui-i18n';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import CrosswalkAttributes from '../CrosswalkAttributes/CrosswalkAttributes';
+import { assoc, dissoc } from 'ramda';
+import { useStyles } from './styles';
 var CrosswalkEditor = function (_a) {
     var className = _a.className, onAdd = _a.onAdd, onClose = _a.onClose;
-    var styles = styles_1.useStyles();
-    var _b = react_1.useState({ type: '', value: '' }), newCrosswalk = _b[0], setNewCrosswalk = _b[1];
+    var styles = useStyles();
+    var _b = useState({ type: '', value: '' }), newCrosswalk = _b[0], setNewCrosswalk = _b[1];
     var handleAdd = function () {
         onAdd(newCrosswalk);
         onClose();
     };
-    return (react_1.default.createElement("div", { className: className },
-        react_1.default.createElement(Typography_1.default, { variant: 'body1', className: styles.caption }, ui_i18n_1.default.text('Add crosswalk')),
-        react_1.default.createElement(CrosswalkAttributes_1.default, { crosswalk: newCrosswalk, onDeleteAttribute: function (attributeName) {
-                setNewCrosswalk(ramda_1.dissoc(attributeName));
+    return (React.createElement("div", { className: className },
+        React.createElement(Typography, { variant: 'body1', className: styles.caption }, i18n.text('Add crosswalk')),
+        React.createElement(CrosswalkAttributes, { crosswalk: newCrosswalk, onDeleteAttribute: function (attributeName) {
+                setNewCrosswalk(dissoc(attributeName));
             }, onEditAttribute: function (attributeName, value) {
-                setNewCrosswalk(ramda_1.assoc(attributeName, value));
+                setNewCrosswalk(assoc(attributeName, value));
             } }),
-        react_1.default.createElement("div", { className: styles.controlButtons },
-            react_1.default.createElement(Button_1.default, { className: styles.cancelButton, onClick: onClose }, ui_i18n_1.default.text('Cancel')),
-            react_1.default.createElement(Button_1.default, { color: "primary", onClick: handleAdd, disabled: !newCrosswalk.type || !newCrosswalk.value }, ui_i18n_1.default.text('Add')))));
+        React.createElement("div", { className: styles.controlButtons },
+            React.createElement(Button, { className: styles.cancelButton, onClick: onClose }, i18n.text('Cancel')),
+            React.createElement(Button, { color: "primary", onClick: handleAdd, disabled: !newCrosswalk.type || !newCrosswalk.value }, i18n.text('Add')))));
 };
-exports.default = CrosswalkEditor;
+export default CrosswalkEditor;

package/components/crosswalks/CrosswalkEditor/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     caption: {
         paddingLeft: 15,
         paddingTop: 16,