import * as React from 'react' ; import * as classNames from 'classnames' ; import * as enquire from 'enquire.js' ; import { Breakpoint , BreakpointMap , RowProps , RowState } from './PropsType' ; if ( typeof window !== 'undefined' ) { const matchMediaPolyfill = ( mediaQuery ) : MediaQueryList => { return { media : mediaQuery , matches : false , addListener ( ) { } , removeListener ( ) { } , } ; } ; window . matchMedia = window . matchMedia || matchMediaPolyfill ; } const responsiveArray = [ 'lg' , 'md' , 'sm' , 'xs' ] ; const responsiveMap = { xs : '(max-width: 767px)' , sm : '(min-width: 768px)' , md : '(min-width: 992px)' , lg : '(min-width: 1200px)' , } ; export default class Row extends React . PureComponent < RowProps , RowState > { static defaultProps = { spacing : 0 , } ; state : RowState = { screens : { } , } ; componentDidMount ( ) { this . getMediaScreen ( ) ; } componentWillUnmount ( ) { Object . keys ( responsiveMap ) . map ( ( screen ) => enquire . unregister ( responsiveMap [ screen ] ) ) ; } getMediaScreen ( ) { const { spacing } = this . props ; if ( typeof spacing === 'object' ) { Object . keys ( responsiveMap ) . map ( ( screen ) => enquire . register ( responsiveMap [ screen ] , { match : ( ) => { if ( typeof spacing !== 'object' ) { return ; } this . setState ( ( prevState ) => ( { screens : { ... prevState . screens , [ screen ] : true , } , } ) ) ; } , unmatch : ( ) => { if ( typeof spacing !== 'object' ) { return ; } this . setState ( ( prevState ) => ( { screens : { ... prevState . screens , [ screen ] : false , } , } ) ) ; } , destroy ( ) { } , } ) ) ; } } getSpacing ( ) { const spacing = this . props . spacing ; const screens = this . state . screens ; if ( typeof spacing === 'object' ) { for ( let i = 0 ; i <= responsiveArray . length ; i ++ ) { const breakpoint = responsiveArray [ i ] ; if ( screens [ breakpoint ] && spacing [ breakpoint ] !== undefined ) { return spacing [ breakpoint ] ; } } } return spacing ; } render ( ) { const { className , children : childrenProps , spacing : spacingProps , style , ... other } = this . props ; const styleClass = classNames ( 'Row' , className ) ; const spacing = this . getSpacing ( ) ; const halfSpacing = spacing / 2 ; const rowStyle = ( spacing as number ) > 0 ? { marginLeft : - halfSpacing , marginRight : - halfSpacing , ... style , } : style ; const children = React . Children . map ( childrenProps , ( child ) => { if ( ! React . isValidElement ( child ) ) { return ; } if ( child . props && ( spacing as number ) > 0 ) { return React . cloneElement ( child , { style : { paddingLeft : halfSpacing , paddingRight : halfSpacing , ... child . props . style , } , } ) ; } return child ; } ) ; return ( < div className = { styleClass } { ... other } style = { rowStyle } > { children } < /div>); } }