@reltio/components 1.4.1076 → 1.4.1079

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
1
  export default useStyles;
2
- declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "entityType" | "secondaryLabel" | "inactive" | "profileIcon" | "badge" | "businessCard" | "profileBandWrapper" | "profileBand" | "imageProfileIcon" | "profileInfo" | "specialInfo" | "entityId">;
2
+ declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "entityType" | "secondaryLabel" | "inactive" | "profileIcon" | "badge" | "entityId" | "businessCard" | "profileBandWrapper" | "profileBand" | "imageProfileIcon" | "profileInfo" | "specialInfo">;
@@ -2,12 +2,11 @@ import React from 'react';
2
2
  import { Entity } from '@reltio/mdm-sdk';
3
3
  declare type Props = {
4
4
  entity: Entity;
5
- disableEntityTypeColor?: boolean;
6
5
  classes?: {
7
6
  label?: string;
8
7
  secondaryLabel?: string;
9
8
  container?: string;
10
9
  };
11
10
  } & React.HTMLAttributes<HTMLDivElement>;
12
- declare const _default: React.MemoExoticComponent<({ entity, classes, disableEntityTypeColor, ...otherProps }: Props) => JSX.Element>;
11
+ declare const _default: React.MemoExoticComponent<({ entity, classes, ...otherProps }: Props) => JSX.Element>;
13
12
  export default _default;
@@ -45,36 +45,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
45
45
  };
46
46
  Object.defineProperty(exports, "__esModule", { value: true });
47
47
  var react_1 = __importStar(require("react"));
48
+ var ui_i18n_1 = __importDefault(require("ui-i18n"));
48
49
  var classnames_1 = __importDefault(require("classnames"));
49
- var react_redux_1 = require("react-redux");
50
50
  var mdm_sdk_1 = require("@reltio/mdm-sdk");
51
- var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
52
51
  var styles_1 = __importDefault(require("./styles"));
53
52
  var EntityAvatar_1 = __importDefault(require("../EntityAvatar/EntityAvatar"));
54
53
  var EntityUriLink_1 = __importDefault(require("../EntityUriLink/EntityUriLink"));
55
54
  var ExpandedValueTooltip_1 = __importDefault(require("../ExpandedValueTooltip/ExpandedValueTooltip"));
56
55
  var EntityTypeBadge_1 = __importDefault(require("../EntityTypeBadge/EntityTypeBadge"));
