@reltio/components 1.4.701 → 1.4.705

package/components/SimpleDropDownSelector/SimpleDropDownSelector.js

@@ -0,0 +1,59 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 DropDownSelector_1 = __importDefault(require("../DropDownSelector/DropDownSelector"));
+var DropDownValue_1 = __importDefault(require("./DropDownValue"));
+var DropDownPlaceholder_1 = __importDefault(require("./DropDownPlaceholder"));
+var components = {
+    SingleValue: DropDownValue_1.default,
+    Placeholder: DropDownPlaceholder_1.default
+};
+var SimpleDropDownSelector = function (_a) {
+    var otherProps = __rest(_a, []);
+    return react_1.default.createElement(DropDownSelector_1.default, __assign({ components: components }, otherProps));
+};
+exports.default = react_1.memo(SimpleDropDownSelector);

package/components/SimpleDropDownSelector/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var styles_1 = require("@material-ui/core/styles");
+var styles = styles_1.makeStyles({
+    value: {
+        color: 'rgba(0, 0, 0, 0.87)'
+    },
+    placeholder: {
+        color: 'rgba(0, 0, 0, 0.38)',
+        fontSize: '14px !important'
+    }
+});
+exports.default = styles;

package/components/SimpleInput/SimpleInput.js

@@ -0,0 +1,77 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 prop_types_1 = __importDefault(require("prop-types"));
+var ramda_1 = require("ramda");
+var core_1 = require("../../core");
+var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
+var SimpleInput = function (_a) {
+    var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? core_1.noop : _b, multiline = _a.multiline, otherProps = __rest(_a, ["value", "onChange", "multiline"]);
+    var _c = react_1.useState(''), currentValue = _c[0], setCurrentValue = _c[1];
+    react_1.useEffect(function () {
+        setCurrentValue(ramda_1.isNil(value) ? '' : value);
+    }, [value]);
+    var applyCurrentValueChange = function () {
+        if (currentValue !== value) {
+            onChange(currentValue);
+        }
+    };
+    var onEnterPress = function () {
+        if (!multiline) {
+            applyCurrentValueChange();
+        }
+    };
+    return (react_1.default.createElement(TextField_1.default, __assign({}, otherProps, { multiline: multiline, value: currentValue, onKeyPress: ramda_1.when(ramda_1.propEq('key', 'Enter'), onEnterPress), onBlur: applyCurrentValueChange, onChange: ramda_1.pipe(core_1.getValue, setCurrentValue) })));
+};
+SimpleInput.propTypes = {
+    value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
+    onChange: prop_types_1.default.func,
+    multiline: prop_types_1.default.bool,
+    InputProps: prop_types_1.default.object,
+    className: prop_types_1.default.string
+};
+exports.default = SimpleInput;

package/components/SmallIconButton/SmallIconButton.js

@@ -0,0 +1,109 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 IconButton_1 = __importDefault(require("@material-ui/core/IconButton"));
+var styles_1 = require("@material-ui/core/styles");
+var SIZES = {
+    XXS: 'XXS',
+    XS: 'XS',
+    S: 'S',
+    M: 'M',
+    MPlus: 'MPlus',
+    L: 'L',
+    XL: 'XL'
+};
+var styles = function () { return ({
+    rootAll: {
+        padding: '0'
+    },
+    rootXXS: {
+        height: '16px',
+        width: '16px'
+    },
+    iconXXS: {
+        fontSize: '16px'
+    },
+    rootXS: {
+        height: '20px',
+        width: '20px'
+    },
+    iconXS: {
+        fontSize: '20px'
+    },
+    rootS: {
+        height: '24px',
+        width: '24px'
+    },
+    iconS: {
+        fontSize: '24px'
+    },
+    rootM: {
+        height: '30px',
+        width: '30px'
+    },
+    rootMPlus: {
+        height: '36px',
+        width: '36px'
+    },
+    rootL: {
+        height: '40px',
+        width: '40px'
+    },
+    rootXL: {
+        height: '48px',
+        width: '48px'
+    },
+    disabled: {
+        fillOpacity: 0.5
+    }
+}); };
+var SmallIconButton = react_1.forwardRef(function (props, ref) {
+    var classes = props.classes, className = props.className, onClick = props.onClick, Icon = props.icon, _a = props.size, size = _a === void 0 ? SIZES.XS : _a, iconClassName = props.iconClassName, extraProps = __rest(props, ["classes", "className", "onClick", "icon", "size", "iconClassName"]);
+    return (react_1.default.createElement(IconButton_1.default, __assign({ ref: ref, classes: { root: classes["root" + size] + " " + classes['rootAll'], disabled: classes.disabled }, onClick: onClick, className: className }, extraProps), Icon && react_1.default.createElement(Icon, { classes: { root: classes["icon" + size] }, className: iconClassName })));
+});
+SmallIconButton.displayName = 'SmallIconButton';
+exports.default = styles_1.withStyles(styles)(SmallIconButton);

