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;
border: 1px solid black;
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 {
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>

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

@ -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}`}
`;
};