57
56
  var ProfileCard = function (_a) {
58
- var entity = _a.entity, _b = _a.classes, classes = _b === void 0 ? {} : _b, disableEntityTypeColor = _a.disableEntityTypeColor, otherProps = __rest(_a, ["entity", "classes", "disableEntityTypeColor"]);
57
+ var entity = _a.entity, _b = _a.classes, classes = _b === void 0 ? {} : _b, otherProps = __rest(_a, ["entity", "classes"]);
59
58
  var styles = styles_1.default();
60
59
  var secondaryLabelClass = classes.secondaryLabel, labelClass = classes.label, containerClass = classes.container;
61
- var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
62
60
  var label = mdm_sdk_1.getLabel(entity.label);
63
- var secondaryLabel = entity.secondaryLabel, type = entity.type;
64
- var entityType = mdm_sdk_1.getEntityType(metadata, type) || {};
65
- var entityTypeColor = mdm_sdk_1.getPropWithInheritance(metadata, entityType, 'typeColor') || mdm_sdk_1.theme.palette.primary.main;
61
+ var secondaryLabel = entity.secondaryLabel;
66
62
  return (react_1.default.createElement("div", __assign({ className: classnames_1.default(styles.container, containerClass) }, otherProps),
67
- react_1.default.createElement("div", { className: styles.colorBox, style: disableEntityTypeColor ? undefined : { backgroundColor: entityTypeColor } }),
68
- react_1.default.createElement(EntityAvatar_1.default, { entity: entity, avatarClassName: styles.avatar, imageClassName: styles.image }),
63
+ react_1.default.createElement(EntityAvatar_1.default, { entity: entity, imageClassName: styles.image }),
69
64
  react_1.default.createElement("div", { className: styles.info },
70
- react_1.default.createElement("div", { className: styles.firstRow },
71
- react_1.default.createElement(EntityUriLink_1.default, { value: mdm_sdk_1.getEntityUriForLink(entity), className: styles.link },
72
- react_1.default.createElement(ExpandedValueTooltip_1.default, { value: label, placement: "top", showOnExceededHeight: true },
73
- react_1.default.createElement("span", { className: classnames_1.default(styles.label, labelClass) }, label)))),
74
- react_1.default.createElement("div", { className: styles.secondRow }, secondaryLabel && (react_1.default.createElement(ExpandedValueTooltip_1.default, { value: secondaryLabel, placement: "top", showOnExceededHeight: true },
75
- react_1.default.createElement("span", { className: secondaryLabelClass }, secondaryLabel)))),
65
+ react_1.default.createElement(EntityUriLink_1.default, { value: mdm_sdk_1.getEntityUriForLink(entity), className: styles.link },
66
+ react_1.default.createElement(ExpandedValueTooltip_1.default, { value: label, placement: "top", showOnExceededHeight: true },
67
+ react_1.default.createElement("div", { className: classnames_1.default(styles.label, labelClass) }, label))),
68
+ secondaryLabel && (react_1.default.createElement(ExpandedValueTooltip_1.default, { value: secondaryLabel, placement: "top", showOnExceededHeight: true },
69
+ react_1.default.createElement("div", { className: classnames_1.default(styles.secondaryLabel, secondaryLabelClass) }, secondaryLabel))),
76
70
  react_1.default.createElement("div", { className: styles.thirdRow },
77
- react_1.default.createElement(EntityTypeBadge_1.default, { entity: entity }),
78
- react_1.default.createElement("div", null, mdm_sdk_1.getEntityId(entity))))));
71
+ react_1.default.createElement(EntityTypeBadge_1.default, { entity: entity, size: "medium" }),
72
+ react_1.default.createElement("div", { className: styles.entityId },
73
+ react_1.default.createElement("div", { className: styles.entityIdLabel }, ui_i18n_1.default.text('ID:')),
74
+ react_1.default.createElement("div", { className: styles.entityIdValue }, mdm_sdk_1.getEntityId(entity)))))));
79
75
  };
80
76
  exports.default = react_1.memo(ProfileCard);
@@ -1,2 +1,2 @@
1
- declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "image" | "link" | "avatar" | "firstRow" | "container" | "colorBox" | "info" | "secondRow" | "thirdRow">;
1
+ declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "image" | "secondaryLabel" | "link" | "container" | "info" | "thirdRow" | "entityId" | "entityIdLabel" | "entityIdValue">;
2
2
  export default useStyles;
