@reltio/components 1.4.699 → 1.4.703

package/components/attributes/OvIcon/OvIcon.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChipWithTooltip = void 0;
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var classnames_1 = __importDefault(require("classnames"));
+var Chip_1 = __importDefault(require("@material-ui/core/Chip"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var styles_1 = require("./styles");
+var DataTypeValue_1 = __importDefault(require("../../DataTypeValue/DataTypeValue"));
+var HOCs_1 = require("../../../HOCs");
+exports.ChipWithTooltip = HOCs_1.withTooltip(Chip_1.default);
+var OvIcon = function (_a) {
+    var className = _a.className, attributeType = _a.attributeType, _b = _a.nonOvValues, nonOvValues = _b === void 0 ? [] : _b;
+    var styles = styles_1.useStyles();
+    var length = nonOvValues.length;
+    if (!length) {
+        return null;
+    }
+    return (react_1.default.createElement(exports.ChipWithTooltip, { tooltipTitle: nonOvValues.map(function (value, i) { return (react_1.default.createElement("div", { key: i }, mdm_sdk_1.isComplexAttribute(attributeType) ? (mdm_sdk_1.getLabel(value.label)) : (react_1.default.createElement(DataTypeValue_1.default, { value: mdm_sdk_1.getAttributeValue(value), dataTypeDefinition: mdm_sdk_1.getAttrDataTypeDefinition(attributeType), rich: false })))); }), tooltipPlacement: "top", label: "+ " + length, variant: "outlined", classes: {
+            root: classnames_1.default(styles.container, className),
+            label: styles.label
+        } }));
+};
+OvIcon.propTypes = {
+    className: prop_types_1.default.string,
+    attributeType: mdm_sdk_1.AttributeTypeType,
+    nonOvValues: prop_types_1.default.arrayOf(prop_types_1.default.oneOfType([mdm_sdk_1.SimpleAttributeValueType, mdm_sdk_1.NestedAttributeValueType, mdm_sdk_1.ReferenceAttributeValueType]))
+};
+exports.default = OvIcon;

package/components/attributes/OvIcon/index.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 });
+exports.default = void 0;
+var OvIcon_1 = require("./OvIcon");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(OvIcon_1).default; } });

package/components/attributes/OvIcon/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(function (theme) { return ({
+    container: {
+        height: '16px',
+        borderColor: styles_1.fade(theme.palette.primary.main, 0.54)
+    },
+    label: {
+        paddingLeft: '4px',
+        paddingRight: '4px',
+        fontSize: '10px',
+        lineHeight: '11px',
+        color: theme.palette.primary.main
+    }
+}); });

package/components/attributes/PivotingAttributes/PivotingTooltip.js

@@ -0,0 +1,62 @@
+"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.PivotingTooltip = void 0;
+var react_1 = __importStar(require("react"));
+var react_redux_1 = require("react-redux");
+var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ramda_1 = require("ramda");
+var contexts_1 = require("../../../contexts");
+var helpers_1 = require("./helpers");
+var PivotingIcon_1 = __importDefault(require("../../../icons/PivotingIcon"));
+var PivotingTooltipContent_1 = require("./PivotingTooltipContent");
+var styles_1 = require("./styles");
+var PivotingTooltip = function (_a) {
+    var value = _a.value, attributeType = _a.attributeType, children = _a.children, className = _a.className;
+    var styles = styles_1.usePivotingTooltipStyles();
+    var contentStyles = styles_1.useStyles();
+    var pivotingAttributesList = react_1.useContext(contexts_1.PivotingAttributeContext) || [];
+    var isNestedAttribute = mdm_sdk_1.isNested(attributeType);
+    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata) || {};
+    var pivotingValue = isNestedAttribute
+        ? helpers_1.generatePivotingValue(attributeType, value.value, pivotingAttributesList, metadata)
+        : helpers_1.preparePivotingAttributeValue(value.lookupCode || value.value, attributeType);
+    var isPivotingAttribute = pivotingAttributesList.some(function (_a) {
+        var uri = _a.uri;
+        return uri === attributeType.uri;
+    }) &&
+        ((Array.isArray(pivotingValue) && pivotingValue.length) ||
+            (!Array.isArray(pivotingValue) && !ramda_1.isNil(pivotingValue)));
+    var pivotingAttribute = pivotingAttributesList.find(function (_a) {
+        var uri = _a.uri;
+        return uri === attributeType.uri;
+    });
+    return isPivotingAttribute ? (react_1.default.createElement(Tooltip_1.default, { interactive: true, arrow: true, placement: "right-start", classes: styles, title: react_1.default.createElement(PivotingTooltipContent_1.PivotingTooltipContent, { value: pivotingValue, attributeType: attributeType, config: pivotingAttribute.popup }) },
+        react_1.default.createElement("span", { className: className },
+            react_1.default.createElement(PivotingIcon_1.default, { className: contentStyles.icon }),
+            react_1.default.createElement("span", { className: contentStyles.content }, children)))) : (react_1.default.createElement(react_1.default.Fragment, null, children));
+};
+exports.PivotingTooltip = PivotingTooltip;

