crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

proof of concept working

Browse Source
This commit is contained in:
Steve Klebanoff
2018-11-06 13:52:16 -08:00
parent f90486c99c
commit e8814ecbe7
3 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/instant/src/components/sandbox.tsx
View File

@@ -3,11 +3,6 @@ import * as React from 'react';
import { MediaChoice, stylesForMedia } from '../style/media'; import { MediaChoice, stylesForMedia } from '../style/media';
import { styled } from '../style/theme'; import { styled } from '../style/theme';
// export const Sandbox: React.StatelessComponent<{}> = props => {
// return <div>Hi</div>;
// };
// TODO: handle string too
interface SandboxProps { interface SandboxProps {
width: MediaChoice; width: MediaChoice;
} }

3
packages/instant/src/components/zero_ex_instant_container.tsx
View File

@@ -28,7 +28,8 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
public render(): React.ReactNode { public render(): React.ReactNode {
return ( return (
<Container width="350px" smallWidth="100%" smallHeight="100%" position="relative"> <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"> <Container zIndex={zIndex.errorPopup} position="relative">
<LatestError /> <LatestError />
</Container> </Container>

23
packages/instant/src/style/media.ts
View File

@@ -21,12 +21,29 @@ export const media = {
}; };
/// media helper /// media helper
export interface MediaChoice { export interface ScreenSpecifications {
sm: string; default: string;
sm?: string;
md?: string; md?: string;
lg?: string; lg?: string;
} }
export type MediaChoice = string | ScreenSpecifications;
// TODO: handle string too // TODO: handle string too
export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => { 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;
}; };