@@ -3,62 +3,61 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  var styles_1 = require("@material-ui/core/styles");
4
4
  var useStyles = styles_1.makeStyles(function (theme) { return ({
5
5
  container: {
6
- position: 'relative',
7
6
  display: 'flex',
8
- fontSize: '12px',
9
- lineHeight: '14px',
10
- color: theme.palette.text.primary,
11
- padding: '8px 8px 8px 0',
7
+ padding: '16px',
12
8
  overflow: 'hidden'
13
9
  },
14
- colorBox: {
15
- position: 'absolute',
16
- opacity: 0.12,
17
- top: 0,
18
- left: 0,
19
- bottom: 0,
20
- width: '32px'
21
- },
22
10
  image: {
23
- width: '32px',
24
- height: '32px'
25
- },
26
- avatar: {
27
- marginRight: '8px',
28
- marginLeft: '16px',
29
- marginTop: '2px'
11
+ width: '40px',
12
+ height: '40px'
30
13
  },
31
14
  info: {
15
+ marginLeft: '12px',
32
16
  overflow: 'hidden',
33
17
  display: 'flex',
34
18
  flexDirection: 'column'
35
19
  },
36
- firstRow: {
37
- width: '100%'
38
- },
39
20
  label: {
40
- display: 'block',
41
21
  textOverflow: 'ellipsis',
42
22
  overflow: 'hidden',
43
23
  whiteSpace: 'nowrap',
44
- fontWeight: 500,
24
+ fontWeight: 400,
25
+ fontSize: '13px',
26
+ lineHeight: '15px',
45
27
  color: theme.palette.primary.main
46
28
  },
29
+ secondaryLabel: {
30
+ marginTop: '4px',
31
+ fontWeight: 400,
32
+ fontSize: '10px',
33
+ lineHeight: '12px',
34
+ color: theme.palette.text.secondary,
35
+ whiteSpace: 'nowrap',
36
+ overflow: 'hidden',
37
+ textOverflow: 'ellipsis'
38
+ },
47
39
  link: {
48
40
  textDecoration: 'none'
49
41
  },
50
- secondRow: {
51
- wordWrap: 'break-word',
52
- marginTop: '4px',
53
- lineHeight: '13px',
54
- fontSize: '11px'
55
- },
56
42
  thirdRow: {
57
43
  display: 'flex',
58
44
  alignItems: 'center',
45
+ marginTop: 'auto',
46
+ paddingTop: '4px'
47
+ },
48
+ entityId: {
49
+ display: 'flex',
50
+ alignItems: 'baseline',
51
+ fontWeight: 400,
59
52
  fontSize: '12px',
60
- color: theme.palette.text.secondary,
61
- marginTop: 'auto'
53
+ lineHeight: '16px'
54
+ },
55
+ entityIdLabel: {
56
+ color: theme.palette.text.secondary
57
+ },
58
+ entityIdValue: {
59
+ marginLeft: '8px',
60
+ color: theme.palette.text.primary
62
61
  }
63
62
  }); });
64
63
  exports.default = useStyles;
@@ -14,7 +14,7 @@ var ProfileMatchCard = function (_a) {
14
14
  var styles = styles_1.useStyles();
15
15
  return (react_1.default.createElement("div", { className: classnames_1.default(styles.root, className) },
16
16
  react_1.default.createElement("div", { className: styles.profileCardWrapper },
17
- react_1.default.createElement(ProfileCard_1.default, { entity: match.object, classes: { container: styles.profileCardContainer }, disableEntityTypeColor: true }),
17
+ react_1.default.createElement(ProfileCard_1.default, { entity: match.object, classes: { container: styles.profileCardContainer } }),
18
18
  children),
19
19
  react_1.default.createElement("div", { className: styles.rulesContainer },
20
20
  react_1.default.createElement(MatchRulesBlock_1.default, { match: match, metadata: metadata, entitiesMap: entitiesMap, entity: entity }))));
@@ -20,9 +20,11 @@ exports.useStyles = styles_1.makeStyles({
20
20
  gap: '4px'
21
21
  },
22
22
  profileCardContainer: {
23
- flexGrow: 1
23
+ flexGrow: 1,
24
+ paddingBottom: '8px',
25
+ paddingTop: '8px'
24
26
  },
25
27
  rulesContainer: {
26
- paddingLeft: '40px'
28
+ paddingLeft: '52px'
27
29
  }
28
30
  });
@@ -1 +1 @@
1
- export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "image" | "secondaryLabel" | "item" | "inactive" | "selected" | "avatar" | "clickable" | "info" | "secondRow" | "@keyframes animate" | "highlighted" | "justImported" | "businessCard">;
1
+ export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "image" | "secondaryLabel" | "item" | "inactive" | "selected" | "avatar" | "clickable" | "info" | "@keyframes animate" | "highlighted" | "justImported" | "businessCard" | "secondRow">;
@@ -1,2 +1,2 @@
1
1
  export default useStyles;
