checkboxes working and clearing

1 files changed, 45 insertions, 18 deletions

diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
index fc1d4005e..163507ec3 100644
--- a/src/client/views/search/CheckBox.tsx
+++ b/src/client/views/search/CheckBox.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import { observable, action, runInAction } from 'mobx';
+import { observable, action, runInAction, IReactionDisposer, reaction } from 'mobx';
 import "./CheckBox.scss";
 import * as anime from 'animejs';
 
@@ -8,6 +8,8 @@ interface CheckBoxProps {
     originalStatus: boolean;
     updateStatus(newStatus: boolean): void;
     title: string;
+    parent: any;
+    numCount: number;
 }
 
 @observer
@@ -17,6 +19,7 @@ export class CheckBox extends React.Component<CheckBoxProps>{
     @observable uncheckTimeline: anime.AnimeTimelineInstance;
     @observable checkTimeline: anime.AnimeTimelineInstance;
     @observable checkRef: any;
+    @observable _resetReaction?: IReactionDisposer;
 
 
     constructor(props: CheckBoxProps) {
@@ -28,21 +31,19 @@ export class CheckBox extends React.Component<CheckBoxProps>{
             loop: false,
             autoplay: false,
             direction: "normal",
-        });this.uncheckTimeline = anime.timeline({
+        }); this.uncheckTimeline = anime.timeline({
             loop: false,
             autoplay: false,
             direction: "normal",
         });
     }
 
-    //testiing
-
     componentDidMount = () => {
         this.uncheckTimeline.add({
             targets: this.checkRef.current,
             easing: "easeInOutQuad",
             duration: 500,
-            opacity: 0 ,
+            opacity: 0,
         });
         this.checkTimeline.add({
             targets: this.checkRef.current,
@@ -52,37 +53,63 @@ export class CheckBox extends React.Component<CheckBoxProps>{
             opacity: 1
         });
 
-        if(this.props.originalStatus){
+        if (this.props.originalStatus) {
             this.checkTimeline.play();
         }
+
+        this._resetReaction = reaction(
+            () => this.props.parent.resetBoolean,
+            () => {
+                if (this.props.parent.resetBoolean) {
+                    runInAction(() => {
+                        this.reset();
+                        this.props.parent.resetCounter++;
+                        if (this.props.parent.resetCounter === this.props.numCount) {
+                            this.props.parent.resetCounter = 0;
+                            this.props.parent.resetCounter = false;
+                        }
+                    })
+                }
+            },
+        )
     }
 
     @action.bound
-    onClick = () => {
-        this.props.updateStatus(!this._status);
+    reset() {
+        if (!this._status) {
+            this._status = true;
+            this.checkTimeline.play();
+            this.checkTimeline.restart();
+        }
 
-        if(this._status){
+    }
+
+    @action.bound
+    onClick = () => {
+        if (this._status) {
             this.uncheckTimeline.play();
             this.uncheckTimeline.restart();
         }
-        else{
+        else {
             this.checkTimeline.play();
             this.checkTimeline.restart();
 
         }
         this._status = !this._status;
+        this.props.updateStatus(this._status);
+
     }
 
     render() {
         return (
-            <div className="checkbox" onClick = {this.onClick}>
-            <div className = "outer">
-                <div className="check-container">
-                    <svg viewBox="0 12 40 40">
-                        <path ref = {this.checkRef} className="checkmark" d="M14.1 27.2l7.1 7.2 16.7-18" />
-                    </svg>
-                </div>
-                <div className="check-box"/>
+            <div className="checkbox" onClick={this.onClick}>
+                <div className="outer">
+                    <div className="check-container">
+                        <svg viewBox="0 12 40 40">
+                            <path ref={this.checkRef} className="checkmark" d="M14.1 27.2l7.1 7.2 16.7-18" />
+                        </svg>
+                    </div>
+                    <div className="check-box" />
                 </div>
                 <div className="checkbox-title">{this.props.title}</div>
             </div>