diff options
| author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-11-07 05:52:16 +0800 |
|---|---|---|
| committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-11-07 05:52:16 +0800 |
| commit | e8814ecbe70b97dfa0de0f51b6a3b7e7fcd89ea2 (patch) | |
| tree | 0e9060db27fd6b027ca94e6a0c3382b8c4010f5d | |
| parent | f90486c99c7acf95f3b95fdc73ee125dd3f9086e (diff) | |
| download | dexon-sol-tools-e8814ecbe70b97dfa0de0f51b6a3b7e7fcd89ea2.tar.gz dexon-sol-tools-e8814ecbe70b97dfa0de0f51b6a3b7e7fcd89ea2.tar.zst dexon-sol-tools-e8814ecbe70b97dfa0de0f51b6a3b7e7fcd89ea2.zip | |
proof of concept working
| -rw-r--r-- | packages/instant/src/components/sandbox.tsx | 5 | ||||
| -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, 22 insertions, 9 deletions
diff --git a/packages/instant/src/components/sandbox.tsx b/packages/instant/src/components/sandbox.tsx index 04e4c7935..b574fd35c 100644 --- a/packages/instant/src/components/sandbox.tsx +++ b/packages/instant/src/components/sandbox.tsx @@ -3,11 +3,6 @@ import * as React from 'react'; import { MediaChoice, stylesForMedia } from '../style/media'; import { styled } from '../style/theme'; -// export const Sandbox: React.StatelessComponent<{}> = props => { -// return <div>Hi</div>; -// }; - -// TODO: handle string too interface SandboxProps { width: MediaChoice; } diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 8fd4d56c3..c60a9c40e 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -28,7 +28,8 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain public render(): React.ReactNode { return ( <Container width="350px" smallWidth="100%" smallHeight="100%" position="relative"> - <Sandbox width={{ sm: '10px' }}>Test</Sandbox> + {/* <Sandbox width={{ default: '300px', sm: '5px', md: '900px' }}>Test</Sandbox> */} + <Sandbox width="100px">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 5a0cba668..84b85a2a8 100644 --- a/packages/instant/src/style/media.ts +++ b/packages/instant/src/style/media.ts @@ -21,12 +21,29 @@ export const media = { }; /// media helper -export interface MediaChoice { - sm: string; +export interface ScreenSpecifications { + default: string; + sm?: string; md?: string; lg?: string; } +export type MediaChoice = string | ScreenSpecifications; // TODO: handle string too export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => { - return media.small`width: ${choice.sm}`; + let res: 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}`} + `; + } + + console.log(res.toString()); + return res; }; |