package/components/SmallIconButton/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmallIconButtonWithTooltip = exports.SmallIconButton = void 0;
+var HOCs_1 = require("../../HOCs");
+var SmallIconButton_1 = __importDefault(require("./SmallIconButton"));
+exports.SmallIconButton = SmallIconButton_1.default;
+var SmallIconButtonWithTooltip = HOCs_1.withTooltip(SmallIconButton_1.default);
+exports.SmallIconButtonWithTooltip = SmallIconButtonWithTooltip;

package/components/SourceIcon/SourceIcon.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var react_1 = __importDefault(require("react"));
+var react_redux_1 = require("react-redux");
+var AvatarWithFallback_1 = __importDefault(require("../AvatarWithFallback/AvatarWithFallback"));
+var SOURCE_URL = 'https://s3.amazonaws.com/reltio.images/api';
+var SourceIcon = function (_a) {
+    var sourceType = _a.sourceType, className = _a.className;
+    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
+    var _b = mdm_sdk_1.findSourceSystemByUri(metadata, sourceType), label = _b.label, icon = _b.icon;
+    return (react_1.default.createElement(AvatarWithFallback_1.default, { className: className, avatarText: label[0], icon: icon ? mdm_sdk_1.getAbsoluteImageUrl(SOURCE_URL, icon) : null, variant: "square" }));
+};
+exports.default = SourceIcon;

package/components/Spacer/Spacer.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Spacer = function () { return react_1.default.createElement("div", { style: { flex: 1 } }); };
+exports.default = Spacer;

package/components/Title/Title.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var RequiredMark_1 = __importDefault(require("../RequiredMark/RequiredMark"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var styles_1 = require("./styles");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ScoreLabel_1 = __importDefault(require("../Score/ScoreLabel"));
+var Title = function (_a) {
+    var label = _a.label, isRequired = _a.isRequired, className = _a.className, _b = _a.attributeType, attributeType = _b === void 0 ? {} : _b;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.label, className), component: "span" },
+        react_1.default.createElement(ScoreLabel_1.default, { label: label, attrTypeUri: attributeType.uri }),
+        isRequired && react_1.default.createElement(RequiredMark_1.default, null)));
+};
+Title.propTypes = {
+    label: prop_types_1.default.string,
+    isRequired: prop_types_1.default.bool,
+    className: prop_types_1.default.string,
+    attributeType: mdm_sdk_1.AttributeTypeType
+};
+exports.default = Title;

package/components/Title/styles.js

@@ -0,0 +1,11 @@
+"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({
+    label: {
+        color: 'rgba(0,0,0,0.6)',
+        fontSize: '13px',
+        lineHeight: '15px'
+    }
+});

package/components/UploadFileButton/UploadFileButton.js