2
- declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "entityType" | "secondaryLabel" | "inactive" | "profileIcon" | "badge" | "businessCard" | "profileBandWrapper" | "profileBand" | "imageProfileIcon" | "profileInfo" | "specialInfo" | "entityId">;
2
+ declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "entityType" | "secondaryLabel" | "inactive" | "profileIcon" | "badge" | "entityId" | "businessCard" | "profileBandWrapper" | "profileBand" | "imageProfileIcon" | "profileInfo" | "specialInfo">;
@@ -2,12 +2,11 @@ import React from 'react';
2
2
  import { Entity } from '@reltio/mdm-sdk';
3
3
  declare type Props = {
4
4
  entity: Entity;
5
- disableEntityTypeColor?: boolean;
6
5
  classes?: {
7
6
  label?: string;
8
7
  secondaryLabel?: string;
9
8
  container?: string;
10
9
  };
11
10
  } & React.HTMLAttributes<HTMLDivElement>;
12
- declare const _default: React.MemoExoticComponent<({ entity, classes, disableEntityTypeColor, ...otherProps }: Props) => JSX.Element>;
11
+ declare const _default: React.MemoExoticComponent<({ entity, classes, ...otherProps }: Props) => JSX.Element>;
13
12
  export default _default;
@@ -21,36 +21,32 @@ var __rest = (this && this.__rest) || function (s, e) {
21
21
  return t;
22
22
  };
23
23
  import React, { memo } from 'react';
24
+ import i18n from 'ui-i18n';
24
25
  import classnames from 'classnames';
25
- import { useSelector } from 'react-redux';
26
- import { getEntityId, getEntityType, getEntityUriForLink, getLabel, getPropWithInheritance, theme } from '@reltio/mdm-sdk';
27
- import mdmModule from '@reltio/mdm-module';
26
+ import { getEntityId, getEntityUriForLink, getLabel } from '@reltio/mdm-sdk';
28
27
  import useStyles from './styles';
29
28
  import EntityAvatar from '../EntityAvatar/EntityAvatar';
30
29
  import EntityUriLink from '../EntityUriLink/EntityUriLink';
31
30
  import ExpandedValueTooltip from '../ExpandedValueTooltip/ExpandedValueTooltip';
32
31
  import EntityTypeBadge from '../EntityTypeBadge/EntityTypeBadge';
