@reltio/components 1.4.857 → 1.4.859

package/components/history/ContributorsPanel/ContributorItem.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type Props = {
+    value: string;
+    isSelected?: boolean;
+    onClick?: () => void;
+};
+declare const ContributorItem: ({ value, isSelected, onClick }: Props) => JSX.Element;
+export default ContributorItem;

package/components/history/ContributorsPanel/ContributorItem.js

@@ -0,0 +1,21 @@
+"use strict";
+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 classnames_1 = __importDefault(require("classnames"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var styles_1 = require("./styles");
+var ContributorItem = function (_a) {
+    var _b;
+    var value = _a.value, _c = _a.isSelected, isSelected = _c === void 0 ? true : _c, onClick = _a.onClick;
+    var color = mdm_sdk_1.getContributorColor(value);
+    var styles = styles_1.useContributorStyles({ color: color });
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.icon, (_b = {},
+            _b[styles.inactive] = !isSelected,
+            _b[styles.active] = isSelected,
+            _b[styles.clickable] = !!onClick,
+            _b)), onClick: onClick }));
+};
+exports.default = ContributorItem;

package/components/history/ContributorsPanel/ContributorsPanel.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare type Props = {
+    values: string[];
+    selectedValues: string[];
+    onSelectValues: (values: string[]) => void;
+    entityUri: string;
+    className?: string;
+};
+declare const ContributorsPanel: ({ values, selectedValues, entityUri, onSelectValues, className }: Props) => JSX.Element;
+export default ContributorsPanel;

package/components/history/ContributorsPanel/ContributorsPanel.js

@@ -0,0 +1,32 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+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 classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var ContributorItem_1 = __importDefault(require("./ContributorItem"));
+var styles_1 = require("./styles");
+var ContributorsPanel = function (_a) {
+    var values = _a.values, selectedValues = _a.selectedValues, entityUri = _a.entityUri, onSelectValues = _a.onSelectValues, className = _a.className;
+    var styles = styles_1.useStyles();
+    var handleClick = function (value) {
+        if (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(value)) {
+            onSelectValues(ramda_1.without([value], selectedValues));
+        }
+        else {
+            onSelectValues(__spreadArray(__spreadArray([], (selectedValues || [])), [value]));
+        }
+    };
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.root, className) },
+        react_1.default.createElement(ContributorItem_1.default, { value: entityUri }),
+        (values === null || values === void 0 ? void 0 : values.length) > 0 &&
+            values.map(function (value) { return (react_1.default.createElement(ContributorItem_1.default, { key: value, value: value, isSelected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(value), onClick: function () { return handleClick(value); } })); })));
+};
+exports.default = ContributorsPanel;

package/components/history/ContributorsPanel/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"root">;
+declare type StylesProps = {
+    color: string;
+};
+export declare const useContributorStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "active" | "inactive" | "clickable">;
+export {};

package/components/history/ContributorsPanel/styles.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContributorStyles = exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    root: {
+        flex: 1,
+        display: 'flex',
+        flexWrap: 'wrap',
+        padding: '10px 15px'
+    }
+});
+exports.useContributorStyles = styles_1.makeStyles({
+    icon: function (_a) {
+        var color = _a.color;
+        return ({
+            boxSizing: 'border-box',
+            borderWidth: 2,
+            borderStyle: 'solid',
+            borderColor: color,
+            height: 12,
+            width: 12,
+            borderRadius: 30,
+            transition: 'opacity 0.3s',
+            margin: 4
+        });
+    },
+    active: function (_a) {
+        var color = _a.color;
+        return ({
+            backgroundColor: color
+        });
+    },
+    inactive: {
+        backgroundColor: 'white'
+    },
+    clickable: {
+        cursor: 'pointer'
+    }
+});

package/components/history/HistoryView/HistoryView.d.ts

@@ -3,6 +3,8 @@ import React from 'react';
 declare type Props = {
     isLoading: boolean;
     historyWithTotal: HistoryWithTotal;
+    contributorsUris: string[];
+    entityUri: string;
 };
-declare const _default: React.MemoExoticComponent<({ isLoading, historyWithTotal }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ isLoading, historyWithTotal, contributorsUris, entityUri }: Props) => JSX.Element>;
 export default _default;

package/components/history/HistoryView/HistoryView.js

@@ -18,12 +18,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 ContributorsPanel_1 = __importDefault(require("../ContributorsPanel/ContributorsPanel"));
 var styles_1 = require("./styles");
 var HistoryView = function (_a) {
-    var isLoading = _a.isLoading, historyWithTotal = _a.historyWithTotal;
+    var isLoading = _a.isLoading, historyWithTotal = _a.historyWithTotal, contributorsUris = _a.contributorsUris, entityUri = _a.entityUri;
     var styles = styles_1.useStyles();
-    return react_1.default.createElement("div", { className: styles.root }, !isLoading && react_1.default.createElement("div", null, "total: " + (historyWithTotal === null || historyWithTotal === void 0 ? void 0 : historyWithTotal.total)));
+    var _b = react_1.useState(null), selectedUris = _b[0], setSelectedUris = _b[1];
+    react_1.useEffect(function () {
+        setSelectedUris(contributorsUris);
+    }, [contributorsUris]);
+    return (react_1.default.createElement("div", { className: styles.root },
+        react_1.default.createElement(ContributorsPanel_1.default, { values: contributorsUris, selectedValues: selectedUris, onSelectValues: setSelectedUris, entityUri: entityUri, className: styles.borderBottom }),
+        !isLoading && react_1.default.createElement("div", null, "total: " + (historyWithTotal === null || historyWithTotal === void 0 ? void 0 : historyWithTotal.total))));
 };
 exports.default = react_1.memo(HistoryView);

package/components/history/HistoryView/styles.d.ts

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

package/components/history/HistoryView/styles.js

@@ -5,5 +5,8 @@ var styles_1 = require("@material-ui/core/styles");
 exports.useStyles = styles_1.makeStyles({
     root: {
         flex: 1
+    },
+    borderBottom: {
+        borderBottom: '1px solid rgba(0, 0, 0, 0.12)'
     }
 });

package/package.json

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