@reltio/components 1.4.910 → 1.4.911

package/cjs/components/history/HistoryMenuButton/HistoryMenuButton.js

@@ -1,14 +1,59 @@
 "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 = __importDefault(require("react"));
+var react_redux_1 = require("react-redux");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var MoreVert_1 = __importDefault(require("@material-ui/icons/MoreVert"));
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
 var SmallIconButton_1 = require("../../SmallIconButton");
+var DropDownMenuButton_1 = __importDefault(require("../../DropDownMenuButton/DropDownMenuButton"));
+var MenuItemRenderer_1 = __importDefault(require("./MenuItemRenderer"));
 var styles_1 = require("./styles");
 var HistoryMenuButton = function () {
     var styles = styles_1.useStyles();
-    return react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: MoreVert_1.default, size: "XS", onClick: function () { }, className: styles.icon });
+    var mode = react_redux_1.useSelector(mdm_module_1.default.selectors.getHistoryMode);
+    var dispatch = react_redux_1.useDispatch();
+    var handleModeChange = function (selectedMode) {
+        dispatch(mdm_module_1.profile.history.actions.setHistoryMode(selectedMode));
+    };
+    var menuItems = [
+        {
+            text: ui_i18n_1.default.text('Compare to Current view'),
+            selected: mode === mdm_module_1.HistoryMode.Current,
+            onClick: function () { return handleModeChange(mdm_module_1.HistoryMode.Current); }
+        },
+        {
+            text: ui_i18n_1.default.text('Compare to Previous view'),
+            selected: mode === mdm_module_1.HistoryMode.Previous,
+            onClick: function () { return handleModeChange(mdm_module_1.HistoryMode.Previous); }
+        }
+    ];
+    return (react_1.default.createElement(DropDownMenuButton_1.default, { MenuItemRenderer: MenuItemRenderer_1.default, buttonComponent: SmallIconButton_1.SmallIconButton, buttonProps: {
+            icon: MoreVert_1.default,
+            size: 'L',
+            className: styles.icon
+        }, menuId: 'history-menu', menuItems: menuItems }));
 };
 exports.default = HistoryMenuButton;

package/cjs/components/history/HistoryMenuButton/MenuItemRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare type Item = {
+    text: string;
+    selected: boolean;
+    onClick: (e: any) => void;
+};
+declare type Props = {
+    item: Item;
+    onMenuClose?: () => void;
+};
+declare const MenuItemRenderer: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
+export default MenuItemRenderer;

package/cjs/components/history/HistoryMenuButton/MenuItemRenderer.js

@@ -0,0 +1,44 @@
+"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 MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var Check_1 = __importDefault(require("@material-ui/icons/Check"));
+var core_1 = require("../../../core");
+var styles_1 = require("./styles");
+var MenuItemRenderer = react_1.forwardRef(function (_a, ref) {
+    var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? core_1.noop : _b;
+    var styles = styles_1.useStyles();
+    var text = item.text, selected = item.selected, onClick = item.onClick;
+    var handleClick = function (e) {
+        onMenuClose();
+        onClick(e);
+    };
+    return (react_1.default.createElement(MenuItem_1.default, { classes: { root: styles.menuItem }, onClick: handleClick, ref: ref },
+        selected && react_1.default.createElement(Check_1.default, { className: styles.checkIcon }),
+        react_1.default.createElement(Typography_1.default, { classes: { root: styles.menuText } }, text)));
+});
+MenuItemRenderer.displayName = 'MenuItemRenderer';
+exports.default = MenuItemRenderer;

package/cjs/components/history/HistoryMenuButton/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "menuItem" | "menuText" | "checkIcon">;

package/cjs/components/history/HistoryMenuButton/styles.js

@@ -5,5 +5,18 @@ var styles_1 = require("@material-ui/core/styles");
 exports.useStyles = styles_1.makeStyles({
     icon: {
         margin: 5
+    },
+    menuItem: {
+        minHeight: '32px'
+    },
+    menuText: {
+        fontSize: '13px',
+        lineHeight: '15px',
+        letterSpacing: 0,
+        marginLeft: '30px'
+    },
+    checkIcon: {
+        position: 'absolute',
+        color: 'rgba(0, 0, 0, 0.54)'
     }
 });

