@reltio/components 1.4.698 → 1.4.702

package/components/EntityTypesSelector/EntityTypesSelector.js

@@ -0,0 +1,141 @@
+"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 ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
+var classnames_1 = __importDefault(require("classnames"));
+var icons_1 = require("@material-ui/icons");
+var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var styles_1 = require("./styles");
+var SmallIconButton_1 = __importDefault(require("../SmallIconButton/SmallIconButton"));
+var SelectionPopup_1 = __importDefault(require("../SelectionPopup/SelectionPopup"));
+var helpers_1 = require("../SelectionPopup/helpers");
+var SelectEntityTypesList_1 = __importDefault(require("./SelectEntityTypesList"));
+var ListLabel_1 = __importDefault(require("./ListLabel/ListLabel"));
+var MIN_CONTAINER_WIDTH = 255;
+var LIST_HEIGHT = 245;
+var POPUP_HEIGHT = 355;
+var EntityTypesSelector = function (_a) {
+    var _b, _c, _d, _e;
+    var entityTypes = _a.entityTypes, selectedEntityTypes = _a.selectedEntityTypes, single = _a.single, placeholder = _a.placeholder, enableEmptyValueUnderline = _a.enableEmptyValueUnderline, onChange = _a.onChange, _f = _a.classes, classes = _f === void 0 ? {} : _f, _g = _a.ListLabelProps, ListLabelProps = _g === void 0 ? {} : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h;
+    var styles = styles_1.useStyles();
+    var _j = react_1.useState(false), isPopupOpen = _j[0], setIsPopupOpen = _j[1];
+    var openPopup = react_1.useCallback(function () { return setIsPopupOpen(true); }, []);
+    var closePopup = react_1.useCallback(function () { return setIsPopupOpen(false); }, []);
+    var _k = react_1.useState(''), filterText = _k[0], setFilterText = _k[1];
+    var clearFilterText = react_1.useCallback(function () { return setFilterText(''); }, []);
+    var handleClose = react_1.useCallback(ramda_1.pipe(clearFilterText, closePopup), [closePopup, clearFilterText]);
+    var items = react_1.useMemo(function () {
+        return entityTypes
+            .filter(mdm_sdk_1.isAvailableEntityType)
+            .filter(function (_a) {
+            var label = _a.label;
+            return mdm_sdk_1.utils.strings.search(label, filterText);
+        })
+            .map(function (item, index) { return ({ item: { item: __assign(__assign({}, item), { filterText: filterText }) }, index: index }); });
+    }, [entityTypes, filterText]);
+    var selectedLabels = react_1.useMemo(function () { return selectedEntityTypes.map(function (uri) { return entityTypes.find(ramda_1.propEq('uri', uri)); }).map(ramda_1.prop('label')); }, [selectedEntityTypes, entityTypes]);
+    var handleListItemClick = react_1.useCallback(function (entityType, checked) {
+        if (single) {
+            onChange(checked ? [entityType.uri] : []);
+            handleClose();
+        }
+        else {
+            onChange(checked
+                ? selectedEntityTypes.concat(entityType.uri)
+                : selectedEntityTypes.filter(function (uri) { return uri !== entityType.uri; }));
+        }
+    }, [selectedEntityTypes, onChange, single, handleClose]);
+    var handleSearchOnEnter = react_1.useCallback(function (_a) {
+        var item = _a.item;
+        var checked = !selectedEntityTypes.includes(item.uri);
+        handleListItemClick(item, checked);
+    }, [selectedEntityTypes, handleListItemClick]);
+    var _l = helpers_1.useKeyboardNavigation({
+        items: items,
+        open: isPopupOpen,
+        onSelectFocusedItem: handleSearchOnEnter,
+        selectedItems: selectedEntityTypes,
+        onClose: handleClose
+    }), focusIndex = _l.focusIndex, handleKeyDown = _l.handleKeyDown;
+    var rootRef = react_1.useRef();
+    var rootWidth = rootRef.current ? rootRef.current.getBoundingClientRect().width : 0;
+    var containerWidth = Math.max(rootWidth, MIN_CONTAINER_WIDTH);
+    var noTypesSelected = selectedEntityTypes.length === 0;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(TextField_1.default, { label: ui_i18n_1.default.text('Entity type'), ref: rootRef, InputProps: {
+                startAdornment: noTypesSelected && !placeholder ? null : (react_1.default.createElement("div", { className: styles.inputText }, noTypesSelected ? (react_1.default.createElement("div", null, placeholder)) : (react_1.default.createElement(ListLabel_1.default, __assign({}, ListLabelProps, { list: selectedLabels }))))),
+                classes: {
+                    root: styles.inputRoot,
+                    input: classnames_1.default(styles.input, (_b = {}, _b[styles.emptyInput] = noTypesSelected && !placeholder, _b)),
+                    disabled: classnames_1.default(styles.disabledInput, (_c = {}, _c[styles.disabledPointer] = disabled, _c)),
+                    underline: styles.disabledUnderline
+                },
+                endAdornment: (react_1.default.createElement(SmallIconButton_1.default, { size: 'L', icon: icons_1.ArrowDropDown, iconClassName: classnames_1.default(styles.icon, (_d = {},
+                        _d[styles['popup-opened-icon']] = isPopupOpen,
+                        _d)), disabled: disabled })),
+                readOnly: true,
+                disabled: true,
+                disableUnderline: noTypesSelected && !enableEmptyValueUnderline
+            }, inputProps: {
+                tabIndex: -1
+            }, InputLabelProps: {
+                classes: {
+                    root: classnames_1.default(styles.inputLabel, classes.label)
+                }
+            }, value: "", onClick: disabled ? undefined : openPopup, classes: { root: classnames_1.default(styles.root, classes.root) }, margin: "dense", variant: "filled", disabled: disabled, "data-reltio-id": "entity-type-selector" }),
+        react_1.default.createElement(SelectionPopup_1.default, { open: isPopupOpen, anchorEl: rootRef.current, onClose: handleClose, onSearch: setFilterText, title: ui_i18n_1.default.text('Select entity types'), containerWidth: containerWidth, containerHeight: POPUP_HEIGHT, searchInputOnKeyDown: handleKeyDown, transformOrigin: { horizontal: 'left', vertical: 'top' }, anchorOrigin: { horizontal: 'left', vertical: 'bottom' }, PaperProps: (_e = {}, _e['data-reltio-id'] = 'entity-type-selector-popup', _e) },
+            react_1.default.createElement(SelectEntityTypesList_1.default, { items: items, onItemClick: handleListItemClick, selectedEntityTypes: selectedEntityTypes, width: containerWidth, height: LIST_HEIGHT, focusIndex: focusIndex }))));
+};
+EntityTypesSelector.propTypes = {
+    entityTypes: prop_types_1.default.arrayOf(mdm_sdk_1.EntityTypeType),
+    selectedEntityTypes: prop_types_1.default.arrayOf(prop_types_1.default.string).isRequired,
+    onChange: prop_types_1.default.func.isRequired,
+    single: prop_types_1.default.bool,
+    enableEmptyValueUnderline: prop_types_1.default.bool,
+    placeholder: prop_types_1.default.string,
+    classes: prop_types_1.default.shape({
+        root: prop_types_1.default.string,
+        label: prop_types_1.default.string
+    }),
+    ListLabelProps: prop_types_1.default.shape({
+        maxWidth: prop_types_1.default.number
+    }),
+    disabled: prop_types_1.default.bool
+};
+exports.default = react_1.memo(EntityTypesSelector);

