feat:support component view

doric-demo/src/ComponetDemo.ts

@@ -0,0 +1,74 @@
+import { layoutConfig, LayoutSpec, Panel, Root, scroller, vlayout } from "doric";
+import { richTitleView, } from "./components/RichTitleView";
+import logo from "./images/logo_w.png"
+
+@Entry
+class ComponentDemo extends Panel {
+    build(root: Root) {
+        scroller(
+            vlayout(
+                [
+                    richTitleView().applyChild({
+                        title: {
+                            text: "This is title"
+                        },
+                        subTitle: {
+                            text: "This is subtitle",
+                        },
+                        icon: {
+                            imageBase64: logo,
+                        }
+                    }),
+                    richTitleView().applyChild({
+                        title: {
+                            text: "Title"
+                        },
+                        subTitle: {
+                            text: "Subtitle"
+                        },
+                    }),
+                    richTitleView().applyChild({
+                        icon: {
+                            imageBase64: logo,
+                        },
+                        subTitle: {
+                            text: "Subtitle"
+                        },
+                    }),
+                    richTitleView().applyChild({
+                        icon: {
+                            imageBase64: logo,
+                        },
+                        title: {
+                            text: "Title"
+                        },
+                    }),
+                    richTitleView().applyChild({
+                        title: {
+                            text: "Just title"
+                        },
+                    }),
+                    richTitleView().applyChild({
+                        subTitle: {
+                            text: "Just subtitle"
+                        },
+                    }),
+                    richTitleView().applyChild({
+                        icon: {
+                            imageBase64: logo,
+                        },
+                    }),
+                ],
+                {
+                    layoutConfig: {
+                        widthSpec: LayoutSpec.MOST,
+                        heightSpec: LayoutSpec.FIT,
+                    },
+                    space: 10,
+                }),
+            {
+                layoutConfig: layoutConfig().most(),
+            }
+        ).in(root)
+    }
+}

doric-demo/src/components/RichTitleView.ts

@@ -0,0 +1,78 @@
+import { Color, Gravity, HLayout, image, Image, layoutConfig, LayoutSpec, text, Text, ViewComponent, vlayout, } from "doric"
+import { colors } from "../utils"
+
+@ViewComponent
+export class RichTitleView extends HLayout {
+    title: Text
+    subTitle: Text
+    icon: Image
+    constructor() {
+        super()
+        this.title = text({
+            textSize: 30,
+            textColor: Color.WHITE,
+            textAlignment: Gravity.Center,
+        })
+        this.subTitle = text({
+            textColor: Color.WHITE,
+            textSize: 12,
+        })
+        this.icon = image({
+            layoutConfig: layoutConfig().just(),
+            width: 80,
+            height: 80,
+        })
+        this.addChild(this.icon)
+        this.addChild(
+            vlayout(
+                [
+                    this.title,
+                    this.subTitle,
+                ],
+                {
+                    gravity: Gravity.Center,
+                    space: 10,
+                }))
+        this.gravity = Gravity.Center
+        this.space = 10
+        this.layoutConfig = {
+            widthSpec: LayoutSpec.MOST,
+            heightSpec: LayoutSpec.FIT,
+        }
+        this.padding = {
+            top: 10,
+            bottom: 10,
+            left: 10,
+            right: 10,
+        }
+        this.backgroundColor = colors[1]
+    }
+
+    applyChild(config: {
+        title?: Partial<Text>,
+        subTitle?: Partial<Text>,
+        icon?: Partial<Image>,
+    }) {
+        this.title.hidden = !!!config.title?.text
+        this.subTitle.hidden = !!!config.subTitle?.text
+        this.icon.hidden = !!!config.icon
+        if (config.title) {
+            this.title.apply(config.title)
+        }
+        if (config.subTitle) {
+            this.subTitle.apply(config.subTitle)
+        }
+        if (config.icon) {
+            this.icon.apply(config.icon)
+        }
+        return this
+    }
+}
+
+export function richTitleView(config?: Partial<RichTitleView>) {
+    const ret = new RichTitleView
+    if (config) {
+        ret.apply(config)
+    }
+    return ret
+}

doric-js/bundle/doric-lib.es5.js

@@ -200,6 +200,11 @@ function InconsistProperty(target, propKey) {
         },
     });
 }
