path: root/packages/instant/src/components/ui/dropdown.tsx

import * as _ from 'lodash';
import { transparentize } from 'polished';
import * as React from 'react';

import { ColorOption, completelyTransparent, ThemeConsumer } 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[];
    onOpen?: () => void;
}

export interface DropdownState {
    isOpen: boolean;
}

export class Dropdown extends React.PureComponent<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;
        }
        const isOpen = !this.state.isOpen;
        this.setState({
            isOpen,
        });

        if (isOpen && this.props.onOpen) {
            this.props.onOpen();
        }
    };
    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 }) => (
    <ThemeConsumer>
        {theme => (
            <Container
                onClick={onClick}
                cursor="pointer"
                rawHoverColor={transparentize(0.9, theme[ColorOption.primaryColor])}
                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>
        )}
    </ThemeConsumer>
);

DropdownItem.displayName = 'DropdownItem';