@reltio/components 1.4.701 → 1.4.705

package/components/Image/ImageActionsOverlay/ImageActionsOverlay.js

@@ -0,0 +1,81 @@
+"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");
+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 () {
+        return [
+            {
+                text: ui_i18n_1.default.text('Share link'),
+                onClick: onShareLink
+            },
+            {
+                text: ui_i18n_1.default.text('Set as default'),
+                onClick: onSetAsDefault
+            },
+            {
+                text: ui_i18n_1.default.text('Delete'),
+                onClick: onDelete
+            }
+        ].filter(ramda_1.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 showCheckBox = canBeSelected && (selected || hovered || selectionMode);
+    var showActions = !selectionMode && !selected && hovered;
+    var showDeselectButton = canBeSelected && selected;
+    var handleClick = function (event) {
+        if (event.currentTarget === event.target)
+            onClick();
+    };
+    return (react_1.default.createElement("div", { className: classnames_1.default(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)
+                }, menuItems: menuItems }))),
+        showDeselectButton && (react_1.default.createElement(Button_1.default, { className: styles.button, variant: "outlined", onClick: onDeselect }, ui_i18n_1.default.text('Deselect')))));
+};
+exports.default = react_1.memo(ImageActionsOverlay);

package/components/Image/ImageActionsOverlay/styles.js

@@ -0,0 +1,61 @@
+"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 ({
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: '0.2s linear all',
+        '&:not($selected):not($selectionMode):hover': {
+            backgroundColor: 'rgba(0,0,0,0.6)'
+        },
+        userSelect: 'none'
+    },
+    selected: {
+        backgroundColor: 'rgba(0,114,206,0.6)'
+    },
+    selectionMode: {
+        cursor: 'pointer',
+        '&:not($selected)': {
+            backgroundColor: 'rgba(0,0,0,0.6)'
+        }
+    },
+    button: {
+        padding: 0,
+        width: '100px',
+        height: '36px',
+        color: '#fff',
+        fontSize: '14px',
+        fontWeight: 500,
+        lineHeight: '16px',
+        border: '1px solid rgba(255,255,255,0.25)',
+        backgroundColor: 'rgba(98,2,238,0)'
+    },
+    checkedIcon: {
+        position: 'absolute',
+        left: '4px',
+        top: '4px',
+        cursor: 'pointer'
+    },
+    actions: {
+        display: 'flex',
+        alignItems: 'center',
+        position: 'absolute',
+        top: '4px',
+        right: '4px'
+    },
+    actionButton: {
+        color: '#fff',
+        fontSize: '24px'
+    },
+    dropDownMenuButton: {
+        margin: '0 2px 0 8px'
+    }
+}); });

package/components/Image/styles.js

@@ -0,0 +1,33 @@
+"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 ({
+    root: {
+        position: 'relative'
+    },
+    image: function (_a) {
+        var imageWidth = _a.imageWidth, imageHeight = _a.imageHeight;
+        return ({
+            width: imageWidth,
+            height: imageHeight,
+            objectFit: 'cover',
+            verticalAlign: 'bottom'
+        });
+    },
+    defaultContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        backgroundColor: 'rgb(247, 247, 247)'
+    },
+    defaultImage: {
+        width: '40px',
+        height: '40px',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        color: theme.palette.text.secondary
+    },
+    hideImage: {
+        display: 'none'
+    }
+}); });

package/components/ImageAttributesGallery/GalleryView/GalleryView.js

@@ -0,0 +1,45 @@
+"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) {
+    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 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_1.default.createElement(Box_1.default, { className: styles.root },
+        react_1.default.createElement(Grid_1.default, { 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) })));
+        }))));
+};
+exports.GalleryView = GalleryView;

package/components/ImageAttributesGallery/GalleryView/styles.js