+var PROP_KEY_VIEW_TYPE = "__prop__ViewType";
+function ViewComponent(constructor) {
+    var name = Reflect.get(constructor, PROP_KEY_VIEW_TYPE) || Object.getPrototypeOf(constructor).name;
+    Reflect.set(constructor, PROP_KEY_VIEW_TYPE, name);
+}
 var View = /** @class */ (function () {
     function View() {
         this.width = 0;
@@ -301,7 +306,7 @@ var View = /** @class */ (function () {
         configurable: true
     });
     View.prototype.viewType = function () {
-        return this.constructor.name;
+        return Reflect.get(this.constructor, PROP_KEY_VIEW_TYPE) || this.constructor.name;
     };
     View.prototype.onPropertyChanged = function (propKey, oldV, newV) {
         var _this = this;
@@ -3765,6 +3770,7 @@ exports.TranslationAnimation = TranslationAnimation;
 exports.VLayout = VLayout;
 exports.VMPanel = VMPanel;
 exports.View = View;
+exports.ViewComponent = ViewComponent;
 exports.ViewHolder = ViewHolder;
 exports.ViewModel = ViewModel;
 exports.animate = animate;

doric-js/bundle/doric-lib.js

@@ -130,12 +130,17 @@ var __metadata$d = (undefined && undefined.__metadata) || function (k, v) {
 };
 const PROP_CONSIST = 1;
 const PROP_INCONSIST = 2;
+const PROP_KEY_VIEW_TYPE = "ViewType";
 function Property(target, propKey) {
     Reflect.defineMetadata(propKey, PROP_CONSIST, target);
 }
 function InconsistProperty(target, propKey) {
     Reflect.defineMetadata(propKey, PROP_INCONSIST, target);
 }
+function ViewComponent(constructor) {
+    const name = Reflect.getMetadata(PROP_KEY_VIEW_TYPE, constructor) || Object.getPrototypeOf(constructor).name;
+    Reflect.defineMetadata(PROP_KEY_VIEW_TYPE, name, constructor);
+}
 class View {
     constructor() {
         this.width = 0;
@@ -227,7 +232,8 @@ class View {
         return this.__dirty_props__;
     }
     viewType() {
-        return this.constructor.name;
+        const viewType = Reflect.getMetadata(PROP_KEY_VIEW_TYPE, this.constructor);
+        return viewType || this.constructor.name;
     }
     onPropertyChanged(propKey, oldV, newV) {
         if (newV instanceof Function) {
@@ -2920,6 +2926,7 @@ exports.TranslationAnimation = TranslationAnimation;
 exports.VLayout = VLayout;
 exports.VMPanel = VMPanel;
 exports.View = View;
+exports.ViewComponent = ViewComponent;
 exports.ViewHolder = ViewHolder;
 exports.ViewModel = ViewModel;
 exports.animate = animate;

doric-js/bundle/doric-vm.js

@@ -1651,12 +1651,17 @@ var __metadata$d = (undefined && undefined.__metadata) || function (k, v) {
 };
 const PROP_CONSIST = 1;
 const PROP_INCONSIST = 2;
+const PROP_KEY_VIEW_TYPE = "ViewType";
 function Property(target, propKey) {
     Reflect.defineMetadata(propKey, PROP_CONSIST, target);
 }
 function InconsistProperty(target, propKey) {
     Reflect.defineMetadata(propKey, PROP_INCONSIST, target);
 }
+function ViewComponent(constructor) {
+    const name = Reflect.getMetadata(PROP_KEY_VIEW_TYPE, constructor) || Object.getPrototypeOf(constructor).name;
+    Reflect.defineMetadata(PROP_KEY_VIEW_TYPE, name, constructor);
+}
 class View {
     constructor() {
         this.width = 0;
@@ -1748,7 +1753,8 @@ class View {
         return this.__dirty_props__;
     }
     viewType() {
-        return this.constructor.name;
+        const viewType = Reflect.getMetadata(PROP_KEY_VIEW_TYPE, this.constructor);
+        return viewType || this.constructor.name;
     }
     onPropertyChanged(propKey, oldV, newV) {
         if (newV instanceof Function) {
@@ -4682,6 +4688,7 @@ exports.TranslationAnimation = TranslationAnimation;
 exports.VLayout = VLayout;
 exports.VMPanel = VMPanel;
 exports.View = View;
+exports.ViewComponent = ViewComponent;
 exports.ViewHolder = ViewHolder;
 exports.ViewModel = ViewModel;
 exports.animate = animate;

doric-js/index.d.ts

@@ -166,13 +166,14 @@ declare module 'doric/lib/src/util/types' {
 
 declare module 'doric/lib/src/ui/view' {
     import { Color, GradientColor } from "doric/lib/src/util/color";
-    import { Modeling, Model } from "doric/lib/src/util/types";
+    import { Modeling, Model, ClassType } from "doric/lib/src/util/types";
     import { BridgeContext } from "doric/lib/src/runtime/global";
     import { LayoutConfig } from 'doric/lib/src/util/layoutconfig';
     import { IAnimation } from "doric/lib/src/ui/animation";
     import { FlexConfig } from "doric/lib/src/util/flexbox";
     export function Property(target: Object, propKey: string): void;
     export function InconsistProperty(target: Object, propKey: string): void;
+    export function ViewComponent(constructor: ClassType<any>): void;
     export type NativeViewModel = {
             id: string;
             type: string;
@@ -239,7 +240,7 @@ declare module 'doric/lib/src/ui/view' {
                     [index: string]: Model;
             };
             nativeViewModel: NativeViewModel;
-            viewType(): string;
+            viewType(): any;
             onPropertyChanged(propKey: string, oldV: Model, newV: Model): void;
             clean(): void;
             isDirty(): boolean;

doric-js/lib/src/ui/view.d.ts

@@ -1,11 +1,12 @@
 import { Color, GradientColor } from "../util/color";
-import { Modeling, Model } from "../util/types";
+import { Modeling, Model, ClassType } from "../util/types";
 import { BridgeContext } from "../runtime/global";
 import { LayoutConfig } from '../util/layoutconfig';
 import { IAnimation } from "./animation";
 import { FlexConfig } from "../util/flexbox";
 export declare function Property(target: Object, propKey: string): void;
 export declare function InconsistProperty(target: Object, propKey: string): void;
+export declare function ViewComponent(constructor: ClassType<any>): void;
 export declare type NativeViewModel = {
     id: string;
     type: string;
@@ -76,7 +77,7 @@ export declare abstract class View implements Modeling {
         [index: string]: Model;
     };
     nativeViewModel: NativeViewModel;
-    viewType(): string;
+    viewType(): any;
     onPropertyChanged(propKey: string, oldV: Model, newV: Model): void;
     clean(): void;
     isDirty(): boolean;

doric-js/lib/src/ui/view.js

@@ -12,12 +12,17 @@ import { uniqueId } from "../util/uniqueId";
 import { loge } from "../util/log";
 const PROP_CONSIST = 1;
 const PROP_INCONSIST = 2;
+const PROP_KEY_VIEW_TYPE = "ViewType";
 export function Property(target, propKey) {
     Reflect.defineMetadata(propKey, PROP_CONSIST, target);
 }
 export function InconsistProperty(target, propKey) {
     Reflect.defineMetadata(propKey, PROP_INCONSIST, target);
 }
+export function ViewComponent(constructor) {
+    const name = Reflect.getMetadata(PROP_KEY_VIEW_TYPE, constructor) || Object.getPrototypeOf(constructor).name;
+    Reflect.defineMetadata(PROP_KEY_VIEW_TYPE, name, constructor);
+}
 export class View {
     constructor() {
         this.width = 0;
@@ -109,7 +114,8 @@ export class View {
         return this.__dirty_props__;
     }
     viewType() {
-        return this.constructor.name;
+        const viewType = Reflect.getMetadata(PROP_KEY_VIEW_TYPE, this.constructor);
+        return viewType || this.constructor.name;
     }
     onPropertyChanged(propKey, oldV, newV) {
         if (newV instanceof Function) {

doric-js/src/ui/view.es5.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Color, GradientColor } from "../util/color"
-import { Modeling, Model, obj2Model } from "../util/types";
+import { Modeling, Model, obj2Model, ClassType } from "../util/types";
 import { uniqueId } from "../util/uniqueId";
 import { loge } from "../util/log";
 import { BridgeContext } from "../runtime/global";
@@ -50,6 +50,13 @@ export function InconsistProperty(target: Object, propKey: string) {
     })
 }
 
+const PROP_KEY_VIEW_TYPE = "__prop__ViewType";
+
+export function ViewComponent(constructor: ClassType<any>) {
+    const name = Reflect.get(constructor, PROP_KEY_VIEW_TYPE) || Object.getPrototypeOf(constructor).name
+    Reflect.set(constructor, PROP_KEY_VIEW_TYPE, name)
+}
+
 export type NativeViewModel = {
     id: string;
     type: string;
@@ -190,7 +197,7 @@ export abstract class View implements Modeling {
     }
 
     viewType() {
-        return this.constructor.name
+        return Reflect.get(this.constructor, PROP_KEY_VIEW_TYPE) || this.constructor.name
     }
 
     onPropertyChanged(propKey: string, oldV: Model, newV: Model): void {

doric-js/src/ui/view.ts

@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 import { Color, GradientColor } from "../util/color"
-import { Modeling, Model, obj2Model } from "../util/types";
+import { Modeling, Model, obj2Model, ClassType } from "../util/types";
 import { uniqueId } from "../util/uniqueId";
 import { loge } from "../util/log";
 import { BridgeContext } from "../runtime/global";
 import { LayoutConfig } from '../util/layoutconfig'
 import { IAnimation } from "./animation";
 import { FlexConfig } from "../util/flexbox";
-import { modal } from "../native/modal";
 
 const PROP_CONSIST = 1;
 const PROP_INCONSIST = 2;
+const PROP_KEY_VIEW_TYPE = "ViewType";
 
 export function Property(target: Object, propKey: string) {
     Reflect.defineMetadata(propKey, PROP_CONSIST, target)
@@ -34,6 +34,11 @@ export function InconsistProperty(target: Object, propKey: string) {
     Reflect.defineMetadata(propKey, PROP_INCONSIST, target)
 }
 
+export function ViewComponent(constructor: ClassType<any>) {
+    const name = Reflect.getMetadata(PROP_KEY_VIEW_TYPE, constructor) || Object.getPrototypeOf(constructor).name
+    Reflect.defineMetadata(PROP_KEY_VIEW_TYPE, name, constructor)
+}
+
 export type NativeViewModel = {
     id: string;
     type: string;
@@ -196,7 +201,8 @@ export abstract class View implements Modeling {
     }
 
     viewType() {
-        return this.constructor.name
+        const viewType = Reflect.getMetadata(PROP_KEY_VIEW_TYPE, this.constructor)
+        return viewType || this.constructor.name
     }
 
     onPropertyChanged(propKey: string, oldV: Model, newV: Model): void {

doric-web/dist/index.js

@@ -1705,12 +1705,17 @@ var __metadata$d = (undefined && undefined.__metadata) || function (k, v) {
 };
 const PROP_CONSIST = 1;
 const PROP_INCONSIST = 2;
+const PROP_KEY_VIEW_TYPE = "ViewType";
 function Property(target, propKey) {
     Reflect.defineMetadata(propKey, PROP_CONSIST, target);
 }
 function InconsistProperty(target, propKey) {
     Reflect.defineMetadata(propKey, PROP_INCONSIST, target);
 }
+function ViewComponent(constructor) {
+    const name = Reflect.getMetadata(PROP_KEY_VIEW_TYPE, constructor) || Object.getPrototypeOf(constructor).name;
+    Reflect.defineMetadata(PROP_KEY_VIEW_TYPE, name, constructor);
+}
 class View {
     constructor() {
         this.width = 0;
@@ -1802,7 +1807,8 @@ class View {
         return this.__dirty_props__;
     }
     viewType() {
-        return this.constructor.name;
+        const viewType = Reflect.getMetadata(PROP_KEY_VIEW_TYPE, this.constructor);
+        return viewType || this.constructor.name;
     }
     onPropertyChanged(propKey, oldV, newV) {
         if (newV instanceof Function) {
@@ -4495,6 +4501,7 @@ exports.TranslationAnimation = TranslationAnimation;
 exports.VLayout = VLayout;
 exports.VMPanel = VMPanel;
 exports.View = View;
+exports.ViewComponent = ViewComponent;
 exports.ViewHolder = ViewHolder;
 exports.ViewModel = ViewModel;
 exports.animate = animate;