@reltio/components 1.4.1411 → 1.4.1412

package/cjs/components/activityLog/ActivityFilterButton/ActivityFilterButton.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TEntityType } from '@reltio/mdm-sdk';
+import { ActivitiesFilter } from '../types';
+declare type Props = {
+    filter: ActivitiesFilter;
+    entityType: TEntityType;
+    onChange: (value: ActivitiesFilter) => void;
+};
+declare const ActivityFilterButton: ({ filter, entityType, onChange }: Props) => JSX.Element;
+export default ActivityFilterButton;

package/cjs/components/activityLog/ActivityFilterButton/ActivityFilterButton.js

@@ -0,0 +1,63 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 classnames_1 = __importDefault(require("classnames"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
+var FilterList_1 = __importDefault(require("@material-ui/icons/FilterList"));
+var ActivityFilterEditor_1 = __importDefault(require("../ActivityFilterEditor/ActivityFilterEditor"));
+var SmallIconButton_1 = require("../../SmallIconButton");
+var styles_1 = require("./styles");
+var ActivityFilterButton = function (_a) {
+    var filter = _a.filter, entityType = _a.entityType, onChange = _a.onChange;
+    var styles = (0, styles_1.useStyles)();
+    var buttonRef = (0, react_1.useRef)();
+    var initialValue = (0, react_1.useRef)(filter);
+    var _b = (0, react_1.useState)(false), isEditorOpen = _b[0], setIsEditorOpen = _b[1];
+    var isApplied = !(0, ramda_1.equals)(filter, initialValue.current);
+    var handleChange = function (value) {
+        onChange(value);
+        setIsEditorOpen(false);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { ref: buttonRef, icon: FilterList_1.default, size: "L", onClick: function () { return setIsEditorOpen(true); }, tooltipTitle: ui_i18n_1.default.text('Filter'), className: (0, classnames_1.default)(styles.icon, { activeIcon: isApplied }) }),
+        react_1.default.createElement(ActivityFilterEditor_1.default, { value: filter, open: isEditorOpen, entityType: entityType, anchorEl: buttonRef.current, onApply: handleChange, onCancel: function () { return setIsEditorOpen(false); }, onClear: function () { return onChange(__assign({}, initialValue.current)); } })));
+};
+exports.default = ActivityFilterButton;

package/cjs/components/activityLog/ActivityFilterButton/styles.d.ts

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

package/cjs/components/activityLog/ActivityFilterButton/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
+    icon: {
+        margin: '4px',
+        '&.activeIcon': {
+            backgroundColor: (0, styles_1.fade)(theme.palette.primary.main, 0.12),
+            color: '#0072CE'
+        }
+    }
+}); });

package/cjs/components/activityLog/ActivityFilterEditor/ActivityFilterEditor.d.ts

@@ -5,9 +5,10 @@ declare type Props = {
     value: ActivitiesFilter;
     open: boolean;
     entityType?: TEntityType;
+    anchorEl?: HTMLElement;
     onApply: (value: ActivitiesFilter) => void;
     onCancel: () => void;
     onClear: () => void;
 };
-declare const ActivityFilterEditor: ({ value, open, entityType, onApply, onCancel, onClear }: Props) => JSX.Element;
+declare const ActivityFilterEditor: ({ value, open, entityType, anchorEl, onApply, onCancel, onClear }: Props) => JSX.Element;
 export default ActivityFilterEditor;

package/cjs/components/activityLog/ActivityFilterEditor/ActivityFilterEditor.js

@@ -32,6 +32,7 @@ var react_redux_1 = require("react-redux");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var Popover_1 = __importDefault(require("@material-ui/core/Popover"));
 var Divider_1 = __importDefault(require("@material-ui/core/Divider"));
 var types_1 = require("../types");
 var getSelectorActivityTypes_1 = require("./utils/getSelectorActivityTypes");
