Pronto-common-components NPM

common-components

Common components for composing complex user interfaces quickly

Components

ConfirmButton

Prompts the user before performing the onClick action, timing out after some time if not confirmed.

Props

onClick
confirm_ms (optional, default 2000)
confirm_text (optional, default "Are you sure?")
confirm_className (optional, default 'confirm')

Example

{ConfirmButton} = require 'common-components'

MyComponent = React.createClass
    doAction: ->
        alert 'this was done'

    render: ->
        <ConfirmButton onClick=@doAction confirm_text="O really?">Click me</ConfirmButton>

Dropdown

Props

onChoose
options
(optional) children
- Pass a component to be cloned for each option
(optional) selected
(optional) wrap
(optional) empty

Example

{Dropdown} = require 'common-components'

# Define a custom component for each option
ItemOption = ({option}) ->
    <div className='roll-with-option'>
        Roll with {@props.display}
    </div>

# Define a custom empty component (shown when nothing is selected)
empty = ->
    <div>Select somebody to roll with</div>

# Define option values
options = [
    'Lil Wayne',
    'Travis Scott',
    'Young Thug'
]

CustomDropdown = React.createClass
    choseOption: (option) ->
        console.log "Chose option", option

    render: ->
        <Dropdown 
            options=options
            onChoose=@choseOption
            selected=null
            empty=empty
        >
            <ItemOption>
        </Dropdown>

Overlay

Props

children
(optional) onClickBackdrop

Example

{Overlay} = require 'common-components'

ComponentInOverlay = React.createClass

    closeOverlay: ->
        console.log "Close the overlay"

    render: ->
        <Overlay onClickBackdrop=@closeOverlay >
            <div className='component'>
                Hello World
            </div>
        </Overlay>

ReloadableList

Props

loadItems: a function fetching a stream of items to fill the list
children: a component to be cloned to render each item

Example

{ReloadableList} = require 'common-components'

# Define an item view
ItemView = ({item}) ->
    <div className='item'>{item.name}</div>

# Define a function to fetch items
findAlbums = -> fetch$ 'get', '/albums.json'

# Render the list
<ReloadableList loadItems=findAlbums><ItemView /></ReloadableList>

SearchInput

Props

doSearch: a function to search based on the query in the search input
q (optional): initial query to populate the search input
focus (optional): boolean to focus the input when the component mounts
className (optional): class on the input
close (optional): function to close or clear the input

Example

{SearchInput} = require 'common-components'

# Define a function the input will use to search
doSearch = (q) -> Dispatcher.searchItems q

MySearchInput = React.createClass

    render: ->
        <SearchInput doSearch=doSearch className='my-search-input' />