@@ -0,0 +1,122 @@
+"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 prop_types_1 = __importDefault(require("prop-types"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var CircularProgress_1 = __importDefault(require("@material-ui/core/CircularProgress"));
+var Link_1 = __importDefault(require("@material-ui/core/Link"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var Cancel_1 = __importDefault(require("@material-ui/icons/Cancel"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ErrorPopup_1 = __importDefault(require("../ErrorPopup/ErrorPopup"));
+var styles_js_1 = require("./styles.js");
+var MODES = { INIT: 1, UPLOADING: 2, UPLOADED: 3 };
+var PROGRESS_ICON_SIZE = 20;
+var showFileUploadError = function (error) {
+    console.error(error); // eslint-disable-line
+    ErrorPopup_1.default.addError({
+        title: ui_i18n_1.default.text('File upload error'),
+        message: error
+    });
+};
+var UploadMode = function (_a) {
+    var _b = _a.supportedFileTypes, supportedFileTypes = _b === void 0 ? [] : _b, onUpload = _a.onUpload, onBeforeUpload = _a.onBeforeUpload;
+    var styles = styles_js_1.useStyles();
+    var fileUploader = react_1.useRef();
+    var supportedFileTypesString = supportedFileTypes.join(',');
+    var onSelectFileClick = function () {
+        fileUploader.current.value = null;
+        fileUploader.current.click();
+    };
+    var onUploadListener = function (event) {
+        var uploadedFiles = event.target.files || event.dataTransfer.files || [];
+        if (uploadedFiles.length > 0) {
+            onBeforeUpload();
+            onUpload(uploadedFiles[0]);
+        }
+        event.stopPropagation();
+        event.preventDefault();
+    };
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(Button_1.default, { variant: "contained", onClick: onSelectFileClick }, ui_i18n_1.default.text('Select File')),
+        react_1.default.createElement("input", { type: "file", className: styles.fileUploaderInput, onChange: onUploadListener, ref: fileUploader, name: "uploadfile", accept: supportedFileTypesString })));
+};
+UploadMode.propTypes = {
+    onUpload: prop_types_1.default.func,
+    onBeforeUpload: prop_types_1.default.func,
+    supportedFileTypes: prop_types_1.default.arrayOf(prop_types_1.default.string)
+};
+var UploadFileButton = function (_a) {
+    var link = _a.link, filename = _a.filename, onUpload = _a.onUpload, _b = _a.onError, onError = _b === void 0 ? showFileUploadError : _b, onCancel = _a.onCancel, supportedFileTypes = _a.supportedFileTypes;
+    var _c = react_1.useState(MODES.INIT), mode = _c[0], setMode = _c[1];
+    var _d = react_1.useState(''), name = _d[0], setName = _d[1];
+    var styles = styles_js_1.useStyles();
+    react_1.useEffect(function () {
+        setName(filename);
+    }, [filename]);
+    react_1.useEffect(function () {
+        setMode(link ? MODES.UPLOADED : MODES.INIT);
+    }, [link]);
+    var onErrorHandler = react_1.useCallback(function (error) {
+        setMode(MODES.INIT);
+        onError(error);
+    }, [onError]);
+    var onUploadHandler = react_1.useCallback(function (result) {
+        return onUpload(result)
+            .then(function () {
+            setMode(MODES.UPLOADED);
+            setName(result.name);
+        })
+            .catch(onErrorHandler);
+    }, [onUpload, onErrorHandler]);
+    var onBeforeUpload = react_1.useCallback(function () {
+        setMode(MODES.UPLOADING);
+    }, []);
+    var switchToInitMode = react_1.useCallback(function () {
+        setMode(MODES.INIT);
+        onCancel();
+    }, [onCancel]);
+    switch (mode) {
+        case MODES.INIT:
+            return (react_1.default.createElement(UploadMode, { supportedFileTypes: supportedFileTypes, onUpload: onUploadHandler, onBeforeUpload: onBeforeUpload }));
+        case MODES.UPLOADED:
+            return (react_1.default.createElement("div", { className: styles.uploaded },
+                react_1.default.createElement(Link_1.default, { href: link }, mdm_sdk_1.getLabel(name)),
+                react_1.default.createElement(Cancel_1.default, { onClick: switchToInitMode, onMouseDown: switchToInitMode, onTouchEnd: switchToInitMode, className: styles.cancelIcon })));
+        case MODES.UPLOADING:
+            return react_1.default.createElement(CircularProgress_1.default, { size: PROGRESS_ICON_SIZE });
+        default:
+            return null;
+    }
+};
+UploadFileButton.propTypes = {
+    link: prop_types_1.default.string,
+    filename: prop_types_1.default.string,
+    onUpload: prop_types_1.default.func,
+    onError: prop_types_1.default.func,
+    onCancel: prop_types_1.default.func,
+    supportedFileTypes: prop_types_1.default.arrayOf(prop_types_1.default.string)
+};
+exports.default = UploadFileButton;

package/components/UploadFileButton/styles.js

@@ -0,0 +1,20 @@
+"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({
+    fileUploaderInput: {
+        display: 'none'
+    },
+    uploaded: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    cancelIcon: {
+        height: '18px',
+        width: '18px',
+        color: 'rgba(0,0,0,0.38)',
+        marginLeft: '3px',
+        cursor: 'pointer'
+    }
+});

package/components/UploadImageDialog/DividerWithText/DividerWithText.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DividerWithText = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var styles_1 = require("./styles");
+var DividerWithText = function (_a) {
+    var children = _a.children, className = _a.className;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(Box_1.default, { className: classnames_1.default(styles.root, className) },
+        react_1.default.createElement(Box_1.default, { className: styles.border }),
+        react_1.default.createElement(Typography_1.default, { className: styles.text }, children),
+        react_1.default.createElement(Box_1.default, { className: styles.border })));
+};
+exports.DividerWithText = DividerWithText;

