@reltio/components 1.4.701 → 1.4.702

package/components/UploadImageDialog/SelectImageButton/SelectImageButton.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectImageButton = 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 constants_1 = require("../constants");
+var SelectImageButton = function (_a) {
+    var className = _a.className, onAppendFile = _a.onAppendFile;
+    var handleInput = function (e) {
+        if (onAppendFile) {
+            onAppendFile(e.currentTarget.files[0]);
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("input", { onInput: handleInput, style: { display: 'none' }, accept: constants_1.IMAGE_TYPES.join(','), id: "upload-image-button", type: "file" }),
+        react_1.default.createElement("label", { htmlFor: "upload-image-button" },
+            react_1.default.createElement(Button_1.default, { className: className, variant: "contained", color: "primary", component: "span" }, ui_i18n_1.default.text('Select image')))));
+};
+exports.SelectImageButton = SelectImageButton;

package/components/UploadImageDialog/TargetBox/TargetBox.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TargetBox = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var react_dnd_1 = require("react-dnd");
+var react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var SelectImageButton_1 = require("../SelectImageButton/SelectImageButton");
+var UploadIcon_1 = __importDefault(require("../../../icons/UploadIcon"));
+var constants_1 = require("../constants");
+var styles_1 = require("./styles");
+var TargetBox = function (_a) {
+    var _b;
+    var onAppendFile = _a.onAppendFile, className = _a.className;
+    var styles = styles_1.useStyles();
+    var _c = react_dnd_1.useDrop({
+        accept: [react_dnd_html5_backend_1.NativeTypes.FILE],
+        drop: function (item) {
+            if (item) {
+                // TODO remove after update react-dnd
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                onAppendFile(item.files[0]);
+            }
+        },
+        collect: function (monitor) { return ({
+            isOver: monitor.isOver(),
+            canDrop: monitor.canDrop()
+        }); }
+    }), _d = _c[0], canDrop = _d.canDrop, isOver = _d.isOver, drop = _c[1];
+    var isActive = canDrop && isOver;
+    return (react_1.default.createElement("div", { ref: drop, className: classnames_1.default(styles.root, (_b = {}, _b[styles.isActive] = isActive, _b), className) },
+        react_1.default.createElement(UploadIcon_1.default, { className: styles.icon }),
+        react_1.default.createElement(Typography_1.default, { className: styles.title }, ui_i18n_1.default.text('Drag an image here')),
+        react_1.default.createElement(Typography_1.default, { className: styles.description }, ui_i18n_1.default.text('Acceptable image types would include JPG, PNG, TIFF, GIF, BMP. Maximum image size: ${MAX_IMAGE_SIZE}Mb', {
+            MAX_IMAGE_SIZE: constants_1.MAX_IMAGE_SIZE
+        })),
+        react_1.default.createElement(SelectImageButton_1.SelectImageButton, { onAppendFile: onAppendFile })));
+};
+exports.TargetBox = TargetBox;

package/components/UploadImageDialog/TargetBox/styles.js

@@ -0,0 +1,30 @@
+"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: {
+        padding: '36px 0 29px'
+    },
+    isActive: {
+        backgroundColor: 'rgba(0,114,206,0.12)'
+    },
+    icon: {
+        width: '190px',
+        height: '190px',
+        marginBottom: '24px'
+    },
+    title: {
+        marginBottom: '8px',
+        color: theme.palette.text.primary,
+        fontSize: '20px',
+        fontWeight: 500,
+        lineHeight: '24px'
+    },
+    description: {
+        marginBottom: '24px',
+        color: theme.palette.text.secondary,
+        fontSize: '14px',
+        lineHeight: '16px'
+    }
+}); });

package/components/UploadImageDialog/UploadImageDialog.js

