import pipe from 'ramda/src/pipe' ; import Responsive from 'react-responsive' ; import { BREAK_POINTS } from '@theme' ; function BPMath ( op ) { const BPToNumber = ( bp ) => parseInt ( bp . split ( 'px' ) [ 0 ] , 10 ) ; const numberToBP = ( n ) => `${ n }px` ; return pipe ( BPToNumber , op , numberToBP ) ; } const minMobileSize = BPMath ( ( n ) => n - 1 ) ( BREAK_POINTS . SCREEN_SM ) ; export const Desktop = ( props ) => < Responsive { ... props } minWidth = { BREAK_POINTS . SCREEN_SM } / > ; export const Mobile = ( props ) => < Responsive { ... props } maxWidth = { minMobileSize } / > ;