calmm input example

examples.js

<LabeledTextAreaInput lens="CONTACT_DETAILS"
                      formAtom={ formAtom }
                      { ...props.opportunity }
/>

<LabeledTextAreaInput lens={ [ 'path', 'to', 'CONTACT_DETAILS' ] }
                      formAtom={ formAtom }
                      validAtom={ validAtom }
                      disabled={ disabled }
/>

input-text-area-labeled.js

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

import TextAreaInput from "./input-text-area"

// the next two functions need to be moved out of this module, of course
// I use them to turn a lens into a label if no label is supplied explicitly
const uCFirst =
  U.pipe( R.toLower
        , L.modify( L.index( 0 ), R.toUpper )
        , R.join( '' )
        )

const lensToLabel =
  R.pipe( R.when( R.is( Array )
                , R.pipe( R.flatten
                        , R.filter( R.is( String ) )
                        , R.prepend( 'none' )
                        , L.get( L.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
  ( { formAtom
    , validAtom
    // formAtom and validAtom have the same structure
    , lens
    // so I can use the passed-in lens to get the value and validity
    , value = U.view( lens, formAtom )
    , isValid = U.view( lens, validAtom )
    // and I create the label from the lens if no label is supplied explicitly 
    , label = lensToLabel( lens )
    , validClass = U.ifte( isValid, 'is-valid', 'is-invalid' )
    , ...props
    }
  ) =>
    <label className={ U.cns( 'labeled-text-area-container', validClass ) }>
      <div>{ label }</div>
      <div>
        <TextAreaInput { ...{ value
                        , ...props
                        }
                   }
        />
      </div>
    </label>

input-text-area.js

import * as React from "karet"
import K, * as U  from "karet.util"

export default
  ( { value, mount, onChange, ...props } ) =>
    <textarea value={ value }
              onChange={ U.actions( U.getProps( { value } ), onChange ) }
              ref={ mount }
              className={ U.cns( 'text-area-input' ) }
              { ...props }
    />