@reltio/components 1.4.1006 → 1.4.1009
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/SideIconPanel/SideButtonsPanel.d.ts +5 -0
- package/cjs/components/SideIconPanel/SideButtonsPanel.js +3 -2
- package/cjs/components/SideIconPanel/styles.js +2 -4
- package/esm/components/SideIconPanel/SideButtonsPanel.d.ts +5 -0
- package/esm/components/SideIconPanel/SideButtonsPanel.js +3 -2
- package/esm/components/SideIconPanel/styles.js +2 -4
- package/package.json +3 -3
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
import { VFC, ElementType } from 'react';
|
|
2
|
+
import { IconButtonProps } from '@material-ui/core/IconButton';
|
|
2
3
|
declare type Props = {
|
|
3
4
|
buttonsProps: {
|
|
4
5
|
icon: ElementType;
|
|
5
6
|
tooltipTitle: string;
|
|
6
7
|
id: number;
|
|
7
8
|
}[];
|
|
9
|
+
classes?: {
|
|
10
|
+
active?: string;
|
|
11
|
+
buttonWrapper?: string;
|
|
12
|
+
} & IconButtonProps['classes'];
|
|
8
13
|
activeIndexId: number;
|
|
9
14
|
className?: string;
|
|
10
15
|
onButtonClick: (id: number) => void;
|
|
@@ -31,12 +31,13 @@ var classnames_1 = __importDefault(require("classnames"));
|
|
|
31
31
|
var SmallIconButton_1 = require("../SmallIconButton");
|
|
32
32
|
var styles_1 = require("./styles");
|
|
33
33
|
var SideButtonsPanel = function (_a) {
|
|
34
|
-
var buttonsProps = _a.buttonsProps, activeIndexId = _a.activeIndexId, className = _a.className, onButtonClick = _a.onButtonClick;
|
|
34
|
+
var buttonsProps = _a.buttonsProps, activeIndexId = _a.activeIndexId, className = _a.className, onButtonClick = _a.onButtonClick, _b = _a.classes, classes = _b === void 0 ? {} : _b;
|
|
35
35
|
var styles = styles_1.useStyles();
|
|
36
|
+
var active = classes.active, buttonWrapper = classes.buttonWrapper, iconButtonClasses = __rest(classes, ["active", "buttonWrapper"]);
|
|
36
37
|
return (react_1.default.createElement("div", { className: classnames_1.default(styles.container, className) }, buttonsProps.map(function (_a) {
|
|
37
38
|
var _b;
|
|
38
39
|
var id = _a.id, buttonProps = __rest(_a, ["id"]);
|
|
39
|
-
return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, __assign({}, buttonProps, { size: "S", key: id, className: classnames_1.default((_b = {}, _b[styles.active] = activeIndexId === id, _b), styles.buttonWrapper), onClick: function () { return onButtonClick(id); }, "data-reltio-id": "reltio-profile-right-side-button-" + id })));
|
|
40
|
+
return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, __assign({}, buttonProps, { classes: iconButtonClasses, size: "S", key: id, className: classnames_1.default((_b = {}, _b[classnames_1.default(styles.active, active)] = activeIndexId === id, _b), styles.buttonWrapper, buttonWrapper), onClick: function () { return onButtonClick(id); }, "data-reltio-id": "reltio-profile-right-side-button-" + id })));
|
|
40
41
|
})));
|
|
41
42
|
};
|
|
42
43
|
exports.SideButtonsPanel = SideButtonsPanel;
|
|
@@ -14,6 +14,7 @@ exports.useStyles = styles_1.makeStyles(function (theme) { return ({
|
|
|
14
14
|
},
|
|
15
15
|
active: {
|
|
16
16
|
backgroundColor: styles_1.fade(theme.palette.primary.main, 0.12),
|
|
17
|
+
color: theme.palette.primary.main,
|
|
17
18
|
'&:after': {
|
|
18
19
|
content: '""',
|
|
19
20
|
position: 'absolute',
|
|
@@ -33,9 +34,6 @@ exports.useStyles = styles_1.makeStyles(function (theme) { return ({
|
|
|
33
34
|
justifyContent: 'center',
|
|
34
35
|
borderRadius: '6px',
|
|
35
36
|
margin: '2px 8px',
|
|
36
|
-
color: theme.palette.text.secondary
|
|
37
|
-
'&$active': {
|
|
38
|
-
color: theme.palette.primary.main
|
|
39
|
-
}
|
|
37
|
+
color: theme.palette.text.secondary
|
|
40
38
|
}
|
|
41
39
|
}); });
|
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
import { VFC, ElementType } from 'react';
|
|
2
|
+
import { IconButtonProps } from '@material-ui/core/IconButton';
|
|
2
3
|
declare type Props = {
|
|
3
4
|
buttonsProps: {
|
|
4
5
|
icon: ElementType;
|
|
5
6
|
tooltipTitle: string;
|
|
6
7
|
id: number;
|
|
7
8
|
}[];
|
|
9
|
+
classes?: {
|
|
10
|
+
active?: string;
|
|
11
|
+
buttonWrapper?: string;
|
|
12
|
+
} & IconButtonProps['classes'];
|
|
8
13
|
activeIndexId: number;
|
|
9
14
|
className?: string;
|
|
10
15
|
onButtonClick: (id: number) => void;
|
|
@@ -25,11 +25,12 @@ import classnames from 'classnames';
|
|
|
25
25
|
import { SmallIconButtonWithTooltip } from '../SmallIconButton';
|
|
26
26
|
import { useStyles } from './styles';
|
|
27
27
|
export var SideButtonsPanel = function (_a) {
|
|
28
|
-
var buttonsProps = _a.buttonsProps, activeIndexId = _a.activeIndexId, className = _a.className, onButtonClick = _a.onButtonClick;
|
|
28
|
+
var buttonsProps = _a.buttonsProps, activeIndexId = _a.activeIndexId, className = _a.className, onButtonClick = _a.onButtonClick, _b = _a.classes, classes = _b === void 0 ? {} : _b;
|
|
29
29
|
var styles = useStyles();
|
|
30
|
+
var active = classes.active, buttonWrapper = classes.buttonWrapper, iconButtonClasses = __rest(classes, ["active", "buttonWrapper"]);
|
|
30
31
|
return (React.createElement("div", { className: classnames(styles.container, className) }, buttonsProps.map(function (_a) {
|
|
31
32
|
var _b;
|
|
32
33
|
var id = _a.id, buttonProps = __rest(_a, ["id"]);
|
|
33
|
-
return (React.createElement(SmallIconButtonWithTooltip, __assign({}, buttonProps, { size: "S", key: id, className: classnames((_b = {}, _b[styles.active] = activeIndexId === id, _b), styles.buttonWrapper), onClick: function () { return onButtonClick(id); }, "data-reltio-id": "reltio-profile-right-side-button-" + id })));
|
|
34
|
+
return (React.createElement(SmallIconButtonWithTooltip, __assign({}, buttonProps, { classes: iconButtonClasses, size: "S", key: id, className: classnames((_b = {}, _b[classnames(styles.active, active)] = activeIndexId === id, _b), styles.buttonWrapper, buttonWrapper), onClick: function () { return onButtonClick(id); }, "data-reltio-id": "reltio-profile-right-side-button-" + id })));
|
|
34
35
|
})));
|
|
35
36
|
};
|
|
@@ -11,6 +11,7 @@ export var useStyles = makeStyles(function (theme) { return ({
|
|
|
11
11
|
},
|
|
12
12
|
active: {
|
|
13
13
|
backgroundColor: fade(theme.palette.primary.main, 0.12),
|
|
14
|
+
color: theme.palette.primary.main,
|
|
14
15
|
'&:after': {
|
|
15
16
|
content: '""',
|
|
16
17
|
position: 'absolute',
|
|
@@ -30,9 +31,6 @@ export var useStyles = makeStyles(function (theme) { return ({
|
|
|
30
31
|
justifyContent: 'center',
|
|
31
32
|
borderRadius: '6px',
|
|
32
33
|
margin: '2px 8px',
|
|
33
|
-
color: theme.palette.text.secondary
|
|
34
|
-
'&$active': {
|
|
35
|
-
color: theme.palette.primary.main
|
|
36
|
-
}
|
|
34
|
+
color: theme.palette.text.secondary
|
|
37
35
|
}
|
|
38
36
|
}); });
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@reltio/components",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.1009",
|
|
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.1009",
|
|
11
|
+
"@reltio/mdm-sdk": "^1.4.1009",
|
|
12
12
|
"classnames": "^2.2.5",
|
|
13
13
|
"d3-cloud": "^1.2.5",
|
|
14
14
|
"d3-geo": "^2.0.1",
|