@@ -42,7 +43,7 @@ var EntityChangedSelectors_1 = __importDefault(require("./EntityChangedSelectors
 var hooks_1 = require("../../../hooks");
 var styles_1 = require("./styles");
 var ActivityFilterEditor = function (_a) {
-    var value = _a.value, open = _a.open, entityType = _a.entityType, onApply = _a.onApply, onCancel = _a.onCancel, onClear = _a.onClear;
+    var value = _a.value, open = _a.open, entityType = _a.entityType, anchorEl = _a.anchorEl, onApply = _a.onApply, onCancel = _a.onCancel, onClear = _a.onClear;
     var styles = (0, styles_1.useStyles)();
     var metadata = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getMetadata);
     var _b = (0, react_1.useState)(value), currentFilter = _b[0], setCurrentFilter = _b[1];
@@ -52,10 +53,10 @@ var ActivityFilterEditor = function (_a) {
     });
     (0, hooks_1.useDidUpdateEffect)(function () {
         setCurrentFilter(value);
-    }, [value]);
+    }, [open, value]);
     var _c = currentFilter || {}, _d = _c.activities, activities = _d === void 0 ? [] : _d, _e = _c.dateRange, dateRange = _e === void 0 ? null : _e, _f = _c.users, users = _f === void 0 ? [] : _f;
     var isEntityChangedActivity = activities.length === 1 && activities.includes(types_1.ActivityTypes.ENTITY_CHANGED);
-    return open ? (react_1.default.createElement("div", { className: styles.container },
+    return (react_1.default.createElement(Popover_1.default, { open: open, anchorEl: anchorEl, onClose: onCancel, classes: { paper: styles.container }, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' } },
         react_1.default.createElement(ActivitySelector_1.default, { activityTypes: (0, getSelectorActivityTypes_1.getSelectorActivityTypes)(metadata, entityType), selectedActivityTypes: activities, onChange: handlePropChange('activities') }),
         isEntityChangedActivity && (react_1.default.createElement(EntityChangedSelectors_1.default, { filter: currentFilter, entityType: entityType, onPropChange: handlePropChange })),
         react_1.default.createElement(Divider_1.default, { light: true, className: styles.divider }),
@@ -65,6 +66,6 @@ var ActivityFilterEditor = function (_a) {
         react_1.default.createElement("div", { className: styles.filterControls },
             react_1.default.createElement(Button_1.default, { onClick: (0, ramda_1.pipe)(clearCurrentFilter, onClear), className: styles.clearButton }, ui_i18n_1.default.text('Clear all')),
             react_1.default.createElement(Button_1.default, { onClick: onCancel }, ui_i18n_1.default.text('Cancel')),
-            react_1.default.createElement(Button_1.default, { color: "primary", onClick: function () { return onApply(currentFilter); } }, ui_i18n_1.default.text('Apply'))))) : null;
+            react_1.default.createElement(Button_1.default, { color: "primary", onClick: function () { return onApply(currentFilter); } }, ui_i18n_1.default.text('Apply')))));
 };
 exports.default = ActivityFilterEditor;

package/cjs/components/activityLog/ActivityFilterEditor/styles.js