package/components/EntityTypesSelector/ListLabel/ListLabel.js

@@ -0,0 +1,51 @@
+"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 Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var styles_1 = require("./styles");
+var helpers_1 = require("./helpers");
+var ListLabel = function (_a) {
+    var list = _a.list, maxWidth = _a.maxWidth;
+    var styles = styles_1.useStyles();
+    var labelRef = react_1.useRef();
+    var _b = react_1.useState(0), hiddenItemsCount = _b[0], setHiddenItemsCount = _b[1];
+    react_1.useEffect(function () {
+        setHiddenItemsCount(helpers_1.countHiddenItems(list, labelRef.current));
+    }, [list]);
+    var listLabel = helpers_1.getListLabel(list);
+    var hasHiddenItems = hiddenItemsCount > 0;
+    var visibleItemsLabel = hasHiddenItems ? helpers_1.getListLabel(list.slice(0, -hiddenItemsCount)) : listLabel;
+    return (react_1.default.createElement(Tooltip_1.default, { title: hasHiddenItems ? listLabel : '' },
+        react_1.default.createElement("div", { className: styles.listLabelContainer },
+            react_1.default.createElement("div", { style: { width: helpers_1.getListLabelWidth(maxWidth) }, className: styles.listLabel, ref: labelRef }, listLabel),
+            react_1.default.createElement("div", { className: styles.visibleItemsLabel }, visibleItemsLabel),
+            hasHiddenItems && react_1.default.createElement("div", { className: styles.hiddenCount }, "+" + hiddenItemsCount))));
+};
+ListLabel.propTypes = {
+    list: prop_types_1.default.arrayOf(prop_types_1.default.string).isRequired,
+    maxWidth: prop_types_1.default.number
+};
+exports.default = ListLabel;

