Skip to content

Instantly share code, notes, and snippets.

@tonypee
Created April 20, 2018 07:27
Show Gist options
  • Save tonypee/f12db1446289c2843584a1af7ac26f91 to your computer and use it in GitHub Desktop.
Save tonypee/f12db1446289c2843584a1af7ac26f91 to your computer and use it in GitHub Desktop.
Declaritive Flexible Layouts
import * as React from 'react'
import * as css from 'csstips'
import { style } from 'typestyle'
import { classes } from './utils'
import { CLIENT_RENEG_LIMIT } from 'tls'
const defaultSpacing = 10
export const FlexContainer = props => {
if (!props.children) {
console.log('err')
}
return (
<div
id={props.id}
className={classes(props.className, style({ ...props.type }))}
style={{ ...{ display: 'flex' }, ...props.style }}
>
{props.children && props.children.map ? (
props.children.map((child, i) => {
const spacing = props.spacing !== undefined ? props.spacing : defaultSpacing
const boxPadding =
props.type == css.horizontal
? css.padding(0, i == props.children.length - 1 ? 0 : spacing, 0, 0)
: css.padding(0, 0, i == props.children.length - 1 ? 0 : spacing, 0)
return (
<Flex key={i} style={{ ...boxPadding }} {...(child || {}).props}>
{child}
</Flex>
)
})
) : (
<div />
)}
</div>
)
}
export const FlexContainerWrap = props => {
return <FlexContainer style={{ flexWrap: 'wrap' }}>{props.children}</FlexContainer>
}
export const Flex = props => {
return (
<div style={{ ...props.style, flex: (props.style && props.style.flex) || 1 }}>
{props.children}
</div>
)
}
export const Horizontal = props => <FlexContainer {...props} type={css.horizontal} />
export const Vertical = props => <FlexContainer {...props} type={css.vertical} />
export const MaxWidthIsland = props => (
<div
className={classes(
props.className,
style({
flexBasis: 'auto',
flexShrink: 0,
margin: '0 auto',
maxWidth: props.width || 960,
width: '100%'
})
)}
style={props.style}
>
{props.children}
</div>
)
export const CenterCenter = props => (
<div {...props} className={classes(props.className, style(css.centerCenter))} style={props.style}>
{props.children}
</div>
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment