import * as React from 'react' ; import styled from 'styled-components' ; export interface SpaceProps { as ? : string ; children ? : React . ReactNode ; className ? : string ; inside ? : boolean ; size ? : SpaceSize | SpaceSize [ ] ; sizeBottom ? : SpaceSize ; sizeLeft ? : SpaceSize ; sizeRight ? : SpaceSize ; sizeTop ? : SpaceSize ; style ? : React . CSSProperties ; onClick ? : React . MouseEventHandler ; } export interface StyledSpaceProps { inside : boolean ; spaceSize : SpaceSize [ ] ; } export enum SpaceSize { None = 0 , XXS = 3 , XS = 6 , S = 12 , M = 15 , L = 18 , XL = 24 , XXL = 32 , XXXL = 42 } export enum PageInset { XS = 24 , S = 42 , M = 60 , L = 78 , XL = 96 } param size export function getSpace ( size ) { if ( undefined !== size ) { return size ; } return 0 ; } function expand < T > ( source ) { const values = Array . isArray ( source ) ? source : [ source ] ; switch ( values . length ) { case 1 : return [ values [ 0 ] , values [ 0 ] , values [ 0 ] , values [ 0 ] ] ; case 2 : return [ ... values , ... values ] ; case 3 : return [ ... values , values [ 1 ] ] ; case 4 : default : return values . slice ( 0 , 4 ) ; } } function merge < T > ( shorthand , top ? , right ? , bottom ? , left ? ) { const expanded = expand < T > ( shorthand ) ; return [ top === undefined ? expanded [ 0 ] : top , right === undefined ? expanded [ 1 ] : right , bottom === undefined ? expanded [ 2 ] : bottom , left === undefined ? expanded [ 3 ] : left ] ; } function calculate ( property , space ) { const values = space . map < string > ( ( value , index ) => `${ getSpace ( value ) }px` ) ; const result = `${ property }: ${ values . join ( ' ' ) };` ; return result ; } const StyledSpace = styled . div `
	box-sizing: border-box;
	${ ( props ) => calculate ( props . inside ? 'padding' : 'margin' , props . spaceSize ) };
` ; export const Space = props => { const size = merge < number > ( props . size || 0 , props . sizeTop , props . sizeRight , props . sizeBottom , props . sizeLeft ) ; return ( < StyledSpace style = { props . style } as = { props . as as any } className = { props . className } spaceSize = { size } inside = { Boolean ( props . inside ) } onClick = { props . onClick } > { props . children } < /StyledSpace>); } ;