@reltio/components 1.4.886 → 1.4.887

package/cjs/components/DropDownSelector/DropDownSelector.d.ts

@@ -11,10 +11,11 @@ export namespace DropDownSelectorType {
     const textFieldInputRef: PropTypes.Requireable<object>;
     const TextFieldProps: PropTypes.Requireable<object>;
     const height: PropTypes.Requireable<number>;
+    const classes: PropTypes.Requireable<object>;
 }
 export default DropDownSelector;
 import PropTypes from "prop-types";
-declare function DropDownSelector({ value, label, createLabel, getOptions, options, height, onChange, onCreate, onClear, components, textFieldInputRef, TextFieldProps, ...otherProps }: {
+declare function DropDownSelector({ value, label, createLabel, getOptions, options, height, onChange, onCreate, onClear, components, textFieldInputRef, TextFieldProps, classes, ...otherProps }: {
     [x: string]: any;
     value: any;
     label: any;
@@ -28,6 +29,7 @@ declare function DropDownSelector({ value, label, createLabel, getOptions, optio
     components: any;
     textFieldInputRef: any;
     TextFieldProps: any;
+    classes: any;
 }): JSX.Element;
 declare namespace DropDownSelector {
     export { DropDownSelectorType as propTypes };

package/cjs/components/DropDownSelector/DropDownSelector.js

@@ -60,7 +60,7 @@ var SingleValue_1 = __importDefault(require("./components/SingleValue"));
 var styles_1 = require("./styles");
 var DropDownSelector = function (_a) {
     var _b;
-    var value = _a.value, label = _a.label, createLabel = _a.createLabel, getOptions = _a.getOptions, options = _a.options, _c = _a.height, height = _c === void 0 ? 46 : _c, _d = _a.onChange, onChange = _d === void 0 ? ramda_1.identity : _d, onCreate = _a.onCreate, _e = _a.onClear, onClear = _e === void 0 ? ramda_1.identity : _e, components = _a.components, textFieldInputRef = _a.textFieldInputRef, TextFieldProps = _a.TextFieldProps, otherProps = __rest(_a, ["value", "label", "createLabel", "getOptions", "options", "height", "onChange", "onCreate", "onClear", "components", "textFieldInputRef", "TextFieldProps"]);
+    var value = _a.value, label = _a.label, createLabel = _a.createLabel, getOptions = _a.getOptions, options = _a.options, _c = _a.height, height = _c === void 0 ? 46 : _c, _d = _a.onChange, onChange = _d === void 0 ? ramda_1.identity : _d, onCreate = _a.onCreate, _e = _a.onClear, onClear = _e === void 0 ? ramda_1.identity : _e, components = _a.components, textFieldInputRef = _a.textFieldInputRef, TextFieldProps = _a.TextFieldProps, classes = _a.classes, otherProps = __rest(_a, ["value", "label", "createLabel", "getOptions", "options", "height", "onChange", "onCreate", "onClear", "components", "textFieldInputRef", "TextFieldProps", "classes"]);
     var styles = styles_1.useStyles({ height: height });
     var underlineStyle = constants_1.useInputStyles();
     var _f = react_1.useState(false), open = _f[0], setOpen = _f[1];
@@ -78,7 +78,8 @@ var DropDownSelector = function (_a) {
     var overloadStylesIfGroup = ramda_1.prop('Group', components) ? styles_1.overloadMenuListStyle : {};
     var overloadStylesIfNoLabel = ramda_1.isEmpty(label) ? styles_1.withoutLabelInputStyle : {};
     var mergedStyles = __assign(__assign(__assign({}, styles_1.customStyles), overloadStylesIfGroup), overloadStylesIfNoLabel);
-    return (react_1.default.createElement(SelectComponent, __assign({ placeholder: "", defaultOptions: true }, otherProps, { value: ramda_1.defaultTo(null, value), loadOptions: getOptions, options: options, cacheOptions: true, onChange: onChange, onCreate: handleCreate, onClear: onClear, createLabel: createLabel, classes: styles, styles: mergedStyles, components: __assign(__assign({ DropdownIndicator: DropdownIndicator_1.default, LoadingIndicator: core_1.EmptyStub, SingleValue: SingleValue_1.default,
+    var mergedClasses = __assign(__assign({}, styles), classes);
+    return (react_1.default.createElement(SelectComponent, __assign({ placeholder: "", defaultOptions: true }, otherProps, { value: ramda_1.defaultTo(null, value), loadOptions: getOptions, options: options, cacheOptions: true, onChange: onChange, onCreate: handleCreate, onClear: onClear, createLabel: createLabel, classes: mergedClasses, styles: mergedStyles, components: __assign(__assign({ DropdownIndicator: DropdownIndicator_1.default, LoadingIndicator: core_1.EmptyStub, SingleValue: SingleValue_1.default,
             Menu: Menu_1.default }, showIndicatorSeparator), components), menuPlacement: "auto", TextFieldProps: __assign(__assign({}, TextFieldProps), { label: label, variant: 'filled', margin: 'dense', classes: __assign(__assign({}, ramda_1.prop('classes', TextFieldProps)), { root: classnames_1.default(styles.formControl, ramda_1.path(['classes', 'root'], TextFieldProps)) }), inputProps: __assign({}, ramda_1.prop('inputProps', TextFieldProps)), InputProps: __assign(__assign({}, ramda_1.prop('InputProps', TextFieldProps)), { classes: __assign(__assign({}, ramda_1.path(['InputProps', 'classes'], TextFieldProps)), { root: classnames_1.default(styles.filledInputRoot, ramda_1.path(['InputProps', 'classes', 'root'], TextFieldProps)), underline: classnames_1.default((_b = {}, _b[underlineStyle.filledInputUnderline] = mdm_sdk_1.isEmptyValue(value), _b), ramda_1.path(['InputProps', 'classes', 'underline'], TextFieldProps)), focused: classnames_1.default('focused', ramda_1.path(['InputProps', 'classes', 'focused'], TextFieldProps)) }) }), InputLabelProps: __assign(__assign({}, ramda_1.prop('InputLabelProps', TextFieldProps)), { classes: __assign(__assign({}, ramda_1.path(['InputLabelProps', 'classes'], TextFieldProps)), { root: classnames_1.default(styles.inputLabel, ramda_1.path(['InputLabelProps', 'classes', 'root'], TextFieldProps)), shrink: classnames_1.default('shrink', ramda_1.path(['InputLabelProps', 'classes', 'shrink'], TextFieldProps)) }), shrink: !mdm_sdk_1.isEmptyValue(value) ? true : undefined }), ref: textFieldInputRef || inputRef }), inputRef: textFieldInputRef || inputRef, menuIsOpen: open, onMenuOpen: function () { return setOpen(true); }, onMenuClose: function () { return setOpen(false); } })));
 };
 exports.DropDownSelectorType = {
@@ -93,7 +94,8 @@ exports.DropDownSelectorType = {
     components: prop_types_1.default.object,
     textFieldInputRef: prop_types_1.default.object,
     TextFieldProps: prop_types_1.default.object,
-    height: prop_types_1.default.number
+    height: prop_types_1.default.number,
+    classes: prop_types_1.default.object
 };
 DropDownSelector.propTypes = exports.DropDownSelectorType;
 exports.default = DropDownSelector;

package/cjs/components/attributes/editMode/AttributesPager/SpecialRenderer.js

@@ -51,8 +51,8 @@ var Title_1 = __importDefault(require("../../../Title/Title"));
 var CardinalityMessage_1 = __importDefault(require("./CardinalityMessage"));
 var ErrorMessage_1 = __importDefault(require("../../../ErrorWrapper/ErrorMessage"));
 var Attribute_1 = __importDefault(require("../AttributesFactory/Attribute"));
+var Roles_1 = require("../Roles/Roles");
 var Tags_1 = __importDefault(require("../Tags"));
-var Roles_1 = __importDefault(require("../../readMode/SpecialAttributes/Roles")); //TODO: should be edit mode
 var styles_1 = require("./styles");
 var SpecialRenderer = function (_a) {
     var values = _a.values, attributeType = _a.attributeType, parentUri = _a.parentUri, mode = _a.mode, errorMessage = _a.errorMessage, otherProps = __rest(_a, ["values", "attributeType", "parentUri", "mode", "errorMessage"]);
@@ -68,7 +68,7 @@ var SpecialRenderer = function (_a) {
             case mdm_sdk_1.EntityAttrTypes.tags.uri:
                 return react_1.default.createElement(Tags_1.default, { values: values });
             case mdm_sdk_1.EntityAttrTypes.roles.uri: {
-                return react_1.default.createElement(Roles_1.default, { values: values });
+                return react_1.default.createElement(Roles_1.Roles, { values: values });
             }
             default: {
                 //startDate, endDate

package/cjs/components/attributes/editMode/Roles/Roles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type Props = {
+    values: string[];
+};
+export declare const Roles: ({ values }: Props) => JSX.Element;
+export {};

package/cjs/components/attributes/editMode/Roles/Roles.js

@@ -0,0 +1,64 @@
+"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.Roles = void 0;
+var react_1 = __importDefault(require("react"));
+var ramda_1 = require("ramda");
+var react_redux_1 = require("react-redux");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
+var SimpleDropDownSelector_1 = __importDefault(require("../../../SimpleDropDownSelector/SimpleDropDownSelector"));
+var __1 = require("../../..");
+var styles_1 = require("./styles");
+var components = { MultiValue: __1.MultiValueChip };
+var Roles = function (_a) {
+    var values = _a.values;
+    var styles = styles_1.useStyles();
+    var dispatch = react_redux_1.useDispatch();
+    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
+    var entity = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntity);
+    var entityUri = entity.uri;
+    var options = mdm_sdk_1.getRolesForEntityType(metadata, entity.type).map(function (role) { return ({
+        value: role.uri,
+        label: role.label
+    }); });
+    var formattedValues = values.map(function (value) {
+        var _a;
+        var label = (_a = options.find(ramda_1.propEq('value', value))) === null || _a === void 0 ? void 0 : _a.label;
+        return {
+            value: value,
+            label: label || mdm_sdk_1.getLastUriPart(value)
+        };
+    });
+    var handleChange = function (values) {
+        var roles = (values === null || values === void 0 ? void 0 : values.map(ramda_1.prop('value'))) || [];
+        dispatch(mdm_module_1.profile.actions.modifyAttribute({
+            value: roles,
+            attributeType: mdm_sdk_1.EntityAttrTypes.roles,
+            uri: entityUri
+        }));
+    };
+    return (react_1.default.createElement(SimpleDropDownSelector_1.default, { label: '', height: 40, isMulti: true, options: options, value: formattedValues, onChange: handleChange, components: components, classes: styles }));
+};
+exports.Roles = Roles;

package/cjs/components/attributes/editMode/Roles/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"valueContainer">;

package/cjs/components/attributes/editMode/Roles/styles.js

@@ -0,0 +1,10 @@
+"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({
+    valueContainer: {
+        marginLeft: '8px',
+        width: 0
+    }
+});

package/esm/components/DropDownSelector/DropDownSelector.d.ts

@@ -11,10 +11,11 @@ export namespace DropDownSelectorType {
     const textFieldInputRef: PropTypes.Requireable<object>;
     const TextFieldProps: PropTypes.Requireable<object>;
     const height: PropTypes.Requireable<number>;
+    const classes: PropTypes.Requireable<object>;
 }
 export default DropDownSelector;
 import PropTypes from "prop-types";
-declare function DropDownSelector({ value, label, createLabel, getOptions, options, height, onChange, onCreate, onClear, components, textFieldInputRef, TextFieldProps, ...otherProps }: {
+declare function DropDownSelector({ value, label, createLabel, getOptions, options, height, onChange, onCreate, onClear, components, textFieldInputRef, TextFieldProps, classes, ...otherProps }: {
     [x: string]: any;
     value: any;
     label: any;
@@ -28,6 +29,7 @@ declare function DropDownSelector({ value, label, createLabel, getOptions, optio
     components: any;
     textFieldInputRef: any;
     TextFieldProps: any;
+    classes: any;
 }): JSX.Element;
 declare namespace DropDownSelector {
     export { DropDownSelectorType as propTypes };

package/esm/components/DropDownSelector/DropDownSelector.js

@@ -35,7 +35,7 @@ import SingleValue from './components/SingleValue';
 import { useStyles, customStyles, overloadMenuListStyle, withoutLabelInputStyle } from './styles';
 var DropDownSelector = function (_a) {
     var _b;
-    var value = _a.value, label = _a.label, createLabel = _a.createLabel, getOptions = _a.getOptions, options = _a.options, _c = _a.height, height = _c === void 0 ? 46 : _c, _d = _a.onChange, onChange = _d === void 0 ? identity : _d, onCreate = _a.onCreate, _e = _a.onClear, onClear = _e === void 0 ? identity : _e, components = _a.components, textFieldInputRef = _a.textFieldInputRef, TextFieldProps = _a.TextFieldProps, otherProps = __rest(_a, ["value", "label", "createLabel", "getOptions", "options", "height", "onChange", "onCreate", "onClear", "components", "textFieldInputRef", "TextFieldProps"]);
+    var value = _a.value, label = _a.label, createLabel = _a.createLabel, getOptions = _a.getOptions, options = _a.options, _c = _a.height, height = _c === void 0 ? 46 : _c, _d = _a.onChange, onChange = _d === void 0 ? identity : _d, onCreate = _a.onCreate, _e = _a.onClear, onClear = _e === void 0 ? identity : _e, components = _a.components, textFieldInputRef = _a.textFieldInputRef, TextFieldProps = _a.TextFieldProps, classes = _a.classes, otherProps = __rest(_a, ["value", "label", "createLabel", "getOptions", "options", "height", "onChange", "onCreate", "onClear", "components", "textFieldInputRef", "TextFieldProps", "classes"]);
     var styles = useStyles({ height: height });
     var underlineStyle = useInputStyles();
     var _f = useState(false), open = _f[0], setOpen = _f[1];
@@ -53,7 +53,8 @@ var DropDownSelector = function (_a) {
     var overloadStylesIfGroup = prop('Group', components) ? overloadMenuListStyle : {};
     var overloadStylesIfNoLabel = isEmpty(label) ? withoutLabelInputStyle : {};
     var mergedStyles = __assign(__assign(__assign({}, customStyles), overloadStylesIfGroup), overloadStylesIfNoLabel);
-    return (React.createElement(SelectComponent, __assign({ placeholder: "", defaultOptions: true }, otherProps, { value: defaultTo(null, value), loadOptions: getOptions, options: options, cacheOptions: true, onChange: onChange, onCreate: handleCreate, onClear: onClear, createLabel: createLabel, classes: styles, styles: mergedStyles, components: __assign(__assign({ DropdownIndicator: DropdownIndicator, LoadingIndicator: EmptyStub, SingleValue: SingleValue,
+    var mergedClasses = __assign(__assign({}, styles), classes);
+    return (React.createElement(SelectComponent, __assign({ placeholder: "", defaultOptions: true }, otherProps, { value: defaultTo(null, value), loadOptions: getOptions, options: options, cacheOptions: true, onChange: onChange, onCreate: handleCreate, onClear: onClear, createLabel: createLabel, classes: mergedClasses, styles: mergedStyles, components: __assign(__assign({ DropdownIndicator: DropdownIndicator, LoadingIndicator: EmptyStub, SingleValue: SingleValue,
             Menu: Menu }, showIndicatorSeparator), components), menuPlacement: "auto", TextFieldProps: __assign(__assign({}, TextFieldProps), { label: label, variant: 'filled', margin: 'dense', classes: __assign(__assign({}, prop('classes', TextFieldProps)), { root: classnames(styles.formControl, path(['classes', 'root'], TextFieldProps)) }), inputProps: __assign({}, prop('inputProps', TextFieldProps)), InputProps: __assign(__assign({}, prop('InputProps', TextFieldProps)), { classes: __assign(__assign({}, path(['InputProps', 'classes'], TextFieldProps)), { root: classnames(styles.filledInputRoot, path(['InputProps', 'classes', 'root'], TextFieldProps)), underline: classnames((_b = {}, _b[underlineStyle.filledInputUnderline] = isEmptyValue(value), _b), path(['InputProps', 'classes', 'underline'], TextFieldProps)), focused: classnames('focused', path(['InputProps', 'classes', 'focused'], TextFieldProps)) }) }), InputLabelProps: __assign(__assign({}, prop('InputLabelProps', TextFieldProps)), { classes: __assign(__assign({}, path(['InputLabelProps', 'classes'], TextFieldProps)), { root: classnames(styles.inputLabel, path(['InputLabelProps', 'classes', 'root'], TextFieldProps)), shrink: classnames('shrink', path(['InputLabelProps', 'classes', 'shrink'], TextFieldProps)) }), shrink: !isEmptyValue(value) ? true : undefined }), ref: textFieldInputRef || inputRef }), inputRef: textFieldInputRef || inputRef, menuIsOpen: open, onMenuOpen: function () { return setOpen(true); }, onMenuClose: function () { return setOpen(false); } })));
 };
 export var DropDownSelectorType = {
@@ -68,7 +69,8 @@ export var DropDownSelectorType = {
     components: PropTypes.object,
     textFieldInputRef: PropTypes.object,
     TextFieldProps: PropTypes.object,
-    height: PropTypes.number
+    height: PropTypes.number,
+    classes: PropTypes.object
 };
 DropDownSelector.propTypes = DropDownSelectorType;
 export default DropDownSelector;

package/esm/components/attributes/editMode/AttributesPager/SpecialRenderer.js

@@ -27,8 +27,8 @@ import Title from '../../../Title/Title';
 import Cardinality from './CardinalityMessage';
 import ErrorMessage from '../../../ErrorWrapper/ErrorMessage';
 import Attribute from '../AttributesFactory/Attribute';
+import { Roles } from '../Roles/Roles';
 import Tags from '../Tags';
-import Roles from '../../readMode/SpecialAttributes/Roles'; //TODO: should be edit mode
 import { useStyles } from './styles';
 var SpecialRenderer = function (_a) {
     var values = _a.values, attributeType = _a.attributeType, parentUri = _a.parentUri, mode = _a.mode, errorMessage = _a.errorMessage, otherProps = __rest(_a, ["values", "attributeType", "parentUri", "mode", "errorMessage"]);

package/esm/components/attributes/editMode/Roles/Roles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type Props = {
+    values: string[];
+};
+export declare const Roles: ({ values }: Props) => JSX.Element;
+export {};

package/esm/components/attributes/editMode/Roles/Roles.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { prop, propEq } from 'ramda';
+import { useSelector, useDispatch } from 'react-redux';
+import { EntityAttrTypes, getRolesForEntityType, getLastUriPart } from '@reltio/mdm-sdk';
+import mdmModule, { profile } from '@reltio/mdm-module';
+import SimpleDropDownSelector from '../../../SimpleDropDownSelector/SimpleDropDownSelector';
+import { MultiValueChip } from '../../..';
+import { useStyles } from './styles';
+var components = { MultiValue: MultiValueChip };
+export var Roles = function (_a) {
+    var values = _a.values;
+    var styles = useStyles();
+    var dispatch = useDispatch();
+    var metadata = useSelector(mdmModule.selectors.getMetadata);
+    var entity = useSelector(mdmModule.selectors.getEntity);
+    var entityUri = entity.uri;
+    var options = getRolesForEntityType(metadata, entity.type).map(function (role) { return ({
+        value: role.uri,
+        label: role.label
+    }); });
+    var formattedValues = values.map(function (value) {
+        var _a;
+        var label = (_a = options.find(propEq('value', value))) === null || _a === void 0 ? void 0 : _a.label;
+        return {
+            value: value,
+            label: label || getLastUriPart(value)
+        };
+    });
+    var handleChange = function (values) {
+        var roles = (values === null || values === void 0 ? void 0 : values.map(prop('value'))) || [];
+        dispatch(profile.actions.modifyAttribute({
+            value: roles,
+            attributeType: EntityAttrTypes.roles,
+            uri: entityUri
+        }));
+    };
+    return (React.createElement(SimpleDropDownSelector, { label: '', height: 40, isMulti: true, options: options, value: formattedValues, onChange: handleChange, components: components, classes: styles }));
+};

package/esm/components/attributes/editMode/Roles/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"valueContainer">;

package/esm/components/attributes/editMode/Roles/styles.js

@@ -0,0 +1,7 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
+    valueContainer: {
+        marginLeft: '8px',
+        width: 0
+    }
+});

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.886",
+  "version": "1.4.887",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "^2.7.0",
-    "@reltio/mdm-module": "^1.4.886",
-    "@reltio/mdm-sdk": "^1.4.886",
+    "@reltio/mdm-module": "^1.4.887",
+    "@reltio/mdm-sdk": "^1.4.887",
     "classnames": "^2.2.5",
     "frontend-collective-react-dnd-scrollzone": "^1.0.2",
     "nanoid": "^2.0.0",