1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
import * as React from 'react';
import { Component, Types, View } from 'reactxp';
interface IProps {
source: string;
width?: number;
height?: number;
tintColor?: string;
tintHoverColor?: string;
disabled?: boolean;
onPress?: (event: Types.SyntheticEvent) => void;
style?: Types.StyleRuleSetRecursive<Types.ViewStyleRuleSet>;
}
interface IState {
hovered: boolean;
}
export default class ImageView extends Component<IProps, IState> {
public state = { hovered: false };
public render() {
const { source, width, height, tintColor, tintHoverColor, ...otherProps } = this.props;
const url = `../../assets/images/${source}.svg`;
let image;
const activeTintColor = (this.state.hovered && tintHoverColor) || tintColor;
if (activeTintColor) {
const maskWidth = typeof width === 'number' ? `${width}px` : 'auto';
const maskHeight = typeof height === 'number' ? `${height}px` : 'auto';
image = (
<div
style={{
WebkitMaskImage: `url('${url}')`,
WebkitMaskRepeat: 'no-repeat',
WebkitMaskSize: `${maskWidth} ${maskHeight}`,
backgroundColor: activeTintColor,
lineHeight: 0,
}}>
<img
src={url}
width={width}
height={height}
style={{
visibility: 'hidden',
}}
/>
</div>
);
} else {
image = <img src={url} width={width} height={height} />;
}
return (
<View {...otherProps} onMouseEnter={this.onHoverStart} onMouseLeave={this.onHoverEnd}>
{image}
</View>
);
}
private onHoverStart = () => {
if (!this.props.disabled) {
this.setState({ hovered: true });
}
};
private onHoverEnd = () => {
if (!this.props.disabled) {
this.setState({ hovered: false });
}
};
}
|
