A React component that allows to filter and move item between two lists.
npm install react-selectoritems (universe and selected) and a compare function as props.* universe must contain all the items that we can selected from.
* selected that contains the currently selected items.
* compare a compare function to be used while sorting items on both mentioned arrays.
item is an object to be listed by React Selector.id, a React class that instructs React Selector on how it is rendered, some eventual props to be passed while rendering, a onToggle function that is triggered when the item is activated (through ENTER or click) and a name that is used by React Selector to compare against an eventual filter query. Here's how it should look like```coffeescriptitem
item = {
id: i
renderer: Avatar # a React class
props: {url: "www.someavatarurl.com"}
name: name
onToggle: _toggleItem # a function that will be called when is activated``
}
Here's a very simple example illustrating the usage of ReactSelector to select from a list of items that consiste in an avatar and an user name.
Here you can see a more complex demo that considers the existence of more than one type of items like a special "Select All" item.
``coffeescript
React = require('react')
ReactSelector = require('react-selector')
getInitialState: ->
return {
all_user_items: @_seedItems()
selected_user_items: []
}
_toggleUserItem: (id) ->
all_user_items = []
selected_user_items = []
# if user item id is selected, remove it from the selectionid
# if user item is NOT selected, ADD it selection
@setState {
all_user_items: all_items
selected_user_items: selected_items
}
_compare: (a, b) ->
# a compare function that is used to keep items in order while listing
return 0
render: ->
React.DOM.div {},
React.createElement(ReactSelector, {
universe: @state.all_user_items
selected: @state.selected_user_items
compare: @_compare
})
```