Add super connect function
This commit is contained in:
parent
30a785eabb
commit
8d5f2a7dfb
59
source/Context/Context.tsx
Normal file
59
source/Context/Context.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
import { Emitter, EventType } from "@Model/Emitter";
|
||||
import { Component, FunctionComponent, ReactNode, Consumer } from "react";
|
||||
|
||||
type RenderComponent = (new (...p: any) => Component<any, any, any>) | FunctionComponent<any>;
|
||||
|
||||
function superConnect<C extends Emitter<E>, E extends Record<EventType, any>>(
|
||||
consumer: Consumer<C>
|
||||
) {
|
||||
return (...events: Array<keyof E>) => {
|
||||
return <R extends RenderComponent>(components: R): R => {
|
||||
const C = components as any;
|
||||
return class extends Component<R> {
|
||||
|
||||
private status: C | undefined;
|
||||
private isEventMount: boolean = false;
|
||||
|
||||
private handelChange = () => {
|
||||
this.forceUpdate();
|
||||
}
|
||||
|
||||
private mountEvent() {
|
||||
if (this.status && !this.isEventMount) {
|
||||
this.isEventMount = true;
|
||||
console.log("Component dep event mount: " + events.join(", "));
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
this.status.on(events[i], this.handelChange);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private unmountEvent() {
|
||||
if (this.status) {
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
this.status.off(events[i], this.handelChange);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
const Consumer = consumer;
|
||||
return <Consumer>
|
||||
{(status: C) => {
|
||||
this.status = status;
|
||||
this.mountEvent();
|
||||
return <C {...this.props} status={status}></C>;
|
||||
}}
|
||||
</Consumer>
|
||||
}
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.unmountEvent();
|
||||
}
|
||||
|
||||
} as any;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { superConnect };
|
@ -1,4 +1,4 @@
|
||||
import { createContext, Component, FunctionComponent, useState, useEffect, ReactNode } from "react";
|
||||
import { createContext, Component, FunctionComponent, ReactNode } from "react";
|
||||
import { Emitter } from "@Model/Emitter";
|
||||
import { Model, ObjectID } from "@Model/Model";
|
||||
import { Label } from "@Model/Label";
|
||||
@ -9,6 +9,7 @@ import { AbstractRenderer } from "@Model/Renderer";
|
||||
import { ClassicRenderer, MouseMod } from "@GLRender/ClassicRenderer";
|
||||
import { Setting } from "./Setting";
|
||||
import { I18N } from "@Component/Localization/Localization";
|
||||
import { superConnect } from "./Context";
|
||||
|
||||
function randomColor(unNormal: boolean = false) {
|
||||
const color = [
|
||||
@ -272,53 +273,7 @@ function useStatus<R extends RenderComponent>(components: R): R {
|
||||
}) as any;
|
||||
}
|
||||
|
||||
function useStatusWithEvent(...events: Array<keyof IStatusEvent>) {
|
||||
return <R extends RenderComponent>(components: R): R => {
|
||||
const C = components as any;
|
||||
return class extends Component<R> {
|
||||
|
||||
private status: Status | undefined;
|
||||
private isEventMount: boolean = false;
|
||||
|
||||
private handelChange = () => {
|
||||
this.forceUpdate();
|
||||
}
|
||||
|
||||
private mountEvent() {
|
||||
if (this.status && !this.isEventMount) {
|
||||
this.isEventMount = true;
|
||||
console.log("Component dep event mount: " + events.join(", "));
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
this.status.on(events[i], this.handelChange);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private unmountEvent() {
|
||||
if (this.status) {
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
this.status.off(events[i], this.handelChange);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
return <StatusConsumer>
|
||||
{(status: Status) => {
|
||||
this.status = status;
|
||||
this.mountEvent();
|
||||
return <C {...this.props} status={status}></C>;
|
||||
}}
|
||||
</StatusConsumer>
|
||||
}
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.unmountEvent();
|
||||
}
|
||||
|
||||
} as any;
|
||||
}
|
||||
}
|
||||
const useStatusWithEvent = superConnect<Status, IStatusEvent>(StatusConsumer);
|
||||
|
||||
export {
|
||||
Status, StatusContext, useStatus, useStatusWithEvent,
|
||||
|
@ -46,7 +46,7 @@ class Label {
|
||||
* 判断是否为相同标签
|
||||
*/
|
||||
public equal(label: Label): boolean {
|
||||
if (this.isDeleted() || label.isDeleted()) return false;
|
||||
// if (this.isDeleted() || label.isDeleted()) return false;
|
||||
return this === label || this.id === label.id;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user