package/components/UploadImageDialog/DividerWithText/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(function (theme) { return ({
+    root: {
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 30px',
+        boxSizing: 'border-box'
+    },
+    border: {
+        borderBottom: "1px solid " + theme.palette.text.primary,
+        flex: 1,
+        opacity: 0.12
+    },
+    text: {
+        padding: '0 10px',
+        color: theme.palette.text.secondary,
+        fontSize: '14px',
+        lineHeight: '16px'
+    }
+}); });

package/components/UploadImageDialog/ErrorSnackbar/ErrorSnackbar.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorSnackbar = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Close_1 = __importDefault(require("@material-ui/icons/Close"));
+var Snackbar_1 = __importDefault(require("@material-ui/core/Snackbar"));
+var SmallIconButton_1 = require("../../SmallIconButton");
+var styles_1 = require("./styles");
+var ErrorSnackbar = function (_a) {
+    var error = _a.error, onClose = _a.onClose;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(Snackbar_1.default, { open: Boolean(error), onClose: onClose, message: error, action: react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { className: styles.closeIcon, tooltipTitle: ui_i18n_1.default.text('Close'), icon: Close_1.default, onClick: onClose }) }));
+};
+exports.ErrorSnackbar = ErrorSnackbar;

package/components/UploadImageDialog/ErrorSnackbar/styles.js

@@ -0,0 +1,9 @@
+"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({
+    closeIcon: {
+        color: '#fff'
+    }
+});

package/components/UploadImageDialog/ImageByUrlField/ImageByUrlField.js

@@ -0,0 +1,63 @@
+"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.ImageByUrlField = void 0;
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var Paper_1 = __importDefault(require("@material-ui/core/Paper"));
+var InputBase_1 = __importDefault(require("@material-ui/core/InputBase"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var styles_1 = require("./styles");
+var isEmptyField = function (value) { return value.trim().length === 0; };
+var ImageByUrlField = function (_a) {
+    var onSend = _a.onSend;
+    var styles = styles_1.useStyles();
+    var _b = react_1.useState(''), value = _b[0], setValue = _b[1];
+    var _c = react_1.useState(null), error = _c[0], setError = _c[1];
+    var handleChange = function (e) {
+        var newValue = e.target.value;
+        var regExp = new RegExp(/^(ftp|http|https):\/\/[^ "]+$/);
+        var isCorrectUrl = regExp.test(newValue);
+        setValue(newValue);
+        if (!isCorrectUrl && !isEmptyField(newValue)) {
+            setError(ui_i18n_1.default.text('URL is not correct'));
+        }
+        else {
+            setError(null);
+        }
+    };
+    var handleSend = function () {
+        onSend(value);
+        setValue('');
+        setError(null);
+    };
+    return (react_1.default.createElement(Box_1.default, { className: styles.root },
+        react_1.default.createElement(Paper_1.default, { className: styles.paper },
+            react_1.default.createElement(InputBase_1.default, { value: value, onChange: handleChange, classes: { root: styles.inputRoot, input: styles.input }, placeholder: ui_i18n_1.default.text('Paste an image URL here') }),
+            react_1.default.createElement(Button_1.default, { disabled: Boolean(error) || isEmptyField(value), variant: "outlined", color: "primary", onClick: handleSend }, ui_i18n_1.default.text('Send'))),
+        error && react_1.default.createElement(Typography_1.default, { className: styles.errorMessage }, error)));
+};
+exports.ImageByUrlField = ImageByUrlField;

package/components/UploadImageDialog/ImageByUrlField/styles.js

@@ -0,0 +1,32 @@
+"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: {
+        width: '328px'
+    },
+    paper: {
+        width: '100%',
+        height: '40px',
+        display: 'flex',
+        alignItems: 'center',
+        boxShadow: 'none',
+        backgroundColor: 'rgba(0,0,0,0.03)'
+    },
+    inputRoot: {
+        flex: 1
+    },
+    input: {
+        padding: '0 12px',
+        fontSize: '14px',
+        '&:placeholder': {
+            color: theme.palette.text.secondary
+        }
+    },
+    errorMessage: {
+        marginTop: '8px',
+        fontSize: '12px',
+        color: theme.palette.error.main
+    }
+}); });