From cebe9d2a567c20b99c8c394cfa598ee9d4d53ece Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 14 Dec 2023 00:07:52 -0500 Subject: a bunch more fixes to making things observable. fixed calling super.componentDidUpdate on subsclasses --- src/client/views/search/ToggleBar.tsx | 85 ----------------------------------- 1 file changed, 85 deletions(-) delete mode 100644 src/client/views/search/ToggleBar.tsx (limited to 'src/client/views/search/ToggleBar.tsx') diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx deleted file mode 100644 index 466822eba..000000000 --- a/src/client/views/search/ToggleBar.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import * as React from 'react'; -import { observer } from 'mobx-react'; -import { observable, action, runInAction, computed } from 'mobx'; -import "./SearchBox.scss"; -import "./ToggleBar.scss"; -import * as anime from 'animejs'; - -export interface ToggleBarProps { - originalStatus: boolean; - optionOne: string; - optionTwo: string; - handleChange(): void; - getStatus(): boolean; -} - -@observer -export class ToggleBar extends React.Component{ - static Instance: ToggleBar; - - @observable private _forwardTimeline: anime.AnimeTimelineInstance; - @observable private _toggleButton: React.RefObject; - @observable private _originalStatus: boolean = this.props.originalStatus; - - constructor(props: ToggleBarProps) { - super(props); - ToggleBar.Instance = this; - this._toggleButton = React.createRef(); - this._forwardTimeline = anime.timeline({ - loop: false, - autoplay: false, - direction: "reverse", - }); - } - - componentDidMount = () => { - const totalWidth = 265; - - if (this._originalStatus) { - this._forwardTimeline.add({ - targets: this._toggleButton.current, - translateX: totalWidth, - easing: "easeInOutQuad", - duration: 500 - }); - } - else { - this._forwardTimeline.add({ - targets: this._toggleButton.current, - translateX: -totalWidth, - easing: "easeInOutQuad", - duration: 500 - }); - } - } - - @action.bound - onclick() { - this._forwardTimeline.play(); - this._forwardTimeline.reverse(); - this.props.handleChange(); - } - - @action.bound - public resetToggle = () => { - if (!this.props.getStatus()) { - this._forwardTimeline.play(); - this._forwardTimeline.reverse(); - this.props.handleChange(); - } - } - - render() { - return ( -
-
-
{this.props.optionOne}
-
{this.props.optionTwo}
-
-
-
-
-
- ); - } -} \ No newline at end of file -- cgit v1.2.3-70-g09d2