Skip to content

Instantly share code, notes, and snippets.

@kurtmilam
Last active May 30, 2017 14:07
Show Gist options
  • Save kurtmilam/b6191d891a8227c4e86379a61806e492 to your computer and use it in GitHub Desktop.
Save kurtmilam/b6191d891a8227c4e86379a61806e492 to your computer and use it in GitHub Desktop.
calmm labeled text input
// 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment