Skip to content

Instantly share code, notes, and snippets.

@kurtmilam
Created June 16, 2017 18:56
Show Gist options
  • Save kurtmilam/54c3f6ecf32fc3e721c09064bb896965 to your computer and use it in GitHub Desktop.
Save kurtmilam/54c3f6ecf32fc3e721c09064bb896965 to your computer and use it in GitHub Desktop.
calmm input example
<LabeledTextAreaInput lens="CONTACT_DETAILS"
formAtom={ formAtom }
{ ...props.opportunity }
/>
<LabeledTextAreaInput lens={ [ 'path', 'to', 'CONTACT_DETAILS' ] }
formAtom={ formAtom }
validAtom={ validAtom }
disabled={ disabled }
/>
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>
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 }
/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment