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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
import * as _ from 'lodash';
import * as React from 'react';
import { ColorOption, completelyTransparent } from '../../style/theme';
import { zIndex } from '../../style/z_index';
import { Container } from './container';
import { Flex } from './flex';
import { Icon } from './icon';
import { Overlay } from './overlay';
import { Text } from './text';
export interface DropdownItemConfig {
text: string;
onClick?: () => void;
}
export interface DropdownProps {
value: string;
label?: string;
items: DropdownItemConfig[];
}
export interface DropdownState {
isOpen: boolean;
}
export class Dropdown extends React.Component<DropdownProps, DropdownState> {
public static defaultProps = {
items: [],
};
public state: DropdownState = {
isOpen: false,
};
public render(): React.ReactNode {
const { value, label, items } = this.props;
const { isOpen } = this.state;
const hasItems = !_.isEmpty(items);
const borderRadius = isOpen ? '4px 4px 0px 0px' : '4px';
return (
<React.Fragment>
{isOpen && (
<Overlay
zIndex={zIndex.dropdownItems - 1}
backgroundColor={completelyTransparent}
onClick={this._closeDropdown}
/>
)}
<Container position="relative">
<Container
cursor={hasItems ? 'pointer' : undefined}
onClick={this._handleDropdownClick}
hasBoxShadow={isOpen}
boxShadowOnHover={true}
borderRadius={borderRadius}
border="1px solid"
borderColor={ColorOption.feintGrey}
padding="0.8em"
>
<Flex justify="space-between">
<Text fontSize="16px" fontColor={ColorOption.darkGrey}>
{value}
</Text>
<Container>
{label && (
<Text fontSize="16px" fontColor={ColorOption.lightGrey}>
{label}
</Text>
)}
{hasItems && (
<Container marginLeft="5px" display="inline-block" position="relative" bottom="2px">
<Icon padding="3px" icon="chevron" width={12} stroke={ColorOption.grey} />
</Container>
)}
</Container>
</Flex>
</Container>
{isOpen && (
<Container
width="100%"
position="absolute"
onClick={this._closeDropdown}
backgroundColor={ColorOption.white}
hasBoxShadow={true}
zIndex={zIndex.dropdownItems}
>
{_.map(items, (item, index) => (
<DropdownItem key={item.text} {...item} isLast={index === items.length - 1} />
))}
</Container>
)}
</Container>
</React.Fragment>
);
}
private readonly _handleDropdownClick = (): void => {
if (_.isEmpty(this.props.items)) {
return;
}
this.setState({
isOpen: !this.state.isOpen,
});
};
private readonly _closeDropdown = (): void => {
this.setState({
isOpen: false,
});
};
}
export interface DropdownItemProps extends DropdownItemConfig {
text: string;
onClick?: () => void;
isLast: boolean;
}
export const DropdownItem: React.StatelessComponent<DropdownItemProps> = ({ text, onClick, isLast }) => (
<Container
onClick={onClick}
cursor="pointer"
darkenOnHover={true}
backgroundColor={ColorOption.white}
padding="0.8em"
borderTop="0"
border="1px solid"
borderRadius={isLast ? '0px 0px 4px 4px' : undefined}
width="100%"
borderColor={ColorOption.feintGrey}
>
<Text fontSize="14px" fontColor={ColorOption.darkGrey}>
{text}
</Text>
</Container>
);
|