@@ -0,0 +1,14 @@
+"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 ({
+    root: {
+        padding: '0 24px',
+        overflowY: 'auto',
+        height: 'calc(100vh - 64px)'
+    },
+    item: {
+        padding: '2px'
+    }
+}); });

package/components/ImageAttributesGallery/HeaderLeft/HeaderLeft.js

@@ -0,0 +1,17 @@
+"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) {
+    var selectedItems = _a.selectedItems, items = _a.items, onSelectAll = _a.onSelectAll, onClearAll = _a.onClearAll;
+    var styles = styles_1.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')));
+};
+exports.HeaderLeft = HeaderLeft;

package/components/ImageAttributesGallery/HeaderLeft/styles.js

@@ -0,0 +1,12 @@
+"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 ({
+    selectButton: {
+        fontSize: '14px',
+        fontWeight: 500,
+        color: theme.palette.primary.main,
+        textTransform: 'uppercase'
+    }
+}); });

package/components/ImageAttributesGallery/HeaderRight/HeaderRight.js

@@ -0,0 +1,26 @@
+"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) {
+    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 }))));
+};
+exports.HeaderRight = HeaderRight;

package/components/ImageAttributesGallery/HeaderRight/styles.js

@@ -0,0 +1,27 @@
+"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 ({
+    downloadButton: {
+        color: '#fff',
+        fontSize: '24px',
+        marginLeft: '30px'
+    },
+    shareButton: {
+        color: '#fff',
+        fontSize: '24px',
+        marginLeft: '21px'
+    },
+    deleteButton: {
+        color: '#fff',
+        fontSize: '24px',
+        marginLeft: '24px'
+    },
+    divider: {
+        height: '31px',
+        width: '1px',
+        marginLeft: '10px',
+        backgroundColor: 'rgba(255,255,255,0.38)'
+    }
+}); });

package/components/ImageAttributesGallery/ImageAttributesGallery.js

@@ -0,0 +1,121 @@
+"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");
+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);
+    }, [currentAttributeValueUri]);
+    var imageItems = attributeValues.map(function (attribute) { return ({
+        src: mdm_sdk_1.getImageAttributeOvThumbnailUrl(attribute),
+        downloadURL: mdm_sdk_1.getImageAttributeOvUrl(attribute),
+        id: attribute.uri
+    }); });
+    var handleSelect = function (id) {
+        setSelectedItems(function (items) { return __spreadArray(__spreadArray([], items), [id]); });
+    };
+    var handleDeselect = function (id) {
+        setSelectedItems(function (items) { return items.filter(function (item) { return item !== id; }); });
+    };
+    var handleSelectAll = function () {
+        setSelectedItems(ramda_1.pluck('id', imageItems));
+    };
+    var handleClearAll = function () {
+        setSelectedItems([]);
+    };
+    var handleDownloadSelectedItems = function () {
+        var downloadURLs = isGalleryMode
+            ? ramda_1.pipe(ramda_1.filter(function (_a) {
+                var id = _a.id;
+                return selectedItems.includes(id);
+            }), ramda_1.pluck('downloadURL'))(imageItems)
+            : [imageItems.find(ramda_1.propEq('id', currentAttributeValueUri)).downloadURL];
+        onDownload(downloadURLs);
+    };
+    var handleDownload = function (id) {
+        onDownload([imageItems.find(ramda_1.propEq('id', id)).downloadURL]);
+    };
+    var handleShareLink = function (id) {
+        onShareLink(imageItems.find(ramda_1.propEq('id', id)).downloadURL);
+    };
+    var handleSharedCurrentItem = function () {
+        handleShareLink(currentAttributeValueUri);
+    };
+    var handleSetAsDefault = function (id) {
+        var attributeValue = attributeValues.find(function (_a) {
+            var uri = _a.uri;
+            return uri === id;
+        });
+        onSetAsDefault(attributeValue);
+    };
+    var handleDelete = function (id) {
+        onDeleteAttribute({ uri: id, attributeType: attributeType });
+    };
+    var handleDeleteSelectedItems = function () {
+        var deleteUris = isGalleryMode ? selectedItems : [currentAttributeValueUri];
+        deleteUris.forEach(function (uri) {
+            handleDelete(uri);
+        });
+        if (selectedItems.length)
+            setSelectedItems([]);
+    };
+    var isGalleryMode = mode === ImageGalleryDialog_1.Mode.GALLERY_MODE;
+    var isDetailsMode = mode === ImageGalleryDialog_1.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 handleClickByImage = function (id) {
+        setCurrentAttributeValueUri(id);
+        setMode(ImageGalleryDialog_1.Mode.DETAILS_MODE);
+    };
+    return (react_1.default.createElement(ImageGalleryDialog_1.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 }))));
+};
+exports.default = ImageAttributesGallery;

