diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-11-08 12:53:25 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-11-08 12:53:25 +0800 |
commit | 4181a040b5d5ca2335556948585278133ec63bd1 (patch) | |
tree | 8174e8817d9658f0d53b1ddd61fe0552de4630ed /packages/instant/src/components | |
parent | c0d8ceca82a91a3a6c222e71ecb58f2cd95da62e (diff) | |
download | dexon-0x-contracts-4181a040b5d5ca2335556948585278133ec63bd1.tar dexon-0x-contracts-4181a040b5d5ca2335556948585278133ec63bd1.tar.gz dexon-0x-contracts-4181a040b5d5ca2335556948585278133ec63bd1.tar.bz2 dexon-0x-contracts-4181a040b5d5ca2335556948585278133ec63bd1.tar.lz dexon-0x-contracts-4181a040b5d5ca2335556948585278133ec63bd1.tar.xz dexon-0x-contracts-4181a040b5d5ca2335556948585278133ec63bd1.tar.zst dexon-0x-contracts-4181a040b5d5ca2335556948585278133ec63bd1.zip |
feat: refactor out overlay component and use it to implement click-outside
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r-- | packages/instant/src/components/ui/dropdown.tsx | 98 | ||||
-rw-r--r-- | packages/instant/src/components/ui/overlay.tsx | 28 | ||||
-rw-r--r-- | packages/instant/src/components/zero_ex_instant_overlay.tsx | 21 |
3 files changed, 83 insertions, 64 deletions
diff --git a/packages/instant/src/components/ui/dropdown.tsx b/packages/instant/src/components/ui/dropdown.tsx index 2bc552ab4..c69e89c0e 100644 --- a/packages/instant/src/components/ui/dropdown.tsx +++ b/packages/instant/src/components/ui/dropdown.tsx @@ -1,12 +1,13 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { ColorOption } from '../../style/theme'; +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 { @@ -27,12 +28,12 @@ export interface DropdownState { export class Dropdown extends React.Component<DropdownProps, DropdownState> { public static defaultProps = { items: [ - { - text: 'Item 1', - }, - { - text: 'Item 2', - }, + // { + // text: 'Item 1', + // }, + // { + // text: 'Item 2', + // }, ], }; public state: DropdownState = { @@ -44,48 +45,57 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> { const hasItems = !_.isEmpty(items); const borderRadius = isOpen ? '4px 4px 0px 0px' : '4px'; return ( - <Container position="relative"> - <Container - cursor={hasItems ? 'pointer' : undefined} - onClick={this._handleDropdownClick} - hasBoxShadow={true} - borderRadius={borderRadius} - border="1px solid" - borderColor={ColorOption.feintGrey} - padding="0.8em" - borderBottom="1px solid" - > - <Flex justify="space-between"> - <Text fontSize="16px" lineHeight="19px" fontColor={ColorOption.darkGrey}> - {value} - </Text> - <Container> - <Text fontSize="16px" lineHeight="17px" 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> + <React.Fragment> {isOpen && ( - <Container - width="100%" - position="absolute" + <Overlay + zIndex={zIndex.dropdownItems - 1} + backgroundColor={completelyTransparent} onClick={this._closeDropdown} - backgroundColor={ColorOption.white} + /> + )} + <Container position="relative"> + <Container + cursor={hasItems ? 'pointer' : undefined} + onClick={this._handleDropdownClick} hasBoxShadow={true} - zIndex={zIndex.dropdownItems} + borderRadius={borderRadius} + border="1px solid" + borderColor={ColorOption.feintGrey} + padding="0.8em" + borderBottom="1px solid" > - {_.map(items, (item, index) => ( - <DropdownItem key={item.text} {...item} isLast={index === items.length - 1} /> - ))} + <Flex justify="space-between"> + <Text fontSize="16px" lineHeight="19px" fontColor={ColorOption.darkGrey}> + {value} + </Text> + <Container> + <Text fontSize="16px" lineHeight="17px" 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> - )} - </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 => { diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx index f1706c874..64090a6b3 100644 --- a/packages/instant/src/components/ui/overlay.tsx +++ b/packages/instant/src/components/ui/overlay.tsx @@ -1,38 +1,30 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { ColorOption, overlayBlack, styled } from '../../style/theme'; - -import { Container } from './container'; -import { Flex } from './flex'; -import { Icon } from './icon'; +import { overlayBlack, styled } from '../../style/theme'; +import { zIndex } from '../../style/z_index'; export interface OverlayProps { - className?: string; - onClose?: () => void; zIndex?: number; + backgroundColor?: string; } -const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => ( - <Flex height="100vh" className={className}> - <Container position="absolute" top="0px" right="0px"> - <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" /> - </Container> - <div>{children}</div> - </Flex> -); -export const Overlay = styled(PlainOverlay)` +export const Overlay = + styled.div < + OverlayProps > + ` position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: ${props => props.zIndex} - background-color: ${overlayBlack}; + background-color: ${props => props.backgroundColor}; `; Overlay.defaultProps = { - zIndex: 100, + zIndex: zIndex.overlayDefault, + backgroundColor: overlayBlack, }; Overlay.displayName = 'Overlay'; diff --git a/packages/instant/src/components/zero_ex_instant_overlay.tsx b/packages/instant/src/components/zero_ex_instant_overlay.tsx index 3461600e1..d2b41d27f 100644 --- a/packages/instant/src/components/zero_ex_instant_overlay.tsx +++ b/packages/instant/src/components/zero_ex_instant_overlay.tsx @@ -1,5 +1,10 @@ import * as React from 'react'; +import { ColorOption, overlayBlack, styled } from '../style/theme'; + +import { Container } from './ui/container'; +import { Flex } from './ui/flex'; +import { Icon } from './ui/icon'; import { Overlay } from './ui/overlay'; import { ZeroExInstantContainer } from './zero_ex_instant_container'; import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider'; @@ -13,8 +18,20 @@ export const ZeroExInstantOverlay: React.StatelessComponent<ZeroExInstantOverlay const { onClose, zIndex, ...rest } = props; return ( <ZeroExInstantProvider {...rest}> - <Overlay onClose={onClose} zIndex={zIndex}> - <ZeroExInstantContainer /> + <Overlay zIndex={zIndex}> + <Flex height="100vh"> + <Container position="absolute" top="0px" right="0px"> + <Icon + height={18} + width={18} + color={ColorOption.white} + icon="closeX" + onClick={onClose} + padding="2em 2em" + /> + </Container> + <ZeroExInstantContainer /> + </Flex> </Overlay> </ZeroExInstantProvider> ); |