@reltio/components 1.4.876 → 1.4.880

package/components/Image/Image.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,25 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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 __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -40,23 +20,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImageSizesStyles = void 0;
-var react_1 = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var BrokenImage_1 = __importDefault(require("@material-ui/icons/BrokenImage"));
-var DefaultImage_1 = __importDefault(require("../../icons/DefaultImage"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var styles_1 = require("./styles");
+import React, { memo, useState, useEffect } from 'react';
+import classnames from 'classnames';
+import NotAvailableImage from '@material-ui/icons/BrokenImage';
+import DefaultImage from '../../icons/DefaultImage';
+import { isEmptyValue } from '@reltio/mdm-sdk';
+import { useStyles } from './styles';
 var ImageLoadingState = {
     LOADING: 'loading',
     LOADED: 'loaded',
     ERROR: 'error'
 };
-exports.ImageSizesStyles = {
+export var ImageSizesStyles = {
     SMALL: {
         imageWidth: 114,
         imageHeight: 114
@@ -76,11 +51,11 @@ exports.ImageSizesStyles = {
 };
 var Image = function (props) {
     var _a;
-    var src = props.src, className = props.className, containerClassName = props.containerClassName, _b = props.size, size = _b === void 0 ? exports.ImageSizesStyles.SMALL : _b, _c = props.overlay, overlay = _c === void 0 ? null : _c, otherProps = __rest(props, ["src", "className", "containerClassName", "size", "overlay"]);
-    var sizeStyles = size || exports.ImageSizesStyles.SMALL;
-    var styles = styles_1.useStyles(sizeStyles);
-    var _d = react_1.useState(ImageLoadingState.LOADING), imageLoadingState = _d[0], setImageLoadingState = _d[1];
-    react_1.useEffect(function () {
+    var src = props.src, className = props.className, containerClassName = props.containerClassName, _b = props.size, size = _b === void 0 ? ImageSizesStyles.SMALL : _b, _c = props.overlay, overlay = _c === void 0 ? null : _c, otherProps = __rest(props, ["src", "className", "containerClassName", "size", "overlay"]);
+    var sizeStyles = size || ImageSizesStyles.SMALL;
+    var styles = useStyles(sizeStyles);
+    var _d = useState(ImageLoadingState.LOADING), imageLoadingState = _d[0], setImageLoadingState = _d[1];
+    useEffect(function () {
         setImageLoadingState(ImageLoadingState.LOADING);
     }, [src]);
     var onImageLoadFail = function () {
@@ -92,13 +67,13 @@ var Image = function (props) {
     var imageIsLoading = imageLoadingState === ImageLoadingState.LOADING;
     var imageIsLoaded = imageLoadingState === ImageLoadingState.LOADED;
     var imageLoadingError = imageLoadingState === ImageLoadingState.ERROR;
-    return imageLoadingError ? (react_1.default.createElement("div", __assign({ className: classnames_1.default(styles.defaultContainer, styles.image, className) }, otherProps),
-        react_1.default.createElement(BrokenImage_1.default, { className: styles.defaultImage }))) : (react_1.default.createElement("div", { className: classnames_1.default(styles.root, containerClassName) },
-        !mdm_sdk_1.isEmptyValue(src) && (react_1.default.createElement("img", __assign({ src: src, className: classnames_1.default(styles.image, className, (_a = {},
+    return imageLoadingError ? (React.createElement("div", __assign({ className: classnames(styles.defaultContainer, styles.image, className) }, otherProps),
+        React.createElement(NotAvailableImage, { className: styles.defaultImage }))) : (React.createElement("div", { className: classnames(styles.root, containerClassName) },
+        !isEmptyValue(src) && (React.createElement("img", __assign({ src: src, className: classnames(styles.image, className, (_a = {},
                 _a[styles.hideImage] = imageIsLoading,
                 _a)), onLoad: onImageLoad, onError: onImageLoadFail, alt: 'image' }, otherProps))),
-        imageIsLoading && (react_1.default.createElement("div", __assign({ className: classnames_1.default(styles.defaultContainer, styles.image, className) }, otherProps),
-            react_1.default.createElement(DefaultImage_1.default, { className: styles.defaultImage }))),
+        imageIsLoading && (React.createElement("div", __assign({ className: classnames(styles.defaultContainer, styles.image, className) }, otherProps),
+            React.createElement(DefaultImage, { className: styles.defaultImage }))),
         imageIsLoaded && overlay));
 };
-exports.default = react_1.memo(Image);
+export default memo(Image);

package/components/Image/ImageActionsOverlay/ImageActionsOverlay.js

@@ -1,63 +1,39 @@
-"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 ramda_1 = require("ramda");
-var classnames_1 = __importDefault(require("classnames"));
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var MoreVert_1 = __importDefault(require("@material-ui/icons/MoreVert"));
-var SmallIconButton_1 = require("../../SmallIconButton");
-var DropDownMenuButton_1 = __importDefault(require("../../DropDownMenuButton/DropDownMenuButton"));
-var CheckedIcon_1 = require("../CheckedIcon/CheckedIcon");
-var Download_1 = __importDefault(require("../../../icons/Download"));
-var core_1 = require("../../../core");
-var styles_1 = require("./styles");
+import React, { memo, useMemo, useState } from 'react';
+import i18n from 'ui-i18n';
+import { ifElse, equals, prop } from 'ramda';
+import classnames from 'classnames';
+import Button from '@material-ui/core/Button';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { SmallIconButton } from '../../SmallIconButton';
+import DropDownMenuButton from '../../DropDownMenuButton/DropDownMenuButton';
+import { CheckedIcon } from '../CheckedIcon/CheckedIcon';
+import DownloadIcon from '../../../icons/Download';
+import { noop } from '../../../core';
+import { useStyles } from './styles';
 var ImageActionsOverlay = function (props) {
     var _a;
-    var id = props.id, _b = props.canBeSelected, canBeSelected = _b === void 0 ? false : _b, _c = props.selected, selected = _c === void 0 ? false : _c, _d = props.selectionMode, selectionMode = _d === void 0 ? false : _d, _e = props.onDeselect, onDeselect = _e === void 0 ? core_1.noop : _e, _f = props.onSelect, onSelect = _f === void 0 ? core_1.noop : _f, onShareLink = props.onShareLink, onSetAsDefault = props.onSetAsDefault, onDelete = props.onDelete, _g = props.onDownload, onDownload = _g === void 0 ? core_1.noop : _g, onClick = props.onClick;
-    var styles = styles_1.useStyles();
-    var _h = react_1.useState(false), hovered = _h[0], setHovered = _h[1];
-    var menuItems = react_1.useMemo(function () {
+    var id = props.id, _b = props.canBeSelected, canBeSelected = _b === void 0 ? false : _b, _c = props.selected, selected = _c === void 0 ? false : _c, _d = props.selectionMode, selectionMode = _d === void 0 ? false : _d, _e = props.onDeselect, onDeselect = _e === void 0 ? noop : _e, _f = props.onSelect, onSelect = _f === void 0 ? noop : _f, onShareLink = props.onShareLink, onSetAsDefault = props.onSetAsDefault, onDelete = props.onDelete, _g = props.onDownload, onDownload = _g === void 0 ? noop : _g, onClick = props.onClick;
+    var styles = useStyles();
+    var _h = useState(false), hovered = _h[0], setHovered = _h[1];
+    var menuItems = useMemo(function () {
         return [
             {
-                text: ui_i18n_1.default.text('Share link'),
+                text: i18n.text('Share link'),
                 onClick: onShareLink
             },
             {
-                text: ui_i18n_1.default.text('Set as default'),
+                text: i18n.text('Set as default'),
                 onClick: onSetAsDefault
             },
             {
-                text: ui_i18n_1.default.text('Delete'),
+                text: i18n.text('Delete'),
                 onClick: onDelete
             }
-        ].filter(ramda_1.prop('onClick'));
+        ].filter(prop('onClick'));
     }, [onShareLink, onSetAsDefault, onDelete]);
     var handleMouseEnter = function () { return setHovered(true); };
     var handleMouseLeave = function () { return setHovered(false); };
-    var toggleSelected = function (selected) { return function () { return ramda_1.ifElse(ramda_1.equals(true), onDeselect, onSelect)(selected); }; };
+    var toggleSelected = function (selected) { return function () { return ifElse(equals(true), onDeselect, onSelect)(selected); }; };
     var showCheckBox = canBeSelected && (selected || hovered || selectionMode);
     var showActions = !selectionMode && !selected && hovered;
     var showDeselectButton = canBeSelected && selected;
@@ -65,17 +41,17 @@ var ImageActionsOverlay = function (props) {
         if (event.currentTarget === event.target)
             onClick();
     };
-    return (react_1.default.createElement("div", { className: classnames_1.default(styles.overlay, (_a = {},
+    return (React.createElement("div", { className: classnames(styles.overlay, (_a = {},
             _a[styles.selected] = selected,
             _a[styles.selectionMode] = selectionMode,
             _a)), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: selectionMode ? toggleSelected(selected) : handleClick },
-        showCheckBox && (react_1.default.createElement(CheckedIcon_1.CheckedIcon, { className: styles.checkedIcon, checked: selected, onClick: toggleSelected(selected) })),
-        showActions && (react_1.default.createElement("div", { className: styles.actions },
-            react_1.default.createElement(SmallIconButton_1.SmallIconButton, { onClick: onDownload, className: styles.actionButton, icon: Download_1.default }),
-            react_1.default.createElement(DropDownMenuButton_1.default, { menuId: "image-overlay-actions-" + id, buttonComponent: SmallIconButton_1.SmallIconButton, buttonProps: {
-                    icon: MoreVert_1.default,
-                    className: classnames_1.default(styles.actionButton, styles.dropDownMenuButton)
+        showCheckBox && (React.createElement(CheckedIcon, { className: styles.checkedIcon, checked: selected, onClick: toggleSelected(selected) })),
+        showActions && (React.createElement("div", { className: styles.actions },
+            React.createElement(SmallIconButton, { onClick: onDownload, className: styles.actionButton, icon: DownloadIcon }),
+            React.createElement(DropDownMenuButton, { menuId: "image-overlay-actions-" + id, buttonComponent: SmallIconButton, buttonProps: {
+                    icon: MoreVertIcon,
+                    className: classnames(styles.actionButton, styles.dropDownMenuButton)
                 }, menuItems: menuItems }))),
-        showDeselectButton && (react_1.default.createElement(Button_1.default, { className: styles.button, variant: "outlined", onClick: onDeselect }, ui_i18n_1.default.text('Deselect')))));
+        showDeselectButton && (React.createElement(Button, { className: styles.button, variant: "outlined", onClick: onDeselect }, i18n.text('Deselect')))));
 };
-exports.default = react_1.memo(ImageActionsOverlay);
+export default memo(ImageActionsOverlay);

package/components/Image/ImageActionsOverlay/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 ({
     overlay: {
         position: 'absolute',
         top: 0,

package/components/Image/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 ({
     root: {
         position: 'relative'
     },

package/components/ImageAttributesGallery/GalleryView/GalleryView.js

@@ -1,45 +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 });
-exports.GalleryView = void 0;
-var react_1 = __importDefault(require("react"));
-var Box_1 = __importDefault(require("@material-ui/core/Box"));
-var Grid_1 = __importDefault(require("@material-ui/core/Grid"));
-var Image_1 = __importStar(require("../../Image/Image"));
-var ImageActionsOverlay_1 = __importDefault(require("../../Image/ImageActionsOverlay/ImageActionsOverlay"));
-var styles_1 = require("./styles");
-var GalleryView = function (_a) {
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import Grid from '@material-ui/core/Grid';
+import Image, { ImageSizesStyles } from '../../Image/Image';
+import ImageActionsOverlay from '../../Image/ImageActionsOverlay/ImageActionsOverlay';
+import { useStyles } from './styles';
+export var GalleryView = function (_a) {
     var items = _a.items, selectedItems = _a.selectedItems, onSelectImage = _a.onSelectImage, onDeselectImage = _a.onDeselectImage, onShareLink = _a.onShareLink, onSetAsDefault = _a.onSetAsDefault, onDownload = _a.onDownload, onClickImage = _a.onClickImage, onDelete = _a.onDelete;
-    var styles = styles_1.useStyles();
+    var styles = useStyles();
     var renderImageActionsOverlay = function (id) {
-        return (react_1.default.createElement(ImageActionsOverlay_1.default, { id: id, selected: selectedItems.includes(id), selectionMode: selectedItems.length !== 0, onSelect: function () { return onSelectImage(id); }, onDeselect: function () { return onDeselectImage(id); }, onShareLink: function () { return onShareLink(id); }, onSetAsDefault: function () { return onSetAsDefault(id); }, onDownload: function () { return onDownload(id); }, onClick: function () { return onClickImage(id); }, onDelete: onDelete ? function () { return onDelete(id); } : undefined, canBeSelected: true }));
+        return (React.createElement(ImageActionsOverlay, { id: id, selected: selectedItems.includes(id), selectionMode: selectedItems.length !== 0, onSelect: function () { return onSelectImage(id); }, onDeselect: function () { return onDeselectImage(id); }, onShareLink: function () { return onShareLink(id); }, onSetAsDefault: function () { return onSetAsDefault(id); }, onDownload: function () { return onDownload(id); }, onClick: function () { return onClickImage(id); }, onDelete: onDelete ? function () { return onDelete(id); } : undefined, canBeSelected: true }));
     };
-    return (react_1.default.createElement(Box_1.default, { className: styles.root },
-        react_1.default.createElement(Grid_1.default, { container: true }, items.map(function (_a) {
+    return (React.createElement(Box, { className: styles.root },
+        React.createElement(Grid, { container: true }, items.map(function (_a) {
             var id = _a.id, src = _a.src;
-            return (react_1.default.createElement(Grid_1.default, { key: id, classes: { item: styles.item }, item: true },
-                react_1.default.createElement(Image_1.default, { size: Image_1.ImageSizesStyles.LARGE, onClick: function () { return onClickImage(id); }, src: src, overlay: renderImageActionsOverlay(id) })));
+            return (React.createElement(Grid, { key: id, classes: { item: styles.item }, item: true },
+                React.createElement(Image, { size: ImageSizesStyles.LARGE, onClick: function () { return onClickImage(id); }, src: src, overlay: renderImageActionsOverlay(id) })));
         }))));
 };
-exports.GalleryView = GalleryView;

package/components/ImageAttributesGallery/GalleryView/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: {
         padding: '0 24px',
         overflowY: 'auto',

package/components/ImageAttributesGallery/HeaderLeft/HeaderLeft.js

@@ -1,17 +1,10 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeaderLeft = void 0;
-var react_1 = __importDefault(require("react"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Link_1 = __importDefault(require("@material-ui/core/Link"));
-var styles_1 = require("./styles");
-var HeaderLeft = function (_a) {
+import React from 'react';
+import i18n from 'ui-i18n';
+import Link from '@material-ui/core/Link';
+import { useStyles } from './styles';
+export var HeaderLeft = function (_a) {
     var selectedItems = _a.selectedItems, items = _a.items, onSelectAll = _a.onSelectAll, onClearAll = _a.onClearAll;
-    var styles = styles_1.useStyles();
+    var styles = useStyles();
     var selectedAllItems = selectedItems.length === items.length;
-    return (react_1.default.createElement(Link_1.default, { component: "button", underline: "none", classes: { button: styles.selectButton }, onClick: selectedAllItems ? onClearAll : onSelectAll }, selectedAllItems ? ui_i18n_1.default.text('Clear selection') : ui_i18n_1.default.text('Select all images')));
+    return (React.createElement(Link, { component: "button", underline: "none", classes: { button: styles.selectButton }, onClick: selectedAllItems ? onClearAll : onSelectAll }, selectedAllItems ? i18n.text('Clear selection') : i18n.text('Select all images')));
 };
-exports.HeaderLeft = HeaderLeft;

package/components/ImageAttributesGallery/HeaderLeft/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 ({
     selectButton: {
         fontSize: '14px',
         fontWeight: 500,

package/components/ImageAttributesGallery/HeaderRight/HeaderRight.js

@@ -1,26 +1,19 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeaderRight = void 0;
-var react_1 = __importDefault(require("react"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var CloudUpload_1 = __importDefault(require("@material-ui/icons/CloudUpload"));
-var Delete_1 = __importDefault(require("@material-ui/icons/Delete"));
-var Link_1 = __importDefault(require("@material-ui/icons/Link"));
-var Download_1 = __importDefault(require("../../../icons/Download"));
-var SmallIconButton_1 = require("../../SmallIconButton");
-var styles_1 = require("./styles");
-var HeaderRight = function (_a) {
+import React from 'react';
+import i18n from 'ui-i18n';
+import Button from '@material-ui/core/Button';
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import DeleteIcon from '@material-ui/icons/Delete';
+import LinkIcon from '@material-ui/icons/Link';
+import DownloadIcon from '../../../icons/Download';
+import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
+import { useStyles } from './styles';
+export var HeaderRight = function (_a) {
     var onDownload = _a.onDownload, onShare = _a.onShare, onUpload = _a.onUpload, onDelete = _a.onDelete;
-    var styles = styles_1.useStyles();
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        onUpload && (react_1.default.createElement(Button_1.default, { variant: "contained", color: "primary", onClick: onUpload, startIcon: react_1.default.createElement(CloudUpload_1.default, null) }, ui_i18n_1.default.text('Upload'))),
-        onDownload && onUpload && react_1.default.createElement("div", { className: styles.divider }),
-        onDownload && (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { className: styles.downloadButton, tooltipTitle: ui_i18n_1.default.text('Download selected items'), icon: Download_1.default, onClick: onDownload })),
-        onShare && (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { className: styles.shareButton, tooltipTitle: ui_i18n_1.default.text('Copy link'), icon: Link_1.default, onClick: onShare })),
-        onDelete && (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { className: styles.deleteButton, tooltipTitle: ui_i18n_1.default.text('Delete selected items'), icon: Delete_1.default, onClick: onDelete }))));
+    var styles = useStyles();
+    return (React.createElement(React.Fragment, null,
+        onUpload && (React.createElement(Button, { variant: "contained", color: "primary", onClick: onUpload, startIcon: React.createElement(CloudUploadIcon, null) }, i18n.text('Upload'))),
+        onDownload && onUpload && React.createElement("div", { className: styles.divider }),
+        onDownload && (React.createElement(SmallIconButtonWithTooltip, { className: styles.downloadButton, tooltipTitle: i18n.text('Download selected items'), icon: DownloadIcon, onClick: onDownload })),
+        onShare && (React.createElement(SmallIconButtonWithTooltip, { className: styles.shareButton, tooltipTitle: i18n.text('Copy link'), icon: LinkIcon, onClick: onShare })),
+        onDelete && (React.createElement(SmallIconButtonWithTooltip, { className: styles.deleteButton, tooltipTitle: i18n.text('Delete selected items'), icon: DeleteIcon, onClick: onDelete }))));
 };
-exports.HeaderRight = HeaderRight;

package/components/ImageAttributesGallery/HeaderRight/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 ({
     downloadButton: {
         color: '#fff',
         fontSize: '24px',

package/components/ImageAttributesGallery/ImageAttributesGallery.js

@@ -1,54 +1,30 @@
-"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 __spreadArray = (this && this.__spreadArray) || function (to, from) {
     for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
         to[j] = from[i];
     return to;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable indent */
-var react_1 = __importStar(require("react"));
-var react_redux_1 = require("react-redux");
-var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
-var ramda_1 = require("ramda");
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var ImageDetailsView_1 = require("../ImageDetailsView/ImageDetailsView");
-var ImageGalleryDialog_1 = require("../ImageGalleryDialog/ImageGalleryDialog");
-var GalleryView_1 = require("./GalleryView/GalleryView");
-var HeaderLeft_1 = require("./HeaderLeft/HeaderLeft");
-var HeaderRight_1 = require("./HeaderRight/HeaderRight");
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import mdm from '@reltio/mdm-module';
+import { filter, pipe, pluck, propEq } from 'ramda';
+import { getImageAttributeOvThumbnailUrl, getImageAttributeOvUrl } from '@reltio/mdm-sdk';
+import { ImageDetailsView } from '../ImageDetailsView/ImageDetailsView';
+import { ImageGalleryDialog, Mode } from '../ImageGalleryDialog/ImageGalleryDialog';
+import { GalleryView } from './GalleryView/GalleryView';
+import { HeaderLeft } from './HeaderLeft/HeaderLeft';
+import { HeaderRight } from './HeaderRight/HeaderRight';
 var ImageAttributesGallery = function (_a) {
     var attributeValues = _a.attributeValues, open = _a.open, onClose = _a.onClose, currentAttributeValueUri = _a.currentAttributeValueUri, setCurrentAttributeValueUri = _a.setCurrentAttributeValueUri, attributeType = _a.attributeType, onDownload = _a.onDownload, onShareLink = _a.onShareLink, onSetAsDefault = _a.onSetAsDefault, onUpload = _a.onUpload, onDeleteAttribute = _a.onDeleteAttribute;
-    var _b = react_1.useState([]), selectedItems = _b[0], setSelectedItems = _b[1];
-    var _c = react_1.useState(ImageGalleryDialog_1.Mode.GALLERY_MODE), mode = _c[0], setMode = _c[1];
-    var isViewMode = react_redux_1.useSelector(mdm_module_1.default.selectors.getIsViewMode);
-    react_1.useEffect(function () {
-        setMode(currentAttributeValueUri ? ImageGalleryDialog_1.Mode.DETAILS_MODE : ImageGalleryDialog_1.Mode.GALLERY_MODE);
+    var _b = useState([]), selectedItems = _b[0], setSelectedItems = _b[1];
+    var _c = useState(Mode.GALLERY_MODE), mode = _c[0], setMode = _c[1];
+    var isViewMode = useSelector(mdm.selectors.getIsViewMode);
+    useEffect(function () {
+        setMode(currentAttributeValueUri ? Mode.DETAILS_MODE : Mode.GALLERY_MODE);
     }, [currentAttributeValueUri]);
     var imageItems = attributeValues.map(function (attribute) { return ({
-        src: mdm_sdk_1.getImageAttributeOvThumbnailUrl(attribute),
-        downloadURL: mdm_sdk_1.getImageAttributeOvUrl(attribute),
+        src: getImageAttributeOvThumbnailUrl(attribute),
+        downloadURL: getImageAttributeOvUrl(attribute),
         id: attribute.uri
     }); });
     var handleSelect = function (id) {
@@ -58,25 +34,25 @@ var ImageAttributesGallery = function (_a) {
         setSelectedItems(function (items) { return items.filter(function (item) { return item !== id; }); });
     };
     var handleSelectAll = function () {
-        setSelectedItems(ramda_1.pluck('id', imageItems));
+        setSelectedItems(pluck('id', imageItems));
     };
     var handleClearAll = function () {
         setSelectedItems([]);
     };
     var handleDownloadSelectedItems = function () {
         var downloadURLs = isGalleryMode
-            ? ramda_1.pipe(ramda_1.filter(function (_a) {
+            ? pipe(filter(function (_a) {
                 var id = _a.id;
                 return selectedItems.includes(id);
-            }), ramda_1.pluck('downloadURL'))(imageItems)
-            : [imageItems.find(ramda_1.propEq('id', currentAttributeValueUri)).downloadURL];
+            }), pluck('downloadURL'))(imageItems)
+            : [imageItems.find(propEq('id', currentAttributeValueUri)).downloadURL];
         onDownload(downloadURLs);
     };
     var handleDownload = function (id) {
-        onDownload([imageItems.find(ramda_1.propEq('id', id)).downloadURL]);
+        onDownload([imageItems.find(propEq('id', id)).downloadURL]);
     };
     var handleShareLink = function (id) {
-        onShareLink(imageItems.find(ramda_1.propEq('id', id)).downloadURL);
+        onShareLink(imageItems.find(propEq('id', id)).downloadURL);
     };
     var handleSharedCurrentItem = function () {
         handleShareLink(currentAttributeValueUri);
@@ -99,23 +75,23 @@ var ImageAttributesGallery = function (_a) {
         if (selectedItems.length)
             setSelectedItems([]);
     };
-    var isGalleryMode = mode === ImageGalleryDialog_1.Mode.GALLERY_MODE;
-    var isDetailsMode = mode === ImageGalleryDialog_1.Mode.DETAILS_MODE;
+    var isGalleryMode = mode === Mode.GALLERY_MODE;
+    var isDetailsMode = mode === Mode.DETAILS_MODE;
     var hasSelectedItems = selectedItems.length > 0;
     var isHasSelectedItemsOrDetailsMode = isDetailsMode || (isGalleryMode && hasSelectedItems);
     var isShowDeleteButton = !isViewMode && isHasSelectedItemsOrDetailsMode;
     var isShowUploadButton = !isViewMode && (isDetailsMode || (isGalleryMode && !hasSelectedItems));
-    var headerLeft = isGalleryMode && hasSelectedItems && (react_1.default.createElement(HeaderLeft_1.HeaderLeft, { items: imageItems, selectedItems: selectedItems, onClearAll: handleClearAll, onSelectAll: handleSelectAll }));
-    var headerRight = (react_1.default.createElement(HeaderRight_1.HeaderRight, { onDelete: isShowDeleteButton ? handleDeleteSelectedItems : undefined, onDownload: isHasSelectedItemsOrDetailsMode ? handleDownloadSelectedItems : undefined, onShare: isDetailsMode ? handleSharedCurrentItem : undefined, onUpload: isShowUploadButton ? onUpload : undefined }));
+    var headerLeft = isGalleryMode && hasSelectedItems && (React.createElement(HeaderLeft, { items: imageItems, selectedItems: selectedItems, onClearAll: handleClearAll, onSelectAll: handleSelectAll }));
+    var headerRight = (React.createElement(HeaderRight, { onDelete: isShowDeleteButton ? handleDeleteSelectedItems : undefined, onDownload: isHasSelectedItemsOrDetailsMode ? handleDownloadSelectedItems : undefined, onShare: isDetailsMode ? handleSharedCurrentItem : undefined, onUpload: isShowUploadButton ? onUpload : undefined }));
     var handleClickByImage = function (id) {
         setCurrentAttributeValueUri(id);
-        setMode(ImageGalleryDialog_1.Mode.DETAILS_MODE);
+        setMode(Mode.DETAILS_MODE);
     };
-    return (react_1.default.createElement(ImageGalleryDialog_1.ImageGalleryDialog, { mode: mode, open: open, onChangeMode: setMode, header: {
+    return (React.createElement(ImageGalleryDialog, { mode: mode, open: open, onChangeMode: setMode, header: {
             left: headerLeft,
             right: headerRight
         }, onClose: onClose },
-        isGalleryMode && (react_1.default.createElement(GalleryView_1.GalleryView, { items: imageItems, selectedItems: selectedItems, onSelectImage: handleSelect, onDeselectImage: handleDeselect, onShareLink: handleShareLink, onSetAsDefault: handleSetAsDefault, onDownload: handleDownload, onClickImage: handleClickByImage, onDelete: !isViewMode ? handleDelete : undefined })),
-        isDetailsMode && (react_1.default.createElement(ImageDetailsView_1.ImageDetailsView, { handleSetAsDefault: handleSetAsDefault, setCurrentAttributeValueUri: setCurrentAttributeValueUri, currentAttributeValueUri: currentAttributeValueUri, attributeValues: attributeValues, attributeType: attributeType }))));
+        isGalleryMode && (React.createElement(GalleryView, { items: imageItems, selectedItems: selectedItems, onSelectImage: handleSelect, onDeselectImage: handleDeselect, onShareLink: handleShareLink, onSetAsDefault: handleSetAsDefault, onDownload: handleDownload, onClickImage: handleClickByImage, onDelete: !isViewMode ? handleDelete : undefined })),
+        isDetailsMode && (React.createElement(ImageDetailsView, { handleSetAsDefault: handleSetAsDefault, setCurrentAttributeValueUri: setCurrentAttributeValueUri, currentAttributeValueUri: currentAttributeValueUri, attributeValues: attributeValues, attributeType: attributeType }))));
 };
-exports.default = ImageAttributesGallery;
+export default ImageAttributesGallery;

package/components/ImageDetailsView/ImageDetailsView.js

@@ -1,37 +1,12 @@
-"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 });
-exports.ImageDetailsView = void 0;
-var react_1 = __importStar(require("react"));
-var Box_1 = __importDefault(require("@material-ui/core/Box"));
-var ImageDetailsViewCarousel_1 = require("./ImageDetailsViewCarousel/ImageDetailsViewCarousel");
-var ImageDetailsViewSidebar_1 = require("./ImageDetailsViewSidebar/ImageDetailsViewSidebar");
-var styles_1 = require("./styles");
-var ImageDetailsView = function (_a) {
+import React, { useCallback, useEffect, useState } from 'react';
+import Box from '@material-ui/core/Box';
+import { ImageDetailsViewCarousel } from './ImageDetailsViewCarousel/ImageDetailsViewCarousel';
+import { ImageDetailsViewSidebar } from './ImageDetailsViewSidebar/ImageDetailsViewSidebar';
+import { useStyles } from './styles';
+export var ImageDetailsView = function (_a) {
     var _b = _a.attributeValues, attributeValues = _b === void 0 ? [] : _b, currentAttributeValueUri = _a.currentAttributeValueUri, setCurrentAttributeValueUri = _a.setCurrentAttributeValueUri, handleSetAsDefault = _a.handleSetAsDefault, attributeType = _a.attributeType;
-    var _c = react_1.useState(0), attributeValueIndex = _c[0], setAttributeValueIndex = _c[1];
-    react_1.useEffect(function () {
+    var _c = useState(0), attributeValueIndex = _c[0], setAttributeValueIndex = _c[1];
+    useEffect(function () {
         if (!currentAttributeValueUri) {
             onChangeAttributeValueIndex(0);
         }
@@ -39,14 +14,13 @@ var ImageDetailsView = function (_a) {
             onChangeAttributeValueIndex(attributeValues.findIndex(function (value) { return value.uri === currentAttributeValueUri; }));
         }
     }, [currentAttributeValueUri, attributeValues]);
-    var onChangeAttributeValueIndex = react_1.useCallback(function (index) {
+    var onChangeAttributeValueIndex = useCallback(function (index) {
         var _a;
         setAttributeValueIndex(index);
         setCurrentAttributeValueUri((_a = attributeValues[index]) === null || _a === void 0 ? void 0 : _a.uri);
     }, [attributeValues]);
-    var styles = styles_1.useStyles();
-    return (react_1.default.createElement(Box_1.default, { className: styles.root },
-        react_1.default.createElement(ImageDetailsViewCarousel_1.ImageDetailsViewCarousel, { attributeValueIndex: attributeValueIndex, setAttributeValueIndex: onChangeAttributeValueIndex, attributeValues: attributeValues, className: styles.main }),
-        react_1.default.createElement(ImageDetailsViewSidebar_1.ImageDetailsViewSidebar, { handleSetAsDefault: handleSetAsDefault, attributeValue: attributeValues[attributeValueIndex], className: styles.details, attributeType: attributeType })));
+    var styles = useStyles();
+    return (React.createElement(Box, { className: styles.root },
+        React.createElement(ImageDetailsViewCarousel, { attributeValueIndex: attributeValueIndex, setAttributeValueIndex: onChangeAttributeValueIndex, attributeValues: attributeValues, className: styles.main }),
+        React.createElement(ImageDetailsViewSidebar, { handleSetAsDefault: handleSetAsDefault, attributeValue: attributeValues[attributeValueIndex], className: styles.details, attributeType: attributeType })));
 };
-exports.ImageDetailsView = ImageDetailsView;