@reltio/components 1.4.701 → 1.4.705

package/components/ImageDetailsView/ImageDetailsViewCarousel/styles.js

@@ -0,0 +1,47 @@
+"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: {
+        display: 'flex',
+        alignContent: 'center',
+        flexDirection: 'column'
+    },
+    main: {
+        position: 'relative',
+        padding: '0 86px',
+        marginTop: 'auto'
+    },
+    mainImageContainer: {
+        display: 'flex',
+        alignContent: 'center',
+        height: '100%',
+        width: '100%'
+    },
+    mainImage: {
+        maxWidth: 'calc(100vw - 512px)',
+        maxHeight: 'calc(100vh - 192px)',
+        margin: '0 auto',
+        userSelect: 'none'
+    },
+    arrowButton: {
+        backgroundColor: theme.palette.divider,
+        color: 'white',
+        '&:hover': {
+            backgroundColor: theme.palette.divider
+        }
+    },
+    arrowButtonPrev: {
+        position: 'absolute',
+        top: '50%',
+        left: '16px',
+        transform: 'translateY(-50%)'
+    },
+    arrowButtonNext: {
+        position: 'absolute',
+        top: '50%',
+        right: '16px',
+        transform: 'translateY(-50%)'
+    }
+}); });

package/components/ImageDetailsView/ImageDetailsViewSidebar/ImageDetailsViewSidebar.js

@@ -0,0 +1,61 @@
+"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.ImageDetailsViewSidebar = void 0;
+var react_1 = __importStar(require("react"));
+var react_redux_1 = require("react-redux");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var Checkbox_1 = __importDefault(require("@material-ui/core/Checkbox"));
+var FormControlLabel_1 = __importDefault(require("@material-ui/core/FormControlLabel"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var classnames_1 = __importDefault(require("classnames"));
+var MetaInfo_1 = require("../MetaInfo/MetaInfo");
+var styles_1 = require("./styles");
+var ImageDetailsViewSidebar = function (_a) {
+    var className = _a.className, attributeValue = _a.attributeValue, handleSetAsDefault = _a.handleSetAsDefault, attributeType = _a.attributeType;
+    var styles = styles_1.useStyles();
+    var entity = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntity) || {};
+    var modifiedEntity = react_redux_1.useSelector(function (state) { return mdm_module_1.default.selectors.getModifiedEntity(state, entity === null || entity === void 0 ? void 0 : entity.uri); }) || {};
+    var isViewMode = react_redux_1.useSelector(mdm_module_1.default.selectors.getIsViewMode);
+    var entityToShow = isViewMode ? entity : modifiedEntity;
+    var imageAttributeConfig = react_redux_1.useSelector(mdm_module_1.default.selectors.getImageAttributesFieldsOrder) || {};
+    var imageAttributeFieldsOrder = imageAttributeConfig[entity === null || entity === void 0 ? void 0 : entity.type] || (imageAttributeConfig === null || imageAttributeConfig === void 0 ? void 0 : imageAttributeConfig.default) || {};
+    var _b = react_1.useState(false), isDefault = _b[0], setIsDefault = _b[1];
+    react_1.useEffect(function () {
+        setIsDefault((entityToShow === null || entityToShow === void 0 ? void 0 : entityToShow.defaultProfilePic) === (attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri));
+    }, [attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, entityToShow]);
+    var handleChange = react_1.useCallback(function () {
+        handleSetAsDefault(attributeValue.uri);
+    }, [attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri]);
+    return (react_1.default.createElement(Box_1.default, { className: classnames_1.default(styles.root, className) },
+        react_1.default.createElement(Box_1.default, { className: styles.header },
+            react_1.default.createElement(Typography_1.default, { className: styles.headerTitle }, ui_i18n_1.default.text('Details'))),
+        react_1.default.createElement(Box_1.default, { className: styles.bodyWrapper },
+            react_1.default.createElement(Box_1.default, { className: styles.body },
+                react_1.default.createElement(FormControlLabel_1.default, { classes: { root: styles.formControlLabel, label: styles.checkboxLabel }, control: react_1.default.createElement(Checkbox_1.default, { className: styles.checkbox, checked: isDefault, onChange: handleChange, color: "default" }), label: ui_i18n_1.default.text('Set as default') }),
+                react_1.default.createElement(MetaInfo_1.MetaInfo, { attributeType: attributeType, imageAttributeFieldsOrder: imageAttributeFieldsOrder, attributeValue: attributeValue })))));
+};
+exports.ImageDetailsViewSidebar = ImageDetailsViewSidebar;

package/components/ImageDetailsView/ImageDetailsViewSidebar/styles.js

@@ -0,0 +1,45 @@
+"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',
+        backgroundColor: '#333',
+        maxHeight: 'calc(100vh - 64px)',
+        overflow: 'hidden'
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        height: '56px',
+        paddingLeft: '16px',
+        boxShadow: "0 1px 0 0 " + theme.palette.divider
+    },
+    headerTitle: {
+        color: 'rgba(255, 255, 255, 0.87)',
+        fontSize: '16px',
+        lineHeight: '19px'
+    },
+    bodyWrapper: {
+        maxHeight: 'calc(100% - 56px)',
+        overflow: 'auto'
+    },
+    body: {
+        padding: '16px'
+    },
+    formControlLabel: {
+        marginLeft: 0,
+        marginBottom: '27px'
+    },
+    checkboxLabel: {
+        marginLeft: '8px',
+        color: 'rgba(255,255,255,0.87)',
+        fontSize: '13px',
+        lineHeight: '15px'
+    },
+    checkbox: {
+        color: 'white',
+        padding: 0
+    }
+}); });