package/components/ImageDetailsView/ImageDetailsView.js

@@ -0,0 +1,52 @@
+"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) {
+    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 () {
+        if (!currentAttributeValueUri) {
+            onChangeAttributeValueIndex(0);
+        }
+        else {
+            onChangeAttributeValueIndex(attributeValues.findIndex(function (value) { return value.uri === currentAttributeValueUri; }));
+        }
+    }, [currentAttributeValueUri, attributeValues]);
+    var onChangeAttributeValueIndex = react_1.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 })));
+};
+exports.ImageDetailsView = ImageDetailsView;

package/components/ImageDetailsView/ImageDetailsViewCarousel/ImageDetailsViewCarousel.js

@@ -0,0 +1,53 @@
+"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.ImageDetailsViewCarousel = void 0;
+var react_1 = __importDefault(require("react"));
+var NavigateBefore_1 = __importDefault(require("@material-ui/icons/NavigateBefore"));
+var NavigateNext_1 = __importDefault(require("@material-ui/icons/NavigateNext"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var classnames_1 = __importDefault(require("classnames"));
+var Image_1 = __importStar(require("../../Image/Image"));
+var SmallIconButton_1 = require("../../SmallIconButton");
+var styles_1 = require("./styles");
+var Thumbnails_1 = require("./Thumbnails/Thumbnails");
+var ImageDetailsViewCarousel = function (_a) {
+    var className = _a.className, attributeValues = _a.attributeValues, attributeValueIndex = _a.attributeValueIndex, setAttributeValueIndex = _a.setAttributeValueIndex;
+    var styles = styles_1.useStyles();
+    var attributeValue = attributeValues[attributeValueIndex];
+    var mainImageSrc = mdm_sdk_1.getImageAttributeOvPreviewUrl(attributeValue);
+    var onPrevImageButtonClick = function () {
+        setAttributeValueIndex(attributeValueIndex - 1);
+    };
+    var onNextImageButtonClick = function () {
+        setAttributeValueIndex(attributeValueIndex + 1);
+    };
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.root, className) },
+        react_1.default.createElement("div", { className: styles.main },
+            attributeValueIndex > 0 && (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: NavigateBefore_1.default, className: classnames_1.default(styles.arrowButton, styles.arrowButtonPrev), onClick: onPrevImageButtonClick, size: "XL" })),
+            react_1.default.createElement(Image_1.default, { containerClassName: styles.mainImageContainer, className: styles.mainImage, size: mainImageSrc && Image_1.ImageSizesStyles.OVERRIDE, src: mainImageSrc }),
+            attributeValueIndex !== attributeValues.length - 1 && (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: NavigateNext_1.default, className: classnames_1.default(styles.arrowButton, styles.arrowButtonNext), onClick: onNextImageButtonClick, size: "XL" }))),
+        react_1.default.createElement(Thumbnails_1.Thumbnails, { attributeValues: attributeValues, attributeValueIndex: attributeValueIndex, setAttributeValueIndex: setAttributeValueIndex })));
+};
+exports.ImageDetailsViewCarousel = ImageDetailsViewCarousel;

