blob: 3b7ea88e844eba51d42f2d3b29f024266944b6b8 (
plain)
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
|
import * as React from 'react';
import styled from 'styled-components';
export interface IImageViewProps extends IImageMaskProps {
onClick?: (event: React.MouseEvent) => void;
className?: string;
}
interface IImageMaskProps {
source: string;
width?: number;
height?: number;
disabled?: boolean;
tintColor?: string;
tintHoverColor?: string;
}
const Wrapper = styled.div({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
});
const ImageMask = styled.div((props: IImageMaskProps) => {
const maskWidth = props.width ? `${props.width}px` : 'auto';
const maskHeight = props.height ? `${props.height}px` : 'auto';
return {
maskImage: `url('${props.source}')`,
maskRepeat: 'no-repeat',
maskSize: `${maskWidth} ${maskHeight}`,
maskPosition: 'center',
lineHeight: 0,
backgroundColor: props.tintColor,
':hover': {
backgroundColor: (!props.disabled && props.tintHoverColor) || props.tintColor,
},
};
});
const HiddenImage = styled.img({ visibility: 'hidden' });
export default function ImageView(props: IImageViewProps) {
const url = `../../assets/images/${props.source}.svg`;
if (props.tintColor) {
const { source: _source, ...otherProps } = props;
return (
<ImageMask source={url} {...otherProps}>
<HiddenImage src={url} width={props.width} height={props.height} />
</ImageMask>
);
} else {
return (
<Wrapper onClick={props.onClick} className={props.className}>
<img src={url} width={props.width} height={props.height} />
</Wrapper>
);
}
}
|