33
32
  var ProfileCard = function (_a) {
34
- var entity = _a.entity, _b = _a.classes, classes = _b === void 0 ? {} : _b, disableEntityTypeColor = _a.disableEntityTypeColor, otherProps = __rest(_a, ["entity", "classes", "disableEntityTypeColor"]);
33
+ var entity = _a.entity, _b = _a.classes, classes = _b === void 0 ? {} : _b, otherProps = __rest(_a, ["entity", "classes"]);
35
34
  var styles = useStyles();
36
35
  var secondaryLabelClass = classes.secondaryLabel, labelClass = classes.label, containerClass = classes.container;
37
- var metadata = useSelector(mdmModule.selectors.getMetadata);
38
36
  var label = getLabel(entity.label);
39
- var secondaryLabel = entity.secondaryLabel, type = entity.type;
40
- var entityType = getEntityType(metadata, type) || {};
41
- var entityTypeColor = getPropWithInheritance(metadata, entityType, 'typeColor') || theme.palette.primary.main;
37
+ var secondaryLabel = entity.secondaryLabel;
42
38
  return (React.createElement("div", __assign({ className: classnames(styles.container, containerClass) }, otherProps),
43
- React.createElement("div", { className: styles.colorBox, style: disableEntityTypeColor ? undefined : { backgroundColor: entityTypeColor } }),
44
- React.createElement(EntityAvatar, { entity: entity, avatarClassName: styles.avatar, imageClassName: styles.image }),
39
+ React.createElement(EntityAvatar, { entity: entity, imageClassName: styles.image }),
45
40
  React.createElement("div", { className: styles.info },
46
- React.createElement("div", { className: styles.firstRow },
47
- React.createElement(EntityUriLink, { value: getEntityUriForLink(entity), className: styles.link },
48
- React.createElement(ExpandedValueTooltip, { value: label, placement: "top", showOnExceededHeight: true },
49
- React.createElement("span", { className: classnames(styles.label, labelClass) }, label)))),
50
- React.createElement("div", { className: styles.secondRow }, secondaryLabel && (React.createElement(ExpandedValueTooltip, { value: secondaryLabel, placement: "top", showOnExceededHeight: true },
51
- React.createElement("span", { className: secondaryLabelClass }, secondaryLabel)))),
41
+ React.createElement(EntityUriLink, { value: getEntityUriForLink(entity), className: styles.link },
42
+ React.createElement(ExpandedValueTooltip, { value: label, placement: "top", showOnExceededHeight: true },
43
+ React.createElement("div", { className: classnames(styles.label, labelClass) }, label))),
44
+ secondaryLabel && (React.createElement(ExpandedValueTooltip, { value: secondaryLabel, placement: "top", showOnExceededHeight: true },
45
+ React.createElement("div", { className: classnames(styles.secondaryLabel, secondaryLabelClass) }, secondaryLabel))),
52
46
  React.createElement("div", { className: styles.thirdRow },
53
- React.createElement(EntityTypeBadge, { entity: entity }),
54
- React.createElement("div", null, getEntityId(entity))))));
47
+ React.createElement(EntityTypeBadge, { entity: entity, size: "medium" }),
48
+ React.createElement("div", { className: styles.entityId },
49
+ React.createElement("div", { className: styles.entityIdLabel }, i18n.text('ID:')),
50
+ React.createElement("div", { className: styles.entityIdValue }, getEntityId(entity)))))));
55
51
  };
56
52
  export default memo(ProfileCard);
@@ -1,2 +1,2 @@
1
- declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "image" | "link" | "avatar" | "firstRow" | "container" | "colorBox" | "info" | "secondRow" | "thirdRow">;
1
+ declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "image" | "secondaryLabel" | "link" | "container" | "info" | "thirdRow" | "entityId" | "entityIdLabel" | "entityIdValue">;
2
2
  export default useStyles;
@@ -1,62 +1,61 @@
1
1
  import { makeStyles } from '@material-ui/core/styles';
2
2
  var useStyles = makeStyles(function (theme) { return ({
3
3
  container: {
4
- position: 'relative',
5
4
  display: 'flex',
6
- fontSize: '12px',
7
- lineHeight: '14px',
8
- color: theme.palette.text.primary,
9
- padding: '8px 8px 8px 0',
5
+ padding: '16px',
10
6
  overflow: 'hidden'
11
7
  },
12
- colorBox: {
13
- position: 'absolute',
14
- opacity: 0.12,
15
- top: 0,
16
- left: 0,
17
- bottom: 0,
18
- width: '32px'
19
- },
20
8
  image: {
21
- width: '32px',
22
- height: '32px'
23
- },
24
- avatar: {
25
- marginRight: '8px',
26
- marginLeft: '16px',
27
- marginTop: '2px'
9
+ width: '40px',
10
+ height: '40px'
28
11
  },
29
12
  info: {
13
+ marginLeft: '12px',
30
14
  overflow: 'hidden',
31
15
  display: 'flex',
32
16
  flexDirection: 'column'
33
17
  },
34
- firstRow: {
35
- width: '100%'
36
- },
37
18
  label: {
38
- display: 'block',
39
19
  textOverflow: 'ellipsis',
40
20
  overflow: 'hidden',
41
21
  whiteSpace: 'nowrap',
42
- fontWeight: 500,
22
+ fontWeight: 400,
23
+ fontSize: '13px',
24
+ lineHeight: '15px',
43
25
  color: theme.palette.primary.main
44
26
  },
27
+ secondaryLabel: {
28
+ marginTop: '4px',
29
+ fontWeight: 400,
30
+ fontSize: '10px',
31
+ lineHeight: '12px',
32
+ color: theme.palette.text.secondary,
33
+ whiteSpace: 'nowrap',
34
+ overflow: 'hidden',
35
+ textOverflow: 'ellipsis'
36
+ },
45
37
  link: {
46
38
  textDecoration: 'none'
47
39
  },
48
- secondRow: {
49
- wordWrap: 'break-word',
50
- marginTop: '4px',
51
- lineHeight: '13px',
52
- fontSize: '11px'
53
- },
54
40
  thirdRow: {
55
41
  display: 'flex',
56
42
  alignItems: 'center',
43
+ marginTop: 'auto',
44
+ paddingTop: '4px'
45
+ },
46
+ entityId: {
47
+ display: 'flex',
48
+ alignItems: 'baseline',
49
+ fontWeight: 400,
57
50
  fontSize: '12px',
58
- color: theme.palette.text.secondary,
59
- marginTop: 'auto'
51
+ lineHeight: '16px'
52
+ },
53
+ entityIdLabel: {
54
+ color: theme.palette.text.secondary
55
+ },
56
+ entityIdValue: {
57
+ marginLeft: '8px',
58
+ color: theme.palette.text.primary
60
59
  }
61
60
  }); });
