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
|
import React, { useMemo } from 'react';
import styled from 'styled-components';
export interface IImageViewProps extends IImageMaskProps {
source: string;
onClick?: (event: React.MouseEvent) => void;
className?: string;
}
interface IImageMaskProps extends React.HTMLAttributes<HTMLElement> {
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 {
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 = props.source.startsWith('data:')
? props.source
: `../../assets/images/${props.source}.svg`;
// eslint-disable-next-line @typescript-eslint/naming-convention
const style = useMemo(() => ({ WebkitMaskImage: `url('${url}')` }), [url]);
if (props.tintColor) {
const { source: _source, ...otherProps } = props;
return (
<ImageMask style={style} {...otherProps}>
<HiddenImage src={url} width={props.width} height={props.height} />
</ImageMask>
);
} else {
const { source: _source, width, height, ...otherProps } = props;
return (
<Wrapper {...otherProps}>
<img src={url} width={width} height={height} aria-hidden={true} />
</Wrapper>
);
}
}
|