package/components/attributes/PivotingAttributes/PivotingTooltipContent.js

@@ -0,0 +1,82 @@
+"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 });
+exports.PivotingTooltipContent = void 0;
+var react_1 = __importStar(require("react"));
+var react_redux_1 = require("react-redux");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var EntityAvatar_1 = __importDefault(require("../../EntityAvatar/EntityAvatar"));
+var EntityUriLink_1 = __importDefault(require("../../EntityUriLink/EntityUriLink"));
+var styles_1 = require("./styles");
+var helpers_1 = require("./helpers");
+var MAX_ENTITIES_PIVOTING_TOOLTIP = 6;
+var PivotingTooltipContent = function (_a) {
+    var value = _a.value, attributeType = _a.attributeType, _b = _a.config, config = _b === void 0 ? {} : _b;
+    var _c = react_1.useState([]), entities = _c[0], setEntities = _c[1];
+    var _d = react_1.useState(0), total = _d[0], setTotal = _d[1];
+    var entity = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntity) || {};
+    var styles = styles_1.useStyles();
+    var globalSearchRequestOptions = react_redux_1.useSelector(mdm_module_1.default.selectors.getGlobalSearchRequestOptions) || {};
+    var entityType = config.entityType || entity.type;
+    react_1.useEffect(function () {
+        var filters = helpers_1.getParamsFilteringEntities(value, attributeType, entityType);
+        var options = __assign({ max: MAX_ENTITIES_PIVOTING_TOOLTIP }, globalSearchRequestOptions);
+        Promise.all([mdm_sdk_1.getFilteredEntities(filters, options), mdm_sdk_1.getTotals(filters, options)])
+            .then(function (results) {
+            var entities = results[0], total = results[1].total;
+            setEntities(Array.isArray(entities) ? entities : []);
+            setTotal(total);
+        })
+            .catch(function () {
+            setEntities([]);
+            setTotal(0);
+        });
+    }, []);
+    var hasEntityTypeLabel = Boolean(config.label);
+    return (react_1.default.createElement("div", { className: styles.container },
+        react_1.default.createElement("div", { className: styles.header },
+            react_1.default.createElement("div", { className: styles.title }, ui_i18n_1.default.text('Pivot profiles')),
+            react_1.default.createElement("div", { className: styles.divider }),
+            react_1.default.createElement("div", { className: styles.headerCount }, ui_i18n_1.default.number(total, '0,0') + ' ' + (total === 1 ? ui_i18n_1.default.text('item') : ui_i18n_1.default.text('items')))),
+        hasEntityTypeLabel && react_1.default.createElement("div", { className: styles.entityTypeLabel }, config.label),
+        react_1.default.createElement("div", { className: styles.body }, entities.map(function (visibleEntity) { return (react_1.default.createElement("div", { key: visibleEntity.uri, className: styles.entityContainer },
+            react_1.default.createElement(EntityAvatar_1.default, { entity: visibleEntity, avatarClassName: styles.profileIcon }),
+            react_1.default.createElement(EntityUriLink_1.default, { className: styles.entityLabel, value: mdm_sdk_1.getEntityUriForLink(visibleEntity) }, mdm_sdk_1.getLabel(visibleEntity.label)))); })),
+        react_1.default.createElement("div", { className: styles.footer },
+            react_1.default.createElement("a", null, ui_i18n_1.default.text('See all')))));
+};
+exports.PivotingTooltipContent = PivotingTooltipContent;

