Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import styled from 'styled-components/native';
import { space, layout, position, flexbox, SpaceProps, LayoutProps, PositionProps, FlexboxProps } from 'styled-system';
import { composeNative } from './styledSystem';
export type BoxProps = SpaceProps & LayoutProps & PositionProps & FlexboxProps;
/**
* A generic container with responsive props to control whitespace, layout, positioning and colors.
*/
export const Box = styled.View<BoxProps>(composeNative(space, layout, position, flexbox));
import styled from 'styled-components/native';
import { space, layout, position, flexbox, SpaceProps, LayoutProps, PositionProps, FlexboxProps } from 'styled-system';
import { composeNative } from './styledSystem';
export type BoxProps = SpaceProps & LayoutProps & PositionProps & FlexboxProps;
/**
* A generic container with responsive props to control whitespace, layout, positioning and colors.
*/
export const Box = styled.div<BoxProps>(
{
boxSizing: 'border-box',
minWidth: 0,
},
compose(
space,
layout,
position,
flexbox,
),
);
import { createParser, ResponsiveValue, styleFn, TLengthStyledSystem } from 'styled-system';
type StyleProps = { [prop: string]: ResponsiveValue<TLengthStyledSystem> };
const removeResponsiveProps = (props: StyleProps): StyleProps => {
const mobileProps: StyleProps = {};
Object.entries(props).forEach(([prop, value]) => {
if (Array.isArray(value)) {
const [mobileValue] = value;
if (mobileValue) {
mobileProps[prop] = mobileValue;
}
} else {
mobileProps[prop] = value;
}
});
return mobileProps;
};
const wrap = (func: styleFn) => (props: StyleProps): styleFn => {
return func(removeResponsiveProps(props));
};
export const composeNative = (...parsers: styleFn[]): styleFn => {
const config = {};
parsers.forEach(parser => {
if (!parser || !parser.config) {
return;
}
Object.assign(config, parser.config);
});
const parser = createParser(config);
return wrap(parser);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment