things sort of working with toggle?

1 files changed, 44 insertions, 14 deletions

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>