package/components/EntityTypesSelector/ListLabel/helpers.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getListLabelWidth = exports.getListLabel = exports.countHiddenItems = void 0;
+var ramda_1 = require("ramda");
+var ITEMS_SEPARATOR = ', ';
+var ALWAYS_VISIBLE_ITEMS_COUNT = 1;
+var HIDDEN_COUNT_WIDTH = 35;
+var countHiddenItems = function (list, labelEl) {
+    var itemsCount = list.length;
+    var overflowItemsCount = countOverflowItems(list, labelEl);
+    var visibleItemsCount = Math.max(ALWAYS_VISIBLE_ITEMS_COUNT, itemsCount - overflowItemsCount);
+    return itemsCount - visibleItemsCount;
+};
+exports.countHiddenItems = countHiddenItems;
+var countOverflowItems = function (list, labelEl) {
+    if (labelEl) {
+        var firstOverflowItemIndex = findFirstOverflowItemIndex(list, labelEl);
+        return firstOverflowItemIndex === -1 ? 0 : list.length - firstOverflowItemIndex;
+    }
+    else {
+        return 0;
+    }
+};
+var findFirstOverflowItemIndex = function (list, labelEl) {
+    var childNodes = labelEl.childNodes, clientLeft = labelEl.clientLeft, clientWidth = labelEl.clientWidth;
+    if (childNodes.length > 0) {
+        var textNode = childNodes[0];
+        var range = document.createRange();
+        range.setStart(textNode, 0);
+        for (var index = 0; index < list.length; index++) {
+            range.setEnd(textNode, range.endOffset + list[index].length);
+            var rangeWidth = range.getBoundingClientRect().width;
+            if (clientLeft + rangeWidth > clientWidth) {
+                return index;
+            }
+            if (index !== list.length - 1) {
+                range.setEnd(textNode, range.endOffset + ITEMS_SEPARATOR.length);
+            }
+        }
+    }
+    return -1;
+};
+var getListLabel = function (list) { return list.join(ITEMS_SEPARATOR); };
+exports.getListLabel = getListLabel;
+var getListLabelWidth = function (maxWidth) {
+    var maxCssWidth = ramda_1.isNil(maxWidth) ? '100%' : maxWidth + "px";
+    return "calc(" + maxCssWidth + " - " + HIDDEN_COUNT_WIDTH + "px)";
+};
+exports.getListLabelWidth = getListLabelWidth;

package/components/EntityTypesSelector/ListLabel/styles.js

@@ -0,0 +1,36 @@
+"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({
+    listLabelContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        justifyContent: 'space-between',
+        height: '100%',
+        width: '100%'
+    },
+    listLabel: {
+        visibility: 'hidden',
+        position: 'absolute',
+        overflow: 'hidden'
+    },
+    visibleItemsLabel: {
+        textOverflow: 'ellipsis',
+        marginRight: '5px',
+        overflow: 'hidden',
+        flex: 1,
+        flexBasis: 'auto'
+    },
+    hiddenCount: {
+        color: 'rgba(0,0,0,0.87)',
+        fontSize: '13px',
+        lineHeight: '15px',
+        padding: '5px 8px',
+        borderRadius: '16px',
+        backgroundColor: 'rgba(0,0,0,.12)'
+    }
+});

package/components/EntityTypesSelector/SelectEntityTypesList.js