62
61
  export default useStyles;
@@ -8,7 +8,7 @@ export var ProfileMatchCard = function (_a) {
8
8
  var styles = useStyles();
9
9
  return (React.createElement("div", { className: classnames(styles.root, className) },
10
10
  React.createElement("div", { className: styles.profileCardWrapper },
11
- React.createElement(ProfileCard, { entity: match.object, classes: { container: styles.profileCardContainer }, disableEntityTypeColor: true }),
11
+ React.createElement(ProfileCard, { entity: match.object, classes: { container: styles.profileCardContainer } }),
12
12
  children),
13
13
  React.createElement("div", { className: styles.rulesContainer },
14
14
  React.createElement(MatchRulesBlock, { match: match, metadata: metadata, entitiesMap: entitiesMap, entity: entity }))));
@@ -17,9 +17,11 @@ export var useStyles = makeStyles({
17
17
  gap: '4px'
18
18
  },
19
19
  profileCardContainer: {
20
- flexGrow: 1
20
+ flexGrow: 1,
21
+ paddingBottom: '8px',
22
+ paddingTop: '8px'
21
23
  },
22
24
  rulesContainer: {
23
- paddingLeft: '40px'
25
+ paddingLeft: '52px'
24
26
  }
25
27
  });
@@ -1 +1 @@
1
- export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "image" | "secondaryLabel" | "item" | "inactive" | "selected" | "avatar" | "clickable" | "info" | "secondRow" | "@keyframes animate" | "highlighted" | "justImported" | "businessCard">;
1
+ export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "image" | "secondaryLabel" | "item" | "inactive" | "selected" | "avatar" | "clickable" | "info" | "@keyframes animate" | "highlighted" | "justImported" | "businessCard" | "secondRow">;
package/package.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@reltio/components",
3
- "version": "1.4.1076",
3
+ "version": "1.4.1079",
4
4
  "license": "SEE LICENSE IN LICENSE FILE",
5
5
  "main": "./cjs/index.js",
6
6
  "module": "./esm/index.js",
7
7
  "dependencies": {
8
8
  "@date-io/moment": "^1.3.5",
9
9
  "@react-google-maps/api": "2.7.0",
10
- "@reltio/mdm-module": "^1.4.1076",
11
- "@reltio/mdm-sdk": "^1.4.1076",
10
+ "@reltio/mdm-module": "^1.4.1079",
11
+ "@reltio/mdm-sdk": "^1.4.1079",
12
12
  "classnames": "^2.2.5",
13
13
  "d3-cloud": "^1.2.5",
14
14
  "d3-geo": "^2.0.1",