package/components/ImageDetailsView/MetaInfo/MetaInfo.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetaInfo = void 0;
+var react_1 = __importDefault(require("react"));
+var react_redux_1 = require("react-redux");
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var styles_1 = require("@material-ui/core/styles");
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var MetaInfoHeader_1 = require("../MetaInfoHeader/MetaInfoHeader");
+var MetaInfoList_1 = require("../MetaInfoList/MetaInfoList");
+var MetaInfoForm_1 = require("../MetaInfoForm/MetaInfoForm");
+var useEditMetaInfo_1 = require("../hooks/useEditMetaInfo");
+var theme_1 = require("../theme");
+var darkMuiTheme = styles_1.createMuiTheme(theme_1.darkTheme);
+var MetaInfo = function (_a) {
+    var imageAttributeFieldsOrder = _a.imageAttributeFieldsOrder, attributeType = _a.attributeType, initialAttributeValue = _a.attributeValue;
+    var _b = useEditMetaInfo_1.useEditMetaInfo({ attributeType: attributeType, initialAttributeValue: initialAttributeValue }), addAttributes = _b.addAttributes, changeAttribute = _b.changeAttribute, deleteAttribute = _b.deleteAttribute, clearLocalChanges = _b.clearLocalChanges, applyLocalChanges = _b.applyLocalChanges, attributeValue = _b.attributeValue, hasChanges = _b.hasChanges;
+    var mode = react_redux_1.useSelector(mdm_module_1.default.selectors.getMode);
+    var isEditableMode = react_redux_1.useSelector(mdm_module_1.default.selectors.getIsEditableMode);
+    return (react_1.default.createElement(styles_1.MuiThemeProvider, { theme: darkMuiTheme },
+        react_1.default.createElement(Box_1.default, null,
+            react_1.default.createElement(MetaInfoHeader_1.MetaInfoHeader, { attributeType: attributeType, uri: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, onAddAttributes: isEditableMode ? addAttributes : undefined }),
+            react_1.default.createElement(MetaInfoList_1.MetaInfoList, { attributeType: attributeType, attributeValue: attributeValue, imageAttributeFieldsOrder: imageAttributeFieldsOrder }),
+            isEditableMode && (react_1.default.createElement(MetaInfoForm_1.MetaInfoForm, { mode: mode, imageAttributeFieldsOrder: imageAttributeFieldsOrder, attributeType: attributeType, attributeValue: attributeValue, hasChanges: hasChanges, onDeleteAttribute: deleteAttribute, onChangeAttribute: changeAttribute, onAddAttributes: addAttributes, onCancel: clearLocalChanges, onApply: applyLocalChanges })))));
+};
+exports.MetaInfo = MetaInfo;

