@reltio/components 1.4.1149 → 1.4.1152

package/cjs/components/history/HistoryFilterButton/HistoryFilterButton.d.ts

@@ -5,8 +5,7 @@ declare type Props = {
     className?: string;
     filter: HistoryFilter;
     onApplyFilter: (filter: HistoryFilter) => void;
-    onClearFilter: () => void;
     entityType: TEntityType;
 };
-declare const HistoryFilterButton: ({ className, filter, onApplyFilter, onClearFilter, entityType }: Props) => JSX.Element;
+declare const HistoryFilterButton: ({ className, filter, onApplyFilter, entityType }: Props) => JSX.Element;
 export default HistoryFilterButton;

package/cjs/components/history/HistoryFilterButton/HistoryFilterButton.js

@@ -46,27 +46,42 @@ var UserSelector_1 = __importDefault(require("../../UserSelector/UserSelector"))
 var AttributeSelector_1 = __importDefault(require("../../AttributeSelector/AttributeSelector"));
 var DateRangeSelector_1 = __importDefault(require("../DateRangeSelector/DateRangeSelector"));
 var HistoryActivitySelector_1 = __importDefault(require("../HistoryActivitySelector/HistoryActivitySelector"));
+var useHistory_1 = require("../hooks/useHistory");
 var styles_1 = require("./styles");
 var HistoryFilterButton = function (_a) {
-    var className = _a.className, filter = _a.filter, onApplyFilter = _a.onApplyFilter, onClearFilter = _a.onClearFilter, entityType = _a.entityType;
+    var className = _a.className, filter = _a.filter, onApplyFilter = _a.onApplyFilter, entityType = _a.entityType;
     var styles = styles_1.useStyles();
-    var _b = react_1.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
-    var openPopup = function (event) { return setAnchorEl(event.currentTarget); };
-    var closePopup = function () { return setAnchorEl(null); };
+    var buttonRef = react_1.useRef();
+    var _b = react_1.useState(false), isOpen = _b[0], setIsOpen = _b[1];
     var _c = react_1.useState(filter), currentValue = _c[0], setCurrentValue = _c[1];
+    var _d = currentValue || {}, _e = _d.activities, activities = _e === void 0 ? [] : _e, _f = _d.attributes, attributes = _f === void 0 ? [] : _f, _g = _d.dateRange, dateRange = _g === void 0 ? null : _g, _h = _d.users, users = _h === void 0 ? [] : _h;
+    var buttonColor = useHistory_1.isDefaultFilter(filter) ? 'inherit' : 'primary';
     react_1.useEffect(function () {
-        setCurrentValue(filter);
-    }, [filter]);
+        if (isOpen) {
+            setCurrentValue(filter);
+        }
+    }, [filter, isOpen]);
     var handlePropChange = ramda_1.curry(function (propName, value) {
         setCurrentValue(function (filterValue) {
             var _a;
             return (__assign(__assign({}, filterValue), (_a = {}, _a[propName] = value, _a)));
         });
     });
