@reltio/components 1.4.1316 → 1.4.1318

package/cjs/components/crosswalks/ColoredBlock/ColoredBlock.d.ts

@@ -2,6 +2,6 @@ import React from 'react';
 declare const ColoredBlock: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     color: string;
     opacity?: number;
-    variant?: 'filled' | 'outlined';
+    variant?: 'standart' | 'disabled';
 } & React.RefAttributes<HTMLDivElement>>;
 export default ColoredBlock;

package/cjs/components/crosswalks/ColoredBlock/ColoredBlock.js

@@ -49,11 +49,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var classnames_1 = __importDefault(require("classnames"));
+var EventBusy_1 = __importDefault(require("@material-ui/icons/EventBusy"));
+var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
 var styles_1 = require("./styles");
 var ColoredBlock = (0, react_1.forwardRef)(function (_a, ref) {
-    var color = _a.color, opacity = _a.opacity, _b = _a.variant, variant = _b === void 0 ? 'filled' : _b, children = _a.children, className = _a.className, props = __rest(_a, ["color", "opacity", "variant", "children", "className"]);
+    var color = _a.color, opacity = _a.opacity, _b = _a.variant, variant = _b === void 0 ? 'standart' : _b, children = _a.children, className = _a.className, props = __rest(_a, ["color", "opacity", "variant", "children", "className"]);
     var styles = (0, styles_1.useColoredItemStyles)({ color: color, opacity: opacity, variant: variant });
-    return (react_1.default.createElement("div", __assign({ ref: ref, className: (0, classnames_1.default)(styles.item, className) }, props), children));
+    return (react_1.default.createElement("div", __assign({ ref: ref, className: (0, classnames_1.default)(styles.item, className) }, props),
+        children,
+        variant === 'disabled' && (react_1.default.createElement(Tooltip_1.default, { title: ui_i18n_1.default.text('End-dated crosswalk') },
+            react_1.default.createElement(EventBusy_1.default, { className: styles.endDatedCrosswalkIcon })))));
 });
 exports.default = ColoredBlock;

package/cjs/components/crosswalks/ColoredBlock/styles.d.ts

@@ -1,7 +1,7 @@
 declare type StylesProps = {
     color?: string;
     opacity?: number;
-    variant: 'filled' | 'outlined';
+    variant: 'standart' | 'disabled';
 };
-export declare const useColoredItemStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"item">;
+export declare const useColoredItemStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"item" | "endDatedCrosswalkIcon">;
 export {};

package/cjs/components/crosswalks/ColoredBlock/styles.js

@@ -16,6 +16,12 @@ var styles_1 = require("@material-ui/core/styles");
 exports.useColoredItemStyles = (0, styles_1.makeStyles)({
     item: function (_a) {
         var color = _a.color, opacity = _a.opacity, variant = _a.variant;
-        return (__assign(__assign(__assign({}, (variant === 'filled' && { backgroundColor: color })), (variant === 'outlined' && { border: "".concat(color, " solid 2px") })), { opacity: opacity, transition: 'opacity 0.3s', boxSizing: 'border-box' }));
+        return (__assign(__assign(__assign({}, (variant === 'standart' && { backgroundColor: color, paddingRight: '29px' })), (variant === 'disabled' && { border: "".concat(color, " solid 2px") })), { opacity: opacity, transition: 'opacity 0.3s', boxSizing: 'border-box' }));
+    },
+    endDatedCrosswalkIcon: {
+        margin: '0 4px',
+        width: '20px',
+        height: '20px',
+        color: '#ff1744'
     }
 });

package/cjs/components/crosswalks/CrosswalkRow/CrosswalkRow.js

@@ -90,7 +90,7 @@ var CrosswalkRow = function (_a) {
     return (react_1.default.createElement("div", { className: styles.root, ref: ref },
         react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { size: "XXS", className: styles.focusedIcon, icon: focusable && Visibility_1.default, onClick: function () { return toggleCrosswalkFocus(); }, disabled: !focusable, tooltipTitle: focusable && ui_i18n_1.default.text('Focus') }),
         react_1.default.createElement("div", { className: styles.crosswalkWrapper },
-            react_1.default.createElement(ColoredBlock_1.default, { ref: drag, className: styles.header, color: color, variant: crosswalkDisabled ? 'outlined' : 'filled', onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); } },
+            react_1.default.createElement(ColoredBlock_1.default, { ref: drag, className: styles.header, color: color, variant: crosswalkDisabled ? 'disabled' : 'standart', onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); } },
                 isDependent && react_1.default.createElement(NestedAttribute_1.default, { className: styles.dependentIcon }),
                 react_1.default.createElement(ArrowExpandButton_1.default, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded }),
                 react_1.default.createElement(SourceIcon_1.default, { className: styles.sourceIcon, sourceType: crosswalk.type }),

package/cjs/components/crosswalks/CrosswalkRow/styles.js

