import React, { PureComponent } from 'react'
import {
  defaultTo,
  F,
  ifElse,
  is,
  lensProp,
  over,
  pick,
  prop,
  when
} from 'ramda'
import classnames from 'classnames'
import styled from 'styled-components'

const StyledCell = styled.div`
  box-sizing: border-box;
  flex: 0 0 auto;
`
export default class Cell extends PureComponent {
  flexProperties = [
    'alignSelf',
    'flexBasis',
    'flexGrow',
    'flexShrink',
    'flex',
    'order'
  ]

  render() {
    const { breakPoint, children, columns } = this.props
    const spanOptions = over(
      lensProp('0'),
      defaultTo(columns),
      this.props.spanOptions
    )
    const span = prop(breakPoint, spanOptions)
    const cols = when(is(Object), prop('cols'))(span)
    const className = ifElse(is(Object), prop('className'), F)(span)
    const flexStyles = pick(this.flexProperties)(this.props)
    const width = `${cols / columns * 100}%`

    const cellClassName = classnames(
      { [className]: className }
    )

    return (
      <StyledCell style={{ ...flexStyles, width }} className={cellClassName}>
        {children}
      </StyledCell>
    )
  }
}

@@ -296,59 +296,13 @@
 ;%0A%60%0A
-export default class Cell extends PureComponent %7B%0A 
+const
  fle
@@ -319,18 +319,16 @@
 s = %5B%0A  
- 
- 
 'alignSe
@@ -332,18 +332,16 @@
 nSelf',%0A
-  
   'flexB
@@ -347,18 +347,16 @@
 Basis',%0A
-  
   'flexG
@@ -361,18 +361,16 @@
 xGrow',%0A
-  
   'flexS
@@ -377,18 +377,16 @@
 hrink',%0A
-  
   'flex'
@@ -393,18 +393,16 @@
 ,%0A  
- 
- 
 'order'%0A
   %5D%0A
@@ -401,28 +401,49 @@
 er'%0A
-  
 %5D%0A%0A
-  render(
+export default function Cell(props
 ) %7B%0A
-  
   co
@@ -481,26 +481,27 @@
 umns
- %7D = this.
+, ...rest%7D = 
 props%0A
-  
   co
@@ -528,18 +528,16 @@
 er(%0A    
- 
- 
 lensProp
@@ -543,18 +543,16 @@
 p('0'),%0A
-  
     defa
@@ -575,15 +575,8 @@
     
-  
-this.
 prop
@@ -591,22 +591,18 @@
 tions%0A  
-  )%0A  
+)%0A
   const 
@@ -636,26 +636,24 @@
 nOptions)%0A  
- 
- 
 const cols =
@@ -682,34 +682,32 @@
 ('cols'))(span)%0A
-  
   const classNam
@@ -757,18 +757,16 @@
 )(span)%0A
-  
   const 
@@ -783,21 +783,16 @@
  = pick(
-this.
 flexProp
@@ -803,24 +803,16 @@
 es)(
-this.props
+rest
 )%0A  
- 
- 
 cons
@@ -849,18 +849,16 @@
 100%7D%25%60%0A%0A
-  
   const 
@@ -889,18 +889,16 @@
 es(%0A    
-  
 %7B %5Bclass
@@ -922,15 +922,11 @@
 %7D%0A  
- 
- 
 )%0A%0A
-  
   re
@@ -932,18 +932,16 @@
 eturn (%0A
-  
     %3CSty
@@ -1014,18 +1014,16 @@
 %3E%0A      
-  
 %7Bchildre
@@ -1025,18 +1025,16 @@
 ildren%7D%0A
-  
     %3C/St
@@ -1049,14 +1049,8 @@
 %3E%0A  
- 
- )%0A  %7D
+)
 %0A%7D%0A

Make Cell stateless functional component