44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
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 }; |