package/components/attributes/PivotingAttributes/helpers.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.preparePivotingAttributeValue = exports.generatePivotingValue = exports.getParamsFilteringEntities = void 0;
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ramda_1 = require("ramda");
+var getParamsFilteringEntities = function (values, attributeType, entityType) {
+    if (entityType === void 0) { entityType = ''; }
+    var params = [
+        {
+            fieldName: 'type',
+            filter: 'equals',
+            values: [entityType]
+        }
+    ];
+    if (Array.isArray(values)) {
+        params = params.concat(getParamsFilteringNested(attributeType, values));
+    }
+    else {
+        params.push(createSearchParameter([values], attributeType));
+    }
+    return params;
+};
+exports.getParamsFilteringEntities = getParamsFilteringEntities;
+var getParamsFilteringNested = function (attributeType, values) {
+    var attributeSource = mdm_sdk_1.getAttributeSource(attributeType);
+    return values.reduce(function (acc, value) {
+        var _loop_1 = function (uri) {
+            var attrType = (attributeType[attributeSource] || []).find(function (attribute) { return attribute.uri === uri; });
+            if (Array.isArray(value[uri]) && typeof value[uri][0] === 'object') {
+                acc = (acc || []).concat(getParamsFilteringNested(attrType, value[uri]));
+                return { value: acc };
+            }
+            acc.push(createSearchParameter(value[uri], attrType));
+            return { value: acc };
+        };
+        for (var uri in value) {
+            var state_1 = _loop_1(uri);
+            if (typeof state_1 === "object")
+                return state_1.value;
+        }
+    }, []);
+};
+var createSearchParameter = function (value, attributeType) {
+    if (value && value.length && !ramda_1.isNil(value[0])) {
+        return {
+            fieldName: mdm_sdk_1.attributeUriToSearchUri(attributeType.uri),
+            filter: attributeType.type === mdm_sdk_1.DataTypes.TYPE_BLOB ? mdm_sdk_1.FilterOptions.FULL_TEXT : mdm_sdk_1.FilterOptions.EQUALS,
+            values: value
+        };
+    }
+    else {
+        return {
+            fieldName: mdm_sdk_1.attributeUriToSearchUri(attributeType.uri),
+            filter: 'missing'
+        };
+    }
+};
+var getPivotingChildrenUris = function (attributeType, pivotingAttributes) {
+    var pivotingAttribute = pivotingAttributes.find(function (attribute) {
+        return attribute.uri === attributeType.uri;
+    });
+    return pivotingAttribute && Array.isArray(pivotingAttribute.children) ? pivotingAttribute.children : [];
+};
+var generatePivotingValue = function (attributeType, value, pivotingAttributes, metadata) {
+    var pivotingChildrenUris = getPivotingChildrenUris(attributeType, pivotingAttributes);
+    var pivotingChildren = (attributeType === null || attributeType === void 0 ? void 0 : attributeType.attributes) || (attributeType === null || attributeType === void 0 ? void 0 : attributeType.analyticsAttributes) || [];
+    if (pivotingChildrenUris.length) {
+        pivotingChildren = pivotingChildren.filter(function (attrType) { return pivotingChildrenUris.includes(attrType.uri); });
+    }
+    return pivotingChildren.reduce(function (acc, attribute) {
+        var _a, _b;
+        var values = valueToString(value[attribute.name], metadata, pivotingAttributes);
+        if (values && values.length) {
+            if (Array.isArray(values[0])) {
+                acc.push((_a = {}, _a[attribute.uri] = values[0], _a));
+            }
+            else {
+                acc.push((_b = {}, _b[attribute.uri] = values, _b));
+            }
+        }
+        return acc;
+    }, []);
+};
+exports.generatePivotingValue = generatePivotingValue;
+var valueToString = function (values, metadata, pivotingAttributes) {
+    if (!values || values.length === 0)
+        return;
+    return values.reduce(function (acc, valueContainer) {
+        if ('type' in valueContainer && valueContainer.type) {
+            var value = 'lookupCode' in valueContainer ? valueContainer.lookupCode : valueContainer.value;
+            var attributeType = mdm_sdk_1.findAttributeTypeByUri(metadata, valueContainer.type);
+            if (value && typeof value !== 'object' && mdm_sdk_1.isOv(valueContainer)) {
+                acc.push(exports.preparePivotingAttributeValue(value, attributeType));
+            }
+            else if (value && typeof value === 'object' && !Array.isArray(value)) {
+                acc.push(exports.generatePivotingValue(attributeType, value, pivotingAttributes, metadata));
+            }
+        }
+        return acc;
+    }, []);
+};
+var preparePivotingAttributeValue = function (value, attributeType) {
+    switch (attributeType === null || attributeType === void 0 ? void 0 : attributeType.type) {
+        case mdm_sdk_1.DataTypes.TYPE_DATE:
+            return new Date(value).getTime();
+        case mdm_sdk_1.DataTypes.TYPE_TIMESTAMP: {
+            if (!isNaN(Number(value))) {
+                return new Date(Number(value)).getTime();
+            }
+            else {
+                return new Date(value).getTime();
+            }
+        }
+        default:
+            return value;
+    }
+};
+exports.preparePivotingAttributeValue = preparePivotingAttributeValue;

