Test Consumer Provider

2022-02-23 17:51:20 +08:00
parent 669d104eb3
commit 0eb0b6f7f5
5 changed files with 127 additions and 3 deletions
@@ -0,0 +1,44 @@
+import { Component, ReactNode } from "react";
+import { useSetting, IMixinSettingProps, Themes } from "@Context/Setting";
+
+interface IHeaderBarProps {}
+
+/**
+ * 头部信息栏
+ */
+@useSetting
+class HeaderBar extends Component<IHeaderBarProps & IMixinSettingProps> {
+
+    private handelClick = () => {
+        if (this.props.setting) {
+            this.props.setting.setProps("themes", 
+                this.props.setting.themes === Themes.dark ? Themes.light : Themes.dark
+            );
+        }
+    }
+
+    private changeListener = () => {
+        this.forceUpdate();
+    }
+
+    public componentDidMount() {
+        console.log("mount");
+        if (this.props.setting) {
+            this.props.setting.on("change", this.changeListener);
+        }
+    }
+
+    public componentWillUnmount() {
+        console.log("die");
+        if (this.props.setting) {
+            this.props.setting.off("change", this.changeListener);
+        }
+    }
+
+    public render(): ReactNode {
+        return <div onClick={this.handelClick}>{this.props.setting?.themes}</div>
+    }
+}
+
+export default HeaderBar;
+export { HeaderBar };