tsx:add ref and parent support

doric-demo/src/TSXDemo.tsx

@@ -1,51 +1,55 @@
 import {
-  Panel,
-  Group,
-  VLayout,
-  layoutConfig,
-  Gravity,
-  Text,
-  Color,
-  navbar,
   jsx,
+  VLayout,
+  Panel,
+  Gravity,
+  Group,
+  LayoutSpec,
+  Image,
+  Text,
+  makeRef,
 } from "doric";
 
+// class MyPanel extends Panel {
+//   build(root: Group) {
+//     <VLayout
+//       space={20}
+//       gravity={Gravity.Center}
+//       layoutConfig={{
+//         widthSpec: LayoutSpec.MOST,
+//         heightSpec: LayoutSpec.MOST,
+//       }}
+//       parent={root}
+//     >
+//       <Image imageUrl="https://doric.pub/logo.png" />
+//       <Text text="Hello,Doric" textSize={20} />
+//     </VLayout>;
+//   }
+// }
+
 @Entry
-class Example extends Panel {
+class Counter extends Panel {
-  onShow() {
+  build(root: Group) {
-    navbar(context).setTitle("Example");
+    const ref = makeRef<Text>();
-  }
-  build(rootView: Group) {
     let count = 0;
-    (
+    <VLayout
-      <VLayout
+      space={20}
-        layoutConfig={layoutConfig().just().configAlignment(Gravity.Center)}
+      gravity={Gravity.Center}
-        width={200}
+      layoutConfig={{
-        height={200}
+        widthSpec: LayoutSpec.MOST,
-        space={20}
+        heightSpec: LayoutSpec.MOST,
-        border={{ color: Color.BLUE, width: 1 }}
+      }}
-        gravity={Gravity.Center}
+      parent={root}
-      >
+    >
-        <Text
+      <Text text={`${count}`} textSize={40} ref={ref} />
-          tag="Label"
+      <Text
-          text={`${count}`}
+        text="Click to count"
-          textSize={40}
+        textSize={20}
-          layoutConfig={layoutConfig().fit()}
+        onClick={() => {
-        />
+          count++;
-        <Text
+          ref.current.text = `${count}`;
-          text="Click to count"
+        }}
-          textSize={20}
+      />
-          backgroundColor={Color.parse("#70a1ff")}
+    </VLayout>;
-          textColor={Color.WHITE}
-          onClick={() => {
-            count++;
-            const label = rootView.findViewByTag("Label") as Text;
-            label.text = `${count}`;
-          }}
-          width={200}
-          height={50}
-        />
-      </VLayout>
-    ).in(rootView);
   }
 }

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

@@ -205,6 +205,27 @@ 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 Ref = /** @class */ (function () {
+    function Ref() {
+    }
+    Object.defineProperty(Ref.prototype, "current", {
+        get: function () {
+            if (!!!this.view) {
+                throw new Error("Ref is empty");
+            }
+            return this.view;
+        },
+        set: function (v) {
+            this.view = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return Ref;
+}());
+function makeRef() {
+    return new Ref;
+}
 var View = /** @class */ (function () {
     function View() {
         this.width = 0;
@@ -402,6 +423,27 @@ var View = /** @class */ (function () {
     View.prototype.getLocationOnScreen = function (context) {
         return this.nativeChannel(context, "getLocationOnScreen")();
     };
+    Object.defineProperty(View.prototype, "props", {
+        set: function (props) {
+            this.apply(props);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(View.prototype, "parent", {
+        set: function (v) {
+            this.in(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(View.prototype, "ref", {
+        set: function (ref) {
+            ref.current = this;
+        },
+        enumerable: false,
+        configurable: true
+    });
     View.prototype.doAnimation = function (context, animation) {
         var _this = this;
         return this.nativeChannel(context, "doAnimation")(animation.toModel()).then(function (args) {
@@ -2649,10 +2691,9 @@ var jsx = {
             children[_i - 2] = arguments$1[_i];
         }
         var e = new constructor();
+        e.layoutConfig = layoutConfig().fit();
         if (config) {
-            for (var key in config) {
+            e.apply(config);
-                Reflect.set(e, key, Reflect.get(config, key, config), e);
-            }
         }
         if (children && children.length > 0) {
             if (e instanceof Group) {
@@ -3999,6 +4040,7 @@ exports.Panel = Panel;
 exports.Property = Property;
 exports.Provider = Provider;
 exports.RIGHT = RIGHT;
+exports.Ref = Ref;
 exports.Refreshable = Refreshable;
 exports.Root = Root;
 exports.RotationAnimation = RotationAnimation;
@@ -4040,6 +4082,7 @@ exports.listItem = listItem;
 exports.log = log;
 exports.loge = loge;
 exports.logw = logw;
+exports.makeRef = makeRef;
 exports.modal = modal;
 exports.navbar = navbar;
 exports.navigator = navigator;

doric-js/bundle/doric-lib.js

@@ -141,6 +141,20 @@ 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 Ref {
+    set current(v) {
+        this.view = v;
+    }
+    get current() {
+        if (!!!this.view) {
+            throw new Error("Ref is empty");
+        }
+        return this.view;
+    }
+}
+function makeRef() {
+    return new Ref;
+}
 class View {
     constructor() {
         this.width = 0;
@@ -321,6 +335,12 @@ class View {
     set props(props) {
         this.apply(props);
     }
+    set parent(v) {
+        this.in(v);
+    }
+    set ref(ref) {
+        ref.current = this;
+    }
     doAnimation(context, animation) {
         return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
             for (let key in args) {
@@ -2043,10 +2063,9 @@ exports.Display = void 0;
 const jsx = {
     createElement: function (constructor, config, ...children) {
         const e = new constructor();
+        e.layoutConfig = layoutConfig().fit();
         if (config) {
-            for (let key in config) {
+            e.apply(config);
-                Reflect.set(e, key, Reflect.get(config, key, config), e);
-            }
         }
         if (children && children.length > 0) {
             if (e instanceof Group) {
@@ -3107,6 +3126,7 @@ exports.Panel = Panel;
 exports.Property = Property;
 exports.Provider = Provider;
 exports.RIGHT = RIGHT;
+exports.Ref = Ref;
 exports.Refreshable = Refreshable;
 exports.Root = Root;
 exports.RotationAnimation = RotationAnimation;
@@ -3148,6 +3168,7 @@ exports.listItem = listItem;
 exports.log = log;
 exports.loge = loge;
 exports.logw = logw;
+exports.makeRef = makeRef;
 exports.modal = modal;
 exports.navbar = navbar;
 exports.navigator = navigator;

doric-js/bundle/doric-vm.js

@@ -1665,6 +1665,20 @@ 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 Ref {
+    set current(v) {
+        this.view = v;
+    }
+    get current() {
+        if (!!!this.view) {
+            throw new Error("Ref is empty");
+        }
+        return this.view;
+    }
+}
+function makeRef() {
+    return new Ref;
+}
 class View {
     constructor() {
         this.width = 0;
@@ -1845,6 +1859,12 @@ class View {
     set props(props) {
         this.apply(props);
     }
+    set parent(v) {
+        this.in(v);
+    }
+    set ref(ref) {
+        ref.current = this;
+    }
     doAnimation(context, animation) {
         return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
             for (let key in args) {
@@ -3567,10 +3587,9 @@ exports.Display = void 0;
 const jsx = {
     createElement: function (constructor, config, ...children) {
         const e = new constructor();
+        e.layoutConfig = layoutConfig().fit();
         if (config) {
-            for (let key in config) {
+            e.apply(config);
-                Reflect.set(e, key, Reflect.get(config, key, config), e);
-            }
         }
         if (children && children.length > 0) {
             if (e instanceof Group) {
@@ -4872,6 +4891,7 @@ exports.Panel = Panel;
 exports.Property = Property;
 exports.Provider = Provider;
 exports.RIGHT = RIGHT;
+exports.Ref = Ref;
 exports.Refreshable = Refreshable;
 exports.Root = Root;
 exports.RotationAnimation = RotationAnimation;
@@ -4913,6 +4933,7 @@ exports.listItem = listItem;
 exports.log = log;
 exports.loge = loge;
 exports.logw = logw;
+exports.makeRef = makeRef;
 exports.modal = modal;
 exports.navbar = navbar;
 exports.navigator = navigator;

doric-js/index.d.ts

@@ -191,6 +191,11 @@ declare module 'doric/lib/src/ui/view' {
                     [index: string]: Model;
             };
     };
+    export class Ref<T extends View> {
+            set current(v: T);
+            get current(): T;
+    }
+    export function makeRef<T extends View>(): Ref<T>;
     export abstract class View implements Modeling {
             width: number;
             height: number;
@@ -304,6 +309,8 @@ declare module 'doric/lib/src/ui/view' {
                 */
             flexConfig?: FlexConfig;
             set props(props: Partial<this>);
+            set parent(v: Group);
+            set ref(ref: Ref<this>);
             doAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
             clearAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
             cancelAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;

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

@@ -14,6 +14,12 @@ export declare type NativeViewModel = {
         [index: string]: Model;
     };
 };
+export declare class Ref<T extends View> {
+    private view?;
+    set current(v: T);
+    get current(): T;
+}
+export declare function makeRef<T extends View>(): Ref<T>;
 export declare abstract class View implements Modeling {
     width: number;
     height: number;
@@ -132,6 +138,8 @@ export declare abstract class View implements Modeling {
      */
     flexConfig?: FlexConfig;
     set props(props: Partial<this>);
+    set parent(v: Group);
+    set ref(ref: Ref<this>);
     doAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
     clearAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
     cancelAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;

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

@@ -23,6 +23,20 @@ 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 Ref {
+    set current(v) {
+        this.view = v;
+    }
+    get current() {
+        if (!!!this.view) {
+            throw new Error("Ref is empty");
+        }
+        return this.view;
+    }
+}
+export function makeRef() {
+    return new Ref;
+}
 export class View {
     constructor() {
         this.width = 0;
@@ -203,6 +217,12 @@ export class View {
     set props(props) {
         this.apply(props);
     }
+    set parent(v) {
+        this.in(v);
+    }
+    set ref(ref) {
+        ref.current = this;
+    }
     doAnimation(context, animation) {
         return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
             for (let key in args) {

doric-js/lib/src/util/jsx.js

@@ -1,11 +1,11 @@
 import { Group } from "../ui/view";
+import { layoutConfig } from "./layoutconfig";
 export const jsx = {
     createElement: function (constructor, config, ...children) {
         const e = new constructor();
+        e.layoutConfig = layoutConfig().fit();
         if (config) {
-            for (let key in config) {
+            e.apply(config);
-                Reflect.set(e, key, Reflect.get(config, key, config), e);
-            }
         }
         if (children && children.length > 0) {
             if (e instanceof Group) {

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

@@ -65,6 +65,25 @@ export type NativeViewModel = {
     };
 }
 
+export class Ref<T extends View> {
+    private view?: T;
+
+    set current(v: T) {
+        this.view = v
+    }
+
+    get current() {
+        if (!!!this.view) {
+            throw new Error("Ref is empty")
+        }
+        return this.view
+    }
+}
+
+export function makeRef() {
+    return new Ref
+}
+
 export abstract class View implements Modeling {
     private __dirty_props__!: { [index: string]: Model | undefined }
 
@@ -345,6 +364,18 @@ export abstract class View implements Modeling {
     @Property
     flexConfig?: FlexConfig
 
+    set props(props: Partial<this>) {
+        this.apply(props)
+    }
+
+    set parent(v: Group) {
+        this.in(v)
+    }
+
+    set ref(ref: Ref<this>) {
+        ref.current = this
+    }
+
     doAnimation(context: BridgeContext, animation: IAnimation) {
         return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
             for (let key in args) {

doric-js/src/ui/view.ts

@@ -47,6 +47,25 @@ export type NativeViewModel = {
     };
 }
 
+export class Ref<T extends View> {
+    private view?: T;
+
+    set current(v: T) {
+        this.view = v
+    }
+
+    get current() {
+        if (!!!this.view) {
+            throw new Error("Ref is empty")
+        }
+        return this.view
+    }
+}
+
+export function makeRef<T extends View>(): Ref<T> {
+    return new Ref
+}
+
 export abstract class View implements Modeling {
     @Property
     width: number = 0
@@ -358,6 +377,14 @@ export abstract class View implements Modeling {
         this.apply(props)
     }
 
+    set parent(v: Group) {
+        this.in(v)
+    }
+
+    set ref(ref: Ref<this>) {
+        ref.current = this
+    }
+
     doAnimation(context: BridgeContext, animation: IAnimation) {
         return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
             for (let key in args) {

doric-js/src/util/jsx.ts

@@ -1,4 +1,5 @@
 import { Group, View } from "../ui/view";
+import { layoutConfig } from "./layoutconfig";
 import { ClassType } from "./types";
 
 export const jsx = {
@@ -8,10 +9,9 @@ export const jsx = {
         ...children: View[]
     ): T {
         const e = new constructor();
+        e.layoutConfig = layoutConfig().fit()
         if (config) {
-            for (let key in config) {
+            e.apply(config)
-                Reflect.set(e, key, Reflect.get(config, key, config), e);
-            }
         }
         if (children && children.length > 0) {
             if (e instanceof Group) {

doric-web/dist/index.js

@@ -1719,6 +1719,20 @@ 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 Ref {
+    set current(v) {
+        this.view = v;
+    }
+    get current() {
+        if (!!!this.view) {
+            throw new Error("Ref is empty");
+        }
+        return this.view;
+    }
+}
+function makeRef() {
+    return new Ref;
+}
 class View {
     constructor() {
         this.width = 0;
@@ -1899,6 +1913,12 @@ class View {
     set props(props) {
         this.apply(props);
     }
+    set parent(v) {
+        this.in(v);
+    }
+    set ref(ref) {
+        ref.current = this;
+    }
     doAnimation(context, animation) {
         return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
             for (let key in args) {
@@ -3621,10 +3641,9 @@ exports.Display = void 0;
 const jsx = {
     createElement: function (constructor, config, ...children) {
         const e = new constructor();
+        e.layoutConfig = layoutConfig().fit();
         if (config) {
-            for (let key in config) {
+            e.apply(config);
-                Reflect.set(e, key, Reflect.get(config, key, config), e);
-            }
         }
         if (children && children.length > 0) {
             if (e instanceof Group) {
@@ -4685,6 +4704,7 @@ exports.Panel = Panel;
 exports.Property = Property;
 exports.Provider = Provider;
 exports.RIGHT = RIGHT;
+exports.Ref = Ref;
 exports.Refreshable = Refreshable;
 exports.Root = Root;
 exports.RotationAnimation = RotationAnimation;
@@ -4726,6 +4746,7 @@ exports.listItem = listItem;
 exports.log = log;
 exports.loge = loge;
 exports.logw = logw;
+exports.makeRef = makeRef;
 exports.modal = modal;
 exports.navbar = navbar;
 exports.navigator = navigator;