package/components/attributes/PivotingAttributes/styles.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePivotingTooltipStyles = exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    container: {
+        backgroundColor: 'white',
+        width: '360px',
+        minWidth: '360px',
+        maxWidth: '720px'
+    },
+    header: {
+        display: 'flex',
+        height: '48px',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingLeft: '16px'
+    },
+    title: {
+        color: theme.palette.text.primary,
+        fontSize: '16px',
+        letterSpacing: '0.15px',
+        lineHeight: '19px'
+    },
+    entityTypeLabel: {
+        color: 'rgba(0,0,0,0.67)',
+        fontSize: '14px',
+        paddingLeft: '16px',
+        paddingBottom: '12px',
+        lineHeight: '16px'
+    },
+    divider: {
+        height: '24px',
+        width: '1px',
+        backgroundColor: 'rgba(0,0,0,0.12)'
+    },
+    headerCount: {
+        color: theme.palette.text.secondary,
+        fontSize: '14px',
+        letterSpacing: '0.24px',
+        lineHeight: '28px',
+        width: '210px'
+    },
+    body: {
+        borderBottom: '1px solid rgba(0,0,0,0.12)',
+        padding: '0 16px 8px'
+    },
+    footer: {
+        display: 'flex',
+        alignItems: 'center',
+        height: '31px',
+        paddingLeft: '16px',
+        color: theme.palette.primary.main,
+        fontSize: '13px',
+        letterSpacing: '0',
+        lineHeight: '15px'
+    },
+    profileIcon: {
+        height: '16px',
+        width: '16px'
+    },
+    entityContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    entityLabel: {
+        color: theme.palette.primary.main,
+        fontSize: '13px',
+        letterSpacing: '0',
+        lineHeight: '15px',
+        textDecoration: 'none',
+        paddingLeft: '8px'
+    },
+    icon: {
+        margin: 'auto 8px auto 0'
+    },
+    content: {
+        color: theme.palette.primary.main
+    }
+}); });
+exports.usePivotingTooltipStyles = styles_1.makeStyles({
+    tooltip: {
+        backgroundColor: 'white',
+        boxShadow: '0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2)',
+        padding: 0,
+        borderRadius: '4px',
+        maxWidth: 'none'
+    },
+    arrow: {
+        '&::before': {
+            backgroundColor: 'white'
+        }
+    }
+});

package/components/attributes/editMode/AttributesFactory/Attribute.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 });
+var AttributesFactory_1 = __importDefault(require("./AttributesFactory"));
+var Attribute = function (props) {
+    var attributeType = props.attributeType;
+    return AttributesFactory_1.default.build(attributeType, props);
+};
+exports.default = Attribute;

package/components/attributes/editMode/AttributesFactory/AttributesFactory.js