@@ -0,0 +1,87 @@
+"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.UploadImageDialog = void 0;
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var react_redux_1 = require("react-redux");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var react_dnd_1 = require("react-dnd");
+var react_dnd_html5_backend_1 = __importDefault(require("react-dnd-html5-backend"));
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var Dialog_1 = __importDefault(require("@material-ui/core/Dialog"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var LinearLoadIndicator_1 = __importDefault(require("../LinearLoadIndicator/LinearLoadIndicator"));
+var ImageByUrlField_1 = require("./ImageByUrlField/ImageByUrlField");
+var TargetBox_1 = require("./TargetBox/TargetBox");
+var DividerWithText_1 = require("./DividerWithText/DividerWithText");
+var ErrorSnackbar_1 = require("./ErrorSnackbar/ErrorSnackbar");
+var constants_1 = require("./constants");
+var styles_1 = require("./styles");
+var UploadImageDialog = function (_a) {
+    var open = _a.open, onClose = _a.onClose, onUpload = _a.onUpload;
+    var styles = styles_1.useStyles();
+    var imageServicePath = react_redux_1.useSelector(mdm_module_1.default.selectors.getImageServicePath);
+    var environment = react_redux_1.useSelector(mdm_module_1.default.selectors.getEnvironment);
+    var tenant = react_redux_1.useSelector(mdm_module_1.default.selectors.getTenant);
+    var _b = react_1.useState(false), loading = _b[0], setLoading = _b[1];
+    var _c = react_1.useState(null), error = _c[0], setError = _c[1];
+    var uploadImage = function (image) {
+        setLoading(true);
+        mdm_sdk_1.uploadImage({ image: image, imageServicePath: imageServicePath, environment: environment, tenant: tenant })
+            .then(function (res) {
+            onUpload(res);
+            onClose();
+        })
+            .catch(function (error) { return setError(error.errorMessage); })
+            .finally(function () { return setLoading(false); });
+    };
+    var handleAppendImage = function (image) {
+        var size = Number((image.size / 1024 / 1024).toFixed(2));
+        var isCorrectType = constants_1.IMAGE_TYPES.includes(image.type);
+        if (size > constants_1.MAX_IMAGE_SIZE) {
+            setError(ui_i18n_1.default.text('File size exceeds configured max file size.'));
+        }
+        else if (!isCorrectType) {
+            setError(ui_i18n_1.default.text('File format is not supported.'));
+        }
+        else {
+            uploadImage(image);
+        }
+    };
+    var handleSendImage = function (url) {
+        uploadImage(url);
+    };
+    return (react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.default },
+        react_1.default.createElement(Dialog_1.default, { open: open, onClose: onClose, classes: { paper: styles.dialogPaper } },
+            react_1.default.createElement(Typography_1.default, { className: styles.title }, ui_i18n_1.default.text('Add new image')),
+            react_1.default.createElement(Box_1.default, { className: styles.body },
+                react_1.default.createElement(TargetBox_1.TargetBox, { className: styles.targetBox, onAppendFile: handleAppendImage }),
+                react_1.default.createElement(DividerWithText_1.DividerWithText, { className: styles.divider }, ui_i18n_1.default.text('or')),
+                react_1.default.createElement(ImageByUrlField_1.ImageByUrlField, { onSend: handleSendImage })),
+            loading && react_1.default.createElement(LinearLoadIndicator_1.default, null),
+            react_1.default.createElement(ErrorSnackbar_1.ErrorSnackbar, { error: error, onClose: function () { return setError(null); } }))));
+};
+exports.UploadImageDialog = UploadImageDialog;

package/components/UploadImageDialog/constants/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAX_IMAGE_SIZE = exports.IMAGE_TYPES = void 0;
+exports.IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/tiff', 'image/gif', 'image/bmp'];
+exports.MAX_IMAGE_SIZE = 20;

package/components/UploadImageDialog/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: {},
+    dialogPaper: {
+        position: 'relative',
+        maxWidth: '480px'
+    },
+    title: {
+        color: theme.palette.text.primary,
+        fontSize: '20px',
+        fontWeight: 500,
+        letterSpacing: '0.25px',
+        lineHeight: '24px',
+        padding: '16px'
+    },
+    body: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        padding: '0 8px 49px',
+        textAlign: 'center'
+    },
+    targetBox: {
+        marginBottom: '8px'
+    },
+    divider: {
+        marginBottom: '28px'
+    }
+}); });

package/components/ValueChip/ValueChip.js

@@ -0,0 +1,48 @@
+"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 __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 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var Chip_1 = __importDefault(require("@material-ui/core/Chip"));
+var styles_1 = require("./styles");
+var utils_1 = require("../../core/utils");
+var ExpandedValueTooltip_1 = __importDefault(require("../ExpandedValueTooltip/ExpandedValueTooltip"));
+var ValueChip = function (_a) {
+    var _b = _a.classes, classesProp = _b === void 0 ? {} : _b, label = _a.label, count = _a.count, otherProp = __rest(_a, ["classes", "label", "count"]);
+    var classes = styles_1.useChipStyles();
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(Chip_1.default, __assign({ classes: utils_1.mergeClasses(classesProp, classes), label: react_1.default.createElement("div", { className: styles.container },
+            react_1.default.createElement(ExpandedValueTooltip_1.default, { value: label },
+                react_1.default.createElement("div", { className: styles.label }, label)),
+            count && react_1.default.createElement("div", { className: styles.count }, count)) }, otherProp)));
+};
+ValueChip.propTypes = {
+    classes: prop_types_1.default.object,
+    label: prop_types_1.default.string,
+    count: prop_types_1.default.string
+};
+exports.default = ValueChip;

