@reltio/components 1.4.1249 → 1.4.1250
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/activityLog/ActivityLogFilter/ActivityLogFilter.js +3 -1
- package/cjs/components/activityLog/ActivityLogFilter/ActivityLogFilterHeader.d.ts +2 -1
- package/cjs/components/activityLog/ActivityLogFilter/ActivityLogFilterHeader.js +3 -2
- package/cjs/components/activityLog/ActivityLogFilter/styles.js +6 -2
- package/esm/components/activityLog/ActivityLogFilter/ActivityLogFilter.js +3 -1
- package/esm/components/activityLog/ActivityLogFilter/ActivityLogFilterHeader.d.ts +2 -1
- package/esm/components/activityLog/ActivityLogFilter/ActivityLogFilterHeader.js +3 -2
- package/esm/components/activityLog/ActivityLogFilter/styles.js +7 -3
- package/package.json +3 -3
|
@@ -38,17 +38,19 @@ var react_redux_1 = require("react-redux");
|
|
|
38
38
|
var ActivityLogFilterHeader_1 = __importDefault(require("./ActivityLogFilterHeader"));
|
|
39
39
|
var ActivityFilterEditor_1 = __importDefault(require("../ActivityFilterEditor/ActivityFilterEditor"));
|
|
40
40
|
var ActivityExportButton_1 = __importDefault(require("../ActivityExportButton/ActivityExportButton"));
|
|
41
|
+
var ramda_1 = require("ramda");
|
|
41
42
|
var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
|
|
42
43
|
var ActivityLogFilter = function (_a) {
|
|
43
44
|
var value = _a.value, entityType = _a.entityType, entityUri = _a.entityUri, onChange = _a.onChange, exportTypes = _a.exportTypes;
|
|
44
45
|
var initialValue = react_1.useRef(value);
|
|
46
|
+
var isApplied = !ramda_1.equals(value, initialValue.current);
|
|
45
47
|
var canExport = react_redux_1.useSelector(mdm_module_1.default.selectors.getCanUserMakeActivitiesExport);
|
|
46
48
|
var _b = react_1.useState(false), isEditorOpen = _b[0], setIsEditorOpen = _b[1];
|
|
47
49
|
var handleClear = function () { return onChange(__assign({}, initialValue.current)); };
|
|
48
50
|
var handleCancel = function () { return setIsEditorOpen(false); };
|
|
49
51
|
var handleToggleFilter = function () { return setIsEditorOpen(function (isEditorOpen) { return !isEditorOpen; }); };
|
|
50
52
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
51
|
-
react_1.default.createElement(ActivityLogFilterHeader_1.default, { onToggle: handleToggleFilter, filters: value }, canExport && react_1.default.createElement(ActivityExportButton_1.default, { filters: __assign(__assign({}, value), { entityUri: entityUri }), exportTypes: exportTypes })),
|
|
53
|
+
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 })),
|
|
52
54
|
react_1.default.createElement(ActivityFilterEditor_1.default, { value: value, open: isEditorOpen, entityType: entityType, onApply: onChange, onCancel: handleCancel, onClear: handleClear })));
|
|
53
55
|
};
|
|
54
56
|
exports.default = ActivityLogFilter;
|
|
@@ -4,6 +4,7 @@ declare type Props = {
|
|
|
4
4
|
onToggle: () => void;
|
|
5
5
|
filters: ActivitiesFilter;
|
|
6
6
|
children?: React.ReactNode;
|
|
7
|
+
isApplied?: boolean;
|
|
7
8
|
};
|
|
8
|
-
declare const ActivityLogFilterHeader: ({ children, onToggle, filters }: Props) => JSX.Element;
|
|
9
|
+
declare const ActivityLogFilterHeader: ({ children, onToggle, filters, isApplied }: Props) => JSX.Element;
|
|
9
10
|
export default ActivityLogFilterHeader;
|
|
@@ -10,9 +10,10 @@ var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
|
|
|
10
10
|
var FilterList_1 = __importDefault(require("@material-ui/icons/FilterList"));
|
|
11
11
|
var helpers_1 = require("./helpers");
|
|
12
12
|
var SmallIconButton_1 = require("../../SmallIconButton");
|
|
13
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
13
14
|
var styles_1 = require("./styles");
|
|
14
15
|
var ActivityLogFilterHeader = function (_a) {
|
|
15
|
-
var children = _a.children, onToggle = _a.onToggle, filters = _a.filters;
|
|
16
|
+
var children = _a.children, onToggle = _a.onToggle, filters = _a.filters, _b = _a.isApplied, isApplied = _b === void 0 ? false : _b;
|
|
16
17
|
var styles = styles_1.useStyles();
|
|
17
18
|
var filterLabel = helpers_1.getFilterLabel(filters);
|
|
18
19
|
return (react_1.default.createElement("div", { className: styles.header },
|
|
@@ -21,6 +22,6 @@ var ActivityLogFilterHeader = function (_a) {
|
|
|
21
22
|
react_1.default.createElement(Typography_1.default, { variant: "body2", className: styles.label, color: "textSecondary", display: "block", noWrap: true }, filterLabel)),
|
|
22
23
|
react_1.default.createElement("div", { className: styles.buttonsWrapper },
|
|
23
24
|
children,
|
|
24
|
-
react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { icon: FilterList_1.default, size: "L", onClick: onToggle, tooltipTitle: ui_i18n_1.default.text('Filter'), className: styles.icon }))));
|
|
25
|
+
react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { icon: FilterList_1.default, size: "L", onClick: onToggle, tooltipTitle: ui_i18n_1.default.text('Filter'), className: classnames_1.default(styles.icon, { activeIcon: isApplied }) }))));
|
|
25
26
|
};
|
|
26
27
|
exports.default = ActivityLogFilterHeader;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useStyles = void 0;
|
|
4
4
|
var styles_1 = require("@material-ui/core/styles");
|
|
5
|
-
exports.useStyles = styles_1.makeStyles(function () { return ({
|
|
5
|
+
exports.useStyles = styles_1.makeStyles(function (theme) { return ({
|
|
6
6
|
header: {
|
|
7
7
|
width: 'auto',
|
|
8
8
|
display: 'flex',
|
|
@@ -13,7 +13,11 @@ exports.useStyles = styles_1.makeStyles(function () { return ({
|
|
|
13
13
|
fontSize: '14px'
|
|
14
14
|
},
|
|
15
15
|
icon: {
|
|
16
|
-
margin: '4px'
|
|
16
|
+
margin: '4px',
|
|
17
|
+
'&.activeIcon': {
|
|
18
|
+
backgroundColor: styles_1.fade(theme.palette.primary.main, 0.12),
|
|
19
|
+
color: '#0072CE'
|
|
20
|
+
}
|
|
17
21
|
},
|
|
18
22
|
buttonsWrapper: {
|
|
19
23
|
marginLeft: 'auto',
|
|
@@ -14,17 +14,19 @@ import { useSelector } from 'react-redux';
|
|
|
14
14
|
import ActivityLogFilterHeader from './ActivityLogFilterHeader';
|
|
15
15
|
import ActivityFilterEditor from '../ActivityFilterEditor/ActivityFilterEditor';
|
|
16
16
|
import ActivityExportButton from '../ActivityExportButton/ActivityExportButton';
|
|
17
|
+
import { equals } from 'ramda';
|
|
17
18
|
import mdmModule from '@reltio/mdm-module';
|
|
18
19
|
var ActivityLogFilter = function (_a) {
|
|
19
20
|
var value = _a.value, entityType = _a.entityType, entityUri = _a.entityUri, onChange = _a.onChange, exportTypes = _a.exportTypes;
|
|
20
21
|
var initialValue = useRef(value);
|
|
22
|
+
var isApplied = !equals(value, initialValue.current);
|
|
21
23
|
var canExport = useSelector(mdmModule.selectors.getCanUserMakeActivitiesExport);
|
|
22
24
|
var _b = useState(false), isEditorOpen = _b[0], setIsEditorOpen = _b[1];
|
|
23
25
|
var handleClear = function () { return onChange(__assign({}, initialValue.current)); };
|
|
24
26
|
var handleCancel = function () { return setIsEditorOpen(false); };
|
|
25
27
|
var handleToggleFilter = function () { return setIsEditorOpen(function (isEditorOpen) { return !isEditorOpen; }); };
|
|
26
28
|
return (React.createElement(React.Fragment, null,
|
|
27
|
-
React.createElement(ActivityLogFilterHeader, { onToggle: handleToggleFilter, filters: value }, canExport && React.createElement(ActivityExportButton, { filters: __assign(__assign({}, value), { entityUri: entityUri }), exportTypes: exportTypes })),
|
|
29
|
+
React.createElement(ActivityLogFilterHeader, { onToggle: handleToggleFilter, filters: value, isApplied: isApplied }, canExport && React.createElement(ActivityExportButton, { filters: __assign(__assign({}, value), { entityUri: entityUri }), exportTypes: exportTypes })),
|
|
28
30
|
React.createElement(ActivityFilterEditor, { value: value, open: isEditorOpen, entityType: entityType, onApply: onChange, onCancel: handleCancel, onClear: handleClear })));
|
|
29
31
|
};
|
|
30
32
|
export default ActivityLogFilter;
|
|
@@ -4,6 +4,7 @@ declare type Props = {
|
|
|
4
4
|
onToggle: () => void;
|
|
5
5
|
filters: ActivitiesFilter;
|
|
6
6
|
children?: React.ReactNode;
|
|
7
|
+
isApplied?: boolean;
|
|
7
8
|
};
|
|
8
|
-
declare const ActivityLogFilterHeader: ({ children, onToggle, filters }: Props) => JSX.Element;
|
|
9
|
+
declare const ActivityLogFilterHeader: ({ children, onToggle, filters, isApplied }: Props) => JSX.Element;
|
|
9
10
|
export default ActivityLogFilterHeader;
|
|
@@ -5,9 +5,10 @@ import Typography from '@material-ui/core/Typography';
|
|
|
5
5
|
import FilterListIcon from '@material-ui/icons/FilterList';
|
|
6
6
|
import { getFilterLabel } from './helpers';
|
|
7
7
|
import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
|
|
8
|
+
import classnames from 'classnames';
|
|
8
9
|
import { useStyles } from './styles';
|
|
9
10
|
var ActivityLogFilterHeader = function (_a) {
|
|
10
|
-
var children = _a.children, onToggle = _a.onToggle, filters = _a.filters;
|
|
11
|
+
var children = _a.children, onToggle = _a.onToggle, filters = _a.filters, _b = _a.isApplied, isApplied = _b === void 0 ? false : _b;
|
|
11
12
|
var styles = useStyles();
|
|
12
13
|
var filterLabel = getFilterLabel(filters);
|
|
13
14
|
return (React.createElement("div", { className: styles.header },
|
|
@@ -16,6 +17,6 @@ var ActivityLogFilterHeader = function (_a) {
|
|
|
16
17
|
React.createElement(Typography, { variant: "body2", className: styles.label, color: "textSecondary", display: "block", noWrap: true }, filterLabel)),
|
|
17
18
|
React.createElement("div", { className: styles.buttonsWrapper },
|
|
18
19
|
children,
|
|
19
|
-
React.createElement(SmallIconButtonWithTooltip, { icon: FilterListIcon, size: "L", onClick: onToggle, tooltipTitle: i18n.text('Filter'), className: styles.icon }))));
|
|
20
|
+
React.createElement(SmallIconButtonWithTooltip, { icon: FilterListIcon, size: "L", onClick: onToggle, tooltipTitle: i18n.text('Filter'), className: classnames(styles.icon, { activeIcon: isApplied }) }))));
|
|
20
21
|
};
|
|
21
22
|
export default ActivityLogFilterHeader;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { makeStyles } from '@material-ui/core/styles';
|
|
2
|
-
export var useStyles = makeStyles(function () { return ({
|
|
1
|
+
import { fade, makeStyles } from '@material-ui/core/styles';
|
|
2
|
+
export var useStyles = makeStyles(function (theme) { return ({
|
|
3
3
|
header: {
|
|
4
4
|
width: 'auto',
|
|
5
5
|
display: 'flex',
|
|
@@ -10,7 +10,11 @@ export var useStyles = makeStyles(function () { return ({
|
|
|
10
10
|
fontSize: '14px'
|
|
11
11
|
},
|
|
12
12
|
icon: {
|
|
13
|
-
margin: '4px'
|
|
13
|
+
margin: '4px',
|
|
14
|
+
'&.activeIcon': {
|
|
15
|
+
backgroundColor: fade(theme.palette.primary.main, 0.12),
|
|
16
|
+
color: '#0072CE'
|
|
17
|
+
}
|
|
14
18
|
},
|
|
15
19
|
buttonsWrapper: {
|
|
16
20
|
marginLeft: 'auto',
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@reltio/components",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.1250",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE FILE",
|
|
5
5
|
"main": "./cjs/index.js",
|
|
6
6
|
"module": "./esm/index.js",
|
|
7
7
|
"dependencies": {
|
|
8
8
|
"@date-io/moment": "^1.3.5",
|
|
9
9
|
"@react-google-maps/api": "2.7.0",
|
|
10
|
-
"@reltio/mdm-module": "^1.4.
|
|
11
|
-
"@reltio/mdm-sdk": "^1.4.
|
|
10
|
+
"@reltio/mdm-module": "^1.4.1250",
|
|
11
|
+
"@reltio/mdm-sdk": "^1.4.1250",
|
|
12
12
|
"classnames": "^2.2.5",
|
|
13
13
|
"d3-cloud": "^1.2.5",
|
|
14
14
|
"d3-geo": "^2.0.1",
|