@@ -0,0 +1,70 @@
+"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 AttributeListItem_1 = __importDefault(require("../AttributeListItem/AttributeListItem"));
+var Highlighter_1 = __importDefault(require("../Highlighter/Highlighter"));
+var VirtualGroupedList_1 = __importDefault(require("../VirtualGroupedList/VirtualGroupedList"));
+var ITEM_HEIGHT = 32;
+var getItemSize = ramda_1.always(ITEM_HEIGHT);
+var SelectEntityTypesList = function (_a) {
+    var selectedEntityTypes = _a.selectedEntityTypes, onItemClick = _a.onItemClick, focusIndex = _a.focusIndex, otherProps = __rest(_a, ["selectedEntityTypes", "onItemClick", "focusIndex"]);
+    var renderItem = function (style, _a, index) {
+        var item = _a.item;
+        var isSelected = !!selectedEntityTypes.find(function (uri) { return item.uri === uri; });
+        var isFocused = index === focusIndex;
+        return (react_1.default.createElement(AttributeListItem_1.default, { key: item.uri, onClick: onItemClick, checked: isSelected, data: item, label: react_1.default.createElement(Highlighter_1.default, { text: item.label, highlight: item.filterText }), labelInText: item.label, style: style, isFocused: isFocused, hideIcon: true, LogoIcon: item.LogoIcon }));
+    };
+    return (react_1.default.createElement(VirtualGroupedList_1.default, __assign({ getItemSize: getItemSize, renderItem: renderItem, focusIndex: focusIndex, fixedTitle: false, disableHorizontalScrollbar: true }, otherProps)));
+};
+SelectEntityTypesList.propTypes = {
+    selectedEntityTypes: prop_types_1.default.array,
+    onItemClick: prop_types_1.default.func,
+    focusIndex: prop_types_1.default.number
+};
+exports.default = react_1.memo(SelectEntityTypesList);

package/components/EntityTypesSelector/styles.js

@@ -0,0 +1,72 @@
+"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: {
+        borderRadius: '4px 4px 0 0',
+        margin: 0,
+        fontSize: '14px',
+        letterSpacing: 0,
+        lineHeight: '16px'
+    },
+    inputLabel: {
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        width: '100%',
+        top: 'calc(50% - 23px)'
+    },
+    inputText: {
+        display: 'flex',
+        flexGrow: 1,
+        alignItems: 'center',
+        height: '25px',
+        width: 'calc(100% - 53px)',
+        paddingTop: '18px',
+        paddingBottom: '4px',
+        color: 'rgba(0,0,0,0.87)',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+    },
+    input: {
+        width: 0,
+        cursor: 'pointer',
+        '&[disabled]': {
+            backgroundColor: 'transparent',
+            cursor: 'default'
+        },
+        '&$emptyInput': {
+            width: '100%'
+        }
+    },
+    emptyInput: {},
+    disabledInput: {},
+    disabledPointer: {},
+    disabledUnderline: {},
+    inputRoot: {
+        flex: 1,
+        paddingRight: '4px',
+        fontSize: '14px',
+        letterSpacing: 0,
+        lineHeight: '16px',
+        '&$disabledInput': {
+            backgroundColor: 'rgba(0, 0, 0, 0.03)',
+            cursor: 'pointer',
+            '&$disabledPointer': {
+                cursor: 'default'
+            },
+            '&$disabledUnderline::before': {
+                borderBottomStyle: 'solid'
+            }
+        }
+    },
+    icon: {
+        transform: 'rotate(0deg)',
+        transition: 'transform 0.35s ease'
+    },
+    'popup-opened-icon': {
+        transform: 'rotate(-180deg)'
+    }
+});

package/components/EntityUriLink/EntityUriLink.js

@@ -0,0 +1,43 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_redux_1 = require("react-redux");
+var contexts_1 = require("../../contexts");
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var EntityUriLink = react_1.forwardRef(function (_a, ref) {
+    var value = _a.value, children = _a.children, className = _a.className;
+    var dispatch = react_redux_1.useDispatch();
+    var viewId = react_1.useContext(contexts_1.ViewIdContext);
+    var uiPath = react_redux_1.useSelector(mdm_module_1.default.selectors.getUIPath);
+    var generateEntityUrl = function (uri) { return mdm_sdk_1.getEntityLink({ uiPath: uiPath, uri: uri }); };
+    var onClick = react_1.useCallback(function () {
+        dispatch(mdm_module_1.ui.actions.openEntity({ uri: value, viewId: viewId }));
+    }, [viewId, value, dispatch]);
+    return (react_1.default.createElement("a", { ref: ref, href: generateEntityUrl(value), onClick: function (e) {
+            onClick();
+            e.stopPropagation();
+            e.preventDefault();
+        }, className: className }, children));
+});
+EntityUriLink.displayName = 'EntityUriLink';
+exports.default = EntityUriLink;

