From 300343909a265bfdc12fb0701cefa0da167eab97 Mon Sep 17 00:00:00 2001 From: "pengfei.zhou" Date: Thu, 13 May 2021 14:50:54 +0800 Subject: [PATCH] feat: add ModularPanel --- doric-js/index.d.ts | 90 +++++++++++++------------- doric-js/lib/src/native/navigator.d.ts | 2 +- doric-js/lib/src/pattern/modular.d.ts | 14 ++++ doric-js/lib/src/pattern/modular.js | 45 +++++++++++++ doric-js/lib/src/pattern/mvvm.d.ts | 2 +- doric-js/lib/src/runtime/global.d.ts | 2 +- doric-js/lib/src/ui/panel.d.ts | 2 +- doric-js/lib/src/util/types.d.ts | 1 + doric-js/src/native/navigator.ts | 2 +- doric-js/src/pattern/index.pattern.ts | 3 +- doric-js/src/pattern/modular.ts | 59 +++++++++++++++++ doric-js/src/pattern/mvvm.ts | 2 +- doric-js/src/runtime/global.ts | 2 +- doric-js/src/ui/panel.ts | 3 +- doric-js/src/util/types.ts | 4 +- 15 files changed, 179 insertions(+), 54 deletions(-) create mode 100644 doric-js/lib/src/pattern/modular.d.ts create mode 100644 doric-js/lib/src/pattern/modular.js create mode 100644 doric-js/src/pattern/modular.ts diff --git a/doric-js/index.d.ts b/doric-js/index.d.ts index f00ab46e..54a76a10 100644 --- a/doric-js/index.d.ts +++ b/doric-js/index.d.ts @@ -11,7 +11,7 @@ declare module 'doric' { declare module 'doric/lib/src/runtime/global' { import { Panel } from "doric/lib/src/ui/panel"; - import { ClassType } from "doric/lib/src/pattern/mvvm"; + import { ClassType } from "doric/lib/src/util/types"; export type BridgeContext = { /** * The identify of current context @@ -138,36 +138,29 @@ declare module 'doric/lib/src/ui/panel' { clearHeadViews(type: string): void; getRootView(): Root; getInitData(): object | undefined; + onRenderFinished(): void; addOnRenderFinishedCallback(cb: () => void): void; } } -declare module 'doric/lib/src/pattern/mvvm' { - import { Group } from "doric/lib/src/ui/view"; - import { Panel } from "doric/lib/src/ui/panel"; - import { BridgeContext } from "doric/lib/src/runtime/global"; - export abstract class ViewHolder { - abstract build(root: Group): void; +declare module 'doric/lib/src/util/types' { + export interface Modeling { + toModel(): Model; } - export type Setter = (state: M) => void; - export abstract class ViewModel { - context: BridgeContext; - constructor(obj: M, v: V); - getState(): M; - getViewHolder(): V; - updateState(setter: Setter): void; - attach(view: Group): void; - abstract onAttached(state: M, vh: V): void; - abstract onBind(state: M, vh: V): void; + export function obj2Model(obj: Model, convertor: (v: Function) => string): Model; + type _M = string | number | boolean | Modeling | { + [index: string]: Model; + } | undefined; + export type Model = _M | Array<_M>; + export type Binder = (v: T) => void; + export class Mutable { + get: () => T; + set: (v: T) => void; + bind(binder: Binder): void; + static of(v: E): Mutable; } export type ClassType = new (...args: any) => T; - export abstract class VMPanel extends Panel { - abstract getViewModelClass(): ClassType>; - abstract getState(): M; - abstract getViewHolderClass(): ClassType; - getViewModel(): ViewModel | undefined; - build(root: Group): void; - } + export {}; } declare module 'doric/lib/src/ui/view' { @@ -880,8 +873,8 @@ declare module 'doric/lib/src/native/navbar' { declare module 'doric/lib/src/native/navigator' { import { BridgeContext } from "doric/lib/src/runtime/global"; - import { ClassType } from "doric/lib/src/pattern/mvvm"; import { Panel } from "doric/lib/src/ui/panel"; + import { ClassType } from "doric/lib/src/util/types"; export function internalScheme(context: BridgeContext, panelClass: ClassType): string; export function navigator(context: BridgeContext): { push: (source: string | ClassType, config?: { @@ -1209,25 +1202,6 @@ declare module 'doric/lib/src/util/log' { export function logw(...message: any): void; } -declare module 'doric/lib/src/util/types' { - export interface Modeling { - toModel(): Model; - } - export function obj2Model(obj: Model, convertor: (v: Function) => string): Model; - type _M = string | number | boolean | Modeling | { - [index: string]: Model; - } | undefined; - export type Model = _M | Array<_M>; - export type Binder = (v: T) => void; - export class Mutable { - get: () => T; - set: (v: T) => void; - bind(binder: Binder): void; - static of(v: E): Mutable; - } - export {}; -} - declare module 'doric/lib/src/util/uniqueId' { export function uniqueId(prefix: string): string; } @@ -1408,6 +1382,34 @@ declare module 'doric/lib/src/pattern/provider' { } } +declare module 'doric/lib/src/pattern/mvvm' { + import { Group } from "doric/lib/src/ui/view"; + import { Panel } from "doric/lib/src/ui/panel"; + import { BridgeContext } from "doric/lib/src/runtime/global"; + import { ClassType } from "doric/lib/src/util/types"; + export abstract class ViewHolder { + abstract build(root: Group): void; + } + export type Setter = (state: M) => void; + export abstract class ViewModel { + context: BridgeContext; + constructor(obj: M, v: V); + getState(): M; + getViewHolder(): V; + updateState(setter: Setter): void; + attach(view: Group): void; + abstract onAttached(state: M, vh: V): void; + abstract onBind(state: M, vh: V): void; + } + export abstract class VMPanel extends Panel { + abstract getViewModelClass(): ClassType>; + abstract getState(): M; + abstract getViewHolderClass(): ClassType; + getViewModel(): ViewModel | undefined; + build(root: Group): void; + } +} + declare module '*.png' { const value: any; export default value; diff --git a/doric-js/lib/src/native/navigator.d.ts b/doric-js/lib/src/native/navigator.d.ts index 6e93c384..825e631f 100644 --- a/doric-js/lib/src/native/navigator.d.ts +++ b/doric-js/lib/src/native/navigator.d.ts @@ -1,6 +1,6 @@ import { BridgeContext } from "../runtime/global"; -import { ClassType } from "../pattern/mvvm"; import { Panel } from "../ui/panel"; +import { ClassType } from "../util/types"; export declare function internalScheme(context: BridgeContext, panelClass: ClassType): string; export declare function navigator(context: BridgeContext): { push: (source: string | ClassType, config?: { diff --git a/doric-js/lib/src/pattern/modular.d.ts b/doric-js/lib/src/pattern/modular.d.ts new file mode 100644 index 00000000..f5091460 --- /dev/null +++ b/doric-js/lib/src/pattern/modular.d.ts @@ -0,0 +1,14 @@ +import { Panel } from "../ui/panel"; +import { Group } from "../ui/view"; +export declare abstract class ModularPanel extends Panel { + private modules; + constructor(modules: Panel[]); + abstract setupModules(): Panel[]; + abstract setupShelf(root: Group): Group; + build(root: Group): void; + onCreate(): void; + onDestroy(): void; + onShow(): void; + onHidden(): void; + onRenderFinished(): void; +} diff --git a/doric-js/lib/src/pattern/modular.js b/doric-js/lib/src/pattern/modular.js new file mode 100644 index 00000000..2698f22c --- /dev/null +++ b/doric-js/lib/src/pattern/modular.js @@ -0,0 +1,45 @@ +import { Panel } from "../ui/panel"; +export class ModularPanel extends Panel { + constructor(modules) { + super(); + this.modules = []; + this.modules = modules; + } + build(root) { + const groupView = this.setupShelf(root); + this.modules.forEach(e => { + Reflect.set(e, "__root__", groupView); + e.build(groupView); + }); + } + onCreate() { + super.onCreate(); + this.modules.forEach(e => { + e.onCreate(); + }); + } + onDestroy() { + super.onDestroy(); + this.modules.forEach(e => { + e.onDestroy(); + }); + } + onShow() { + super.onShow(); + this.modules.forEach(e => { + e.onShow(); + }); + } + onHidden() { + super.onHidden(); + this.modules.forEach(e => { + e.onHidden(); + }); + } + onRenderFinished() { + super.onRenderFinished(); + this.modules.forEach(e => { + e.onRenderFinished(); + }); + } +} diff --git a/doric-js/lib/src/pattern/mvvm.d.ts b/doric-js/lib/src/pattern/mvvm.d.ts index 3da9340c..bc0be37f 100644 --- a/doric-js/lib/src/pattern/mvvm.d.ts +++ b/doric-js/lib/src/pattern/mvvm.d.ts @@ -1,6 +1,7 @@ import { Group } from "../ui/view"; import { Panel } from "../ui/panel"; import { BridgeContext } from "../runtime/global"; +import { ClassType } from "../util/types"; export declare abstract class ViewHolder { abstract build(root: Group): void; } @@ -17,7 +18,6 @@ export declare abstract class ViewModel abstract onAttached(state: M, vh: V): void; abstract onBind(state: M, vh: V): void; } -export declare type ClassType = new (...args: any) => T; export declare abstract class VMPanel extends Panel { private vm?; private vh?; diff --git a/doric-js/lib/src/runtime/global.d.ts b/doric-js/lib/src/runtime/global.d.ts index c8ae7f31..df921338 100644 --- a/doric-js/lib/src/runtime/global.d.ts +++ b/doric-js/lib/src/runtime/global.d.ts @@ -1,5 +1,5 @@ import { Panel } from "../ui/panel"; -import { ClassType } from "../pattern/mvvm"; +import { ClassType } from "../util/types"; export declare type BridgeContext = { /** * The identify of current context diff --git a/doric-js/lib/src/ui/panel.d.ts b/doric-js/lib/src/ui/panel.d.ts index 3a1e5a68..bda29783 100644 --- a/doric-js/lib/src/ui/panel.d.ts +++ b/doric-js/lib/src/ui/panel.d.ts @@ -32,6 +32,6 @@ export declare abstract class Panel { private nativeRender; private hookBeforeNativeCall; private hookAfterNativeCall; - private onRenderFinished; + onRenderFinished(): void; addOnRenderFinishedCallback(cb: () => void): void; } diff --git a/doric-js/lib/src/util/types.d.ts b/doric-js/lib/src/util/types.d.ts index 5577ce69..7c7fbc7e 100644 --- a/doric-js/lib/src/util/types.d.ts +++ b/doric-js/lib/src/util/types.d.ts @@ -16,4 +16,5 @@ export declare class Mutable { bind(binder: Binder): void; static of(v: E): Mutable; } +export declare type ClassType = new (...args: any) => T; export {}; diff --git a/doric-js/src/native/navigator.ts b/doric-js/src/native/navigator.ts index e3b27d34..33074b96 100644 --- a/doric-js/src/native/navigator.ts +++ b/doric-js/src/native/navigator.ts @@ -14,8 +14,8 @@ * limitations under the License. */ import { BridgeContext } from "../runtime/global" -import { ClassType } from "../pattern/mvvm" import { Panel } from "../ui/panel" +import { ClassType } from "../util/types" export function internalScheme(context: BridgeContext, panelClass: ClassType) { return `_internal_://export?class=${encodeURIComponent(panelClass.name)}&context=${context.id}` diff --git a/doric-js/src/pattern/index.pattern.ts b/doric-js/src/pattern/index.pattern.ts index 814fb0a1..95848887 100644 --- a/doric-js/src/pattern/index.pattern.ts +++ b/doric-js/src/pattern/index.pattern.ts @@ -15,4 +15,5 @@ */ export * from './candies' export * from './provider' -export * from './mvvm' \ No newline at end of file +export * from './mvvm' +export * from './modular' \ No newline at end of file diff --git a/doric-js/src/pattern/modular.ts b/doric-js/src/pattern/modular.ts new file mode 100644 index 00000000..885024d9 --- /dev/null +++ b/doric-js/src/pattern/modular.ts @@ -0,0 +1,59 @@ +import { Panel } from "../ui/panel" +import { Group } from "../ui/view" +import { ClassType } from "../util/types" + +export abstract class ModularPanel extends Panel { + private modules: Panel[] + + constructor() { + super() + this.modules = this.setupModules().map(e => new e) + } + + abstract setupModules(): ClassType[] + abstract setupShelf(root: Group): Group + + build(root: Group) { + root.children.length = 0 + const groupView = this.setupShelf(root) + this.modules.forEach(e => { + Reflect.set(e, "__root__", groupView) + e.build(groupView) + }) + } + + onCreate() { + super.onCreate() + this.modules.forEach(e => { + e.onCreate() + }) + } + + onDestroy() { + super.onDestroy() + this.modules.forEach(e => { + e.onDestroy() + }) + } + + onShow() { + super.onShow() + this.modules.forEach(e => { + e.onShow() + }) + } + + onHidden() { + super.onHidden() + this.modules.forEach(e => { + e.onHidden() + }) + } + + onRenderFinished() { + super.onRenderFinished() + this.modules.forEach(e => { + e.onRenderFinished() + }) + } +} \ No newline at end of file diff --git a/doric-js/src/pattern/mvvm.ts b/doric-js/src/pattern/mvvm.ts index d007a8a6..d696c1c9 100644 --- a/doric-js/src/pattern/mvvm.ts +++ b/doric-js/src/pattern/mvvm.ts @@ -16,6 +16,7 @@ import { Group } from "../ui/view" import { Panel } from "../ui/panel" import { BridgeContext } from "../runtime/global" +import { ClassType } from "../util/types" export abstract class ViewHolder { abstract build(root: Group): void @@ -56,7 +57,6 @@ export abstract class ViewModel { abstract onBind(state: M, vh: V): void } -export type ClassType = new (...args: any) => T export abstract class VMPanel extends Panel { private vm?: ViewModel diff --git a/doric-js/src/runtime/global.ts b/doric-js/src/runtime/global.ts index 8cb42a9a..fc095ad8 100644 --- a/doric-js/src/runtime/global.ts +++ b/doric-js/src/runtime/global.ts @@ -1,5 +1,5 @@ import { Panel } from "../ui/panel" -import { ClassType } from "../pattern/mvvm" +import { ClassType } from "../util/types" /* * Copyright [2019] [Doric.Pub] diff --git a/doric-js/src/ui/panel.ts b/doric-js/src/ui/panel.ts index a015f338..4d99e20a 100644 --- a/doric-js/src/ui/panel.ts +++ b/doric-js/src/ui/panel.ts @@ -235,7 +235,8 @@ export abstract class Panel { }, 0) } } - private onRenderFinished() { + + onRenderFinished() { this.onRenderFinishedCallback.forEach(e => { e() }) diff --git a/doric-js/src/util/types.ts b/doric-js/src/util/types.ts index 5e674ae4..03d01701 100644 --- a/doric-js/src/util/types.ts +++ b/doric-js/src/util/types.ts @@ -70,4 +70,6 @@ export class Mutable{ static of(v: E) { return new Mutable(v) } -} \ No newline at end of file +} + +export type ClassType = new (...args: any) => T