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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
import { TextAlignProperty } from 'csstype';
import { darken } from 'polished';
import * as React from 'react';
import { styled } from 'ts/style/theme';
type StringOrNum = string | number;
export type ContainerTag = 'div' | 'span';
export interface ContainerProps {
children?: React.ReactNode;
margin?: string;
marginTop?: StringOrNum;
marginBottom?: StringOrNum;
marginRight?: StringOrNum;
marginLeft?: StringOrNum;
padding?: StringOrNum;
paddingTop?: StringOrNum;
paddingBottom?: StringOrNum;
paddingRight?: StringOrNum;
paddingLeft?: StringOrNum;
backgroundColor?: string;
background?: string;
border?: string;
borderTop?: string;
borderRadius?: StringOrNum;
borderBottomLeftRadius?: StringOrNum;
borderBottomRightRadius?: StringOrNum;
borderBottom?: StringOrNum;
borderColor?: string;
children?: React.ReactNode;
maxWidth?: StringOrNum;
maxHeight?: StringOrNum;
width?: StringOrNum;
height?: StringOrNum;
minWidth?: StringOrNum;
minHeight?: StringOrNum;
textAlign?: TextAlignProperty;
isHidden?: boolean;
className?: string;
position?: 'absolute' | 'fixed' | 'relative' | 'unset';
display?: 'inline-block' | 'block' | 'inline-flex' | 'inline';
top?: string;
left?: string;
right?: string;
bottom?: string;
zIndex?: number;
float?: 'right' | 'left';
Tag?: ContainerTag;
cursor?: string;
id?: string;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible';
overflowY?: 'scroll' | 'hidden' | 'auto' | 'visible';
shouldDarkenOnHover?: boolean;
hasBoxShadow?: boolean;
shouldAddBoxShadowOnHover?: boolean;
}
export const PlainContainer: React.StatelessComponent<ContainerProps> = props => {
const {
children,
className,
Tag,
isHidden,
id,
onClick,
shouldDarkenOnHover,
shouldAddBoxShadowOnHover,
hasBoxShadow,
// tslint:disable-next-line:trailing-comma
...style
} = props;
const visibility = isHidden ? 'hidden' : undefined;
return (
<Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}>
{children}
</Tag>
);
};
const BOX_SHADOW = '0px 3px 10px rgba(0, 0, 0, 0.3)';
export const Container = styled(PlainContainer)`
box-sizing: border-box;
${props => (props.hasBoxShadow ? `box-shadow: ${BOX_SHADOW}` : '')};
&:hover {
${props =>
props.shouldDarkenOnHover
? `background-color: ${props.backgroundColor ? darken(0.05, props.backgroundColor) : 'none'} !important`
: ''};
${props => (props.shouldAddBoxShadowOnHover ? `box-shadow: ${BOX_SHADOW}` : '')};
}
`;
Container.defaultProps = {
Tag: 'div',
};
Container.displayName = 'Container';
|