-    var _d = currentValue || {}, _e = _d.activities, activities = _e === void 0 ? [] : _e, _f = _d.attributes, attributes = _f === void 0 ? [] : _f, _g = _d.dateRange, dateRange = _g === void 0 ? null : _g, _h = _d.users, users = _h === void 0 ? [] : _h;
+    var togglePopup = react_1.useCallback(function () {
+        setIsOpen(function (open) { return !open; });
+    }, []);
+    var applyButtonHandler = react_1.useCallback(function () {
+        dateRange && filters_1.isDateRangeValid(dateRange)
+            ? onApplyFilter(currentValue)
+            : onApplyFilter(ramda_1.dissoc('dateRange', currentValue));
+        togglePopup();
+    }, [currentValue, dateRange, onApplyFilter, togglePopup]);
+    var clearAllButtonHandler = react_1.useCallback(function () {
+        setCurrentValue(__assign({}, useHistory_1.DEFAULT_HISTORY_FILTER));
+    }, []);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: FilterList_1.default, size: "L", onClick: openPopup, className: className }),
-        react_1.default.createElement(Popover_1.default, { classes: { paper: styles.popup }, open: !!anchorEl, anchorEl: anchorEl, onClose: closePopup, anchorOrigin: {
+        react_1.default.createElement(SmallIconButton_1.SmallIconButton, { ref: buttonRef, color: buttonColor, icon: FilterList_1.default, size: "L", onClick: togglePopup, className: className }),
+        react_1.default.createElement(Popover_1.default, { classes: { paper: styles.popup }, open: isOpen, anchorEl: buttonRef.current, onClose: togglePopup, anchorOrigin: {
                 vertical: 'bottom',
                 horizontal: 'right'
             }, transformOrigin: {
@@ -81,16 +96,8 @@ var HistoryFilterButton = function (_a) {
                     react_1.default.createElement(HistoryActivitySelector_1.default, { selectedHistoryActivityTypes: activities, onChange: handlePropChange('activities'), className: styles.filterItem }),
                     react_1.default.createElement(AttributeSelector_1.default, { selectedAttributes: attributes, entityType: entityType, onChange: handlePropChange('attributes'), className: styles.filterItem, title: ui_i18n_1.default.text('Attribute updated') }))),
             react_1.default.createElement("div", { className: styles.filterControls },
-                react_1.default.createElement(Button_1.default, { onClick: onClearFilter, className: styles.clearButton }, ui_i18n_1.default.text('Clear all')),
-                react_1.default.createElement(Button_1.default, { onClick: closePopup }, ui_i18n_1.default.text('Cancel')),
-                react_1.default.createElement(Button_1.default, { color: "primary", onClick: function () {
-                        if (dateRange && filters_1.isDateRangeValid(dateRange)) {
-                            onApplyFilter(currentValue);
-                        }
-                        else {
-                            onApplyFilter(ramda_1.dissoc('dateRange', currentValue));
-                        }
-                        closePopup();
-                    } }, ui_i18n_1.default.text('Apply'))))));
+                react_1.default.createElement(Button_1.default, { onClick: clearAllButtonHandler, className: styles.clearButton }, ui_i18n_1.default.text('Clear all')),
+                react_1.default.createElement(Button_1.default, { onClick: togglePopup }, ui_i18n_1.default.text('Cancel')),
+                react_1.default.createElement(Button_1.default, { color: "primary", onClick: applyButtonHandler }, ui_i18n_1.default.text('Apply'))))));
 };
 exports.default = HistoryFilterButton;

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

