diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-11-07 06:05:49 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-11-07 06:05:49 +0800 |
commit | 006a13448fc5d79aa8f6d04ac3f471e430dcfa89 (patch) | |
tree | 8a8e3bbe73704b81529fa3ff550f3a227030d7c5 | |
parent | 88c7d907fa97f7918b82df8c1759b43c28c7273b (diff) | |
download | dexon-0x-contracts-006a13448fc5d79aa8f6d04ac3f471e430dcfa89.tar dexon-0x-contracts-006a13448fc5d79aa8f6d04ac3f471e430dcfa89.tar.gz dexon-0x-contracts-006a13448fc5d79aa8f6d04ac3f471e430dcfa89.tar.bz2 dexon-0x-contracts-006a13448fc5d79aa8f6d04ac3f471e430dcfa89.tar.lz dexon-0x-contracts-006a13448fc5d79aa8f6d04ac3f471e430dcfa89.tar.xz dexon-0x-contracts-006a13448fc5d79aa8f6d04ac3f471e430dcfa89.tar.zst dexon-0x-contracts-006a13448fc5d79aa8f6d04ac3f471e430dcfa89.zip |
new MediaChoice approach for setting conditional css properties
-rw-r--r-- | packages/instant/src/components/sandbox.tsx | 17 | ||||
-rw-r--r-- | packages/instant/src/components/ui/container.tsx | 23 | ||||
-rw-r--r-- | packages/instant/src/components/ui/flex.tsx | 23 | ||||
-rw-r--r-- | packages/instant/src/components/ui/overlay.tsx | 2 | ||||
-rw-r--r-- | packages/instant/src/components/zero_ex_instant_container.tsx | 12 | ||||
-rw-r--r-- | packages/instant/src/style/media.ts | 3 |
6 files changed, 19 insertions, 61 deletions
diff --git a/packages/instant/src/components/sandbox.tsx b/packages/instant/src/components/sandbox.tsx deleted file mode 100644 index b2c64efd3..000000000 --- a/packages/instant/src/components/sandbox.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; - -import { MediaChoice, stylesForMedia } from '../style/media'; -import { styled } from '../style/theme'; - -interface SandboxProps { - width: MediaChoice; -} -export const Sandbox = - styled.div < - SandboxProps > - ` - display: block; - border: 1px solid black; - background-color: yellow; - ${props => stylesForMedia('width', props.width)} - `; diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 36d7cf2ec..0e518be88 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import { darken } from 'polished'; -import { media } from '../../style/media'; +import { MediaChoice, stylesForMedia } from '../../style/media'; import { ColorOption, styled } from '../../style/theme'; import { cssRuleIfExists } from '../../style/util'; @@ -12,8 +12,8 @@ export interface ContainerProps { right?: string; bottom?: string; left?: string; - width?: string; - height?: string; + width?: MediaChoice; + height?: MediaChoice; maxWidth?: string; margin?: string; marginTop?: string; @@ -36,22 +36,8 @@ export interface ContainerProps { overflow?: string; darkenOnHover?: boolean; flexGrow?: string | number; - - smallWidth?: string; - smallHeight?: string; } -const mediaStyles = (props: ContainerProps) => { - if (!_.some([props.smallWidth, props.smallHeight])) { - return ''; - } - - return media.small` - width: ${props.smallWidth || props.width || 'auto'} - height: ${props.smallHeight || props.height || 'auto'} - `; -}; - // TODO Dont commit flex grow export const Container = styled.div < @@ -84,7 +70,8 @@ export const Container = ${props => cssRuleIfExists(props, 'cursor')} ${props => cssRuleIfExists(props, 'overflow')} ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; - ${props => mediaStyles(props)} + ${props => stylesForMedia('width', props.width || 'auto')} + ${props => stylesForMedia('height', props.height || 'auto')} background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')}; &:hover { diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx index f85d45e36..c3d643a79 100644 --- a/packages/instant/src/components/ui/flex.tsx +++ b/packages/instant/src/components/ui/flex.tsx @@ -1,6 +1,6 @@ import * as _ from 'lodash'; -import { media } from '../../style/media'; +import { MediaChoice, stylesForMedia } from '../../style/media'; import { ColorOption, styled } from '../../style/theme'; import { cssRuleIfExists } from '../../style/util'; @@ -9,27 +9,13 @@ export interface FlexProps { flexWrap?: 'wrap' | 'nowrap'; justify?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; align?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; - width?: string; - height?: string; + width?: MediaChoice; + height?: MediaChoice; backgroundColor?: ColorOption; inline?: boolean; flexGrow?: number | string; - - smallWidth?: string; - smallHeight?: string; } -const mediaStyles = (props: FlexProps) => { - if (!_.some([props.smallWidth, props.smallHeight])) { - return ''; - } - - return media.small` - width: ${props.smallWidth || props.width || 'auto'} - height: ${props.smallHeight || props.height || 'auto'} - `; -}; - export const Flex = styled.div < FlexProps > @@ -43,7 +29,8 @@ export const Flex = ${props => cssRuleIfExists(props, 'width')} ${props => cssRuleIfExists(props, 'height')} background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; - ${props => mediaStyles(props)} + ${props => stylesForMedia('width', props.width || 'auto')} + ${props => stylesForMedia('height', props.height || 'auto')} `; Flex.defaultProps = { diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx index 12bde1f2b..0fde995e0 100644 --- a/packages/instant/src/components/ui/overlay.tsx +++ b/packages/instant/src/components/ui/overlay.tsx @@ -18,7 +18,7 @@ const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, classN <Container position="absolute" top="0px" right="0px"> <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" /> </Container> - <Container smallWidth="100%" smallHeight="100%"> + <Container width={{ default: 'auto', sm: '100%' }} height={{ default: 'auto', sm: '100%' }}> {children} </Container> </Flex> diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 2d8c5bdb0..679ca793f 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -12,7 +12,6 @@ import { ColorOption } from '../style/theme'; import { zIndex } from '../style/z_index'; import { SlideAnimationState } from './animations/slide_animation'; -import { Sandbox } from './sandbox'; import { SlidingPanel } from './sliding_panel'; import { Container, Flex } from './ui'; @@ -27,8 +26,11 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain }; public render(): React.ReactNode { return ( - <Container width="350px" smallWidth="100%" smallHeight="100%" position="relative"> - <Sandbox width={{ default: '300px', sm: '5px', md: '900px' }}>Test</Sandbox> + <Container + width={{ default: '350px', sm: '100%' }} + height={{ default: 'auto', sm: '100%' }} + position="relative" + > <Container zIndex={zIndex.errorPopup} position="relative"> <LatestError /> </Container> @@ -39,9 +41,9 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain borderRadius="3px" hasBoxShadow={true} overflow="hidden" - smallHeight="100%" + height={{ default: 'auto', sm: '100%' }} > - <Flex direction="column" smallHeight="100%" justify="flex-start"> + <Flex direction="column" height={{ default: 'auto', sm: '100%' }} justify="flex-start"> <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} /> <SelectedAssetBuyOrderProgress /> <LatestBuyQuoteOrderDetails /> diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts index 4bcbd608f..beabbac46 100644 --- a/packages/instant/src/style/media.ts +++ b/packages/instant/src/style/media.ts @@ -14,13 +14,12 @@ const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) => } `; -export const media = { +const media = { small: generateMediaWrapper(ScreenWidths.Sm), medium: generateMediaWrapper(ScreenWidths.Md), large: generateMediaWrapper(ScreenWidths.Lg), }; -/// media helper export interface ScreenSpecifications { default: string; sm?: string; |