package/components/ImageDetailsView/MetaInfoForm/MetaInfoForm.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetaInfoForm = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var Divider_1 = __importDefault(require("@material-ui/core/Divider"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var AttributesPager_1 = __importDefault(require("../../attributes/editMode/AttributesPager"));
+var helpers_1 = require("../helpers");
+var styles_1 = require("./styles");
+var MetaInfoForm = function (_a) {
+    var attributeType = _a.attributeType, imageAttributeFieldsOrder = _a.imageAttributeFieldsOrder, attributeValue = _a.attributeValue, hasChanges = _a.hasChanges, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, onAddAttributes = _a.onAddAttributes, onCancel = _a.onCancel, onApply = _a.onApply, mode = _a.mode;
+    var styles = styles_1.useStyles();
+    var notSystemAttributesList = helpers_1.getNotSystemAttributesList(attributeValue, attributeType, imageAttributeFieldsOrder);
+    var shouldShowActionButtons = notSystemAttributesList.length !== 0 || (notSystemAttributesList.length === 0 && hasChanges);
+    return (react_1.default.createElement(Box_1.default, { className: styles.root },
+        react_1.default.createElement(Box_1.default, { className: styles.form }, notSystemAttributesList.map(function (_a) {
+            var attrType = _a.attrType, values = _a.values;
+            return (react_1.default.createElement(AttributesPager_1.default, { key: attrType.uri, parentUri: attributeValue.uri, attributeType: attrType, values: values, showEmptyEditors: mdm_sdk_1.isTempUri(attributeValue.uri), mode: mode, drawLines: false, onDeleteAttribute: onDeleteAttribute, onChangeAttribute: onChangeAttribute, onAddAttributes: onAddAttributes }));
+        })),
+        shouldShowActionButtons && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Divider_1.default, { className: styles.divider }),
+            react_1.default.createElement(Box_1.default, { className: styles.actions },
+                react_1.default.createElement(Button_1.default, { disabled: !hasChanges, onClick: onCancel, className: styles.cancelButton }, ui_i18n_1.default.text('Cancel')),
+                react_1.default.createElement(Button_1.default, { disabled: !hasChanges, onClick: onApply, color: "primary" }, ui_i18n_1.default.text('Apply')))))));
+};
+exports.MetaInfoForm = MetaInfoForm;

package/components/ImageDetailsView/MetaInfoForm/styles.js

@@ -0,0 +1,24 @@
+"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({
+    root: {},
+    form: {
+        padding: '10px 0'
+    },
+    divider: {
+        width: '100%',
+        height: '1px',
+        background: 'rgba(255,255,255,0.12)'
+    },
+    actions: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        marginTop: '4px'
+    },
+    cancelButton: {
+        color: 'white',
+        marginRight: '8px'
+    }
+});

package/components/ImageDetailsView/MetaInfoHeader/MetaInfoHeader.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.MetaInfoHeader = void 0;
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var classnames_1 = __importDefault(require("classnames"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var Divider_1 = __importDefault(require("@material-ui/core/Divider"));
+var MoreAttributesButton_1 = __importDefault(require("../../attributes/editMode/MoreAttributesButton"));
+var helpers_1 = require("../helpers");
+var styles_1 = require("./styles");
+var MetaInfoHeader = function (_a) {
+    var _b;
+    var attributeType = _a.attributeType, onAddAttributes = _a.onAddAttributes, uri = _a.uri;
+    var styles = styles_1.useStyles();
+    var moreAttrTypes = helpers_1.getMoreAttrTypes(attributeType);
+    var canAdd = Boolean(onAddAttributes);
+    var handleApply = function (attrTypes) {
+        if (onAddAttributes) {
+            onAddAttributes(attrTypes.map(function (attributeType) { return ({ attributeType: attributeType, parentUri: uri }); }));
+        }
+    };
+    return (react_1.default.createElement(Box_1.default, null,
+        react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.title, (_b = {}, _b[styles.canAdd] = canAdd, _b)) }, ui_i18n_1.default.text('Meta info')),
+        canAdd && (react_1.default.createElement(react_1.Fragment, null,
+            react_1.default.createElement(MoreAttributesButton_1.default, { label: ui_i18n_1.default.text('Attributes'), data: moreAttrTypes, dense: false, onApply: handleApply }),
+            react_1.default.createElement(Divider_1.default, { className: styles.divider })))));
+};
+exports.MetaInfoHeader = MetaInfoHeader;

package/components/ImageDetailsView/MetaInfoHeader/styles.js

@@ -0,0 +1,21 @@
+"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({
+    title: {
+        marginBottom: '10px',
+        color: 'white',
+        fontSize: '18px',
+        lineHeight: '21px',
+        '&$canAdd': {
+            marginBottom: '3px'
+        }
+    },
+    divider: {
+        width: '100%',
+        height: '1px',
+        background: 'rgba(255,255,255,0.12)'
+    },
+    canAdd: {}
+});

