tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat:support component view

Browse Source
This commit is contained in:
pengfei.zhou 2021-05-14 19:24:07 +08:00 committed by osborn
parent b6bfb210e1
commit 7ee30d1cd3
12 changed files with 215 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
doric-demo/src/ComponetDemo.ts Normal file
View File

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

78
doric-demo/src/components/RichTitleView.ts Normal file
View File

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

8
doric-js/bundle/doric-lib.es5.js
View File

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

9
doric-js/bundle/doric-lib.js
View File

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

9
doric-js/bundle/doric-vm.js
View File

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

5
doric-js/index.d.ts vendored
View File

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

5
doric-js/lib/src/ui/view.d.ts vendored
View File

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

8
doric-js/lib/src/ui/view.js
View File

@ -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) {

11
doric-js/src/ui/view.es5.ts
View File

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

12
doric-js/src/ui/view.ts
View File

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

9
doric-web/dist/index.js vendored
View File

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

2
doric-web/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long