package/esm/components/history/HistoryMenuButton/HistoryMenuButton.js

@@ -1,9 +1,35 @@
 import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import i18n from 'ui-i18n';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
+import mdmModule, { HistoryMode, profile } from '@reltio/mdm-module';
 import { SmallIconButton } from '../../SmallIconButton';
+import DropDownMenuButton from '../../DropDownMenuButton/DropDownMenuButton';
+import MenuItemRenderer from './MenuItemRenderer';
 import { useStyles } from './styles';
 var HistoryMenuButton = function () {
     var styles = useStyles();
-    return React.createElement(SmallIconButton, { icon: MoreVertIcon, size: "XS", onClick: function () { }, className: styles.icon });
+    var mode = useSelector(mdmModule.selectors.getHistoryMode);
+    var dispatch = useDispatch();
+    var handleModeChange = function (selectedMode) {
+        dispatch(profile.history.actions.setHistoryMode(selectedMode));
+    };
+    var menuItems = [
+        {
+            text: i18n.text('Compare to Current view'),
+            selected: mode === HistoryMode.Current,
+            onClick: function () { return handleModeChange(HistoryMode.Current); }
+        },
+        {
+            text: i18n.text('Compare to Previous view'),
+            selected: mode === HistoryMode.Previous,
+            onClick: function () { return handleModeChange(HistoryMode.Previous); }
+        }
+    ];
+    return (React.createElement(DropDownMenuButton, { MenuItemRenderer: MenuItemRenderer, buttonComponent: SmallIconButton, buttonProps: {
+            icon: MoreVertIcon,
+            size: 'L',
+            className: styles.icon
+        }, menuId: 'history-menu', menuItems: menuItems }));
 };
 export default HistoryMenuButton;

package/esm/components/history/HistoryMenuButton/MenuItemRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare type Item = {
+    text: string;
+    selected: boolean;
+    onClick: (e: any) => void;
+};
+declare type Props = {
+    item: Item;
+    onMenuClose?: () => void;
+};
+declare const MenuItemRenderer: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
+export default MenuItemRenderer;

package/esm/components/history/HistoryMenuButton/MenuItemRenderer.js

@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+import MenuItem from '@material-ui/core/MenuItem';
+import Typography from '@material-ui/core/Typography';
+import CheckIcon from '@material-ui/icons/Check';
+import { noop } from '../../../core';
+import { useStyles } from './styles';
+var MenuItemRenderer = forwardRef(function (_a, ref) {
+    var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? noop : _b;
+    var styles = useStyles();
+    var text = item.text, selected = item.selected, onClick = item.onClick;
+    var handleClick = function (e) {
+        onMenuClose();
+        onClick(e);
+    };
+    return (React.createElement(MenuItem, { classes: { root: styles.menuItem }, onClick: handleClick, ref: ref },
+        selected && React.createElement(CheckIcon, { className: styles.checkIcon }),
+        React.createElement(Typography, { classes: { root: styles.menuText } }, text)));
+});
+MenuItemRenderer.displayName = 'MenuItemRenderer';
+export default MenuItemRenderer;

package/esm/components/history/HistoryMenuButton/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "menuItem" | "menuText" | "checkIcon">;

package/esm/components/history/HistoryMenuButton/styles.js

@@ -2,5 +2,18 @@ import { makeStyles } from '@material-ui/core/styles';
 export var useStyles = makeStyles({
     icon: {
         margin: 5
+    },
+    menuItem: {
+        minHeight: '32px'
+    },
+    menuText: {
+        fontSize: '13px',
+        lineHeight: '15px',
+        letterSpacing: 0,
+        marginLeft: '30px'
+    },
+    checkIcon: {
+        position: 'absolute',
+        color: 'rgba(0, 0, 0, 0.54)'
     }
 });

package/package.json

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