package/components/ImageDetailsView/MetaInfoList/MetaInfoItem/MetaInfoItem.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.MetaInfoItem = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var styles_1 = require("./styles");
+var MetaInfoItem = function (_a) {
+    var title = _a.title, content = _a.content, isLink = _a.isLink, children = _a.children;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement("div", { className: styles.root },
+        react_1.default.createElement("span", { className: styles.title }, title),
+        isLink ? (react_1.default.createElement("a", { className: styles.link, href: content }, ui_i18n_1.default.text('link'))) : (react_1.default.createElement("span", { className: styles.content }, content || children))));
+};
+exports.MetaInfoItem = MetaInfoItem;

package/components/ImageDetailsView/MetaInfoList/MetaInfoItem/styles.js

@@ -0,0 +1,25 @@
+"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: {
+        fontSize: '13px',
+        letterSpacing: 0,
+        lineHeight: '15px',
+        marginBottom: '11px'
+    },
+    title: {
+        color: 'rgba(255,255,255,0.54)',
+        marginRight: '12px',
+        float: 'left'
+    },
+    content: {
+        color: 'rgba(255,255,255,0.87)',
+        wordWrap: 'break-word'
+    },
+    link: {
+        color: theme.palette.primary.main,
+        textDecoration: 'none'
+    }
+}); });

package/components/ImageDetailsView/MetaInfoList/MetaInfoList.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetaInfoList = void 0;
+var react_1 = __importDefault(require("react"));
+var react_redux_1 = require("react-redux");
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var AttributesPager_1 = __importDefault(require("../../attributes/readMode/AttributesPager"));
+var MetaInfoItem_1 = require("./MetaInfoItem/MetaInfoItem");
+var helpers_1 = require("../helpers");
+var styles_1 = require("./styles");
+var MetaInfoList = function (_a) {
+    var attributeValue = _a.attributeValue, attributeType = _a.attributeType, imageAttributeFieldsOrder = _a.imageAttributeFieldsOrder;
+    var styles = styles_1.useStyles();
+    var isViewMode = react_redux_1.useSelector(mdm_module_1.default.selectors.getIsViewMode);
+    var systemAttributesList = helpers_1.getSystemAttributesList(attributeValue, imageAttributeFieldsOrder);
+    var notSystemAttributesList = helpers_1.getNotSystemAttributesList(attributeValue, attributeType, imageAttributeFieldsOrder);
+    return (react_1.default.createElement(Box_1.default, { className: styles.root },
+        systemAttributesList.map(function (_a) {
+            var title = _a.title, value = _a.value, isLink = _a.isLink;
+            return (react_1.default.createElement(MetaInfoItem_1.MetaInfoItem, { key: title, isLink: isLink, title: title, content: value }));
+        }),
+        isViewMode &&
+            notSystemAttributesList.map(function (_a) {
+                var attrType = _a.attrType, values = _a.values;
+                return (react_1.default.createElement(AttributesPager_1.default, { key: attrType.uri, attributeType: attrType, drawLines: false, values: values, titleClassName: styles.title, contentClassName: styles.content, parentUri: attributeValue.uri }));
+            })));
+};
+exports.MetaInfoList = MetaInfoList;

package/components/ImageDetailsView/MetaInfoList/styles.js

@@ -0,0 +1,17 @@
+"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({
+    root: {
+        padding: '10px 0'
+    },
+    title: {
+        color: 'rgba(255,255,255,0.54)',
+        fontSize: '13px'
+    },
+    content: {
+        color: 'rgba(255,255,255,0.87)',
+        wordWrap: 'break-word'
+    }
+});

package/components/ImageDetailsView/constants/index.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SYSTEM_ATTRIBUTES_TITLES = void 0;
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+exports.SYSTEM_ATTRIBUTES_TITLES = {
+    get CreationTime() {
+        return ui_i18n_1.default.text('Creation Time');
+    },
+    get CreationDate() {
+        return ui_i18n_1.default.text('Creation Date');
+    },
+    get Dimensions() {
+        return ui_i18n_1.default.text('Dimensions');
+    },
+    get MimeType() {
+        return ui_i18n_1.default.text('Mime Type');
+    },
+    get Size() {
+        return ui_i18n_1.default.text('Size');
+    },
+    get Url() {
+        return ui_i18n_1.default.text('Full image URL (S3)');
+    },
+    get UrlPreview() {
+        return ui_i18n_1.default.text('Preview image URL (S3)');
+    },
+    get UrlThumbnail() {
+        return ui_i18n_1.default.text('Small image URL (S3)');
+    },
+    get CdnUrl() {
+        return ui_i18n_1.default.text('Full image URL (CDN)');
+    },
+    get CdnUrlPreview() {
+        return ui_i18n_1.default.text('Preview image URL (CDN)');
+    },
+    get CdnUrlThumbnail() {
+        return ui_i18n_1.default.text('Small image URL (CDN)');
+    }
+};

