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[]; onOpen?: () => void; } export interface DropdownState { isOpen: boolean; } export class Dropdown extends React.Component { 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 ( {isOpen && ( )} {value} {label && ( {label} )} {hasItems && ( )} {isOpen && ( {_.map(items, (item, index) => ( ))} )} ); } 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 = ({ text, onClick, isLast }) => ( {text} );