package/components/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,46 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 ErrorBoundary = /** @class */ (function (_super) {
+    __extends(ErrorBoundary, _super);
+    function ErrorBoundary(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            error: null
+        };
+        return _this;
+    }
+    ErrorBoundary.prototype.componentDidCatch = function (error) {
+        this.setState({
+            error: error
+        });
+        console.error(error);
+    };
+    ErrorBoundary.prototype.render = function () {
+        var _a = this.props, children = _a.children, error = _a.error;
+        if (this.state.error) {
+            return error;
+        }
+        return children;
+    };
+    return ErrorBoundary;
+}(react_1.default.Component));
+exports.default = ErrorBoundary;

package/components/ErrorPopup/ErrorPopup.js

@@ -0,0 +1,32 @@
+"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 __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 react_redux_1 = require("react-redux");
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var Portal_1 = __importDefault(require("@material-ui/core/Portal"));
+var ErrorPopup_1 = __importDefault(require("react-components/dist/ErrorPopup/ErrorPopup"));
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var styles_1 = require("./styles");
+var ErrorPopup = function (props) {
+    var styles = styles_1.useStyles();
+    var autoCloseInterval = react_redux_1.useSelector(mdm_module_1.default.selectors.getAutoCloseInterval);
+    return (react_1.default.createElement(Portal_1.default, { container: document.body },
+        react_1.default.createElement(ErrorPopup_1.default, __assign({ classes: { errorBlock: classnames_1.default(styles.errorBlock, ramda_1.path(['classes', 'errorBlock'], props)) }, autoCloseInterval: autoCloseInterval }, props))));
+};
+ErrorPopup.addError = ErrorPopup_1.default.addError;
+exports.default = ErrorPopup;

package/components/ErrorPopup/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(function () { return ({
+    errorBlock: {
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+        minHeight: '58px',
+        zIndex: 10000
+    }
+}); });

package/components/ErrorWrapper/ErrorMessage.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 });
+var react_1 = __importDefault(require("react"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var styles_1 = require("./styles");
+var ErrorMessage = function (_a) {
+    var message = _a.message;
+    var styles = styles_1.useStyles();
+    if (!message) {
+        return null;
+    }
+    return (react_1.default.createElement(Typography_1.default, { variant: "caption", className: styles.caption }, message));
+};
+exports.default = ErrorMessage;

package/components/ErrorWrapper/ErrorWrapper.js

@@ -0,0 +1,62 @@
+"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 classnames_1 = __importDefault(require("classnames"));
+var ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
+var FormControl_1 = __importDefault(require("@material-ui/core/FormControl"));
+var FormHelperText_1 = __importDefault(require("@material-ui/core/FormHelperText"));
+var react_1 = __importStar(require("react"));
+var styles_1 = require("./styles");
+var ErrorWrapper = function (_a) {
+    var errorMessage = _a.errorMessage, children = _a.children, className = _a.className, otherProps = __rest(_a, ["errorMessage", "children", "className"]);
+    var styles = styles_1.useStyles();
+    var hasError = !!errorMessage;
+    return (react_1.default.createElement(FormControl_1.default, __assign({ className: classnames_1.default(styles.wrapper, className), error: true }, otherProps),
+        children,
+        hasError && (react_1.default.createElement(FormHelperText_1.default, { className: styles.helperText },
+            react_1.default.createElement(ErrorMessage_1.default, { message: errorMessage })))));
+};
+exports.default = react_1.memo(ErrorWrapper);

package/components/ErrorWrapper/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 (theme) { return ({
+    wrapper: {
+        width: '100%'
+    },
+    helperText: {
+        margin: '3px 0 1px 16px'
+    },
+    caption: {
+        display: 'flex',
+        color: theme.palette.error.main,
+        fontSize: '12px',
+        lineHeight: '16px'
+    }
+}); });