aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/ui/dropdown.tsx
blob: 3a23f456dd404f94a3c15667723bdfa39bf498ea (plain) (blame)
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>
);