Max Red - Created first layout and functionality of ToggleList component [skip ci]

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 (
+            <div className="toggle-list">
+                {this.props.items.map(this.renderItem.bind(this))}
+            </div>
+        );
+    }
+
+    renderItem(obj, index) {
+
+        return (
+            <div className={this.getItemClass(index)} onClick={this.selectItem.bind(this, index)} key={index}>
+                {obj.content}
+            </div>
+        );
+    }
+
+    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;

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;
+    }
+}