feat: add ModularPanel

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' {
+declare module 'doric/lib/src/util/types' {
-    import { Group } from "doric/lib/src/ui/view";
+    export interface Modeling {
-    import { Panel } from "doric/lib/src/ui/panel";
+        toModel(): Model;
-    import { BridgeContext } from "doric/lib/src/runtime/global";
-    export abstract class ViewHolder {
-        abstract build(root: Group): void;
     }
-    export type Setter<M> = (state: M) => void;
+    export function obj2Model(obj: Model, convertor: (v: Function) => string): Model;
-    export abstract class ViewModel<M extends Object, V extends ViewHolder> {
+    type _M = string | number | boolean | Modeling | {
-        context: BridgeContext;
+        [index: string]: Model;
-        constructor(obj: M, v: V);
+    } | undefined;
-        getState(): M;
+    export type Model = _M | Array<_M>;
-        getViewHolder(): V;
+    export type Binder<T> = (v: T) => void;
-        updateState(setter: Setter<M>): void;
+    export class Mutable<T> {
-        attach(view: Group): void;
+        get: () => T;
-        abstract onAttached(state: M, vh: V): void;
+        set: (v: T) => void;
-        abstract onBind(state: M, vh: V): void;
+        bind(binder: Binder<T>): void;
+        static of<E>(v: E): Mutable<E>;
     }
     export type ClassType<T> = new (...args: any) => T;
-    export abstract class VMPanel<M extends Object, V extends ViewHolder> extends Panel {
+    export {};
-        abstract getViewModelClass(): ClassType<ViewModel<M, V>>;
-        abstract getState(): M;
-        abstract getViewHolderClass(): ClassType<V>;
-        getViewModel(): ViewModel<M, V> | undefined;
-        build(root: Group): void;
-    }
 }
 
 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<Panel>): string;
     export function navigator(context: BridgeContext): {
         push: (source: string | ClassType<Panel>, 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<T> = (v: T) => void;
-    export class Mutable<T> {
-        get: () => T;
-        set: (v: T) => void;
-        bind(binder: Binder<T>): void;
-        static of<E>(v: E): Mutable<E>;
-    }
-    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<M> = (state: M) => void;
+    export abstract class ViewModel<M extends Object, V extends ViewHolder> {
+        context: BridgeContext;
+        constructor(obj: M, v: V);
+        getState(): M;
+        getViewHolder(): V;
+        updateState(setter: Setter<M>): void;
+        attach(view: Group): void;
+        abstract onAttached(state: M, vh: V): void;
+        abstract onBind(state: M, vh: V): void;
+    }
+    export abstract class VMPanel<M extends Object, V extends ViewHolder> extends Panel {
+        abstract getViewModelClass(): ClassType<ViewModel<M, V>>;
+        abstract getState(): M;
+        abstract getViewHolderClass(): ClassType<V>;
+        getViewModel(): ViewModel<M, V> | undefined;
+        build(root: Group): void;
+    }
+}
+
 declare module '*.png' {
     const value: any;
     export default value;

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<Panel>): string;
 export declare function navigator(context: BridgeContext): {
     push: (source: string | ClassType<Panel>, config?: {

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

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();
+        });
+    }
+}

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<M extends Object, V extends ViewHolder>
     abstract onAttached(state: M, vh: V): void;
     abstract onBind(state: M, vh: V): void;
 }
-export declare type ClassType<T> = new (...args: any) => T;
 export declare abstract class VMPanel<M extends Object, V extends ViewHolder> extends Panel {
     private vm?;
     private vh?;

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

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

doric-js/lib/src/util/types.d.ts

@@ -16,4 +16,5 @@ export declare class Mutable<T> {
     bind(binder: Binder<T>): void;
     static of<E>(v: E): Mutable<E>;
 }
+export declare type ClassType<T> = new (...args: any) => T;
 export {};

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<Panel>) {
     return `_internal_://export?class=${encodeURIComponent(panelClass.name)}&context=${context.id}`

doric-js/src/pattern/index.pattern.ts

@@ -15,4 +15,5 @@
  */
 export * from './candies'
 export * from './provider'
-export * from './mvvm'
+export * from './mvvm'
+export * from './modular'

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<Panel>[]
+    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()
+        })
+    }
+}

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<M extends Object, V extends ViewHolder> {
     abstract onBind(state: M, vh: V): void
 }
 
-export type ClassType<T> = new (...args: any) => T
 
 export abstract class VMPanel<M extends Object, V extends ViewHolder> extends Panel {
     private vm?: ViewModel<M, V>

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]

doric-js/src/ui/panel.ts

@@ -235,7 +235,8 @@ export abstract class Panel {
             }, 0)
         }
     }
-    private onRenderFinished() {
+
+    onRenderFinished() {
         this.onRenderFinishedCallback.forEach(e => {
             e()
         })

doric-js/src/util/types.ts

@@ -70,4 +70,6 @@ export class Mutable<T>{
     static of<E>(v: E) {
         return new Mutable(v)
     }
-}
+}
+
+export type ClassType<T> = new (...args: any) => T