@@ -0,0 +1,50 @@
+"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 mdm_sdk_1 = require("@reltio/mdm-sdk");
+var SimpleAttributeEditor_1 = __importDefault(require("../SimpleAttributeEditor/SimpleAttributeEditor"));
+var NestedAttribute_1 = __importDefault(require("../NestedAttribute/NestedAttribute"));
+var ReferenceAttribute_1 = __importDefault(require("../ReferenceAttribute"));
+var EditModeAttributesFactory = /** @class */ (function () {
+    function EditModeAttributesFactory() {
+    }
+    EditModeAttributesFactory.build = function (attributeType, props) {
+        if (props === void 0) { props = {}; }
+        var showEmptyEditors = props.showEmptyEditors, onAddAttributes = props.onAddAttributes, lazy = props.lazy, errors = props.errors, crosswalks = props.crosswalks, propsForSimpleAttribute = __rest(props, ["showEmptyEditors", "onAddAttributes", "lazy", "errors", "crosswalks"]); //eslint-disable-line no-unused-vars
+        switch (attributeType.type) {
+            case mdm_sdk_1.DataTypes.TYPE_NESTED:
+                return react_1.default.createElement(NestedAttribute_1.default, __assign({}, props));
+            case mdm_sdk_1.DataTypes.TYPE_REFERENCE:
+                return react_1.default.createElement(ReferenceAttribute_1.default, __assign({}, props));
+            default:
+                return (react_1.default.createElement(SimpleAttributeEditor_1.default, __assign({ isReltioCrosswalk: mdm_sdk_1.isReltioCrosswalk(crosswalks, props.attributeValue) }, propsForSimpleAttribute)));
+        }
+    };
+    return EditModeAttributesFactory;
+}());
+exports.default = EditModeAttributesFactory;

package/components/attributes/editMode/AttributesList/AttributesList.js

@@ -0,0 +1,89 @@
+"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 mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ramda_1 = require("ramda");
+var AttributesPager_1 = __importDefault(require("../AttributesPager"));
+var BranchDecorator_1 = __importDefault(require("../../BranchDecorator/BranchDecorator"));
+var MoreAttributesButton_1 = __importDefault(require("../MoreAttributesButton"));
+var constants_1 = require("../../../../constants");
+var attributesView_1 = require("../../helpers/attributesView");
+var helpers_1 = require("./helpers");
+var AttributesList = function (_a) {
+    var attrTypes = _a.attrTypes, entity = _a.entity, parentUri = _a.parentUri, showEmptyEditors = _a.showEmptyEditors, mode = _a.mode, crosswalks = _a.crosswalks, drawLines = _a.drawLines, children = _a.children, className = _a.className, _b = _a.alwaysVisibleTypeUris, alwaysVisibleTypeUris = _b === void 0 ? constants_1.ALWAYS_VISIBLE_TYPE_URIS : _b, onAddAttributes = _a.onAddAttributes, onChangeAttribute = _a.onChangeAttribute, onDeleteAttribute = _a.onDeleteAttribute, additionalControlsRenderer = _a.additionalControlsRenderer;
+    var _c = entity.attributes, attributes = _c === void 0 ? {} : _c;
+    var creatableAttrTypes = react_1.useMemo(function () { return mdm_sdk_1.getCreatableAttributeTypes(mode, attrTypes); }, [attrTypes, mode]);
+    var moreAttrTypes = helpers_1.getMoreAttrTypes(creatableAttrTypes, entity);
+    var pagersData = react_1.useMemo(function () { return helpers_1.getAttributesListForEditMode(attrTypes, mode, entity, showEmptyEditors); }, [
+        attrTypes,
+        mode,
+        entity,
+        showEmptyEditors
+    ]);
+    var _d = react_1.useMemo(function () { return attributesView_1.splitPagersData(alwaysVisibleTypeUris, pagersData); }, [pagersData, alwaysVisibleTypeUris]), alwaysVisiblePagersData = _d[0], regularPagersData = _d[1];
+    var onAddMoreAttributes = react_1.useCallback(function (attributeTypes) {
+        onAddAttributes(attributeTypes.map(function (attributeType) { return ({ attributeType: attributeType, parentUri: parentUri }); }));
+    }, [onAddAttributes, parentUri]);
+    var decoratorProps = {
+        enabled: drawLines
+    };
+    return (react_1.default.createElement("div", { className: className },
+        children && react_1.default.createElement(BranchDecorator_1.default, __assign({}, decoratorProps), children),
+        react_1.default.createElement(BranchDecorator_1.default, __assign({}, decoratorProps, { plain: true }), creatableAttrTypes.length > 0 && (react_1.default.createElement(MoreAttributesButton_1.default, { label: ui_i18n_1.default.text('More attributes'), onApply: onAddMoreAttributes, dense: drawLines, data: moreAttrTypes }))),
+        regularPagersData.concat(alwaysVisiblePagersData).map(function (_a) {
+            var attrType = _a.attrType, values = _a.values;
+            return (react_1.default.createElement(AttributesPager_1.default, { key: attrType.uri, attributeType: attrType, drawLines: drawLines, values: values, paging: ramda_1.path(['paging', attrType.uri], attributes), parentUri: parentUri, showEmptyEditors: showEmptyEditors, mode: mode, crosswalks: crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute, additionalControlsRenderer: additionalControlsRenderer }));
+        })));
+};
+AttributesList.propTypes = {
+    attrTypes: prop_types_1.default.array,
+    entity: prop_types_1.default.object,
+    parentUri: prop_types_1.default.string,
+    children: prop_types_1.default.node,
+    showEmptyEditors: prop_types_1.default.bool,
+    mode: mdm_sdk_1.ModeType,
+    crosswalks: prop_types_1.default.array,
+    drawLines: prop_types_1.default.bool,
+    className: prop_types_1.default.string,
+    alwaysVisibleTypeUris: prop_types_1.default.array,
+    onAddAttributes: prop_types_1.default.func,
+    onChangeAttribute: prop_types_1.default.func,
+    onDeleteAttribute: prop_types_1.default.func,
+    additionalControlsRenderer: prop_types_1.default.func
+};
+exports.default = react_1.memo(AttributesList);