package/components/ImageDetailsView/helpers/index.js

@@ -0,0 +1,97 @@
+"use strict";
+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 });
+exports.isLink = exports.getNotSystemAttributesList = exports.getSystemAttributesList = exports.getMoreAttrTypes = exports.filterByFieldsOrder = exports.getFormattedSystemImageAttributeValue = void 0;
+var ramda_1 = require("ramda");
+var moment_1 = __importDefault(require("moment"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var constants_1 = require("../constants");
+var getFormattedSystemImageAttributeValue = function (_a, name) {
+    var _b = _a === void 0 ? {} : _a, value = _b.value;
+    if (['Url', 'UrlPreview', 'UrlThumbnail', 'CdnUrl', 'CdnUrlPreview', 'CdnUrlThumbnail', 'MimeType'].includes(name)) {
+        return ramda_1.path([name, 0, 'value'], value);
+    }
+    if (name === 'CreationDate' && ramda_1.path(['CreationTimestamp', 0, 'value'], value)) {
+        return moment_1.default(value.CreationTimestamp[0].value).format('MM-DD-YYYY');
+    }
+    if (name === 'CreationTime' && ramda_1.path(['CreationTimestamp', 0, 'value'], value)) {
+        return moment_1.default(value.CreationTimestamp[0].value).format('HH:mm:ss');
+    }
+    if (name === 'Dimensions' && ramda_1.path(['Height', 0, 'value'], value) && ramda_1.path(['Width', 0, 'value'], value)) {
+        return value.Height[0].value + " x " + value.Width[0].value + " " + ui_i18n_1.default.text('pixels');
+    }
+    if (name === 'Size' && ramda_1.path(['Size', 0, 'value'], value)) {
+        var size = (Number(value.Size[0].value) / 1000).toFixed(2);
+        return size + " KB";
+    }
+};
+exports.getFormattedSystemImageAttributeValue = getFormattedSystemImageAttributeValue;
+var filterByNotSystemAttributeTypes = function (attrTypes) {
+    if (attrTypes === void 0) { attrTypes = []; }
+    return attrTypes.filter(function (_a) {
+        var system = _a.system;
+        return !system;
+    });
+};
+var filterByFieldsOrder = function (keys, fieldsOrder) {
+    var _a = fieldsOrder.includeNames, includeNames = _a === void 0 ? [] : _a, _b = fieldsOrder.excludeNames, excludeNames = _b === void 0 ? [] : _b, _c = fieldsOrder.order, order = _c === void 0 ? [] : _c;
+    var filteredKeys = includeNames.length
+        ? keys.filter(function (key) { return includeNames.includes(key); })
+        : keys.filter(function (key) { return !excludeNames.includes(key); });
+    if (order.length === 0) {
+        return filteredKeys;
+    }
+    return filteredKeys.sort(function (a, b) {
+        var indA = order.indexOf(a);
+        var indB = order.indexOf(b);
+        if (indA === -1 && indB !== -1)
+            return 1;
+        if (indB === -1 && indA !== -1)
+            return -1;
+        return indA - indB;
+    });
+};
+exports.filterByFieldsOrder = filterByFieldsOrder;
+var getMoreAttrTypes = function (attrType) {
+    return filterByNotSystemAttributeTypes(attrType.attributes);
+};
+exports.getMoreAttrTypes = getMoreAttrTypes;
+var getSystemAttributesList = function (attrValue, fieldsOrder) {
+    return exports.filterByFieldsOrder(Object.keys(constants_1.SYSTEM_ATTRIBUTES_TITLES), fieldsOrder)
+        .map(function (key) {
+        var value = exports.getFormattedSystemImageAttributeValue(attrValue, key);
+        if (!value) {
+            return null;
+        }
+        return {
+            title: constants_1.SYSTEM_ATTRIBUTES_TITLES[key],
+            value: exports.getFormattedSystemImageAttributeValue(attrValue, key),
+            isLink: exports.isLink(key)
+        };
+    })
+        .filter(Boolean);
+};
+exports.getSystemAttributesList = getSystemAttributesList;
+var getNotSystemAttributesList = function (attrValue, attrType, fieldsOrder) {
+    if (attrValue === void 0) { attrValue = {}; }
+    var notSystemAttrTypes = filterByNotSystemAttributeTypes(attrType.attributes);
+    return exports.filterByFieldsOrder(Object.keys(attrValue.value || {}), fieldsOrder).reduce(function (result, key) {
+        var attrType = notSystemAttrTypes.find(function (_a) {
+            var name = _a.name;
+            return name === key;
+        });
+        return attrType ? __spreadArray(__spreadArray([], result), [{ attrType: attrType, values: attrValue.value[key] }]) : result;
+    }, []);
+};
+exports.getNotSystemAttributesList = getNotSystemAttributesList;
+var isLink = function (key) {
+    return ['Url', 'UrlPreview', 'UrlThumbnail', 'CdnUrl', 'CdnUrlPreview', 'CdnUrlThumbnail'].includes(key);
+};
+exports.isLink = isLink;

package/components/ImageDetailsView/hooks/useEditMetaInfo.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditMetaInfo = void 0;
+var react_1 = require("react");
+var ramda_1 = require("ramda");
+var react_redux_1 = require("react-redux");
+var mdm_module_1 = require("@reltio/mdm-module");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var contexts_1 = require("../../../contexts");
+var useEditMetaInfo = function (_a) {
+    var initialAttributeValue = _a.initialAttributeValue, attributeType = _a.attributeType;
+    var dispatch = react_redux_1.useDispatch();
+    var viewId = react_1.useContext(contexts_1.ViewIdContext);
+    var _b = react_1.useState(initialAttributeValue), attributeValue = _b[0], setAttributeValue = _b[1];
+    var nestingLevel = 1;
+    var hasChanges = !ramda_1.equals(attributeValue, initialAttributeValue);
+    var addAttributes = react_1.useCallback(function (attributes) {
+        setAttributeValue(function (prevAttrValue) {
+            return attributes.reduce(function (attrValue, attribute) {
+                var attributeType = attribute.attributeType, parentUri = attribute.parentUri, index = attribute.index;
+                return mdm_sdk_1.addAttribute({
+                    entity: attrValue,
+                    attributeType: attributeType,
+                    parentUri: parentUri,
+                    index: index,
+                    nestingLevel: nestingLevel
+                });
+            }, prevAttrValue);
+        });
+    }, []);
+    var changeAttribute = react_1.useCallback(function (_a) {
+        var value = _a.value, attributeType = _a.attributeType, uri = _a.uri;
+        setAttributeValue(function (prevAttrValue) {
+            return mdm_sdk_1.editAttribute({
+                entity: prevAttrValue,
+                attributeType: attributeType,
+                uri: uri,
+                value: value,
+                nestingLevel: nestingLevel
+            });
+        });
+    }, []);
+    var deleteAttribute = react_1.useCallback(function (_a) {
+        var attributeType = _a.attributeType, uri = _a.uri;
+        setAttributeValue(function (prevAttrValue) {
+            return mdm_sdk_1.removeAttribute({ entity: prevAttrValue, attributeType: attributeType, uri: uri, nestingLevel: nestingLevel });
+        });
+    }, []);
+    var clearLocalChanges = react_1.useCallback(function () {
+        setAttributeValue(initialAttributeValue);
+    }, [initialAttributeValue]);
+    var applyLocalChanges = react_1.useCallback(function () {
+        dispatch(mdm_module_1.profile.actions.modifyAttribute({
+            value: attributeValue,
+            attributeType: attributeType,
+            uri: attributeValue.uri,
+            viewId: viewId
+        }));
+    }, [attributeValue, attributeType, viewId, dispatch]);
+    return {
+        addAttributes: addAttributes,
+        changeAttribute: changeAttribute,
+        deleteAttribute: deleteAttribute,
+        clearLocalChanges: clearLocalChanges,
+        applyLocalChanges: applyLocalChanges,
+        attributeValue: attributeValue,
+        hasChanges: hasChanges
+    };
+};
+exports.useEditMetaInfo = useEditMetaInfo;

package/components/ImageDetailsView/styles.js

@@ -0,0 +1,18 @@
+"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: {
+        display: 'flex',
+        width: '100%',
+        overflowY: 'auto',
+        height: 'calc(100vh - 64px)'
+    },
+    main: {
+        flex: '1 0 auto'
+    },
+    details: {
+        width: '340px'
+    }
+}); });