@@ -5,7 +5,7 @@ var styles_1 = require("@material-ui/core/styles");
 exports.useStyles = styles_1.makeStyles({
     popup: {
         width: 500,
-        height: 500,
+        minHeight: 500,
         overflowY: 'hidden',
         display: 'flex',
         flexDirection: 'column'
@@ -24,7 +24,7 @@ exports.useStyles = styles_1.makeStyles({
     },
     filterControls: {
         display: 'flex',
-        padding: '10px 12px 0',
+        padding: '10px 12px',
         borderTop: 'solid 1px rgba(0, 0, 0, 0.12)'
     },
     clearButton: {

package/cjs/components/history/HistoryHeader/HistoryHeader.d.ts

@@ -6,7 +6,6 @@ declare type Props = {
     entityType: TEntityType;
     filter: HistoryFilter;
     onApplyFilter: (value: HistoryFilter) => void;
-    onClearFilter: () => void;
 };
-declare const HistoryHeader: ({ total, entityType, filter, onApplyFilter, onClearFilter }: Props) => JSX.Element;
+declare const HistoryHeader: ({ total, entityType, filter, onApplyFilter }: Props) => JSX.Element;
 export default HistoryHeader;

package/cjs/components/history/HistoryHeader/HistoryHeader.js

@@ -13,7 +13,7 @@ var HistoryFilterButton_1 = __importDefault(require("../HistoryFilterButton/Hist
 var HistoryMenuButton_1 = __importDefault(require("../HistoryMenuButton/HistoryMenuButton"));
 var styles_1 = require("./styles");
 var HistoryHeader = function (_a) {
-    var total = _a.total, entityType = _a.entityType, filter = _a.filter, onApplyFilter = _a.onApplyFilter, onClearFilter = _a.onClearFilter;
+    var total = _a.total, entityType = _a.entityType, filter = _a.filter, onApplyFilter = _a.onApplyFilter;
     var styles = styles_1.useStyles();
     return (react_1.default.createElement("div", { className: styles.root },
         react_1.default.createElement(Typography_1.default, { variant: "h6" }, ui_i18n_1.default.text('History')),
@@ -23,7 +23,7 @@ var HistoryHeader = function (_a) {
                 ? ui_i18n_1.default.text('${count} contributing profile', { count: total })
                 : ui_i18n_1.default.text('${count} contributing profiles', { count: total })))),
         react_1.default.createElement(Spacer_1.default, null),
-        react_1.default.createElement(HistoryFilterButton_1.default, { className: styles.filterButton, entityType: entityType, filter: filter, onApplyFilter: onApplyFilter, onClearFilter: onClearFilter }),
+        react_1.default.createElement(HistoryFilterButton_1.default, { className: styles.filterButton, entityType: entityType, filter: filter, onApplyFilter: onApplyFilter }),
         react_1.default.createElement(HistoryMenuButton_1.default, null)));
 };
 exports.default = HistoryHeader;

package/cjs/components/history/hooks/useHistory.d.ts

@@ -4,6 +4,8 @@ declare type Props = {
     entity: Entity;
     enabled: boolean;
 };
+export declare const DEFAULT_HISTORY_FILTER: HistoryFilter;
+export declare const isDefaultFilter: (filter: HistoryFilter) => boolean;
 export declare const useHistory: ({ entity, enabled }: Props) => {
     isLoading: boolean;
     canLoadMore: boolean;

package/cjs/components/history/hooks/useHistory.js

@@ -16,19 +16,24 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
     return to;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useHistory = void 0;
+exports.useHistory = exports.isDefaultFilter = exports.DEFAULT_HISTORY_FILTER = void 0;
 var react_1 = require("react");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ramda_1 = require("ramda");
 var types_1 = require("../types");
 var filters_1 = require("../utils/filters");
 var hooks_1 = require("../../../hooks");
 var MAX_HISTORY_ROWS = 32;
-var DEFAULT_HISTORY_FILTER = {
+exports.DEFAULT_HISTORY_FILTER = {
     activities: [types_1.HistoryActivityType.MERGE, types_1.HistoryActivityType.UNMERGE, types_1.HistoryActivityType.UPDATE]
 };
+var isDefaultFilter = function (filter) {
+    return ramda_1.pipe(ramda_1.evolve({ activities: ramda_1.difference(exports.DEFAULT_HISTORY_FILTER.activities) }), ramda_1.reject(ramda_1.either(ramda_1.isNil, ramda_1.isEmpty)), ramda_1.isEmpty)(filter || {});
+};
+exports.isDefaultFilter = isDefaultFilter;
 var useHistory = function (_a) {
     var entity = _a.entity, enabled = _a.enabled;
-    var _b = react_1.useState(DEFAULT_HISTORY_FILTER), historyFilter = _b[0], setHistoryFilter = _b[1];
+    var _b = react_1.useState(exports.DEFAULT_HISTORY_FILTER), historyFilter = _b[0], setHistoryFilter = _b[1];
     var _c = react_1.useState(0), historyPage = _c[0], setHistoryPage = _c[1];
     var historyFilterString = react_1.useMemo(function () { return filters_1.buildHistoryFilterString(historyFilter); }, [historyFilter]);
     var _d = react_1.useState(null), historicUris = _d[0], setHistoricUris = _d[1];
@@ -102,7 +107,7 @@ var useHistory = function (_a) {
         setHistoryFilter(filter);
     }, []);
     var onClearFilter = react_1.useCallback(function () {
-        onApplyFilter(__assign({}, DEFAULT_HISTORY_FILTER));
+        onApplyFilter(__assign({}, exports.DEFAULT_HISTORY_FILTER));
     }, []);
     var onLoadMore = react_1.useCallback(function () {
         if (!canLoadMore)

package/esm/components/history/HistoryFilterButton/HistoryFilterButton.d.ts

@@ -5,8 +5,7 @@ declare type Props = {
     className?: string;
     filter: HistoryFilter;
     onApplyFilter: (filter: HistoryFilter) => void;
-    onClearFilter: () => void;
     entityType: TEntityType;
 };
-declare const HistoryFilterButton: ({ className, filter, onApplyFilter, onClearFilter, entityType }: Props) => JSX.Element;
+declare const HistoryFilterButton: ({ className, filter, onApplyFilter, entityType }: Props) => JSX.Element;
 export default HistoryFilterButton;

package/esm/components/history/HistoryFilterButton/HistoryFilterButton.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import i18n from 'ui-i18n';
 import { curry, dissoc } from 'ramda';
 import FilterListIcon from '@material-ui/icons/FilterList';
@@ -22,27 +22,42 @@ import UserSelector from '../../UserSelector/UserSelector';
 import AttributeSelector from '../../AttributeSelector/AttributeSelector';
 import DateRangeSelector from '../DateRangeSelector/DateRangeSelector';
 import HistoryActivitySelector from '../HistoryActivitySelector/HistoryActivitySelector';
+import { DEFAULT_HISTORY_FILTER, isDefaultFilter } from '../hooks/useHistory';
 import { useStyles } from './styles';
 var HistoryFilterButton = function (_a) {
-    var className = _a.className, filter = _a.filter, onApplyFilter = _a.onApplyFilter, onClearFilter = _a.onClearFilter, entityType = _a.entityType;
+    var className = _a.className, filter = _a.filter, onApplyFilter = _a.onApplyFilter, entityType = _a.entityType;
     var styles = useStyles();
-    var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
-    var openPopup = function (event) { return setAnchorEl(event.currentTarget); };
-    var closePopup = function () { return setAnchorEl(null); };
+    var buttonRef = useRef();
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
     var _c = useState(filter), currentValue = _c[0], setCurrentValue = _c[1];
+    var _d = currentValue || {}, _e = _d.activities, activities = _e === void 0 ? [] : _e, _f = _d.attributes, attributes = _f === void 0 ? [] : _f, _g = _d.dateRange, dateRange = _g === void 0 ? null : _g, _h = _d.users, users = _h === void 0 ? [] : _h;
+    var buttonColor = isDefaultFilter(filter) ? 'inherit' : 'primary';
     useEffect(function () {
-        setCurrentValue(filter);
-    }, [filter]);
+        if (isOpen) {
+            setCurrentValue(filter);
+        }
+    }, [filter, isOpen]);
     var handlePropChange = curry(function (propName, value) {
         setCurrentValue(function (filterValue) {
             var _a;
             return (__assign(__assign({}, filterValue), (_a = {}, _a[propName] = value, _a)));
         });
     });
-    var _d = currentValue || {}, _e = _d.activities, activities = _e === void 0 ? [] : _e, _f = _d.attributes, attributes = _f === void 0 ? [] : _f, _g = _d.dateRange, dateRange = _g === void 0 ? null : _g, _h = _d.users, users = _h === void 0 ? [] : _h;
+    var togglePopup = useCallback(function () {
+        setIsOpen(function (open) { return !open; });
+    }, []);
+    var applyButtonHandler = useCallback(function () {
+        dateRange && isDateRangeValid(dateRange)
+            ? onApplyFilter(currentValue)
+            : onApplyFilter(dissoc('dateRange', currentValue));
+        togglePopup();
+    }, [currentValue, dateRange, onApplyFilter, togglePopup]);
+    var clearAllButtonHandler = useCallback(function () {
+        setCurrentValue(__assign({}, DEFAULT_HISTORY_FILTER));
+    }, []);
     return (React.createElement(React.Fragment, null,
-        React.createElement(SmallIconButton, { icon: FilterListIcon, size: "L", onClick: openPopup, className: className }),
-        React.createElement(Popover, { classes: { paper: styles.popup }, open: !!anchorEl, anchorEl: anchorEl, onClose: closePopup, anchorOrigin: {
+        React.createElement(SmallIconButton, { ref: buttonRef, color: buttonColor, icon: FilterListIcon, size: "L", onClick: togglePopup, className: className }),
+        React.createElement(Popover, { classes: { paper: styles.popup }, open: isOpen, anchorEl: buttonRef.current, onClose: togglePopup, anchorOrigin: {
                 vertical: 'bottom',
                 horizontal: 'right'
             }, transformOrigin: {
@@ -57,16 +72,8 @@ var HistoryFilterButton = function (_a) {
                     React.createElement(HistoryActivitySelector, { selectedHistoryActivityTypes: activities, onChange: handlePropChange('activities'), className: styles.filterItem }),
                     React.createElement(AttributeSelector, { selectedAttributes: attributes, entityType: entityType, onChange: handlePropChange('attributes'), className: styles.filterItem, title: i18n.text('Attribute updated') }))),
             React.createElement("div", { className: styles.filterControls },
-                React.createElement(Button, { onClick: onClearFilter, className: styles.clearButton }, i18n.text('Clear all')),
-                React.createElement(Button, { onClick: closePopup }, i18n.text('Cancel')),
-                React.createElement(Button, { color: "primary", onClick: function () {
-                        if (dateRange && isDateRangeValid(dateRange)) {
-                            onApplyFilter(currentValue);
-                        }
-                        else {
-                            onApplyFilter(dissoc('dateRange', currentValue));
-                        }
-                        closePopup();
-                    } }, i18n.text('Apply'))))));
+                React.createElement(Button, { onClick: clearAllButtonHandler, className: styles.clearButton }, i18n.text('Clear all')),
+                React.createElement(Button, { onClick: togglePopup }, i18n.text('Cancel')),
+                React.createElement(Button, { color: "primary", onClick: applyButtonHandler }, i18n.text('Apply'))))));
 };
 export default HistoryFilterButton;

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

@@ -2,7 +2,7 @@ import { makeStyles } from '@material-ui/core/styles';
 export var useStyles = makeStyles({
     popup: {
         width: 500,
-        height: 500,
+        minHeight: 500,
         overflowY: 'hidden',
         display: 'flex',
         flexDirection: 'column'
@@ -21,7 +21,7 @@ export var useStyles = makeStyles({
     },
     filterControls: {
         display: 'flex',
-        padding: '10px 12px 0',
+        padding: '10px 12px',
         borderTop: 'solid 1px rgba(0, 0, 0, 0.12)'
     },
     clearButton: {

package/esm/components/history/HistoryHeader/HistoryHeader.d.ts

@@ -6,7 +6,6 @@ declare type Props = {
     entityType: TEntityType;
     filter: HistoryFilter;
     onApplyFilter: (value: HistoryFilter) => void;
-    onClearFilter: () => void;
 };
-declare const HistoryHeader: ({ total, entityType, filter, onApplyFilter, onClearFilter }: Props) => JSX.Element;
+declare const HistoryHeader: ({ total, entityType, filter, onApplyFilter }: Props) => JSX.Element;
 export default HistoryHeader;

package/esm/components/history/HistoryHeader/HistoryHeader.js

@@ -8,7 +8,7 @@ import HistoryFilterButton from '../HistoryFilterButton/HistoryFilterButton';
 import HistoryMenuButton from '../HistoryMenuButton/HistoryMenuButton';
 import { useStyles } from './styles';
 var HistoryHeader = function (_a) {
-    var total = _a.total, entityType = _a.entityType, filter = _a.filter, onApplyFilter = _a.onApplyFilter, onClearFilter = _a.onClearFilter;
+    var total = _a.total, entityType = _a.entityType, filter = _a.filter, onApplyFilter = _a.onApplyFilter;
     var styles = useStyles();
     return (React.createElement("div", { className: styles.root },
         React.createElement(Typography, { variant: "h6" }, i18n.text('History')),
@@ -18,7 +18,7 @@ var HistoryHeader = function (_a) {
                 ? i18n.text('${count} contributing profile', { count: total })
                 : i18n.text('${count} contributing profiles', { count: total })))),
         React.createElement(Spacer, null),
-        React.createElement(HistoryFilterButton, { className: styles.filterButton, entityType: entityType, filter: filter, onApplyFilter: onApplyFilter, onClearFilter: onClearFilter }),
+        React.createElement(HistoryFilterButton, { className: styles.filterButton, entityType: entityType, filter: filter, onApplyFilter: onApplyFilter }),
         React.createElement(HistoryMenuButton, null)));
 };
 export default HistoryHeader;

package/esm/components/history/hooks/useHistory.d.ts

@@ -4,6 +4,8 @@ declare type Props = {
     entity: Entity;
     enabled: boolean;
 };
+export declare const DEFAULT_HISTORY_FILTER: HistoryFilter;
+export declare const isDefaultFilter: (filter: HistoryFilter) => boolean;
 export declare const useHistory: ({ entity, enabled }: Props) => {
     isLoading: boolean;
     canLoadMore: boolean;

package/esm/components/history/hooks/useHistory.js

@@ -16,13 +16,17 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
 };
 import { useState, useMemo, useCallback, useEffect } from 'react';
 import { getHistoricUris, getHistoryWithTotal, isEmptyValue } from '@reltio/mdm-sdk';
+import { difference, either, evolve, isEmpty, isNil, pipe, reject } from 'ramda';
 import { HistoryActivityType } from '../types';
 import { buildHistoryFilterString } from '../utils/filters';
 import { useSafePromise } from '../../../hooks';
 var MAX_HISTORY_ROWS = 32;
-var DEFAULT_HISTORY_FILTER = {
+export var DEFAULT_HISTORY_FILTER = {
     activities: [HistoryActivityType.MERGE, HistoryActivityType.UNMERGE, HistoryActivityType.UPDATE]
 };
+export var isDefaultFilter = function (filter) {
+    return pipe(evolve({ activities: difference(DEFAULT_HISTORY_FILTER.activities) }), reject(either(isNil, isEmpty)), isEmpty)(filter || {});
+};
 export var useHistory = function (_a) {
     var entity = _a.entity, enabled = _a.enabled;
     var _b = useState(DEFAULT_HISTORY_FILTER), historyFilter = _b[0], setHistoryFilter = _b[1];

package/package.json

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