blob: 93ad06aee6ded1ee0639738029aaa8e932a72298 (
plain) (
tree)
|
|
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.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 }) => (
<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>
);
DropdownItem.displayName = 'DropdownItem';
|