diff --git a/client/src/app-components/toggle-list.js b/client/src/app-components/toggle-list.js new file mode 100644 index 00000000..6df36dbe --- /dev/null +++ b/client/src/app-components/toggle-list.js @@ -0,0 +1,52 @@ +import React from 'react'; +import _ from 'lodash'; +import classNames from 'classnames'; + +class ToggleList extends React.Component { + static propTypes = { + items: React.PropTypes.arrayOf(React.PropTypes.shape({ + content: React.PropTypes.node + })) + }; + + state = { + selected: [1, 3] + }; + + render() { + return ( +
+ {this.props.items.map(this.renderItem.bind(this))} +
+ ); + } + + renderItem(obj, index) { + + return ( +
+ {obj.content} +
+ ); + } + + getItemClass(index) { + let classes = { + 'toggle-list__item': true, + 'toggle-list__first-item': (index === 0), + 'toggle-list__selected': (_.includes(this.state.selected, index)) + }; + + return classNames(classes); + } + + selectItem(index) { + let actual = _.clone(this.state.selected); + (_.includes(this.state.selected, index)) ? (_.remove(actual, t => t == index)) : (actual.push(index)); + this.setState({ + selected: actual + }); + } +} + +export default ToggleList; diff --git a/client/src/app-components/toggle-list.scss b/client/src/app-components/toggle-list.scss new file mode 100644 index 00000000..b9d73082 --- /dev/null +++ b/client/src/app-components/toggle-list.scss @@ -0,0 +1,20 @@ +@import "../scss/vars"; + +.toggle-list { + + &__item { + border: 1px $light-grey solid; + border-left: none; + width: 120px; + height: 120px; + display: inline-block; + } + + &__selected { + background-color: $light-grey; + } + + &__first-item { + border: 1px $light-grey solid; + } +} \ No newline at end of file