Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement