update ViewSwitcher behavior

app/actuators/ViewSwitcher.js

@@ -1,6 +1,14 @@
 import React, { Component } from "react";
 
 export default class ViewSwitcher extends Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			active: this.props.defaultSelected || this.props.data[0].value
+		};
+	}
+
 	componentDidMount() {
 		this.switchView(this.props.defaultSelected);
 	}
@@ -14,6 +22,9 @@ export default class ViewSwitcher extends Component {
 			const el = document.querySelector("." + item.value);
 			if (el) {
 				if (element === item.value) {
+					this.setState({
+						active: item.value
+					});
 					document.querySelector("." + item.value).style.display = "block";
 				} else {
 					document.querySelector("." + item.value).style.display = "none";
@@ -23,9 +34,17 @@ export default class ViewSwitcher extends Component {
 	}
 
 	renderItems() {
-		return this.props.data.map(item => (
-			<div key={item.value} className="rbc-list-item" onClick={() => this.switchView(item.value)}>{item.label}</div>
-		));
+		return this.props.data.map((item) => {
+			let cx = "";
+
+			if (item.value === this.state.active) {
+				cx = "active";
+			}
+
+			return (
+				<div key={item.value} className={`rbc-list-item ${cx}`} onClick={() => this.switchView(item.value)}>{item.label}</div>
+			);
+		});
 	}
 
 	render() {

app/assets/css/style.css

@@ -395,6 +395,10 @@
       background-color: #fff;
       border: 1px solid #eaeaea;
       border-left: 0;
-      cursor: pointer; }
+      cursor: pointer;
+      transition: all .3s ease;
+      -webkit-transition: all .3s ease; }
+      .rbc.rbc-viewswitcher .rbc-list-container .rbc-list-item.active {
+        background-color: #f2f2f2; }
       .rbc.rbc-viewswitcher .rbc-list-container .rbc-list-item:first-child {
         border-left: 1px solid #eaeaea; }

app/assets/styles/partials/components/_viewswitcher.scss

@@ -11,6 +11,12 @@
 			border: 1px solid #eaeaea;
 			border-left: 0;
 			cursor: pointer;
+			transition: all .3s ease;
+			-webkit-transition: all .3s ease;
+
+			&.active {
+				background-color: #f2f2f2;
+			}
 
 			&:first-child {
 				border-left: 1px solid #eaeaea;