package/components/ValueChip/styles.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = exports.useChipStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+var margin = 2;
+exports.useChipStyles = styles_1.makeStyles({
+    root: {
+        height: '28px',
+        backgroundColor: 'rgba(43, 152, 240, 0.12)',
+        maxWidth: "calc(100% - " + margin * 2 + "px)",
+        margin: margin + "px"
+    },
+    deleteIcon: {
+        height: 18,
+        width: 18,
+        color: 'rgba(0,0,0,0.38)',
+        marginRight: '8px'
+    }
+});
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    container: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    label: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    },
+    count: {
+        color: theme.palette.text.secondary,
+        fontSize: '13px',
+        letterSpacing: 0,
+        lineHeight: '15px',
+        marginLeft: 8
+    }
+}); });

package/components/VerticalDivider/VerticalDivider.js

@@ -0,0 +1,22 @@
+"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 VerticalDivider = function (_a) {
+    var height = _a.height, margin = _a.margin;
+    return (react_1.default.createElement("div", { style: {
+            width: '1px',
+            height: height + "px",
+            borderLeft: '1px solid rgba(0,0,0,0.38)',
+            margin: "0 " + margin + "px",
+            flexShrink: '0'
+        } }));
+};
+VerticalDivider.propTypes = {
+    height: prop_types_1.default.number,
+    margin: prop_types_1.default.number
+};
+exports.default = VerticalDivider;

package/components/VerticalHeadingsTable/VerticalHeadingsTable.js

@@ -0,0 +1,72 @@
+"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 __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 DefaultHeadCellRenderer = function (_a) {
+    var label = _a.label;
+    return label || null;
+};
+var DefaultCellRenderer = function (_a) {
+    var value = _a.value;
+    return value || null;
+};
+var VerticalHeadingsTable = function (_a) {
+    var className = _a.className, rowsData = _a.rowsData, columnsData = _a.columnsData, _b = _a.theadRowsNumber, theadRowsNumber = _b === void 0 ? 0 : _b;
+    var renderRow = function (rowData) {
+        var CellRenderer = rowData.cellRenderer || DefaultCellRenderer;
+        var HeadCellRenderer = rowData.headCellRenderer || DefaultHeadCellRenderer;
+        return (react_1.default.createElement("tr", { key: rowData.id },
+            react_1.default.createElement("th", { key: rowData.id },
+                react_1.default.createElement(HeadCellRenderer, __assign({}, rowData))),
+            columnsData.map(function (columnValue, index) { return (react_1.default.createElement("td", { key: index },
+                react_1.default.createElement(CellRenderer, { value: columnValue[rowData.id], columnValue: columnValue, rowData: rowData }))); })));
+    };
+    return (react_1.default.createElement("table", { className: className },
+        theadRowsNumber > 0 && react_1.default.createElement("thead", null, rowsData.slice(0, theadRowsNumber).map(renderRow)),
+        react_1.default.createElement("tbody", null, rowsData.slice(theadRowsNumber).map(renderRow))));
+};
+VerticalHeadingsTable.propTypes = {
+    rowsData: prop_types_1.default.arrayOf(prop_types_1.default.shape({
+        id: prop_types_1.default.string,
+        label: prop_types_1.default.string,
+        headCellRenderer: prop_types_1.default.func,
+        cellRenderer: prop_types_1.default.func
+    })),
+    columnsData: prop_types_1.default.arrayOf(prop_types_1.default.object),
+    theadRowsNumber: prop_types_1.default.number,
+    className: prop_types_1.default.string
+};
+exports.default = react_1.memo(VerticalHeadingsTable);

package/components/ViewMoreToggle/ViewMoreToggle.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 });
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var Link_1 = __importDefault(require("@material-ui/core/Link"));
+var ArrowDropDown_1 = __importDefault(require("@material-ui/icons/ArrowDropDown"));
+var styles_1 = require("./styles");
+var classnames_1 = __importDefault(require("classnames"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ViewMoreToggle = function (_a) {
+    var _b;
+    var active = _a.active, onClick = _a.onClick, className = _a.className;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(Link_1.default, { className: classnames_1.default(styles.viewMoreLessLink, className), onClick: onClick, underline: "none" },
+        react_1.default.createElement(ArrowDropDown_1.default, { className: classnames_1.default(styles.arrow, (_b = {}, _b[styles.rotated] = active, _b)) }),
+        active ? ui_i18n_1.default.text('View less') : ui_i18n_1.default.text('View more')));
+};
+ViewMoreToggle.propTypes = {
+    active: prop_types_1.default.bool,
+    onClick: prop_types_1.default.func,
+    className: prop_types_1.default.string
+};
+exports.default = ViewMoreToggle;

package/components/ViewMoreToggle/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(function () { return ({
+    viewMoreLessLink: {
+        display: 'flex',
+        alignItems: 'center',
+        cursor: 'pointer'
+    },
+    arrow: {
+        marginRight: '8px',
+        marginLeft: '-2px',
+        transform: 'rotate(0deg)',
+        transition: 'transform 0.35s ease'
+    },
+    rotated: {
+        transform: 'rotate(-180deg)'
+    }
+}); });