common-components

Common components for composing complex user interfaces quickly

• Components
• Mixins
• Helpers

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' />

Mixins

Helpers

slugify

Build a slug out of a string.

hashobj

Build an md5 hash from an object. Useful for keys.

mapobj

Map a function over the keys of an object.

randomString

Returns a random string. Accepts an optional length argument, default 8.

capitalize

Capitalize the first letter of a string.