package/components/ImageDetailsView/ImageDetailsViewCarousel/Thumbnails/Thumbnails.js

@@ -0,0 +1,72 @@
+"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.Thumbnails = exports.CONTAINER_MARGIN = exports.IMAGE_PADDING = exports.IMAGE_WIDTH = void 0;
+var react_1 = __importStar(require("react"));
+var Grid_1 = __importDefault(require("@material-ui/core/Grid"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var classnames_1 = __importDefault(require("classnames"));
+var Image_1 = __importDefault(require("../../../Image/Image"));
+var styles_1 = require("./styles");
+exports.IMAGE_WIDTH = 96;
+exports.IMAGE_PADDING = 16;
+exports.CONTAINER_MARGIN = 12;
+var Thumbnails = function (_a) {
+    var attributeValues = _a.attributeValues, setAttributeValueIndex = _a.setAttributeValueIndex, attributeValueIndex = _a.attributeValueIndex;
+    var styles = styles_1.useStyles();
+    var gridRef = react_1.useRef(null);
+    react_1.useEffect(function () {
+        if (gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) {
+            var containerScrollLeft = gridRef.current.scrollLeft;
+            var containerOffsetWidth = gridRef.current.offsetWidth;
+            var containerWidth = containerOffsetWidth + containerScrollLeft;
+            var currentElementPosition = attributeValueIndex * exports.IMAGE_WIDTH + attributeValueIndex * exports.IMAGE_PADDING + exports.CONTAINER_MARGIN;
+            if (containerWidth < currentElementPosition) {
+                if (gridRef.current.scroll) {
+                    if (currentElementPosition > containerWidth + exports.IMAGE_WIDTH + exports.IMAGE_PADDING) {
+                        gridRef.current.scroll(currentElementPosition, 0);
+                    }
+                    else {
+                        gridRef.current.scroll(exports.IMAGE_WIDTH + exports.IMAGE_PADDING + containerScrollLeft, 0);
+                    }
+                }
+            }
+            else if (containerScrollLeft + exports.IMAGE_WIDTH > currentElementPosition) {
+                if (gridRef.current.scroll) {
+                    gridRef.current.scroll(currentElementPosition - exports.IMAGE_WIDTH, 0);
+                }
+            }
+        }
+    }, [attributeValueIndex, gridRef]);
+    return (react_1.default.createElement("div", { ref: gridRef, className: styles.thumbnails },
+        react_1.default.createElement(Grid_1.default, { container: true, wrap: "nowrap", direction: "row", spacing: 1, className: styles.gridContainer }, attributeValues.map(function (_a, index) {
+            var _b;
+            var uri = _a.uri, value = _a.value;
+            return (react_1.default.createElement(Grid_1.default, { item: true, key: uri },
+                react_1.default.createElement(Image_1.default, { onClick: function () { return setAttributeValueIndex(index); }, className: classnames_1.default(styles.thumb, (_b = {},
+                        _b[styles.inactiveThumb] = attributeValueIndex !== index,
+                        _b)), src: mdm_sdk_1.getImageAttributeOvThumbnailUrl({ value: value }) })));
+        }))));
+};
+exports.Thumbnails = Thumbnails;

package/components/ImageDetailsView/ImageDetailsViewCarousel/Thumbnails/styles.js

@@ -0,0 +1,26 @@
+"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 ({
+    thumbnails: {
+        marginLeft: '12px',
+        marginBottom: '12px',
+        marginTop: 'auto',
+        width: 'calc(100vw - 364px)',
+        overflowX: 'auto',
+        overflowY: 'hidden'
+    },
+    gridContainer: {
+        width: '100%'
+    },
+    thumb: {
+        width: '96px',
+        height: '96px',
+        cursor: 'pointer',
+        userSelect: 'none'
+    },
+    inactiveThumb: {
+        filter: 'brightness(0.5)'
+    }
+}); });