react component

gistfile1.js

import React from 'react'
import prettifySize from './prettify_size'

const AttributeFilter = React.createClass({

    propTypes: {
        targetName: React.PropTypes.string.isRequired,
        items: React.PropTypes.array.isRequired,
        activeItems: React.PropTypes.arrayOf(React.PropTypes.number) || []
    },

    getInitialState() {
        return {
            checkedItems: this.props.activeItems || []
        }
    },

    render() {
        let items = this.props.items

        if (this.props.targetName == 'size') {
            items = items.sort((a, b) => a.name - b.name)
        }

        items = items.map((item, i) => {
            let label = this.props.targetName == 'size' ? prettifySize(item.name) : item.name

            return <li key={i}>
                <label className="inp-item">
                    <input checked={this._isActive(item.id)}
                           onChange={this._toggleItem.bind(null, item.id)} type="checkbox"
                           name="category"/>
                    <span>{label}</span>
                </label>
            </li>
        })

        const columns = this.props.columns ? ' columns' : ''

        return (
            <ul className={`reset inp-items${columns}`}>
                {items}
            </ul>
        )
    },

    _toggleItem(id) {
        let checkedItems = this.state.checkedItems

        let index
        if( (index = $.inArray(id, checkedItems)) !== -1 ) {
            checkedItems.splice(index, 1)
        } else {
            checkedItems.push(id)
        }

        this.setState({checkedItems}, () => {
            const e = new Event('filter.toggle')
            e.itemId = id
            e.name = this.props.targetName
            document.dispatchEvent(e)
        })
    },

    _isActive(id) {
        return this.state.checkedItems.indexOf(id) !== -1
    }
})

export default AttributeFilter