Merge branch 'master' into sophie-ai-images

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
+    }
+}