@@ -18,8 +18,9 @@ exports.customStyles = {
 };
 exports.useStyles = (0, styles_1.makeStyles)({
     container: {
-        padding: '12px 7px 0px',
-        borderBottom: 'solid 1px rgba(0, 0, 0, 0.12)'
+        padding: 16,
+        width: 500,
+        boxSizing: 'border-box'
     },
     labels: {
         fontSize: '14px'
@@ -57,8 +58,7 @@ exports.useStyles = (0, styles_1.makeStyles)({
     },
     filterControls: {
         display: 'flex',
-        paddingTop: '30px',
-        marginBottom: 8
+        paddingTop: '30px'
     },
     clearButton: {
         marginRight: 'auto'

package/cjs/components/activityLog/ActivityLogFilter/ActivityLogFilter.js

@@ -10,51 +10,31 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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 react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var react_redux_1 = require("react-redux");
-var ActivityLogFilterHeader_1 = __importDefault(require("./ActivityLogFilterHeader"));
-var ActivityFilterEditor_1 = __importDefault(require("../ActivityFilterEditor/ActivityFilterEditor"));
-var ActivityExportButton_1 = __importDefault(require("../ActivityExportButton/ActivityExportButton"));
-var ramda_1 = require("ramda");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var ActivityExportButton_1 = __importDefault(require("../ActivityExportButton/ActivityExportButton"));
+var ActivityFilterButton_1 = __importDefault(require("../ActivityFilterButton/ActivityFilterButton"));
+var helpers_1 = require("./helpers");
+var styles_1 = require("./styles");
 var ActivityLogFilter = function (_a) {
     var value = _a.value, entityType = _a.entityType, entityUri = _a.entityUri, onChange = _a.onChange, exportTypes = _a.exportTypes;
-    var initialValue = (0, react_1.useRef)(value);
-    var isApplied = !(0, ramda_1.equals)(value, initialValue.current);
+    var styles = (0, styles_1.useStyles)();
+    var filterLabel = (0, helpers_1.getFilterLabel)(value);
     var canExport = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getCanUserMakeActivitiesExport);
-    var _b = (0, react_1.useState)(false), isEditorOpen = _b[0], setIsEditorOpen = _b[1];
-    var handleClear = function () { return onChange(__assign({}, initialValue.current)); };
-    var handleCancel = function () { return setIsEditorOpen(false); };
-    var handleToggleFilter = function () { return setIsEditorOpen(function (isEditorOpen) { return !isEditorOpen; }); };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(ActivityLogFilterHeader_1.default, { onToggle: handleToggleFilter, filters: value, isApplied: isApplied }, canExport && react_1.default.createElement(ActivityExportButton_1.default, { filters: __assign(__assign({}, value), { entityUri: entityUri }), exportTypes: exportTypes })),
-        react_1.default.createElement(ActivityFilterEditor_1.default, { value: value, open: isEditorOpen, entityType: entityType, onApply: onChange, onCancel: handleCancel, onClear: handleClear })));
+    return (react_1.default.createElement("div", { className: styles.header },
+        react_1.default.createElement(Typography_1.default, { variant: "body2", className: styles.label }, ui_i18n_1.default.text('Filter:')),
+        react_1.default.createElement(Tooltip_1.default, { title: filterLabel },
+            react_1.default.createElement(Typography_1.default, { variant: "body2", className: styles.label, color: "textSecondary", display: "block", noWrap: true }, filterLabel)),
+        react_1.default.createElement("div", { className: styles.buttonsWrapper },
+            canExport && react_1.default.createElement(ActivityExportButton_1.default, { filters: __assign(__assign({}, value), { entityUri: entityUri }), exportTypes: exportTypes }),
+            react_1.default.createElement(ActivityFilterButton_1.default, { filter: value, entityType: entityType, onChange: onChange }))));
 };
 exports.default = ActivityLogFilter;

package/cjs/components/activityLog/ActivityLogFilter/styles.d.ts

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

package/cjs/components/activityLog/ActivityLogFilter/styles.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
+exports.useStyles = (0, styles_1.makeStyles)({
     header: {
         width: 'auto',
         display: 'flex',
@@ -12,15 +12,8 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         paddingLeft: '7px',
         fontSize: '14px'
     },
-    icon: {
-        margin: '4px',
-        '&.activeIcon': {
-            backgroundColor: (0, styles_1.fade)(theme.palette.primary.main, 0.12),
-            color: '#0072CE'
-        }
-    },
     buttonsWrapper: {
         marginLeft: 'auto',
         display: 'flex'
     }
-}); });
+});

package/esm/components/activityLog/ActivityFilterButton/ActivityFilterButton.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TEntityType } from '@reltio/mdm-sdk';
+import { ActivitiesFilter } from '../types';
+declare type Props = {
+    filter: ActivitiesFilter;
+    entityType: TEntityType;
+    onChange: (value: ActivitiesFilter) => void;
+};
+declare const ActivityFilterButton: ({ filter, entityType, onChange }: Props) => JSX.Element;
+export default ActivityFilterButton;

package/esm/components/activityLog/ActivityFilterButton/ActivityFilterButton.js

@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useState, useRef } from 'react';
+import classnames from 'classnames';
+import i18n from 'ui-i18n';
+import { equals } from 'ramda';
+import FilterListIcon from '@material-ui/icons/FilterList';
+import ActivityFilterEditor from '../ActivityFilterEditor/ActivityFilterEditor';
+import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
+import { useStyles } from './styles';
+var ActivityFilterButton = function (_a) {
+    var filter = _a.filter, entityType = _a.entityType, onChange = _a.onChange;
+    var styles = useStyles();
+    var buttonRef = useRef();
+    var initialValue = useRef(filter);
+    var _b = useState(false), isEditorOpen = _b[0], setIsEditorOpen = _b[1];
+    var isApplied = !equals(filter, initialValue.current);
+    var handleChange = function (value) {
+        onChange(value);
+        setIsEditorOpen(false);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SmallIconButtonWithTooltip, { ref: buttonRef, icon: FilterListIcon, size: "L", onClick: function () { return setIsEditorOpen(true); }, tooltipTitle: i18n.text('Filter'), className: classnames(styles.icon, { activeIcon: isApplied }) }),
+        React.createElement(ActivityFilterEditor, { value: filter, open: isEditorOpen, entityType: entityType, anchorEl: buttonRef.current, onApply: handleChange, onCancel: function () { return setIsEditorOpen(false); }, onClear: function () { return onChange(__assign({}, initialValue.current)); } })));
+};
+export default ActivityFilterButton;

