packages/website/ts/components/ui/multi_select.tsx


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

import { colors } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';

import { zIndex } from 'ts/style/z_index';

import { Container } from './container';
import { Overlay } from './overlay';
import { Text } from './text';

export interface MultiSelectItemConfig {
    value: string;
    displayText: React.ReactNode;
    onClick?: () => void;
}

export interface MultiSelectProps {
    selectedValues: string[];
    items: MultiSelectItemConfig[];
    backgroundColor?: string;
    textColor?: string;
}

export class MultiSelect extends React.Component<MultiSelectProps> {
    public static defaultProps = {
        backgroundColor: colors.white,
        textColor: colors.darkGrey,
    };
    public render(): React.ReactNode {
        const { items, backgroundColor, selectedValues } = this.props;
        return (
            <Container backgroundColor={backgroundColor} borderRadius="4px">
                {_.map(items, item => (
                    <MultiSelectItem
                        key={item.value}
                        displayText={item.displayText}
                        onClick={item.onClick}
                        isSelected={_.includes(selectedValues, item.value)}
                    />
                ))}
            </Container>
        );
    }
}

export interface MultiSelectItemProps {
    displayText: React.ReactNode;
    isSelected?: boolean;
    onClick?: () => void;
}

export const MultiSelectItem: React.StatelessComponent<MultiSelectItemProps> = ({
    displayText,
    isSelected,
    onClick,
}) => (
    <Container shouldDarkenOnHover={true} onClick={onClick}>
        <Container borderBottom="1px solid black" padding="0px 15px">
            {displayText}
        </Container>
    </Container>
);