1 files changed, 131 insertions, 0 deletions
diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
new file mode 100644
index 000000000..a9d48219a
--- /dev/null
+++ b/src/client/views/search/CheckBox.tsx
@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable, action, runInAction, IReactionDisposer, reaction } from 'mobx';
+import "./CheckBox.scss";
+import * as anime from 'animejs';
+
+interface CheckBoxProps {
+    originalStatus: boolean;
+    updateStatus(newStatus: boolean): void;
+    title: string;
+    parent: any;
+    numCount: number;
+    default: boolean;
+}
+
+@observer
+export class CheckBox extends React.Component<CheckBoxProps>{
+    // true = checked, false = unchecked
+    @observable private _status: boolean;
+    @observable private uncheckTimeline: anime.AnimeTimelineInstance;
+    @observable private checkTimeline: anime.AnimeTimelineInstance;
+    @observable private checkRef: any;
+    @observable private _resetReaction?: IReactionDisposer;
+
+
+    constructor(props: CheckBoxProps) {
+        super(props);
+        this._status = this.props.originalStatus;
+        this.checkRef = React.createRef();
+
+        this.checkTimeline = anime.timeline({
+            loop: false,
+            autoplay: false,
+            direction: "normal",
+        }); this.uncheckTimeline = anime.timeline({
+            loop: false,
+            autoplay: false,
+            direction: "normal",
+        });
+    }
+
+    componentDidMount = () => {
+        this.uncheckTimeline.add({
+            targets: this.checkRef.current,
+            easing: "easeInOutQuad",
+            duration: 500,
+            opacity: 0,
+        });
+        this.checkTimeline.add({
+            targets: this.checkRef.current,
+            easing: "easeInOutQuad",
+            duration: 500,
+            strokeDashoffset: [anime.setDashoffset, 0],
+            opacity: 1
+        });
+
+        if (this.props.originalStatus) {
+            this.checkTimeline.play();
+            this.checkTimeline.restart();
+        }
+
+        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._resetBoolean = false;
+                        }
+                    });
+                }
+            },
+        );
+    }
+
+    @action.bound
+    reset() {
+        if (this.props.default) {
+            if (!this._status) {
+                this._status = true;
+                this.checkTimeline.play();
+                this.checkTimeline.restart();
+            }
+        }
+        else {
+            if (this._status) {
+                this._status = false;
+                this.uncheckTimeline.play();
+                this.uncheckTimeline.restart();
+            }
+        }
+
+        this.props.updateStatus(this.props.default);
+    }
+
+    @action.bound
+    onClick = () => {
+        if (this._status) {
+            this.uncheckTimeline.play();
+            this.uncheckTimeline.restart();
+        }
+        else {
+            this.checkTimeline.play();
+            this.checkTimeline.restart();
+
+        }
+        this._status = !this._status;
+        this.props.updateStatus(this._status);
+
+    }
+
+    render() {
+        return (
+            <div className="checkboxfilter" 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>
+        );
+    }
+
+}
+\ No newline at end of file