Add super connect function

This commit is contained in:
MrKBear 2022-03-19 21:01:33 +08:00
parent 30a785eabb
commit 8d5f2a7dfb
3 changed files with 63 additions and 49 deletions

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

View File

@ -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,

View File

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