Test Consumer Provider

source/Component/HeaderBar/HeaderBar.tsx

@@ -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 };

source/Context/Setting.tsx

@@ -0,0 +1,58 @@
+import { createContext, Component, FunctionComponent } from "react";
+import { Emitter } from "@Model/Emitter";
+
+/**
+ * 主题模式
+ */
+enum Themes {
+    light = 1,
+    dark = 2
+}
+
+class Setting extends Emitter<
+    Setting & {change: keyof Setting}
+> {
+
+    /**
+     * 主题
+     */
+    public themes: Themes = Themes.light;
+
+    /**
+     * 设置参数
+     */
+    public setProps<P extends keyof Setting>(key: P, value: Setting[P]) {
+        this[key] = value as any;
+        this.emit("change", key);
+        this.emit(key as any, value as any);
+    }
+}
+
+interface IMixinSettingProps {
+    setting?: Setting;
+}
+
+const SettingContext = createContext<Setting>(new Setting());
+
+SettingContext.displayName = "Setting";
+const SettingProvider = SettingContext.Provider;
+const SettingConsumer = SettingContext.Consumer;
+
+type RenderComponent = (new (...p: any) => Component<any, any, any>) | FunctionComponent<any>;
+
+/**
+ * 修饰器
+ */
+function useSetting<R extends RenderComponent>(components: R): R {
+    return ((props: any) => {
+        const C = components;
+        return <SettingConsumer>
+            {(setting: Setting) => <C {...props} setting={setting}></C>}
+        </SettingConsumer>
+    }) as any;
+}
+
+export {
+    Themes, Setting, SettingContext, useSetting, 
+    IMixinSettingProps, SettingProvider, SettingConsumer
+};

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -1,13 +1,28 @@
-import { Component, ReactNode, createRef } from "react";
+import { Component, ReactNode } from "react";
+import { SettingProvider, Setting } from "@Context/Setting";
+import { HeaderBar } from "@Component/HeaderBar/HeaderBar";
 import { Entry } from "../Entry/Entry";
 import "./SimulatorWeb.scss";
 
 class SimulatorWeb extends Component {
     
-    private canvasContRef = createRef<HTMLDivElement>();
+    /**
+     * 全局设置
+     */
+    private setting: Setting;
+
+    public constructor(props: any) {
+        super(props);
+
+        // TODO: 这里要读取设置
+        this.setting = new Setting();
+        (window as any).setting = (this.setting as any);
+    }
 
     public render(): ReactNode {
-        return <div>Web</div>
+        return <SettingProvider value={this.setting}>
+            <HeaderBar/>
+        </SettingProvider>
     }
 }
 

tsconfig.json

@@ -1,6 +1,7 @@
 {
     "compileOnSave": true,
     "compilerOptions": {
+        "experimentalDecorators": true,
         "alwaysStrict": true,
         "strict": true,
         "sourceMap": true,
@@ -23,6 +24,12 @@
             ],
             "@GLRender/*": [
                 "./source/GLRender/*"
+            ],
+            "@Context/*": [
+                "./source/Context/*"
+            ],
+            "@Component/*": [
+                "./source/Component/*"
             ]
         }
     },