@@ -54,8 +54,7 @@ exports.useStyles = (0, styles_1.makeStyles)({
         right: 5
     },
     labelValue: {
-        marginLeft: 5,
-        marginRight: 8
+        marginLeft: 5
     },
     dependentIcon: {
         width: '16px',

package/esm/components/crosswalks/ColoredBlock/ColoredBlock.d.ts

@@ -2,6 +2,6 @@ import React from 'react';
 declare const ColoredBlock: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     color: string;
     opacity?: number;
-    variant?: 'filled' | 'outlined';
+    variant?: 'standart' | 'disabled';
 } & React.RefAttributes<HTMLDivElement>>;
 export default ColoredBlock;

package/esm/components/crosswalks/ColoredBlock/ColoredBlock.js

@@ -21,11 +21,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
+import i18n from 'ui-i18n';
 import classnames from 'classnames';
+import EventBusyIcon from '@material-ui/icons/EventBusy';
+import Tooltip from '@material-ui/core/Tooltip';
 import { useColoredItemStyles } from './styles';
 var ColoredBlock = forwardRef(function (_a, ref) {
-    var color = _a.color, opacity = _a.opacity, _b = _a.variant, variant = _b === void 0 ? 'filled' : _b, children = _a.children, className = _a.className, props = __rest(_a, ["color", "opacity", "variant", "children", "className"]);
+    var color = _a.color, opacity = _a.opacity, _b = _a.variant, variant = _b === void 0 ? 'standart' : _b, children = _a.children, className = _a.className, props = __rest(_a, ["color", "opacity", "variant", "children", "className"]);
     var styles = useColoredItemStyles({ color: color, opacity: opacity, variant: variant });
-    return (React.createElement("div", __assign({ ref: ref, className: classnames(styles.item, className) }, props), children));
+    return (React.createElement("div", __assign({ ref: ref, className: classnames(styles.item, className) }, props),
+        children,
+        variant === 'disabled' && (React.createElement(Tooltip, { title: i18n.text('End-dated crosswalk') },
+            React.createElement(EventBusyIcon, { className: styles.endDatedCrosswalkIcon })))));
 });
 export default ColoredBlock;

package/esm/components/crosswalks/ColoredBlock/styles.d.ts

@@ -1,7 +1,7 @@
 declare type StylesProps = {
     color?: string;
     opacity?: number;
-    variant: 'filled' | 'outlined';
+    variant: 'standart' | 'disabled';
 };
-export declare const useColoredItemStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"item">;
+export declare const useColoredItemStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"item" | "endDatedCrosswalkIcon">;
 export {};

package/esm/components/crosswalks/ColoredBlock/styles.js

@@ -13,6 +13,12 @@ import { makeStyles } from '@material-ui/core/styles';
 export var useColoredItemStyles = makeStyles({
     item: function (_a) {
         var color = _a.color, opacity = _a.opacity, variant = _a.variant;
-        return (__assign(__assign(__assign({}, (variant === 'filled' && { backgroundColor: color })), (variant === 'outlined' && { border: "".concat(color, " solid 2px") })), { opacity: opacity, transition: 'opacity 0.3s', boxSizing: 'border-box' }));
+        return (__assign(__assign(__assign({}, (variant === 'standart' && { backgroundColor: color, paddingRight: '29px' })), (variant === 'disabled' && { border: "".concat(color, " solid 2px") })), { opacity: opacity, transition: 'opacity 0.3s', boxSizing: 'border-box' }));
+    },
+    endDatedCrosswalkIcon: {
+        margin: '0 4px',
+        width: '20px',
+        height: '20px',
+        color: '#ff1744'
     }
 });

package/esm/components/crosswalks/CrosswalkRow/CrosswalkRow.js

@@ -62,7 +62,7 @@ var CrosswalkRow = function (_a) {
     return (React.createElement("div", { className: styles.root, ref: ref },
         React.createElement(SmallIconButtonWithTooltip, { size: "XXS", className: styles.focusedIcon, icon: focusable && VisibilityIcon, onClick: function () { return toggleCrosswalkFocus(); }, disabled: !focusable, tooltipTitle: focusable && i18n.text('Focus') }),
         React.createElement("div", { className: styles.crosswalkWrapper },
-            React.createElement(ColoredBlock, { ref: drag, className: styles.header, color: color, variant: crosswalkDisabled ? 'outlined' : 'filled', onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); } },
+            React.createElement(ColoredBlock, { ref: drag, className: styles.header, color: color, variant: crosswalkDisabled ? 'disabled' : 'standart', onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); } },
                 isDependent && React.createElement(DependentIcon, { className: styles.dependentIcon }),
                 React.createElement(ArrowExpandButton, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded }),
                 React.createElement(SourceIcon, { className: styles.sourceIcon, sourceType: crosswalk.type }),

package/esm/components/crosswalks/CrosswalkRow/styles.js

@@ -51,8 +51,7 @@ export var useStyles = makeStyles({
         right: 5
     },
     labelValue: {
-        marginLeft: 5,
-        marginRight: 8
+        marginLeft: 5
     },
     dependentIcon: {
         width: '16px',

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1316",
+  "version": "1.4.1318",
   "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.1316",
-    "@reltio/mdm-sdk": "^1.4.1316",
+    "@reltio/mdm-module": "^1.4.1318",
+    "@reltio/mdm-sdk": "^1.4.1318",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",