package/esm/components/activityLog/ActivityFilterButton/styles.d.ts

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

package/esm/components/activityLog/ActivityFilterButton/styles.js

@@ -0,0 +1,10 @@
+import { fade, makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function (theme) { return ({
+    icon: {
+        margin: '4px',
+        '&.activeIcon': {
+            backgroundColor: fade(theme.palette.primary.main, 0.12),
+            color: '#0072CE'
+        }
+    }
+}); });

package/esm/components/activityLog/ActivityFilterEditor/ActivityFilterEditor.d.ts

@@ -5,9 +5,10 @@ declare type Props = {
     value: ActivitiesFilter;
     open: boolean;
     entityType?: TEntityType;
+    anchorEl?: HTMLElement;
     onApply: (value: ActivitiesFilter) => void;
     onCancel: () => void;
     onClear: () => void;
 };
-declare const ActivityFilterEditor: ({ value, open, entityType, onApply, onCancel, onClear }: Props) => JSX.Element;
+declare const ActivityFilterEditor: ({ value, open, entityType, anchorEl, onApply, onCancel, onClear }: Props) => JSX.Element;
 export default ActivityFilterEditor;

package/esm/components/activityLog/ActivityFilterEditor/ActivityFilterEditor.js

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 import mdmModule from '@reltio/mdm-module';
 import i18n from 'ui-i18n';
 import Button from '@material-ui/core/Button';
+import Popover from '@material-ui/core/Popover';
 import Divider from '@material-ui/core/Divider';
 import { ActivityTypes } from '../types';
 import { getSelectorActivityTypes } from './utils/getSelectorActivityTypes';
@@ -14,7 +15,7 @@ import EntityChangedSelectors from './EntityChangedSelectors';
 import { useDidUpdateEffect } from '../../../hooks';
 import { useStyles } from './styles';
 var ActivityFilterEditor = function (_a) {
-    var value = _a.value, open = _a.open, entityType = _a.entityType, onApply = _a.onApply, onCancel = _a.onCancel, onClear = _a.onClear;
+    var value = _a.value, open = _a.open, entityType = _a.entityType, anchorEl = _a.anchorEl, onApply = _a.onApply, onCancel = _a.onCancel, onClear = _a.onClear;
     var styles = useStyles();
     var metadata = useSelector(mdmModule.selectors.getMetadata);
     var _b = useState(value), currentFilter = _b[0], setCurrentFilter = _b[1];
@@ -24,10 +25,10 @@ var ActivityFilterEditor = function (_a) {
     });
     useDidUpdateEffect(function () {
         setCurrentFilter(value);
-    }, [value]);
+    }, [open, value]);
     var _c = currentFilter || {}, _d = _c.activities, activities = _d === void 0 ? [] : _d, _e = _c.dateRange, dateRange = _e === void 0 ? null : _e, _f = _c.users, users = _f === void 0 ? [] : _f;
     var isEntityChangedActivity = activities.length === 1 && activities.includes(ActivityTypes.ENTITY_CHANGED);
-    return open ? (React.createElement("div", { className: styles.container },
+    return (React.createElement(Popover, { open: open, anchorEl: anchorEl, onClose: onCancel, classes: { paper: styles.container }, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' } },
         React.createElement(ActivitySelector, { activityTypes: getSelectorActivityTypes(metadata, entityType), selectedActivityTypes: activities, onChange: handlePropChange('activities') }),
         isEntityChangedActivity && (React.createElement(EntityChangedSelectors, { filter: currentFilter, entityType: entityType, onPropChange: handlePropChange })),
         React.createElement(Divider, { light: true, className: styles.divider }),
@@ -37,6 +38,6 @@ var ActivityFilterEditor = function (_a) {
         React.createElement("div", { className: styles.filterControls },
             React.createElement(Button, { onClick: pipe(clearCurrentFilter, onClear), className: styles.clearButton }, i18n.text('Clear all')),
             React.createElement(Button, { onClick: onCancel }, i18n.text('Cancel')),
-            React.createElement(Button, { color: "primary", onClick: function () { return onApply(currentFilter); } }, i18n.text('Apply'))))) : null;
+            React.createElement(Button, { color: "primary", onClick: function () { return onApply(currentFilter); } }, i18n.text('Apply')))));
 };
 export default ActivityFilterEditor;