package/components/attributes/editMode/AttributesList/helpers.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMoreAttrTypes = exports.getAttributesListForEditMode = void 0;
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var getCreatableAttributeTypesAndAnaliticsAttributes = ramda_1.curry(function (mode, attrTypes) {
+    return ramda_1.pipe(ramda_1.defaultTo([]), mdm_sdk_1.filterOutHiddenAttributes, ramda_1.filter(function (attributeType) { return mdm_sdk_1.checkMetadataForCreate(mode, attributeType); }))(attrTypes);
+});
+var getSource = function (attrType, entity) {
+    var _a = entity.attributes, attributes = _a === void 0 ? {} : _a, _b = entity.analyticsAttributes, analyticsAttributes = _b === void 0 ? {} : _b;
+    return ramda_1.cond([
+        [mdm_sdk_1.isSpecialAttribute, ramda_1.always(entity)],
+        [ramda_1.both(mdm_sdk_1.isAnalyticAttribute, ramda_1.always(analyticsAttributes)), ramda_1.always(analyticsAttributes)],
+        [ramda_1.T, ramda_1.always(attributes)]
+    ])(attrType);
+};
+var getNameProp = function (attrType) {
+    return mdm_sdk_1.isSpecialAttribute(attrType) ? 'uri' : 'name';
+};
+var getAttributesListForEditMode = function (attrTypes, mode, entity, showEmptyEditors) {
+    var creatableAttrTypes = getCreatableAttributeTypesAndAnaliticsAttributes(mode, attrTypes);
+    return creatableAttrTypes.reduce(function (result, attrType) {
+        var needShowAttribute = function (hasValues) {
+            return hasValues || showEmptyEditors || attrType.required;
+        };
+        var source = getSource(attrType, entity);
+        var nameProp = getNameProp(attrType);
+        var hasValues = ramda_1.has(attrType[nameProp])(source);
+        return ramda_1.when(function () { return needShowAttribute(hasValues); }, ramda_1.append({
+            attrType: attrType,
+            values: ramda_1.pipe(ramda_1.prop(attrType[nameProp]), ramda_1.defaultTo([]), mdm_sdk_1.wrapInArrayIfNeeded)(source)
+        }), result);
+    }, []);
+};
+exports.getAttributesListForEditMode = getAttributesListForEditMode;
+var getMoreAttrTypes = function (attrTypes, entity) {
+    return attrTypes.filter(function (attrType) {
+        var source = getSource(attrType, entity);
+        var nameProp = getNameProp(attrType);
+        return !(attrType.singleValue && ramda_1.has(attrType[nameProp])(source));
+    });
+};
+exports.getMoreAttrTypes = getMoreAttrTypes;

package/components/attributes/editMode/AttributesList/index.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 });
+exports.default = void 0;
+var AttributesList_1 = require("./AttributesList");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AttributesList_1).default; } });