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

better function definiton

Browse Source
This commit is contained in:
Steve Klebanoff 2018-11-06 13:56:29 -08:00
parent e8814ecbe7
commit 88c7d907fa
3 changed files with 11 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,5 +13,5 @@ export const Sandbox =
display: block; display: block;
border: 1px solid black; border: 1px solid black;
background-color: yellow; background-color: yellow;
${props => stylesForMedia(props.width)} ${props => stylesForMedia('width', props.width)}
`; `;

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

@ -28,8 +28,7 @@ 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={{ default: '300px', sm: '5px', md: '900px' }}>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

@ -28,22 +28,17 @@ export interface ScreenSpecifications {
lg?: string; lg?: string;
} }
export type MediaChoice = string | ScreenSpecifications; export type MediaChoice = string | ScreenSpecifications;
// TODO: handle string too export const stylesForMedia = (cssPropertyName: string, choice: MediaChoice): InterpolationValue[] => {
export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => {
let res: InterpolationValue[];
if (typeof choice === 'string') { if (typeof choice === 'string') {
res = css` return css`
width: ${choice}; ${cssPropertyName}: ${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 css`
return res; ${cssPropertyName}: ${choice.default};
${choice.lg && media.large`${cssPropertyName}: ${choice.lg}`}
${choice.md && media.medium`${cssPropertyName}: ${choice.md}`}
${choice.sm && media.small`${cssPropertyName}: ${choice.sm}`}
`;
}; };