2 files changed, 46 insertions, 16 deletions

diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 67122b320..836062af6 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -33,7 +33,7 @@ export class SearchBox extends React.Component {
     @observable private _open: boolean = false;
     @observable private _resultsOpen: boolean = false;
     @observable private _results: Doc[] = [];
-    @observable forceReRender: boolean = false;
+    @observable filterBoxStatus: boolean = false;
 
     @action.bound
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
@@ -243,7 +243,7 @@ export class SearchBox extends React.Component {
                         <div className="filter-form filter-div" id="header">Filter Search Results</div>
                         <div className="filter-form " id="option">
                             <div className="required-words filter-div">
-                                <ToggleBar optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} changeStatus={this.handleWordQueryChange} />
+                                <ToggleBar originalStatus={this._wordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} changeStatus={this.handleWordQueryChange} />
                             </div>
                             <div className="type-of-node filter-div">
                                <IconBar updateIcon={this.updateIcon} getIcons={this.getIcons}/>
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
index 5ede368d6..6d721b774 100644
--- a/src/client/views/search/ToggleBar.tsx
+++ b/src/client/views/search/ToggleBar.tsx
@@ -1,15 +1,14 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import { observable, action, runInAction } from 'mobx';
+import { observable, action, runInAction, computed } from 'mobx';
 import "./SearchBox.scss";
 import "./ToggleBar.scss";
 import * as anime from 'animejs';
 
 export interface ToggleBarProps {
     //false = right, true = left
-    // status: boolean;
     changeStatus(): void;
-    // changeStatus(value: boolean): void;
+    originalStatus: boolean;
     optionOne: string;
     optionTwo: string;
 }
@@ -18,21 +17,29 @@ export interface ToggleBarProps {
 @observer
 export class ToggleBar extends React.Component<ToggleBarProps>{
 
-    @observable _status: boolean = false;
-    @observable timeline: anime.AnimeTimelineInstance;
+    @observable _wordStatus: boolean = true;
+    @observable forwardTimeline: anime.AnimeTimelineInstance;
+    @observable reverseTimeline: anime.AnimeTimelineInstance;
     @observable _toggleButton: React.RefObject<HTMLDivElement>;
+    @observable _originalStatus: boolean = this.props.originalStatus;
 
     constructor(props: ToggleBarProps) {
         super(props);
         this._toggleButton = React.createRef();
-        this.timeline = anime.timeline({
+        this.forwardTimeline = anime.timeline({
             autoplay: false,
             direction: "reverse"
         });
+        this.reverseTimeline = anime.timeline({
+            autoplay: false,
+            direction: "reverse"
+        });
+
     }
 
-    componentDidMount = () => {
+    @computed get totalWidth() { return this.getTotalWidth(); }
 
+    getTotalWidth() {
         let bar = document.getElementById("toggle-bar");
         let tog = document.getElementById("toggle-button");
         let barwidth = 0;
@@ -42,23 +49,46 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
             togwidth = tog.clientWidth;
         }
         let totalWidth = (barwidth - togwidth - 10);
+        return totalWidth;
+    }
+
+    componentDidMount = () => {
 
-        this.timeline.add({
+        let totalWidth = this.totalWidth;
+
+        this.forwardTimeline.add({
             targets: this._toggleButton.current,
             loop: false,
             translateX: totalWidth,
             easing: "easeInOutQuad",
-            duration: 500
+            duration: 500,
         });
+
+        this.reverseTimeline.add({
+            targets: this._toggleButton.current,
+            loop: false,
+            translateX: -totalWidth,
+            easing: "easeInOutQuad",
+            duration: 500,
+        });
+
     }
 
     @action.bound
     onclick() {
-        // this._status = !this._status;
-        // this.props.changeStatus(this._status);
+        console.log(this._originalStatus)
+
+        if (this._originalStatus) {
+            this.forwardTimeline.play();
+            this.forwardTimeline.reverse();
+        }
+        else {
+            this.reverseTimeline.play();
+            this.reverseTimeline.reverse();
+        }
+
+        this._wordStatus = !this._wordStatus;
         this.props.changeStatus();
-        this.timeline.play();
-        this.timeline.reverse();
     }
 
     render() {
@@ -68,7 +98,7 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
                     <div className="toggle-option">{this.props.optionOne}</div>
                     <div className="toggle-option">{this.props.optionTwo}</div>
                 </div>
-                <div className="toggle-bar" id="toggle-bar">
+                <div className="toggle-bar" id="toggle-bar" style={{ flexDirection: (this._originalStatus ? "row" : "row-reverse") }}>
                     <div className="toggle-button" id="toggle-button" ref={this._toggleButton} onClick={this.onclick} />
                 </div>
             </div>