calmm labeled text input

labeled-text-input.js

// View the lensToLabel function in the partial.lenses playground at https://goo.gl/A0BRWa

import * as R from "ramda"
import * as L from "partial.lenses"
import * as React from "karet"
import * as U     from "karet.util"

import TextInput from "./text-input"

const uCFirst =
  U.pipe( R.toLower
        , L.modify( L.index( 0 ), R.toUpper )
        , R.join( '' )
        )

const nullEmptyStringL =
  L.iso( U.when( U.isNil, _ => '' )
       , U.when( U.isEmpty, _ => null )
       )

const lensToLabel =
  R.pipe( R.when( R.is( Array )
                , R.pipe( R.flatten
                        , R.filter( R.is( String ) )
                        , R.prepend( 'none' )
                        , R.last
                        )
                )
        , R.when( R.complement( R.is )( String )
                , _ => 'none'
                )
        , R.replace( /[\W_]+/g, ' ' )
        , R.trim
        , R.split( ' ' )
        , L.modify( L.elems, uCFirst )
        , L.join( ' ', L.elems )
        )

export default
  ( { item
    , lens = []
    , label = lensToLabel( lens )
    , placeholder = label
    , value = U.view( [ lens, nullEmptyStringL ], item )
    , ...props
    }
  ) =>
    <label className="labeled-text-input">
      <div>{ label }</div>
      <div>
        <TextInput { ...{ value
                        // , placeholder
                        , ...props
                        }
                   }
        />
      </div>
    </label>