package/esm/components/activityLog/ActivityFilterEditor/styles.js

@@ -15,8 +15,9 @@ export var customStyles = {
 };
 export var useStyles = makeStyles({
     container: {
-        padding: '12px 7px 0px',
-        borderBottom: 'solid 1px rgba(0, 0, 0, 0.12)'
+        padding: 16,
+        width: 500,
+        boxSizing: 'border-box'
     },
     labels: {
         fontSize: '14px'
@@ -54,8 +55,7 @@ export var useStyles = makeStyles({
     },
     filterControls: {
         display: 'flex',
-        paddingTop: '30px',
-        marginBottom: 8
+        paddingTop: '30px'
     },
     clearButton: {
         marginRight: 'auto'

package/esm/components/activityLog/ActivityLogFilter/ActivityLogFilter.js

@@ -9,24 +9,27 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { useRef, useState } from 'react';
+import React from 'react';
+import i18n from 'ui-i18n';
 import { useSelector } from 'react-redux';
-import ActivityLogFilterHeader from './ActivityLogFilterHeader';
-import ActivityFilterEditor from '../ActivityFilterEditor/ActivityFilterEditor';
-import ActivityExportButton from '../ActivityExportButton/ActivityExportButton';
-import { equals } from 'ramda';
 import mdmModule from '@reltio/mdm-module';
+import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
+import ActivityExportButton from '../ActivityExportButton/ActivityExportButton';
+import ActivityFilterButton from '../ActivityFilterButton/ActivityFilterButton';
+import { getFilterLabel } from './helpers';
+import { useStyles } from './styles';
 var ActivityLogFilter = function (_a) {
     var value = _a.value, entityType = _a.entityType, entityUri = _a.entityUri, onChange = _a.onChange, exportTypes = _a.exportTypes;
-    var initialValue = useRef(value);
-    var isApplied = !equals(value, initialValue.current);
+    var styles = useStyles();
+    var filterLabel = getFilterLabel(value);
     var canExport = useSelector(mdmModule.selectors.getCanUserMakeActivitiesExport);
-    var _b = useState(false), isEditorOpen = _b[0], setIsEditorOpen = _b[1];
-    var handleClear = function () { return onChange(__assign({}, initialValue.current)); };
-    var handleCancel = function () { return setIsEditorOpen(false); };
-    var handleToggleFilter = function () { return setIsEditorOpen(function (isEditorOpen) { return !isEditorOpen; }); };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(ActivityLogFilterHeader, { onToggle: handleToggleFilter, filters: value, isApplied: isApplied }, canExport && React.createElement(ActivityExportButton, { filters: __assign(__assign({}, value), { entityUri: entityUri }), exportTypes: exportTypes })),
-        React.createElement(ActivityFilterEditor, { value: value, open: isEditorOpen, entityType: entityType, onApply: onChange, onCancel: handleCancel, onClear: handleClear })));
+    return (React.createElement("div", { className: styles.header },
+        React.createElement(Typography, { variant: "body2", className: styles.label }, i18n.text('Filter:')),
+        React.createElement(Tooltip, { title: filterLabel },
+            React.createElement(Typography, { variant: "body2", className: styles.label, color: "textSecondary", display: "block", noWrap: true }, filterLabel)),
+        React.createElement("div", { className: styles.buttonsWrapper },
+            canExport && React.createElement(ActivityExportButton, { filters: __assign(__assign({}, value), { entityUri: entityUri }), exportTypes: exportTypes }),
+            React.createElement(ActivityFilterButton, { filter: value, entityType: entityType, onChange: onChange }))));
 };
 export default ActivityLogFilter;

package/esm/components/activityLog/ActivityLogFilter/styles.d.ts

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

package/esm/components/activityLog/ActivityLogFilter/styles.js

@@ -1,5 +1,5 @@
-import { fade, makeStyles } from '@material-ui/core/styles';
-export var useStyles = makeStyles(function (theme) { return ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     header: {
         width: 'auto',
         display: 'flex',
@@ -9,15 +9,8 @@ export var useStyles = makeStyles(function (theme) { return ({
         paddingLeft: '7px',
         fontSize: '14px'
     },
-    icon: {
-        margin: '4px',
-        '&.activeIcon': {
-            backgroundColor: fade(theme.palette.primary.main, 0.12),
-            color: '#0072CE'
-        }
-    },
     buttonsWrapper: {
         marginLeft: 'auto',
         display: 'flex'
     }
-}); });
+});

package/package.json

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

package/cjs/components/activityLog/ActivityLogFilter/ActivityLogFilterHeader.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { ActivitiesFilter } from '../types';
-declare type Props = {
-    onToggle: () => void;
-    filters: ActivitiesFilter;
-    children?: React.ReactNode;
-    isApplied?: boolean;
-};
-declare const ActivityLogFilterHeader: ({ children, onToggle, filters, isApplied }: Props) => JSX.Element;
-export default ActivityLogFilterHeader;

package/cjs/components/activityLog/ActivityLogFilter/ActivityLogFilterHeader.js

@@ -1,27 +0,0 @@
-"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 ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var FilterList_1 = __importDefault(require("@material-ui/icons/FilterList"));
-var helpers_1 = require("./helpers");
-var SmallIconButton_1 = require("../../SmallIconButton");
-var classnames_1 = __importDefault(require("classnames"));
-var styles_1 = require("./styles");
-var ActivityLogFilterHeader = function (_a) {
-    var children = _a.children, onToggle = _a.onToggle, filters = _a.filters, _b = _a.isApplied, isApplied = _b === void 0 ? false : _b;
-    var styles = (0, styles_1.useStyles)();
-    var filterLabel = (0, helpers_1.getFilterLabel)(filters);
-    return (react_1.default.createElement("div", { className: styles.header },
-        react_1.default.createElement(Typography_1.default, { variant: "body2", className: styles.label }, ui_i18n_1.default.text('Filter:')),
-        react_1.default.createElement(Tooltip_1.default, { title: filterLabel },
-            react_1.default.createElement(Typography_1.default, { variant: "body2", className: styles.label, color: "textSecondary", display: "block", noWrap: true }, filterLabel)),
-        react_1.default.createElement("div", { className: styles.buttonsWrapper },
-            children,
-            react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { icon: FilterList_1.default, size: "L", onClick: onToggle, tooltipTitle: ui_i18n_1.default.text('Filter'), className: (0, classnames_1.default)(styles.icon, { activeIcon: isApplied }) }))));
-};
-exports.default = ActivityLogFilterHeader;

package/esm/components/activityLog/ActivityLogFilter/ActivityLogFilterHeader.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { ActivitiesFilter } from '../types';
-declare type Props = {
-    onToggle: () => void;
-    filters: ActivitiesFilter;
-    children?: React.ReactNode;
-    isApplied?: boolean;
-};
-declare const ActivityLogFilterHeader: ({ children, onToggle, filters, isApplied }: Props) => JSX.Element;
-export default ActivityLogFilterHeader;

package/esm/components/activityLog/ActivityLogFilter/ActivityLogFilterHeader.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import i18n from 'ui-i18n';
-import Tooltip from '@material-ui/core/Tooltip';
-import Typography from '@material-ui/core/Typography';
-import FilterListIcon from '@material-ui/icons/FilterList';
-import { getFilterLabel } from './helpers';
-import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
-import classnames from 'classnames';
-import { useStyles } from './styles';
-var ActivityLogFilterHeader = function (_a) {
-    var children = _a.children, onToggle = _a.onToggle, filters = _a.filters, _b = _a.isApplied, isApplied = _b === void 0 ? false : _b;
-    var styles = useStyles();
-    var filterLabel = getFilterLabel(filters);
-    return (React.createElement("div", { className: styles.header },
-        React.createElement(Typography, { variant: "body2", className: styles.label }, i18n.text('Filter:')),
-        React.createElement(Tooltip, { title: filterLabel },
-            React.createElement(Typography, { variant: "body2", className: styles.label, color: "textSecondary", display: "block", noWrap: true }, filterLabel)),
-        React.createElement("div", { className: styles.buttonsWrapper },
-            children,
-            React.createElement(SmallIconButtonWithTooltip, { icon: FilterListIcon, size: "L", onClick: onToggle, tooltipTitle: i18n.text('Filter'), className: classnames(styles.icon, { activeIcon: isApplied }) }))));
-};
-export default ActivityLogFilterHeader;