diff --git a/doric-demo/src/AnimatorDemo.ts b/doric-demo/src/AnimatorDemo.ts index d5335d0c..f3577f91 100644 --- a/doric-demo/src/AnimatorDemo.ts +++ b/doric-demo/src/AnimatorDemo.ts @@ -22,164 +22,177 @@ class AnimatorDemo extends Panel { } const view2 = box(3) let idx = 0 - vlayout([ - title("Animator Demo"), - vlayout( - [ - hlayout([ - thisLabel('Reset').apply({ - onClick: () => { - animate(context)({ - animations: () => { - view.width = view.height = 20 - view.x = view.y = 0 - view.rotation = 0 - view.backgroundColor = colors[2] - view.corners = 0 - view.scaleX = 1 - view.scaleY = 1 - view.translationX = 0 - view.translationY = 0 - view.rotation = 0 - }, - duration: 1500, - }).then(() => { - modal(context).toast('Fininshed') - }).catch(e => { - modal(context).toast(`${e}`) - }) - } - }), - ]).apply({ space: 10 } as IHLayout), - hlayout([ - thisLabel('X').apply({ - onClick: () => { - animate(context)({ - animations: () => { - view.x = view.x || 0 - view.x += 100 - view2.x += 50 - }, - duration: 1000, - }) - } - }), - thisLabel('Y').apply({ - onClick: () => { - animate(context)({ - animations: () => { - view.y = view.y || 0 - view.y += 100 - view2.y += 50 - }, - duration: 1000, - }) - } - }), - thisLabel('Width').apply({ - onClick: () => { - animate(context)({ - animations: () => { - view.width += 100 - }, - duration: 1000, - }) - } - }), - thisLabel('Height').apply({ - onClick: () => { - animate(context)({ - animations: () => { - view.height += 100 - }, - duration: 1000, - }) - } - }), - ]).apply({ space: 10 } as IHLayout), - hlayout([ - thisLabel('BgColor').apply({ - onClick: () => { - animate(context)({ - animations: () => { - view.backgroundColor = colors[(idx++) % colors.length] - }, - duration: 1000, - }); - } - }), - thisLabel('Rotation').apply({ - onClick: () => { - animate(context)({ - animations: () => { - if (view.rotation) { - view.rotation += 0.5 - } else { - view.rotation = 0.5 - } - }, - duration: 1000, - }); - } - }), - thisLabel('Corner').apply({ - onClick: () => { - animate(context)({ - animations: () => { - if (typeof view.corners === 'number') { - view.corners += 10 - } else { - view.corners = 10 - } - }, - duration: 1000, - }); - } - }), - ]).apply({ space: 10 } as IHLayout), + vlayout( + [ + title("Animator Demo"), + vlayout( + [ + hlayout( + [thisLabel('Reset').apply({ + onClick: () => { + animate(context)({ + animations: () => { + view.width = view.height = 20 + view.x = view.y = 0 + view.rotation = 0 + view.backgroundColor = colors[2] + view.corners = 0 + view.scaleX = 1 + view.scaleY = 1 + view.translationX = 0 + view.translationY = 0 + view.rotation = 0 + }, + duration: 1500, + }).then(() => { + modal(context).toast('Fininshed') + }).catch(e => { + modal(context).toast(`${e}`) + }) + } + }),], + { space: 10 } + ), + hlayout( + [ + thisLabel('X').apply({ + onClick: () => { + animate(context)({ + animations: () => { + view.x = view.x || 0 + view.x += 100 + view2.x += 50 + }, + duration: 1000, + }) + } + }), + thisLabel('Y').apply({ + onClick: () => { + animate(context)({ + animations: () => { + view.y = view.y || 0 + view.y += 100 + view2.y += 50 + }, + duration: 1000, + }) + } + }), + thisLabel('Width').apply({ + onClick: () => { + animate(context)({ + animations: () => { + view.width += 100 + }, + duration: 1000, + }) + } + }), + thisLabel('Height').apply({ + onClick: () => { + animate(context)({ + animations: () => { + view.height += 100 + }, + duration: 1000, + }) + } + }), + ], + { space: 10 } + ), + hlayout( + [ + thisLabel('BgColor').apply({ + onClick: () => { + animate(context)({ + animations: () => { + view.backgroundColor = colors[(idx++) % colors.length] + }, + duration: 1000, + }); + } + }), + thisLabel('Rotation').apply({ + onClick: () => { + animate(context)({ + animations: () => { + if (view.rotation) { + view.rotation += 0.5 + } else { + view.rotation = 0.5 + } + }, + duration: 1000, + }); + } + }), + thisLabel('Corner').apply({ + onClick: () => { + animate(context)({ + animations: () => { + if (typeof view.corners === 'number') { + view.corners += 10 + } else { + view.corners = 10 + } + }, + duration: 1000, + }); + } + }), + ], + { space: 10 } + ), - hlayout([ - thisLabel('scaleX').apply({ - onClick: () => { - animate(context)({ - animations: () => { - if (view.scaleX) { - view.scaleX += 0.1 - } else { - view.scaleX = 1.1 - } - }, - duration: 1000, - }); - } - }), - thisLabel('scaleY').apply({ - onClick: () => { - animate(context)({ - animations: () => { - if (view.scaleY) { - view.scaleY += 0.1 - } else { - view.scaleY = 1.1 - } - }, - duration: 1000, - }); - } - }), - ]).apply({ space: 10 } as IHLayout), - ] - ).apply({ space: 10 } as IVLayout), - stack([ - view, - ]).apply({ + hlayout([ + thisLabel('scaleX').apply({ + onClick: () => { + animate(context)({ + animations: () => { + if (view.scaleX) { + view.scaleX += 0.1 + } else { + view.scaleX = 1.1 + } + }, + duration: 1000, + }); + } + }), + thisLabel('scaleY').apply({ + onClick: () => { + animate(context)({ + animations: () => { + if (view.scaleY) { + view.scaleY += 0.1 + } else { + view.scaleY = 1.1 + } + }, + duration: 1000, + }); + } + }), + ]).apply({ space: 10 } as IHLayout), + ], + { space: 10 } + ), + stack( + [ + view, + ], + { + layoutConfig: layoutConfig().most(), + backgroundColor: colors[1].alpha(0.3 * 255), + }), + ], + { layoutConfig: layoutConfig().most(), - backgroundColor: colors[1].alpha(0.3 * 255), - }), - ]).apply({ - layoutConfig: layoutConfig().most(), - gravity: gravity().center(), - space: 10, - } as IVLayout).in(rootView) + gravity: gravity().center(), + space: 10, + } + ).in(rootView) } } \ No newline at end of file diff --git a/doric-demo/src/ComplicatedAnimations.ts b/doric-demo/src/ComplicatedAnimations.ts index bf437b59..05f56197 100644 --- a/doric-demo/src/ComplicatedAnimations.ts +++ b/doric-demo/src/ComplicatedAnimations.ts @@ -21,182 +21,201 @@ class AnimationDemo extends Panel { view.onClick = () => { modal(context).toast('Clicked') } - vlayout([ - title("Complicated Animation"), - vlayout( - [ - hlayout([ - thisLabel('reset').apply({ - onClick: () => { - const rotation = new RotationAnimation - rotation.duration = 1000 - rotation.fromRotation = view.rotation || 0 - rotation.toRotation = 0 - const translation = new TranslationAnimation - translation.duration = 1000 - translation.fromTranslationX = view.translationX || 0 - translation.toTranslationX = 0 - translation.fromTranslationY = view.translationY || 0 - translation.toTranslationY = 0 - const scale = new ScaleAnimation - scale.duration = 1000 - scale.fromScaleX = view.scaleX || 1 - scale.toScaleX = 1 - scale.fromScaleY = view.scaleY || 1 - scale.toScaleY = 1 - const animationSet = new AnimationSet - animationSet.addAnimation(rotation) - animationSet.addAnimation(translation) - animationSet.addAnimation(scale) - view.doAnimation(context, animationSet).then(() => { - modal(context).toast('Resetd') - }) - } + vlayout( + [ + title("Complicated Animation"), + vlayout( + [ + hlayout( + [ + thisLabel('reset').apply({ + onClick: () => { + const rotation = new RotationAnimation + rotation.duration = 1000 + rotation.fromRotation = view.rotation || 0 + rotation.toRotation = 0 + const translation = new TranslationAnimation + translation.duration = 1000 + translation.fromTranslationX = view.translationX || 0 + translation.toTranslationX = 0 + translation.fromTranslationY = view.translationY || 0 + translation.toTranslationY = 0 + const scale = new ScaleAnimation + scale.duration = 1000 + scale.fromScaleX = view.scaleX || 1 + scale.toScaleX = 1 + scale.fromScaleY = view.scaleY || 1 + scale.toScaleY = 1 + const animationSet = new AnimationSet + animationSet.addAnimation(rotation) + animationSet.addAnimation(translation) + animationSet.addAnimation(scale) + view.doAnimation(context, animationSet).then(() => { + modal(context).toast('Resetd') + }) + } + }), + ], + { space: 10 } + ), + hlayout( + [ + thisLabel('TranslationX').apply({ + onClick: () => { + const animation = new TranslationAnimation + animation.duration = 1000 + animation.fromTranslationX = view.translationX || 0 + animation.toTranslationX = animation.fromTranslationX + 100 + animation.fromTranslationY = view.translationY || 0 + animation.toTranslationY = view.translationY || 0 + view.doAnimation(context, animation) + } + }), + thisLabel('TranslationY').apply({ + onClick: () => { + const animation = new TranslationAnimation + animation.duration = 1000 + animation.fromTranslationX = view.translationX || 0 + animation.toTranslationX = view.translationX || 0 + animation.fromTranslationY = view.translationY || 0 + animation.toTranslationY = animation.fromTranslationY + 100 + view.doAnimation(context, animation) + } + }), + thisLabel('ScaleX').apply({ + onClick: () => { + const animation = new ScaleAnimation + animation.duration = 1000 + animation.fromScaleX = view.scaleX || 1 + animation.toScaleX = animation.fromScaleX + 1 + view.doAnimation(context, animation) + } + }), + thisLabel('ScaleY').apply({ + onClick: () => { + const animation = new ScaleAnimation + animation.duration = 1000 + animation.fromScaleY = view.scaleY || 1 + animation.toScaleY = animation.fromScaleY + 1 + view.doAnimation(context, animation) + } + }), + thisLabel('rotation').apply({ + onClick: () => { + const animation = new RotationAnimation + animation.duration = 1000 + animation.fromRotation = view.rotation || 0 + animation.toRotation = animation.fromRotation + 0.25 + view.doAnimation(context, animation) + } + }), + ], + { space: 10 } + ), + hlayout( + [ + thisLabel('group').apply({ + onClick: () => { + const rotation = new RotationAnimation + rotation.duration = 1000 + rotation.fromRotation = 0 + rotation.toRotation = 4 + const translation = new TranslationAnimation + translation.duration = 1000 + translation.fromTranslationX = view.translationX || 0 + translation.toTranslationX = 100 + const animationSet = new AnimationSet + animationSet.addAnimation(rotation) + animationSet.addAnimation(translation) + view.doAnimation(context, animationSet) + } + }), + ], + { space: 10 } + ), + hlayout( + [ + thisLabel('Default').apply({ + onClick: () => { + const translation = new TranslationAnimation + translation.duration = 3000 + translation.fromTranslationX = 0 + translation.toTranslationX = 300 + translation.timingFunction = TimingFunction.Default + view.doAnimation(context, translation) + } + }), + thisLabel('Linear').apply({ + onClick: () => { + const translation = new TranslationAnimation + translation.duration = 3000 + translation.fromTranslationX = 0 + translation.toTranslationX = 300 + translation.timingFunction = TimingFunction.Linear + view.doAnimation(context, translation) + } + }), + thisLabel('EaseIn').apply({ + onClick: () => { + const translation = new TranslationAnimation + translation.duration = 3000 + translation.fromTranslationX = 0 + translation.toTranslationX = 300 + translation.timingFunction = TimingFunction.EaseIn + view.doAnimation(context, translation) + } + }), + thisLabel('EaseOut').apply({ + onClick: () => { + const translation = new TranslationAnimation + translation.duration = 3000 + translation.fromTranslationX = 0 + translation.toTranslationX = 300 + translation.timingFunction = TimingFunction.EaseOut + view.doAnimation(context, translation) + } + }), + thisLabel('EaseInEaseOut').apply({ + onClick: () => { + const translation = new TranslationAnimation + translation.duration = 3000 + translation.fromTranslationX = 0 + translation.toTranslationX = 300 + translation.timingFunction = TimingFunction.EaseInEaseOut + view.doAnimation(context, translation) + } + }), + ], + { space: 10 } + ), + ], + { space: 10 } + ), + stack( + [ + view.also(v => { + v.x = 20 + v.y = 0 + v.width = 30 + v.left = 15 }), - ]).apply({ space: 10 } as IHLayout), - hlayout([ - thisLabel('TranslationX').apply({ - onClick: () => { - const animation = new TranslationAnimation - animation.duration = 1000 - animation.fromTranslationX = view.translationX || 0 - animation.toTranslationX = animation.fromTranslationX + 100 - animation.fromTranslationY = view.translationY || 0 - animation.toTranslationY = view.translationY || 0 - view.doAnimation(context, animation) - } - }), - thisLabel('TranslationY').apply({ - onClick: () => { - const animation = new TranslationAnimation - animation.duration = 1000 - animation.fromTranslationX = view.translationX || 0 - animation.toTranslationX = view.translationX || 0 - animation.fromTranslationY = view.translationY || 0 - animation.toTranslationY = animation.fromTranslationY + 100 - view.doAnimation(context, animation) - } - }), - thisLabel('ScaleX').apply({ - onClick: () => { - const animation = new ScaleAnimation - animation.duration = 1000 - animation.fromScaleX = view.scaleX || 1 - animation.toScaleX = animation.fromScaleX + 1 - view.doAnimation(context, animation) - } - }), - thisLabel('ScaleY').apply({ - onClick: () => { - const animation = new ScaleAnimation - animation.duration = 1000 - animation.fromScaleY = view.scaleY || 1 - animation.toScaleY = animation.fromScaleY + 1 - view.doAnimation(context, animation) - } - }), - thisLabel('rotation').apply({ - onClick: () => { - const animation = new RotationAnimation - animation.duration = 1000 - animation.fromRotation = view.rotation || 0 - animation.toRotation = animation.fromRotation + 0.25 - view.doAnimation(context, animation) - } - }), - ]).apply({ space: 10 } as IHLayout), - hlayout([ - thisLabel('group').apply({ - onClick: () => { - const rotation = new RotationAnimation - rotation.duration = 1000 - rotation.fromRotation = 0 - rotation.toRotation = 4 - const translation = new TranslationAnimation - translation.duration = 1000 - translation.fromTranslationX = view.translationX || 0 - translation.toTranslationX = 100 - const animationSet = new AnimationSet - animationSet.addAnimation(rotation) - animationSet.addAnimation(translation) - view.doAnimation(context, animationSet) - } - }), - ]).apply({ space: 10 } as IHLayout), - hlayout([ - thisLabel('Default').apply({ - onClick: () => { - const translation = new TranslationAnimation - translation.duration = 3000 - translation.fromTranslationX = 0 - translation.toTranslationX = 300 - translation.timingFunction = TimingFunction.Default - view.doAnimation(context, translation) - } - }), - thisLabel('Linear').apply({ - onClick: () => { - const translation = new TranslationAnimation - translation.duration = 3000 - translation.fromTranslationX = 0 - translation.toTranslationX = 300 - translation.timingFunction = TimingFunction.Linear - view.doAnimation(context, translation) - } - }), - thisLabel('EaseIn').apply({ - onClick: () => { - const translation = new TranslationAnimation - translation.duration = 3000 - translation.fromTranslationX = 0 - translation.toTranslationX = 300 - translation.timingFunction = TimingFunction.EaseIn - view.doAnimation(context, translation) - } - }), - thisLabel('EaseOut').apply({ - onClick: () => { - const translation = new TranslationAnimation - translation.duration = 3000 - translation.fromTranslationX = 0 - translation.toTranslationX = 300 - translation.timingFunction = TimingFunction.EaseOut - view.doAnimation(context, translation) - } - }), - thisLabel('EaseInEaseOut').apply({ - onClick: () => { - const translation = new TranslationAnimation - translation.duration = 3000 - translation.fromTranslationX = 0 - translation.toTranslationX = 300 - translation.timingFunction = TimingFunction.EaseInEaseOut - view.doAnimation(context, translation) - } - }), - ]).apply({ space: 10 } as IHLayout), - ] - ).apply({ space: 10 } as IVLayout), - stack([ - view.also(v => { - v.x = 20 - v.y = 0 - v.width = 30 - v.left = 15 - }), - view2.also(v => { - v.x = v.y = 20 - v.y = 40 - v.scaleX = 1.5 - }) - ]).apply({ + view2.also(v => { + v.x = v.y = 20 + v.y = 40 + v.scaleX = 1.5 + }) + ], + { + layoutConfig: layoutConfig().most(), + backgroundColor: colors[1].alpha(0.3 * 255), + } + ), + ], + { layoutConfig: layoutConfig().most(), - backgroundColor: colors[1].alpha(0.3 * 255), - }), - ]).apply({ - layoutConfig: layoutConfig().most(), - gravity: gravity().center(), - space: 10, - } as IVLayout).in(rootView) + gravity: gravity().center(), + space: 10, + } + ).in(rootView) } } \ No newline at end of file diff --git a/doric-demo/src/ComplicatedDemo.ts b/doric-demo/src/ComplicatedDemo.ts index e5620aaf..2fc4f440 100644 --- a/doric-demo/src/ComplicatedDemo.ts +++ b/doric-demo/src/ComplicatedDemo.ts @@ -39,9 +39,7 @@ class MyDemo extends Panel { backgroundColor: colors[idx % colors.length], })) } - }).apply({ }), - }).apply({ layoutConfig: layoutConfig().most(), }).also(v => { v.top = 200 diff --git a/doric-demo/src/Counter.ts b/doric-demo/src/Counter.ts index 81c9a456..074a8c86 100644 --- a/doric-demo/src/Counter.ts +++ b/doric-demo/src/Counter.ts @@ -7,20 +7,23 @@ class CounterView extends ViewHolder { number!: Text counter!: Text build(root: Group) { - vlayout([ - this.number = text({ - textSize: 40, - }), + vlayout( + [ + this.number = text({ + textSize: 40, + }), - this.counter = text({ - text: "Click To Count", - textSize: 20, - }), - ]).apply({ - layoutConfig: layoutConfig().most(), - gravity: Gravity.Center, - space: 20, - } as IVLayout).in(root) + this.counter = text({ + text: "Click To Count", + textSize: 20, + }), + ], + { + layoutConfig: layoutConfig().most(), + gravity: Gravity.Center, + space: 20, + } + ).in(root) } } diff --git a/doric-demo/src/EffectsDemo.ts b/doric-demo/src/EffectsDemo.ts index 1914e360..4983602c 100644 --- a/doric-demo/src/EffectsDemo.ts +++ b/doric-demo/src/EffectsDemo.ts @@ -30,338 +30,405 @@ function label(str: string) { class EffectsDemo extends Panel { build(rootView: Group) { scroller( - vlayout([ - hlayout([ - vlayout([ - label("Origin view"), - box().apply({ - width: 100, - height: 100 - }),]).apply({ - gravity: Gravity.Center, - space: 10, - } as IVLayout), - vlayout([ - label("Border"), - box().apply({ - width: 100, - height: 100, - border: { - width: 5, - color: colors[3] - }, - layoutConfig: layoutConfig().just().configMargin({ - left: 5, - right: 5, - bottom: 5, - }) - }),]).apply({ - gravity: Gravity.Center, - space: 10, - } as IVLayout), - vlayout([ - label("Corner"), - box().apply({ - width: 100, - height: 100, - corners: 10, - layoutConfig: layoutConfig().just().configMargin({ - bottom: 10 - }) - }),]).apply({ - gravity: Gravity.Center, - space: 10, - } as IVLayout), - vlayout([ - label("Shadow"), - box().apply({ - width: 100, - height: 100, - shadow: { - opacity: 1, - color: colors[1], - offsetX: 3, - offsetY: 3, - radius: 5, - }, - layoutConfig: layoutConfig().just().configMargin({ - bottom: 10 - }) - }),]).apply({ - gravity: Gravity.Center, - space: 10, - } as IVLayout), - ]).apply({ space: 20 } as IHLayout), - hlayout([ - vlayout([ - label("Border,Corner"), - box().apply({ - width: 100, - height: 100, - border: { - width: 5, - color: colors[3] - }, - corners: 10, - layoutConfig: layoutConfig().just().configMargin({ - left: 5, - right: 5, - bottom: 5, - }) - }),]).apply({ - gravity: Gravity.Center, - space: 10, - } as IVLayout), - vlayout([ - label("Border,Shadow"), - box().apply({ - width: 100, - height: 100, - border: { - width: 5, - color: colors[3] - }, - shadow: { - opacity: 1, - color: colors[1], - offsetX: 3, - offsetY: 3, - radius: 5, - }, - layoutConfig: layoutConfig().just().configMargin({ - bottom: 10 - }) - }),]).apply({ - gravity: Gravity.Center, - space: 10, - } as IVLayout), - vlayout([ - label("Corner,Shadow"), - box().apply({ - width: 100, - height: 100, - corners: 10, - shadow: { - opacity: 1, - color: colors[1], - offsetX: 3, - offsetY: 3, - radius: 5, - }, - layoutConfig: layoutConfig().just().configMargin({ - bottom: 10 - }) - }),]).apply({ - gravity: Gravity.Center, - space: 10, - } as IVLayout), - vlayout([ - label("Border,Corner,Shadow"), - box().apply({ - width: 100, - height: 100, - border: { - width: 5, - color: colors[3] - }, - corners: 10, - shadow: { - opacity: 1, - color: colors[1], - offsetX: 3, - offsetY: 3, - radius: 5, - }, - layoutConfig: layoutConfig().just().configMargin({ - left: 5, - right: 5, - bottom: 5, - }) - }),]).apply({ - gravity: Gravity.Center, - space: 10, - } as IVLayout), - ]).apply({ space: 20 } as IHLayout), - hlayout([ - vlayout([ - label("Shadow"), - box().apply({ - width: 100, - height: 100, - corners: 50, - shadow: { - opacity: 1, - color: colors[1], - offsetX: 0, - offsetY: 0, - radius: 10, - }, - layoutConfig: layoutConfig().just().configMargin({ - left: 10, - right: 10, - bottom: 10, - }) - }),]).apply({ - gravity: Gravity.Center, - space: 10, - } as IVLayout), - vlayout([ - label("Shadow,offset"), - box().apply({ - width: 100, - height: 100, - corners: 50, - shadow: { - opacity: 1, - color: colors[1], - offsetX: 5, - offsetY: 5, - radius: 5, - }, - layoutConfig: layoutConfig().just().configMargin({ - left: 10, - right: 10, - bottom: 10, - }) - }),]).apply({ - gravity: Gravity.Center, - space: 10, - } as IVLayout), - vlayout([ - label("Shadow,opacity"), - box().apply({ - width: 100, - height: 100, - corners: 50, - shadow: { - opacity: 0.5, - color: colors[1], - offsetX: 5, - offsetY: 5, - radius: 5, - }, - layoutConfig: layoutConfig().just().configMargin({ - left: 10, - right: 10, - bottom: 10, - }) - }),]).apply({ - gravity: Gravity.Center, - space: 10, - } as IVLayout), - vlayout([ - label("Shadow,color"), - box().apply({ - width: 100, - height: 100, - corners: 50, - shadow: { - opacity: 1, - color: colors[2], - offsetX: 5, - offsetY: 5, - radius: 5, - }, - layoutConfig: layoutConfig().just().configMargin({ - left: 10, - right: 10, - bottom: 10, - }) - }),]).apply({ - gravity: Gravity.Center, - space: 10, - } as IVLayout), - ]).apply({ space: 20 } as IHLayout), - hlayout([ - vlayout([ - label("Corner round"), - box().apply({ - width: 100, - height: 100, - corners: 50, - layoutConfig: layoutConfig().just().configMargin({ - left: 5, - right: 5, - bottom: 5, - }) - }),]).apply({ - gravity: Gravity.Center, - space: 10, - } as IVLayout), - vlayout([ - label("Corner left top"), - box().apply({ - width: 100, - height: 100, - corners: { - leftTop: 50, - }, - layoutConfig: layoutConfig().just().configMargin({ - left: 5, - right: 5, - bottom: 5, - }) - }),]).apply({ - gravity: Gravity.Center, - space: 10, - } as IVLayout), - vlayout([ - label("Corner right top"), - box().apply({ - width: 100, - height: 100, - corners: { - rightTop: 50, - }, - layoutConfig: layoutConfig().just().configMargin({ - left: 5, - right: 5, - bottom: 5, - }) - }),]).apply({ - gravity: Gravity.Center, - space: 10, - } as IVLayout), - vlayout([ - label("Corner left bottom"), - box().apply({ - width: 100, - height: 100, - corners: { - leftBottom: 50, - }, - layoutConfig: layoutConfig().just().configMargin({ - left: 5, - right: 5, - bottom: 5, - }) - }),]).apply({ - gravity: Gravity.Center, - space: 10, - } as IVLayout), - vlayout([ - label("Corner right bottom"), - box().apply({ - width: 100, - height: 100, - corners: { - rightBottom: 50, - }, - layoutConfig: layoutConfig().just().configMargin({ - left: 5, - right: 5, - bottom: 5, - }) - }),]).apply({ - gravity: Gravity.Center, - space: 10, - } as IVLayout), - ]).apply({ space: 20 } as IHLayout), - ]).also(it => { - it.space = 20 - }), - ).also(it => { - it.layoutConfig = layoutConfig().most() - }).in(rootView) + vlayout( + [ + hlayout( + [ + vlayout( + [ + label("Origin view"), + box().apply({ + width: 100, + height: 100 + }),], + { + gravity: Gravity.Center, + space: 10, + } + ), + vlayout( + [ + label("Border"), + box().apply({ + width: 100, + height: 100, + border: { + width: 5, + color: colors[3] + }, + layoutConfig: layoutConfig().just().configMargin({ + left: 5, + right: 5, + bottom: 5, + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + }), + vlayout( + [ + label("Corner"), + box().apply({ + width: 100, + height: 100, + corners: 10, + layoutConfig: layoutConfig().just().configMargin({ + bottom: 10 + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + } + ), + vlayout( + [ + label("Shadow"), + box().apply({ + width: 100, + height: 100, + shadow: { + opacity: 1, + color: colors[1], + offsetX: 3, + offsetY: 3, + radius: 5, + }, + layoutConfig: layoutConfig().just().configMargin({ + bottom: 10 + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + } + ), + ], + { space: 20 } + ), + hlayout( + [ + vlayout( + [ + label("Border,Corner"), + box().apply({ + width: 100, + height: 100, + border: { + width: 5, + color: colors[3] + }, + corners: 10, + layoutConfig: layoutConfig().just().configMargin({ + left: 5, + right: 5, + bottom: 5, + }) + }),], + { + gravity: Gravity.Center, + space: 10, + } + ), + vlayout( + [ + label("Border,Shadow"), + box().apply({ + width: 100, + height: 100, + border: { + width: 5, + color: colors[3] + }, + shadow: { + opacity: 1, + color: colors[1], + offsetX: 3, + offsetY: 3, + radius: 5, + }, + layoutConfig: layoutConfig().just().configMargin({ + bottom: 10 + }) + }),], + { + gravity: Gravity.Center, + space: 10, + }), + vlayout( + [ + label("Corner,Shadow"), + box().apply({ + width: 100, + height: 100, + corners: 10, + shadow: { + opacity: 1, + color: colors[1], + offsetX: 3, + offsetY: 3, + radius: 5, + }, + layoutConfig: layoutConfig().just().configMargin({ + bottom: 10 + }) + }),], + { + gravity: Gravity.Center, + space: 10, + }), + vlayout( + [ + label("Border,Corner,Shadow"), + box().apply({ + width: 100, + height: 100, + border: { + width: 5, + color: colors[3] + }, + corners: 10, + shadow: { + opacity: 1, + color: colors[1], + offsetX: 3, + offsetY: 3, + radius: 5, + }, + layoutConfig: layoutConfig().just().configMargin({ + left: 5, + right: 5, + bottom: 5, + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + } + ), + ], + { space: 20 } + ), + hlayout( + [ + vlayout( + [ + label("Shadow"), + box().apply({ + width: 100, + height: 100, + corners: 50, + shadow: { + opacity: 1, + color: colors[1], + offsetX: 0, + offsetY: 0, + radius: 10, + }, + layoutConfig: layoutConfig().just().configMargin({ + left: 10, + right: 10, + bottom: 10, + }) + }),], + { + gravity: Gravity.Center, + space: 10, + } + ), + vlayout( + [ + label("Shadow,offset"), + box().apply({ + width: 100, + height: 100, + corners: 50, + shadow: { + opacity: 1, + color: colors[1], + offsetX: 5, + offsetY: 5, + radius: 5, + }, + layoutConfig: layoutConfig().just().configMargin({ + left: 10, + right: 10, + bottom: 10, + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + }), + vlayout( + [ + label("Shadow,opacity"), + box().apply({ + width: 100, + height: 100, + corners: 50, + shadow: { + opacity: 0.5, + color: colors[1], + offsetX: 5, + offsetY: 5, + radius: 5, + }, + layoutConfig: layoutConfig().just().configMargin({ + left: 10, + right: 10, + bottom: 10, + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + }), + vlayout( + [ + label("Shadow,color"), + box().apply({ + width: 100, + height: 100, + corners: 50, + shadow: { + opacity: 1, + color: colors[2], + offsetX: 5, + offsetY: 5, + radius: 5, + }, + layoutConfig: layoutConfig().just().configMargin({ + left: 10, + right: 10, + bottom: 10, + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + }), + ], + { space: 20 } + ), + hlayout( + [ + vlayout( + [ + label("Corner round"), + box().apply({ + width: 100, + height: 100, + corners: 50, + layoutConfig: layoutConfig().just().configMargin({ + left: 5, + right: 5, + bottom: 5, + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + }), + vlayout( + [ + label("Corner left top"), + box().apply({ + width: 100, + height: 100, + corners: { + leftTop: 50, + }, + layoutConfig: layoutConfig().just().configMargin({ + left: 5, + right: 5, + bottom: 5, + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + }), + vlayout( + [ + label("Corner right top"), + box().apply({ + width: 100, + height: 100, + corners: { + rightTop: 50, + }, + layoutConfig: layoutConfig().just().configMargin({ + left: 5, + right: 5, + bottom: 5, + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + }), + vlayout( + [ + label("Corner left bottom"), + box().apply({ + width: 100, + height: 100, + corners: { + leftBottom: 50, + }, + layoutConfig: layoutConfig().just().configMargin({ + left: 5, + right: 5, + bottom: 5, + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + }), + vlayout( + [ + label("Corner right bottom"), + box().apply({ + width: 100, + height: 100, + corners: { + rightBottom: 50, + }, + layoutConfig: layoutConfig().just().configMargin({ + left: 5, + right: 5, + bottom: 5, + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + }), + ], + { space: 20 } + ), + ], + { + space: 20 + }), + { + layoutConfig: layoutConfig().most() + } + ).in(rootView) } } \ No newline at end of file diff --git a/doric-demo/src/FlowLayoutDemo.ts b/doric-demo/src/FlowLayoutDemo.ts index 0dc7fb9e..21097537 100644 --- a/doric-demo/src/FlowLayoutDemo.ts +++ b/doric-demo/src/FlowLayoutDemo.ts @@ -14,45 +14,46 @@ const imageUrls = [ ] @Entry class FlowDemo extends Panel { - build(rootView: Group): void { - flowlayout({ + build(rootView: Group) { + const flowView = flowlayout({ layoutConfig: layoutConfig().most(), itemCount: 100, columnCount: 3, columnSpace: 10, rowSpace: 10, renderItem: (idx) => { - return flowItem(text({ - text: `${idx}`, - textColor: Color.WHITE, - textSize: 20, - layoutConfig: layoutConfig().fit().configAlignment(Gravity.Center) - })).apply({ - backgroundColor: colors[idx % colors.length], - height: 50 + (idx % 3) * 20, - layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), - }) + return flowItem( + text({ + text: `${idx}`, + textColor: Color.WHITE, + textSize: 20, + layoutConfig: layoutConfig().fit().configAlignment(Gravity.Center) + }), + { + backgroundColor: colors[idx % colors.length], + height: 50 + (idx % 3) * 20, + layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), + }) }, - }).also(it => { - it.loadMore = true - it.onLoadMore = () => { + loadMore: true, + onLoadMore: () => { setTimeout(() => { - it.itemCount += 20 + flowView.itemCount += 20 }, 1000) - } - it.loadMoreView = new FlowLayoutItem().apply({ - backgroundColor: colors[500 % colors.length], - height: 50, - layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), - }).also(it => { - it.addChild(text({ + }, + loadMoreView: flowItem( + text({ text: 'load more', textColor: Color.WHITE, textSize: 20, layoutConfig: layoutConfig().fit().configAlignment(Gravity.Center) - })) - }) - }) - .in(rootView) + }), + { + backgroundColor: colors[500 % colors.length], + height: 50, + layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), + }) + }).in(rootView) + } } \ No newline at end of file diff --git a/doric-demo/src/Gobang.ts b/doric-demo/src/Gobang.ts index d1563c32..15d876a4 100644 --- a/doric-demo/src/Gobang.ts +++ b/doric-demo/src/Gobang.ts @@ -232,95 +232,102 @@ class GoBangVH extends ViewHolder { const borderWidth = gap this.gap = state.gap scroller( - vlayout([ - text({ - text: "五子棋", - layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), - textSize: 30, - textColor: Color.WHITE, - backgroundColor: colors[0], - textAlignment: gravity().center(), - height: 50, - }), - stack([ - stack([ - ...(new Array(count - 2)).fill(0).map((_, idx) => { - return columLine().also(v => { - v.left = (idx + 1) * gap - }) - }), - ...(new Array(count - 2)).fill(0).map((_, idx) => { - return rowLine().also(v => { - v.top = (idx + 1) * gap - }) - }), - ]) - .apply({ - layoutConfig: layoutConfig().just() - .configMargin({ top: borderWidth, left: borderWidth }), - width: boardSize, - height: boardSize, - border: { - width: 1, - color: lineColor, - }, - }), - ...this.targetZone = (new Array(count * count)).fill(0).map((_, idx) => { - const row = Math.floor(idx / count) - const colum = idx % count - return pointer(gap).also(v => { - v.top = (row - 0.5) * gap + borderWidth - v.left = (colum - 0.5) * gap + borderWidth - }) + vlayout( + [ + text({ + text: "五子棋", + layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), + textSize: 30, + textColor: Color.WHITE, + backgroundColor: colors[0], + textAlignment: gravity().center(), + height: 50, }), - ]).apply({ - layoutConfig: layoutConfig().just(), - width: boardSize + 2 * borderWidth, - height: boardSize + 2 * borderWidth, - backgroundColor: Color.parse("#E6B080"), - }), - - this.gameMode = text({ - text: "游戏模式", - textSize: 20, - textColor: Color.WHITE, - layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST), - height: 50, - backgroundColor: colors[8], - }), - hlayout([ - this.currentRole = text({ - text: "当前:", + stack( + [ + stack( + [ + ...(new Array(count - 2)).fill(0).map((_, idx) => { + return columLine().also(v => { + v.left = (idx + 1) * gap + }) + }), + ...(new Array(count - 2)).fill(0).map((_, idx) => { + return rowLine().also(v => { + v.top = (idx + 1) * gap + }) + }), + ], + { + layoutConfig: layoutConfig().just() + .configMargin({ top: borderWidth, left: borderWidth }), + width: boardSize, + height: boardSize, + border: { + width: 1, + color: lineColor, + }, + }), + ...this.targetZone = (new Array(count * count)).fill(0).map((_, idx) => { + const row = Math.floor(idx / count) + const colum = idx % count + return pointer(gap).also(v => { + v.top = (row - 0.5) * gap + borderWidth + v.left = (colum - 0.5) * gap + borderWidth + }) + }), + ], + { + layoutConfig: layoutConfig().just(), + width: boardSize + 2 * borderWidth, + height: boardSize + 2 * borderWidth, + backgroundColor: Color.parse("#E6B080"), + } + ), + this.gameMode = text({ + text: "游戏模式", textSize: 20, textColor: Color.WHITE, - layoutConfig: layoutConfig().just().configWeight(1), + layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST), height: 50, - backgroundColor: colors[1], + backgroundColor: colors[8], }), - this.result = text({ - text: "获胜方:", + hlayout( + [ + this.currentRole = text({ + text: "当前:", + textSize: 20, + textColor: Color.WHITE, + layoutConfig: layoutConfig().just().configWeight(1), + height: 50, + backgroundColor: colors[1], + }), + this.result = text({ + text: "获胜方:", + textSize: 20, + textColor: Color.WHITE, + layoutConfig: layoutConfig().just().configWeight(1), + height: 50, + backgroundColor: colors[2], + }), + ], + { + layoutConfig: layoutConfig().fit().configWidth(LayoutSpec.MOST), + }), + this.assistant = text({ + text: "提示", textSize: 20, textColor: Color.WHITE, - layoutConfig: layoutConfig().just().configWeight(1), + layoutConfig: layoutConfig().just().configWidth(LayoutSpec.MOST), height: 50, - backgroundColor: colors[2], + backgroundColor: colors[3], }), - ]).apply({ - layoutConfig: layoutConfig().fit().configWidth(LayoutSpec.MOST), - } as IHLayout), - this.assistant = text({ - text: "提示", - textSize: 20, - textColor: Color.WHITE, - layoutConfig: layoutConfig().just().configWidth(LayoutSpec.MOST), - height: 50, - backgroundColor: colors[3], - }), - ]) - .apply({ + ], + { layoutConfig: layoutConfig().fit(), backgroundColor: Color.parse('#ecf0f1'), - } as IVLayout) + } + ) ).in(this.root) } } @@ -375,44 +382,45 @@ class GoBangVM extends ViewModel{ } }) vh.gameMode.onClick = () => { - popover(context).show(vlayout([ - ...[ - { - label: "黑方:人 白方:人", - mode: GameMode.P2P, - }, - { - label: "黑方:人 白方:机", - mode: GameMode.P2C, - }, - { - label: "黑方:机 白方:人", - mode: GameMode.C2P, - }, - ].map((e) => text({ - text: e.label, - textSize: 20, - textColor: Color.WHITE, - layoutConfig: layoutConfig().just(), - height: 50, - width: 300, - backgroundColor: (state.gameMode === e.mode) ? Color.parse('#636e72') : Color.parse('#b2bec3'), - onClick: () => { - this.updateState(s => { - s.gameMode = e.mode - this.reset(s) - }) - popover(context).dismiss() - }, - })) - ]) - .apply({ + popover(context).show(vlayout( + [ + ...[ + { + label: "黑方:人 白方:人", + mode: GameMode.P2P, + }, + { + label: "黑方:人 白方:机", + mode: GameMode.P2C, + }, + { + label: "黑方:机 白方:人", + mode: GameMode.C2P, + }, + ].map((e) => text({ + text: e.label, + textSize: 20, + textColor: Color.WHITE, + layoutConfig: layoutConfig().just(), + height: 50, + width: 300, + backgroundColor: (state.gameMode === e.mode) ? Color.parse('#636e72') : Color.parse('#b2bec3'), + onClick: () => { + this.updateState(s => { + s.gameMode = e.mode + this.reset(s) + }) + popover(context).dismiss() + }, + })) + ], + { layoutConfig: layoutConfig().most(), onClick: () => { popover(context).dismiss() }, gravity: Gravity.Center, - } as IVLayout) + }) ) } vh.result.onClick = () => { diff --git a/doric-demo/src/ImageDemo.ts b/doric-demo/src/ImageDemo.ts index 513f5d6b..8c228fdf 100644 --- a/doric-demo/src/ImageDemo.ts +++ b/doric-demo/src/ImageDemo.ts @@ -7,104 +7,109 @@ const imageUrl = 'https://img.zcool.cn/community/01e75b5da933daa801209e1ffa4649. class ImageDemo extends Panel { build(rootView: Group): void { let imageView: Image - scroller(vlayout([ - text({ - text: "Image Demo", - layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), - textSize: 30, - textColor: Color.WHITE, - backgroundColor: colors[5], - textAlignment: gravity().center(), - height: 50, - }), - label('Gif'), - image({ - imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world-cup_2014_42.gif", - scaleType: ScaleType.ScaleToFill, - loadCallback: function (ret) { - log('this') - log('loadCallback', ret) - } - }), - label('APNG'), - image({ - imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world_cup_2014_42.png", - loadCallback: (ret) => { - } - }), - label('Animated WebP'), - image({ - imageUrl: "https://p.upyun.com/demo/webp/webp/animated-gif-0.webp", - loadCallback: (ret) => { - } - }), - label('WebP'), - imageView = image({ - imageUrl: "https://p.upyun.com/demo/webp/webp/jpg-0.webp", - loadCallback: (ret) => { - if (ret) { - imageView.width = ret.width - imageView.height = ret.height - } - } - }), - label('ScaleToFill'), - image({ - imageUrl, - width: 300, - height: 300, - isBlur: true, - border: { - width: 2, - color: Color.GRAY, - }, - scaleType: ScaleType.ScaleToFill, - layoutConfig: layoutConfig().just(), - loadCallback: (ret) => { - } - }), - label('ScaleAspectFit'), - image({ - imageUrl, - width: 300, - height: 300, - border: { - width: 2, - color: Color.GRAY, - }, - scaleType: ScaleType.ScaleAspectFit, - layoutConfig: layoutConfig().just(), - }), - label('ScaleAspectFill'), - image({ - imageUrl, - width: 300, - height: 300, - border: { - width: 2, - color: Color.GRAY, - }, - scaleType: ScaleType.ScaleAspectFill, - layoutConfig: layoutConfig().just(), - }), - label('ImageBase64'), - image({ - imageBase64: img_base64, - width: 300, - height: 300, - border: { - width: 2, - color: Color.GRAY, - }, - scaleType: ScaleType.ScaleAspectFill, - layoutConfig: layoutConfig().just(), - }), - ]).apply({ - layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT), - gravity: gravity().center(), - space: 10, - } as IVLayout)).apply({ - layoutConfig: layoutConfig().most(), - }).in(rootView) + scroller( + vlayout( + [ + text({ + text: "Image Demo", + layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), + textSize: 30, + textColor: Color.WHITE, + backgroundColor: colors[5], + textAlignment: gravity().center(), + height: 50, + }), + label('Gif'), + image({ + imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world-cup_2014_42.gif", + scaleType: ScaleType.ScaleToFill, + loadCallback: function (ret) { + log('this') + log('loadCallback', ret) + } + }), + label('APNG'), + image({ + imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world_cup_2014_42.png", + loadCallback: (ret) => { + } + }), + label('Animated WebP'), + image({ + imageUrl: "https://p.upyun.com/demo/webp/webp/animated-gif-0.webp", + loadCallback: (ret) => { + } + }), + label('WebP'), + imageView = image({ + imageUrl: "https://p.upyun.com/demo/webp/webp/jpg-0.webp", + loadCallback: (ret) => { + if (ret) { + imageView.width = ret.width + imageView.height = ret.height + } + } + }), + label('ScaleToFill'), + image({ + imageUrl, + width: 300, + height: 300, + isBlur: true, + border: { + width: 2, + color: Color.GRAY, + }, + scaleType: ScaleType.ScaleToFill, + layoutConfig: layoutConfig().just(), + loadCallback: (ret) => { + } + }), + label('ScaleAspectFit'), + image({ + imageUrl, + width: 300, + height: 300, + border: { + width: 2, + color: Color.GRAY, + }, + scaleType: ScaleType.ScaleAspectFit, + layoutConfig: layoutConfig().just(), + }), + label('ScaleAspectFill'), + image({ + imageUrl, + width: 300, + height: 300, + border: { + width: 2, + color: Color.GRAY, + }, + scaleType: ScaleType.ScaleAspectFill, + layoutConfig: layoutConfig().just(), + }), + label('ImageBase64'), + image({ + imageBase64: img_base64, + width: 300, + height: 300, + border: { + width: 2, + color: Color.GRAY, + }, + scaleType: ScaleType.ScaleAspectFill, + layoutConfig: layoutConfig().just(), + }), + ], + { + layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT), + gravity: gravity().center(), + space: 10, + }), + { + layoutConfig: layoutConfig().most(), + } + ).in(rootView) } } \ No newline at end of file diff --git a/doric-demo/src/InputDemo.ts b/doric-demo/src/InputDemo.ts index c2e6f175..802c02c3 100644 --- a/doric-demo/src/InputDemo.ts +++ b/doric-demo/src/InputDemo.ts @@ -4,44 +4,46 @@ import { title, colors } from "./utils"; class InputDemo extends Panel { build(root: Group) { scroller( - vlayout([ - title("Input Demo"), - (new Input).also(it => { - it.layoutConfig = layoutConfig().just().configHeight(LayoutSpec.FIT) - it.width = 300 - it.multiline = false - it.hintText = "HintText" - it.textAlignment = Gravity.Left - it.onTextChange = (s) => { - log(`onTextChange:${s}`) - } - it.onFocusChange = (f) => { - log(`onFocusChange:${f}`) - } - }), - (new Input).also(it => { - it.layoutConfig = layoutConfig().fit() - it.hintText = "HintText" - it.hintTextColor = colors[2] - it.textAlignment = Gravity.Left - it.textColor = colors[3] - it.onTextChange = (s) => { - log(`onTextChange:${s}`) - } - it.onFocusChange = (f) => { - log(`onFocusChange:${f}`) - } - it.backgroundColor = colors[1].alpha(0.3) - }), - ]) - .also(it => { - it.space = 10 - it.layoutConfig = layoutConfig().most().configHeight(LayoutSpec.FIT) - })) - .apply({ + vlayout( + [ + title("Input Demo"), + (new Input).also(it => { + it.layoutConfig = layoutConfig().just().configHeight(LayoutSpec.FIT) + it.width = 300 + it.multiline = false + it.hintText = "HintText" + it.textAlignment = Gravity.Left + it.onTextChange = (s) => { + log(`onTextChange:${s}`) + } + it.onFocusChange = (f) => { + log(`onFocusChange:${f}`) + } + }), + (new Input).also(it => { + it.layoutConfig = layoutConfig().fit() + it.hintText = "HintText" + it.hintTextColor = colors[2] + it.textAlignment = Gravity.Left + it.textColor = colors[3] + it.onTextChange = (s) => { + log(`onTextChange:${s}`) + } + it.onFocusChange = (f) => { + log(`onFocusChange:${f}`) + } + it.backgroundColor = colors[1].alpha(0.3) + }), + ], + { + space: 10, + layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT) + } + ), + { layoutConfig: layoutConfig().most() - }) - .in(root) + } + ).in(root) } } \ No newline at end of file diff --git a/doric-demo/src/LayoutDemo.ts b/doric-demo/src/LayoutDemo.ts index 16a99ce3..504ef235 100644 --- a/doric-demo/src/LayoutDemo.ts +++ b/doric-demo/src/LayoutDemo.ts @@ -1,5 +1,5 @@ -import { Group, Panel, Text, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, slider, slideItem, scroller, IVLayout, IHLayout, layoutConfig } from "doric"; +import { Group, Panel, text, gravity, Color, LayoutSpec, vlayout, hlayout, scroller, IVLayout, IHLayout, layoutConfig, stack, Gravity } from "doric"; const colors = [ "#f0932b", @@ -11,459 +11,500 @@ const colors = [ ] function box(idx = 0) { - return (new Stack).also(it => { - it.width = it.height = 20 - it.backgroundColor = Color.parse(colors[idx || 0]) + return stack([], { + width: 20, + height: 20, + layoutConfig: layoutConfig().just(), + backgroundColor: Color.parse(colors[idx || 0]) }) } + function boxStr(str: string, idx = 0) { - return (new Text).also(it => { - it.width = it.height = 20 - it.text = str - it.textColor = Color.parse('#ffffff') - it.backgroundColor = Color.parse(colors[idx || 0]) + return text({ + width: 20, + height: 20, + text: str, + textColor: Color.WHITE, + layoutConfig: layoutConfig().just(), + backgroundColor: Color.parse(colors[idx || 0]) }) } + function label(str: string) { return text({ text: str, textSize: 16, }) } + @Entry class LayoutDemo extends Panel { build(rootView: Group) { scroller( - hlayout([ - vlayout([ - label("Horizontal Layout(Align to Top)"), - hlayout([ - box().apply({ - height: 20 - }), - box().apply({ - height: 40 - }), - box().apply({ - height: 60 - }), - box().apply({ - height: 40 - }), - box().apply({ - height: 20 - }), - ]).also(it => { - it.space = 20 - }), - label("Horizontal Layout(Align to Bottom)"), - hlayout([ - box().apply({ - height: 20 - }), - box().apply({ - height: 40 - }), - box().apply({ - height: 60 - }), - box().apply({ - height: 40 - }), - box().apply({ - height: 20 - }), - ]).also(it => { - it.space = 20 - it.gravity = gravity().bottom() - }), - label("Horizontal Layout(Align to Center)"), - hlayout([ - box().apply({ - height: 20 - }), - box().apply({ - height: 40 - }), - box().apply({ - height: 60 - }), - box().apply({ - height: 40 - }), - box().apply({ - height: 20 - }), - ]).also(it => { - it.space = 20 - it.gravity = gravity().center() - }), - label("Horizontal Layout(Weight)"), - hlayout( + hlayout( + [ + vlayout( [ - boxStr('weight=1', 3).apply({ - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - weight: 1, + label("Horizontal Layout(Align to Top)"), + hlayout( + [ + box().apply({ + height: 20 + }), + box().apply({ + height: 40 + }), + box().apply({ + height: 60 + }), + box().apply({ + height: 40 + }), + box().apply({ + height: 20 + }), + ], + { + space: 20 } - }), - box(2), - box(4), + ), + label("Horizontal Layout(Align to Bottom)"), + hlayout( + [ + box().apply({ + height: 20 + }), + box().apply({ + height: 40 + }), + box().apply({ + height: 60 + }), + box().apply({ + height: 40 + }), + box().apply({ + height: 20 + }), + ], + { + space: 20, + gravity: Gravity.Bottom + }), + label("Horizontal Layout(Align to Center)"), + hlayout( + [ + box().apply({ + height: 20 + }), + box().apply({ + height: 40 + }), + box().apply({ + height: 60 + }), + box().apply({ + height: 40 + }), + box().apply({ + height: 20 + }), + ], + { + space: 20, + gravity: Gravity.Center + } + ), + label("Horizontal Layout(Weight)"), + hlayout( + [ + boxStr('weight=1', 3).apply({ + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + weight: 1, + } + }), + box(2), + box(4), + ], + { + width: 200, + height: 30, + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + }, + backgroundColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + }), + hlayout( + [ + box(3), + boxStr('weight=1', 2).apply({ + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + weight: 1, + } + }), + box(4), + ], + { + width: 200, + height: 30, + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + }, + backgroundColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + } + ), + hlayout( + [ + box(3), + box(2), + boxStr('weight=1', 4).apply({ + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + weight: 1, + } + }), + ], + { + width: 200, + height: 30, + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + }, + backgroundColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + } + ), + hlayout( + [ + boxStr('weight=1', 3).apply({ + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + weight: 1, + } + }), + boxStr('weight=1', 2).apply({ + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + weight: 1, + } + }), + box(4), + ], + { + width: 200, + height: 30, + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + }, + backgroundColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + } + ), + hlayout( + [ + boxStr('weight=1', 3).apply({ + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + weight: 1, + } + }), + boxStr('weight=1', 2).apply({ + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + weight: 1, + } + }), + boxStr('weight=1', 4).apply({ + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + weight: 1, + } + }), + ], + { + width: 200, + height: 30, + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + }, + backgroundColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + }), ], { - width: 200, - height: 30, - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - }, - backgroundColor: Color.parse('#eeeeee'), - gravity: gravity().center(), - }), - hlayout( + space: 20, + gravity: Gravity.Center + } + ), + vlayout( [ - box(3), - boxStr('weight=1', 2).apply({ - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - weight: 1, - } - }), - box(4), + label("Vertical Layout(Algin to Left)"), + vlayout( + [ + box(1).apply({ + width: 20 + }), + box(1).apply({ + width: 40 + }), + box(1).apply({ + width: 60 + }), + box(1).apply({ + width: 40 + }), + box(1).apply({ + width: 20 + }), + ], + { + space: 20 + }), + label("Vertical Layout(Algin to Right)"), + vlayout( + [ + box(1).apply({ + width: 20 + }), + box(1).apply({ + width: 40 + }), + box(1).apply({ + width: 60 + }), + box(1).apply({ + width: 40 + }), + box(1).apply({ + width: 20 + }), + ], + { + space: 20, + gravity: gravity().right(), + }), + label("Vertical Layout(Algin to Center)"), + vlayout( + [ + box(1).apply({ + width: 20 + }), + box(1).apply({ + width: 40 + }), + box(1).apply({ + width: 60 + }), + box(1).apply({ + width: 40 + }), + box(1).apply({ + width: 20 + }), + ], + { + space: 20, + gravity: gravity().center(), + }), + label("Vertical Layout(Weight)"), + hlayout( + [ + vlayout( + [ + boxStr('weight=1', 3).apply({ + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.JUST, + weight: 1, + }, + }), + box(2).apply({ + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.JUST, + } + }), + box(4).apply({ + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.JUST, + } + }), + ], + { + width: 100, + height: 200, + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + }, + backgroundColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + }), + vlayout( + [ + box(3).apply({ + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.JUST, + }, + }), + boxStr('weight=1', 2).apply({ + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.JUST, + weight: 1, + } + }), + box(4).apply({ + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.JUST, + } + }), + ], + { + width: 100, + height: 200, + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + }, + backgroundColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + }), + vlayout( + [ + box(3).apply({ + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.JUST, + }, + }), + box(2).apply({ + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.JUST, + }, + }), + boxStr('weight=1', 4).apply({ + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.JUST, + weight: 1, + } + }), + ], + { + width: 100, + height: 200, + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + }, + backgroundColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + }), + vlayout( + [ + boxStr('weight=1', 3).apply({ + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.JUST, + weight: 1, + }, + }), + boxStr('weight=1', 2).apply({ + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.JUST, + weight: 1, + } + }), + box(4).apply({ + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.JUST, + } + }), + ], + { + width: 100, + height: 200, + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + }, + backgroundColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + }), + vlayout( + [ + boxStr('weight=1', 3).apply({ + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.JUST, + weight: 1, + }, + }), + boxStr('weight=1', 2).apply({ + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.JUST, + weight: 1, + } + }), + boxStr('weight=1', 4).apply({ + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.JUST, + weight: 1, + } + }), + ], + { + width: 100, + height: 200, + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + }, + backgroundColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + }), + ], + { + space: 20 + }), ], { - width: 200, - height: 30, - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - }, - backgroundColor: Color.parse('#eeeeee'), - gravity: gravity().center(), - } - ), - hlayout( - [ - box(3), - box(2), - boxStr('weight=1', 4).apply({ - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - weight: 1, - } - }), - ], - { - width: 200, - height: 30, - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - }, - backgroundColor: Color.parse('#eeeeee'), - gravity: gravity().center(), - } - ), - hlayout([ - boxStr('weight=1', 3).apply({ - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - weight: 1, - } - }), - boxStr('weight=1', 2).apply({ - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - weight: 1, - } - }), - box(4), - ], - { - width: 200, - height: 30, - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - }, - backgroundColor: Color.parse('#eeeeee'), - gravity: gravity().center(), - } - ), - hlayout([ - boxStr('weight=1', 3).apply({ - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - weight: 1, - } - }), - boxStr('weight=1', 2).apply({ - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - weight: 1, - } - }), - boxStr('weight=1', 4).apply({ - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - weight: 1, - } - }), - ]).apply({ - width: 200, - height: 30, - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - }, - backgroundColor: Color.parse('#eeeeee'), - gravity: gravity().center(), - } as IHLayout), - ]).also(it => { - it.space = 20 - it.gravity = gravity().center() + space: 20, + gravity: Gravity.Left + }) + ], + { + space: 20 }), - vlayout([ - label("Vertical Layout(Algin to Left)"), - vlayout([ - box(1).apply({ - width: 20 - }), - box(1).apply({ - width: 40 - }), - box(1).apply({ - width: 60 - }), - box(1).apply({ - width: 40 - }), - box(1).apply({ - width: 20 - }), - ]).apply({ - space: 20 - } as IVLayout), - label("Vertical Layout(Algin to Right)"), - vlayout([ - box(1).apply({ - width: 20 - }), - box(1).apply({ - width: 40 - }), - box(1).apply({ - width: 60 - }), - box(1).apply({ - width: 40 - }), - box(1).apply({ - width: 20 - }), - ]).apply({ - space: 20, - gravity: gravity().right(), - } as IVLayout), - label("Vertical Layout(Algin to Center)"), - vlayout([ - box(1).apply({ - width: 20 - }), - box(1).apply({ - width: 40 - }), - box(1).apply({ - width: 60 - }), - box(1).apply({ - width: 40 - }), - box(1).apply({ - width: 20 - }), - ]).apply({ - space: 20, - gravity: gravity().center(), - } as IVLayout), - label("Vertical Layout(Weight)"), - hlayout([ - - vlayout([ - boxStr('weight=1', 3).apply({ - layoutConfig: { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.JUST, - weight: 1, - }, - }), - box(2).apply({ - layoutConfig: { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.JUST, - } - }), - box(4).apply({ - layoutConfig: { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.JUST, - } - }), - ]).apply({ - width: 100, - height: 200, - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - }, - backgroundColor: Color.parse('#eeeeee'), - gravity: gravity().center(), - } as IVLayout), - vlayout([ - box(3).apply({ - layoutConfig: { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.JUST, - }, - }), - boxStr('weight=1', 2).apply({ - layoutConfig: { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.JUST, - weight: 1, - } - }), - box(4).apply({ - layoutConfig: { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.JUST, - } - }), - ]).apply({ - width: 100, - height: 200, - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - }, - backgroundColor: Color.parse('#eeeeee'), - gravity: gravity().center(), - } as IVLayout), - vlayout([ - box(3).apply({ - layoutConfig: { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.JUST, - }, - }), - box(2).apply({ - layoutConfig: { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.JUST, - }, - }), - boxStr('weight=1', 4).apply({ - layoutConfig: { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.JUST, - weight: 1, - } - }), - ]).apply({ - width: 100, - height: 200, - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - }, - backgroundColor: Color.parse('#eeeeee'), - gravity: gravity().center(), - } as IVLayout), - vlayout([ - boxStr('weight=1', 3).apply({ - layoutConfig: { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.JUST, - weight: 1, - }, - }), - boxStr('weight=1', 2).apply({ - layoutConfig: { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.JUST, - weight: 1, - } - }), - box(4).apply({ - layoutConfig: { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.JUST, - } - }), - ]).apply({ - width: 100, - height: 200, - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - }, - backgroundColor: Color.parse('#eeeeee'), - gravity: gravity().center(), - } as IVLayout), - vlayout([ - boxStr('weight=1', 3).apply({ - layoutConfig: { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.JUST, - weight: 1, - }, - }), - boxStr('weight=1', 2).apply({ - layoutConfig: { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.JUST, - weight: 1, - } - }), - boxStr('weight=1', 4).apply({ - layoutConfig: { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.JUST, - weight: 1, - } - }), - ]).apply({ - width: 100, - height: 200, - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - }, - backgroundColor: Color.parse('#eeeeee'), - gravity: gravity().center(), - } as IVLayout), - ]).also(it => { - it.space = 20 - }), - - ]).also(it => { - it.space = 20 - it.gravity = gravity().left() - }) - ]).also(it => { - it.space = 20 - }), - ).also(it => { - it.layoutConfig = layoutConfig().most() - }) - .in(rootView) + { + layoutConfig: layoutConfig().most() + } + ).in(rootView) } } \ No newline at end of file diff --git a/doric-demo/src/ListDemo.ts b/doric-demo/src/ListDemo.ts index 1f1a8a1d..18bb35e9 100644 --- a/doric-demo/src/ListDemo.ts +++ b/doric-demo/src/ListDemo.ts @@ -5,121 +5,120 @@ class ListPanel extends Panel { build(rootView: Group): void { let refreshView: Refreshable let offset = Math.ceil(Math.random() * colors.length) - vlayout([ - text({ - text: "ListDemo", - layoutConfig: { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.JUST, - }, - textSize: 30, - textColor: Color.parse("#535c68"), - backgroundColor: Color.parse("#dff9fb"), - textAlignment: gravity().center(), - height: 50, - }), - refreshView = refreshable({ - onRefresh: () => { - refreshView.setRefreshing(context, false).then(() => { - (refreshView.content as List).also(it => { - it.reset() - offset = Math.ceil(Math.random() * colors.length) - it.itemCount = 40 - it.loadMore = true - it.onLoadMore = () => { - setTimeout(() => { - it.itemCount += 10 - }, 1000) - } - it.loadMoreView = listItem(text({ - text: "Loading", - layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST).configAlignment(Gravity.Center), - height: 50, - })) - it.renderItem = (idx: number) => { - let counter!: Text - return listItem( - hlayout([ - text({ - layoutConfig: { - widthSpec: LayoutSpec.FIT, - heightSpec: LayoutSpec.JUST, - alignment: gravity().center(), - }, - text: `Cell At Line ${idx}`, - textAlignment: gravity().center(), - textColor: Color.parse("#ffffff"), - textSize: 20, - height: 50, - }), - text({ - textColor: Color.parse("#ffffff"), - textSize: 20, - text: "", - }).also(it => { - counter = it + vlayout( + [ + text({ + text: "ListDemo", + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.JUST, + }, + textSize: 30, + textColor: Color.parse("#535c68"), + backgroundColor: Color.parse("#dff9fb"), + textAlignment: gravity().center(), + height: 50, + }), + refreshView = refreshable({ + onRefresh: () => { + refreshView.setRefreshing(context, false).then(() => { + (refreshView.content as List).also(it => { + it.reset() + offset = Math.ceil(Math.random() * colors.length) + it.itemCount = 40 + it.loadMore = true + it.onLoadMore = () => { + setTimeout(() => { + it.itemCount += 10 + }, 1000) + } + it.loadMoreView = listItem(text({ + text: "Loading", + layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST).configAlignment(Gravity.Center), + height: 50, + })) + it.renderItem = (idx: number) => { + let counter!: Text + return listItem( + hlayout([ + text({ + layoutConfig: { + widthSpec: LayoutSpec.FIT, + heightSpec: LayoutSpec.JUST, + alignment: gravity().center(), + }, + text: `Cell At Line ${idx}`, + textAlignment: gravity().center(), + textColor: Color.parse("#ffffff"), + textSize: 20, + height: 50, + }), + text({ + textColor: Color.parse("#ffffff"), + textSize: 20, + text: "", + }).also(it => { + counter = it + it.layoutConfig = { + widthSpec: LayoutSpec.FIT, + heightSpec: LayoutSpec.FIT, + margin: { + left: 10, + } + } + }) + ]).also(it => { it.layoutConfig = { - widthSpec: LayoutSpec.FIT, + widthSpec: LayoutSpec.MOST, heightSpec: LayoutSpec.FIT, margin: { - left: 10, + bottom: 2, } } + it.gravity = gravity().center() + it.backgroundColor = colors[(idx + offset) % colors.length] + let clicked = 0 + it.onClick = () => { + counter.text = `Item Clicked ${++clicked}` + } }) - ]).also(it => { + ).also(it => { it.layoutConfig = { widthSpec: LayoutSpec.MOST, heightSpec: LayoutSpec.FIT, - margin: { - bottom: 2, - } } - it.gravity = gravity().center() - it.backgroundColor = colors[(idx + offset) % colors.length] - let clicked = 0 it.onClick = () => { - counter.text = `Item Clicked ${++clicked}` + log(`Click item at ${idx}`) + it.height += 10 + it.nativeChannel(context, "getWidth")().then( + resolve => { + log(`resolve,${resolve}`) + }, + reject => { + log(`reject,${reject}`) + }) } }) - ).also(it => { - it.layoutConfig = { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.FIT, - } - it.onClick = () => { - log(`Click item at ${idx}`) - it.height += 10 - it.nativeChannel(context, "getWidth")().then( - resolve => { - log(`resolve,${resolve}`) - }, - reject => { - log(`reject,${reject}`) - }) - } - }) - } + } + }) }) - }) - }, - header: rotatedArrow(), - content: list({ - itemCount: 0, - renderItem: () => new ListItem, - layoutConfig: { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.MOST, }, + header: rotatedArrow(), + content: list({ + itemCount: 0, + renderItem: () => new ListItem, + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.MOST, + }, + }), }), - }), - ]).also(it => { - it.layoutConfig = { - widthSpec: LayoutSpec.MOST, - heightSpec: LayoutSpec.MOST, - } - it.backgroundColor = Color.WHITE - }).in(rootView) + ], + { + layoutConfig: layoutConfig().most(), + backgroundColor: Color.WHITE + }).in(rootView) refreshView.backgroundColor = Color.YELLOW } } \ No newline at end of file diff --git a/doric-demo/src/ModalDemo.ts b/doric-demo/src/ModalDemo.ts index f4756080..03728fe5 100644 --- a/doric-demo/src/ModalDemo.ts +++ b/doric-demo/src/ModalDemo.ts @@ -4,147 +4,153 @@ import { colors, label } from "./utils"; @Entry class ModalDemo extends Panel { build(rootView: Group): void { - scroller(vlayout([ - text({ - text: "Modal", - layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), - textSize: 30, - textColor: Color.WHITE, - backgroundColor: colors[1], - textAlignment: Gravity.Center, - height: 50, - }), - label('toast on bottom'), - label('Click me').apply({ - width: 200, - height: 50, - backgroundColor: colors[0], - textSize: 30, - textColor: Color.WHITE, - layoutConfig: layoutConfig().just(), - onClick: () => { - modal(context).toast('This is a toast.') - } - } as IText), - label('toast on top'), - label('Click me').apply({ - width: 200, - height: 50, - backgroundColor: colors[0], - textSize: 30, - textColor: Color.WHITE, - layoutConfig: layoutConfig().just(), - onClick: () => { - modal(context).toast('This is a toast.', Gravity.Top) - } - } as IText), + scroller( + vlayout( + [ + text({ + text: "Modal", + layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), + textSize: 30, + textColor: Color.WHITE, + backgroundColor: colors[1], + textAlignment: Gravity.Center, + height: 50, + }), + label('toast on bottom'), + label('Click me').apply({ + width: 200, + height: 50, + backgroundColor: colors[0], + textSize: 30, + textColor: Color.WHITE, + layoutConfig: layoutConfig().just(), + onClick: () => { + modal(context).toast('This is a toast.') + } + } as IText), + label('toast on top'), + label('Click me').apply({ + width: 200, + height: 50, + backgroundColor: colors[0], + textSize: 30, + textColor: Color.WHITE, + layoutConfig: layoutConfig().just(), + onClick: () => { + modal(context).toast('This is a toast.', Gravity.Top) + } + } as IText), - label('toast on center'), - label('Click me').apply({ - width: 200, - height: 50, - backgroundColor: colors[0], - textSize: 30, - textColor: Color.WHITE, - layoutConfig: layoutConfig().just(), - onClick: () => { - modal(context).toast('This is a toast.', Gravity.Center) + label('toast on center'), + label('Click me').apply({ + width: 200, + height: 50, + backgroundColor: colors[0], + textSize: 30, + textColor: Color.WHITE, + layoutConfig: layoutConfig().just(), + onClick: () => { + modal(context).toast('This is a toast.', Gravity.Center) + } + } as IText), + text({ + text: "Alert", + layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), + textSize: 30, + textColor: Color.WHITE, + backgroundColor: colors[2], + textAlignment: Gravity.Center, + height: 50, + }), + label('Click me').apply({ + width: 200, + height: 50, + backgroundColor: colors[0], + textSize: 30, + textColor: Color.WHITE, + layoutConfig: layoutConfig().just(), + onClick: () => { + modal(context).alert({ + msg: 'This is alert.', + title: 'Alert title', + okLabel: "OkLabel" + }).then(e => { + modal(context).toast('Clicked OK.') + }) + } + } as IText), + text({ + text: "Confirm", + layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), + textSize: 30, + textColor: Color.WHITE, + backgroundColor: colors[3], + textAlignment: Gravity.Center, + height: 50, + }), + label('Click me').apply({ + width: 200, + height: 50, + backgroundColor: colors[0], + textSize: 30, + textColor: Color.WHITE, + layoutConfig: layoutConfig().just(), + onClick: () => { + modal(context).confirm({ + msg: 'This is Confirm.', + title: 'Confirm title', + okLabel: "OkLabel", + cancelLabel: 'CancelLabel', + }).then( + () => { + modal(context).toast('Clicked OK.') + }, + () => { + modal(context).toast('Clicked Cancel.') + }) + } + } as IText), + text({ + text: "Prompt", + layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), + textSize: 30, + textColor: Color.WHITE, + backgroundColor: colors[4], + textAlignment: Gravity.Center, + height: 50, + }), + label('Click me').apply({ + width: 200, + height: 50, + backgroundColor: colors[0], + textSize: 30, + textColor: Color.WHITE, + layoutConfig: layoutConfig().just(), + onClick: () => { + modal(context).prompt({ + msg: 'This is Prompt.', + title: 'Prompt title', + okLabel: "OkLabel", + cancelLabel: 'CancelLabel', + }).then( + e => { + modal(context).toast(`Clicked OK.Input:${e}`) + }, + e => { + modal(context).toast(`Clicked Cancel.Input:${e}`) + }) + } + } as IText), + ], + { + layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT), + gravity: Gravity.Center, + space: 10, } - } as IText), - text({ - text: "Alert", - layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), - textSize: 30, - textColor: Color.WHITE, - backgroundColor: colors[2], - textAlignment: Gravity.Center, - height: 50, - }), - label('Click me').apply({ - width: 200, - height: 50, - backgroundColor: colors[0], - textSize: 30, - textColor: Color.WHITE, - layoutConfig: layoutConfig().just(), - onClick: () => { - modal(context).alert({ - msg: 'This is alert.', - title: 'Alert title', - okLabel: "OkLabel" - }).then(e => { - modal(context).toast('Clicked OK.') - }) - } - } as IText), - text({ - text: "Confirm", - layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), - textSize: 30, - textColor: Color.WHITE, - backgroundColor: colors[3], - textAlignment: Gravity.Center, - height: 50, - }), - label('Click me').apply({ - width: 200, - height: 50, - backgroundColor: colors[0], - textSize: 30, - textColor: Color.WHITE, - layoutConfig: layoutConfig().just(), - onClick: () => { - modal(context).confirm({ - msg: 'This is Confirm.', - title: 'Confirm title', - okLabel: "OkLabel", - cancelLabel: 'CancelLabel', - }).then( - () => { - modal(context).toast('Clicked OK.') - }, - () => { - modal(context).toast('Clicked Cancel.') - }) - } - } as IText), - text({ - text: "Prompt", - layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), - textSize: 30, - textColor: Color.WHITE, - backgroundColor: colors[4], - textAlignment: Gravity.Center, - height: 50, - }), - label('Click me').apply({ - width: 200, - height: 50, - backgroundColor: colors[0], - textSize: 30, - textColor: Color.WHITE, - layoutConfig: layoutConfig().just(), - onClick: () => { - modal(context).prompt({ - msg: 'This is Prompt.', - title: 'Prompt title', - okLabel: "OkLabel", - cancelLabel: 'CancelLabel', - }).then( - e => { - modal(context).toast(`Clicked OK.Input:${e}`) - }, - e => { - modal(context).toast(`Clicked Cancel.Input:${e}`) - }) - } - } as IText), - ]).apply({ - layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT), - gravity: Gravity.Center, - space: 10, - } as IVLayout)).apply({ - layoutConfig: layoutConfig().most(), - }).in(rootView) + ), + { + layoutConfig: layoutConfig().most(), + } + ).in(rootView) } } \ No newline at end of file diff --git a/doric-demo/src/ScrollerDemo.ts b/doric-demo/src/ScrollerDemo.ts index 0f7a949d..7b041e7f 100644 --- a/doric-demo/src/ScrollerDemo.ts +++ b/doric-demo/src/ScrollerDemo.ts @@ -7,28 +7,29 @@ class ScrollerPanel extends Panel { scroller( vlayout([ scroller( - vlayout(new Array(100).fill(1).map(e => label('Scroll Content'))) - ).apply({ - layoutConfig: layoutConfig().just(), - width: 300, - height: 500, - backgroundColor: Color.RED, - }), + vlayout(new Array(100).fill(1).map(e => label('Scroll Content'))), + { + layoutConfig: layoutConfig().just(), + width: 300, + height: 500, + backgroundColor: Color.RED, + } + ), scroller( - vlayout(new Array(100).fill(1).map(e => label('Scroll Content'))) - ).apply({ - layoutConfig: layoutConfig().just(), - width: 300, - height: 500, - backgroundColor: Color.BLUE, - }) - ]) - ) - .apply({ + vlayout(new Array(100).fill(1).map(e => label('Scroll Content'))), + { + layoutConfig: layoutConfig().just(), + width: 300, + height: 500, + backgroundColor: Color.BLUE, + } + ) + ]), + { layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST), height: 500, backgroundColor: Color.YELLOW, - }) - .in(rootView) + } + ).in(rootView) } } \ No newline at end of file diff --git a/doric-demo/src/Snake.ts b/doric-demo/src/Snake.ts index 1998f217..ef3f972b 100644 --- a/doric-demo/src/Snake.ts +++ b/doric-demo/src/Snake.ts @@ -1,4 +1,4 @@ -import { text, loge, log, ViewHolder, Stack, ViewModel, Gravity, Text, Color, HLayout, VLayout, Group, VMPanel, LayoutSpec, vlayout, hlayout, takeNonNull, stack } from "doric"; +import { text, loge, log, ViewHolder, Stack, ViewModel, Gravity, Text, Color, Group, VMPanel, LayoutSpec, vlayout, hlayout, takeNonNull } from "doric"; type SnakeNode = { x: number diff --git a/doric-js/bundle/doric-lib.js b/doric-js/bundle/doric-lib.js index d5424c44..18114d4a 100644 --- a/doric-js/bundle/doric-lib.js +++ b/doric-js/bundle/doric-lib.js @@ -1453,9 +1453,14 @@ function slideItem(item, config) { * See the License for the specific language governing permissions and * limitations under the License. */ -function scroller(content) { +function scroller(content, config) { return (new Scroller).also(v => { v.layoutConfig = layoutConfig().fit(); + if (config) { + for (let key in config) { + Reflect.set(v, key, Reflect.get(config, key, config), v); + } + } v.content = content; }); } diff --git a/doric-js/bundle/doric-vm.js b/doric-js/bundle/doric-vm.js index c4ec820f..91711eb3 100644 --- a/doric-js/bundle/doric-vm.js +++ b/doric-js/bundle/doric-vm.js @@ -2901,9 +2901,14 @@ function slideItem(item, config) { * See the License for the specific language governing permissions and * limitations under the License. */ -function scroller(content) { +function scroller(content, config) { return (new Scroller).also(v => { v.layoutConfig = layoutConfig().fit(); + if (config) { + for (let key in config) { + Reflect.set(v, key, Reflect.get(config, key, config), v); + } + } v.content = content; }); } diff --git a/doric-js/index.d.ts b/doric-js/index.d.ts index cf3fe0eb..b72a7ae3 100644 --- a/doric-js/index.d.ts +++ b/doric-js/index.d.ts @@ -486,6 +486,9 @@ declare module 'doric/lib/src/widget/list' { renderItem: (index: number) => ListItem; itemCount: number; batchCount?: number; + onLoadMore?: () => void; + loadMore?: boolean; + loadMoreView?: ListItem; } export class List extends Superview implements IList { allSubviews(): IterableIterator | ListItem[]; @@ -538,9 +541,9 @@ declare module 'doric/lib/src/widget/slider' { declare module 'doric/lib/src/widget/scroller' { import { Superview, View, IView, NativeViewModel } from 'doric/lib/src/ui/view'; - export function scroller(content: View): Scroller; + export function scroller(content: View, config?: IScroller): Scroller; export interface IScroller extends IView { - content: View; + content?: View; } export class Scroller extends Superview implements IScroller { content: View; @@ -598,6 +601,9 @@ declare module 'doric/lib/src/widget/flowlayout' { columnCount?: number; columnSpace?: number; rowSpace?: number; + loadMore?: boolean; + onLoadMore?: () => void; + loadMoreView?: FlowLayoutItem; } export class FlowLayout extends Superview implements IFlowLayout { allSubviews(): IterableIterator | FlowLayoutItem[]; diff --git a/doric-js/lib/src/widget/flowlayout.d.ts b/doric-js/lib/src/widget/flowlayout.d.ts index 639a5117..966277d0 100644 --- a/doric-js/lib/src/widget/flowlayout.d.ts +++ b/doric-js/lib/src/widget/flowlayout.d.ts @@ -16,6 +16,9 @@ export interface IFlowLayout extends IView { columnCount?: number; columnSpace?: number; rowSpace?: number; + loadMore?: boolean; + onLoadMore?: () => void; + loadMoreView?: FlowLayoutItem; } export declare class FlowLayout extends Superview implements IFlowLayout { private cachedViews; diff --git a/doric-js/lib/src/widget/list.d.ts b/doric-js/lib/src/widget/list.d.ts index 7cf34a45..f9cf3dd8 100644 --- a/doric-js/lib/src/widget/list.d.ts +++ b/doric-js/lib/src/widget/list.d.ts @@ -13,6 +13,9 @@ export interface IList extends IView { renderItem: (index: number) => ListItem; itemCount: number; batchCount?: number; + onLoadMore?: () => void; + loadMore?: boolean; + loadMoreView?: ListItem; } export declare class List extends Superview implements IList { private cachedViews; diff --git a/doric-js/lib/src/widget/scroller.d.ts b/doric-js/lib/src/widget/scroller.d.ts index e54d982f..814247a1 100644 --- a/doric-js/lib/src/widget/scroller.d.ts +++ b/doric-js/lib/src/widget/scroller.d.ts @@ -1,7 +1,7 @@ import { Superview, View, IView, NativeViewModel } from '../ui/view'; -export declare function scroller(content: View): Scroller; +export declare function scroller(content: View, config?: IScroller): Scroller; export interface IScroller extends IView { - content: View; + content?: View; } export declare class Scroller extends Superview implements IScroller { content: View; diff --git a/doric-js/lib/src/widget/scroller.js b/doric-js/lib/src/widget/scroller.js index cc6ced35..7d6df910 100644 --- a/doric-js/lib/src/widget/scroller.js +++ b/doric-js/lib/src/widget/scroller.js @@ -15,9 +15,14 @@ */ import { Superview } from '../ui/view'; import { layoutConfig } from '../util/layoutconfig'; -export function scroller(content) { +export function scroller(content, config) { return (new Scroller).also(v => { v.layoutConfig = layoutConfig().fit(); + if (config) { + for (let key in config) { + Reflect.set(v, key, Reflect.get(config, key, config), v); + } + } v.content = content; }); } diff --git a/doric-js/package.json b/doric-js/package.json index 85f59adf..454868cf 100644 --- a/doric-js/package.json +++ b/doric-js/package.json @@ -6,10 +6,10 @@ "types": "index.d.ts", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "build": "tsc -d -p .&& rollup -c", + "build": "tsc -d -p .&& rollup -c && dts-bundle --configJson dts-bundle.json", "dev": "tsc -w -p . & rollup -c -w", "clean": "rm -rf build && rm -rf bundle", - "prepublish": "npm run build && dts-bundle --configJson dts-bundle.json" + "prepublish": "npm run build" }, "repository": { "type": "https", @@ -31,4 +31,4 @@ "typescript": "^3.7.4", "ws": "^7.2.1" } -} +} \ No newline at end of file diff --git a/doric-js/src/widget/flowlayout.ts b/doric-js/src/widget/flowlayout.ts index c374716a..29975709 100644 --- a/doric-js/src/widget/flowlayout.ts +++ b/doric-js/src/widget/flowlayout.ts @@ -42,6 +42,12 @@ export interface IFlowLayout extends IView { columnSpace?: number rowSpace?: number + + loadMore?: boolean + + onLoadMore?: () => void + + loadMoreView?: FlowLayoutItem } export class FlowLayout extends Superview implements IFlowLayout { diff --git a/doric-js/src/widget/list.ts b/doric-js/src/widget/list.ts index 9d9e94c6..a9bcc51e 100644 --- a/doric-js/src/widget/list.ts +++ b/doric-js/src/widget/list.ts @@ -34,6 +34,9 @@ export interface IList extends IView { renderItem: (index: number) => ListItem itemCount: number batchCount?: number + onLoadMore?: () => void + loadMore?: boolean + loadMoreView?: ListItem } export class List extends Superview implements IList { diff --git a/doric-js/src/widget/scroller.ts b/doric-js/src/widget/scroller.ts index 8a630597..78f3b8ca 100644 --- a/doric-js/src/widget/scroller.ts +++ b/doric-js/src/widget/scroller.ts @@ -16,15 +16,20 @@ import { Superview, View, IView, NativeViewModel } from '../ui/view' import { layoutConfig } from '../util/layoutconfig' -export function scroller(content: View) { +export function scroller(content: View, config?: IScroller) { return (new Scroller).also(v => { v.layoutConfig = layoutConfig().fit() + if (config) { + for (let key in config) { + Reflect.set(v, key, Reflect.get(config, key, config), v) + } + } v.content = content }) } export interface IScroller extends IView { - content: View + content?: View } export class Scroller extends Superview implements IScroller {