diff options
| author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-11-07 05:56:29 +0800 |
|---|---|---|
| committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-11-07 05:56:29 +0800 |
| commit | 88c7d907fa97f7918b82df8c1759b43c28c7273b (patch) | |
| tree | 069e7a34f22ca084b3ea85011d2bc144cf7c7ea0 /packages/instant | |
| parent | e8814ecbe70b97dfa0de0f51b6a3b7e7fcd89ea2 (diff) | |
| download | dexon-sol-tools-88c7d907fa97f7918b82df8c1759b43c28c7273b.tar dexon-sol-tools-88c7d907fa97f7918b82df8c1759b43c28c7273b.tar.gz dexon-sol-tools-88c7d907fa97f7918b82df8c1759b43c28c7273b.tar.bz2 dexon-sol-tools-88c7d907fa97f7918b82df8c1759b43c28c7273b.tar.lz dexon-sol-tools-88c7d907fa97f7918b82df8c1759b43c28c7273b.tar.xz dexon-sol-tools-88c7d907fa97f7918b82df8c1759b43c28c7273b.tar.zst dexon-sol-tools-88c7d907fa97f7918b82df8c1759b43c28c7273b.zip | |
better function definiton
Diffstat (limited to 'packages/instant')
| -rw-r--r-- | packages/instant/src/components/sandbox.tsx | 2 | ||||
| -rw-r--r-- | packages/instant/src/components/zero_ex_instant_container.tsx | 3 | ||||
| -rw-r--r-- | packages/instant/src/style/media.ts | 23 |
3 files changed, 11 insertions, 17 deletions
diff --git a/packages/instant/src/components/sandbox.tsx b/packages/instant/src/components/sandbox.tsx index b574fd35c..b2c64efd3 100644 --- a/packages/instant/src/components/sandbox.tsx +++ b/packages/instant/src/components/sandbox.tsx @@ -13,5 +13,5 @@ export const Sandbox = display: block; border: 1px solid black; background-color: yellow; - ${props => stylesForMedia(props.width)} + ${props => stylesForMedia('width', props.width)} `; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index c60a9c40e..2d8c5bdb0 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -28,8 +28,7 @@ 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> */} - <Sandbox width="100px">Test</Sandbox> + <Sandbox width={{ default: '300px', sm: '5px', md: '900px' }}>Test</Sandbox> <Container zIndex={zIndex.errorPopup} position="relative"> <LatestError /> </Container> diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts index 84b85a2a8..4bcbd608f 100644 --- a/packages/instant/src/style/media.ts +++ b/packages/instant/src/style/media.ts @@ -28,22 +28,17 @@ export interface ScreenSpecifications { lg?: string; } export type MediaChoice = string | ScreenSpecifications; -// TODO: handle string too -export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => { - let res: InterpolationValue[]; +export const stylesForMedia = (cssPropertyName: string, choice: MediaChoice): InterpolationValue[] => { if (typeof choice === 'string') { - res = css` - width: ${choice}; - `; - } else { - res = css` - width: ${choice.default}; - ${choice.lg && media.large`width: ${choice.lg}`} - ${choice.md && media.medium`width: ${choice.md}`} - ${choice.sm && media.small`width: ${choice.sm}`} + return css` + ${cssPropertyName}: ${choice}; `; } - console.log(res.toString()); - return res; + return css` + ${cssPropertyName}: ${choice.default}; + ${choice.lg && media.large`${cssPropertyName}: ${choice.lg}`} + ${choice.md && media.medium`${cssPropertyName}: ${choice.md}`} + ${choice.sm && media.small`${cssPropertyName}: ${choice.sm}`} + `; }; |