diff options
Diffstat (limited to 'packages/instant/src/components/ui/dropdown.tsx')
-rw-r--r-- | packages/instant/src/components/ui/dropdown.tsx | 147 |
1 files changed, 0 insertions, 147 deletions
diff --git a/packages/instant/src/components/ui/dropdown.tsx b/packages/instant/src/components/ui/dropdown.tsx deleted file mode 100644 index 8788d3d59..000000000 --- a/packages/instant/src/components/ui/dropdown.tsx +++ /dev/null @@ -1,147 +0,0 @@ -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'; |