aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/ObservableReactComponent.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/ObservableReactComponent.tsx')
-rw-r--r--src/client/views/ObservableReactComponent.tsx21
1 files changed, 21 insertions, 0 deletions
diff --git a/src/client/views/ObservableReactComponent.tsx b/src/client/views/ObservableReactComponent.tsx
new file mode 100644
index 000000000..9b2b00903
--- /dev/null
+++ b/src/client/views/ObservableReactComponent.tsx
@@ -0,0 +1,21 @@
+import { action, makeObservable, observable } from 'mobx';
+import * as React from 'react';
+import './AntimodeMenu.scss';
+
+/**
+ * This is an abstract class that serves as the base for a PDF-style or Marquee-style
+ * menu. To use this class, look at PDFMenu.tsx or MarqueeOptionsMenu.tsx for an example.
+ */
+export abstract class ObservableReactComponent<T> extends React.Component<T, {}> {
+ @observable _props: React.PropsWithChildren<T>;
+ constructor(props: any) {
+ super(props);
+ this._props = props;
+ makeObservable(this);
+ }
+ componentDidUpdate(prevProps: Readonly<T>): void {
+ Object.keys(prevProps).forEach(action(pkey =>
+ (prevProps as any)[pkey] !== (this.props as any)[pkey] &&
+ ((this._props as any)[pkey] = (this.props as any)[pkey]))); // prettier-ignore
+ }
+}