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

feat: ModularPanel add message channel

Browse Source
This commit is contained in:
pengfei.zhou
2021-05-13 16:57:21 +08:00
committed by osborn
parent 546af79534
commit eb7fc6c137
10 changed files with 375 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
doric-demo/src/ModularDemo.ts
View File

@@ -1,13 +1,26 @@
import { Color, Gravity, Group, layoutConfig, LayoutSpec, ModularPanel, Panel, scroller, text, vlayout } from "doric";
import { Module, Color, Gravity, Group, layoutConfig, LayoutSpec, ModularPanel, Panel, scroller, text, vlayout, modal, hlayout, Text, ClassType, HLayout } from "doric";
import { CounterPage } from "./Counter";
class Module1 extends Panel {
class Module1 extends Module {
build(root: Group) {
vlayout(
[
text({
text: "First Module",
textColor: Color.WHITE,
onClick: () => {
this.dispatchMessage("Hello from First Module")
}
}),
text({
text: "Send",
textColor: Color.WHITE,
onClick: async () => {
const text = await modal(context).prompt({
title: "Send something",
})
this.dispatchMessage(text)
},
}),
],
{
@@ -20,20 +33,39 @@ class Module1 extends Panel {
bottom: 20
},
gravity: Gravity.Center,
backgroundColor: Color.parse("#3498db")
backgroundColor: Color.parse("#3498db"),
space: 20,
}
).in(root)
}
}
class Module2 extends Panel {
class Module2 extends Module {
contentLabel?: Text
build(root: Group) {
vlayout(
[
text({
text: "Second Module",
textColor: Color.WHITE,
onClick: () => {
this.dispatchMessage("Hello from Second Module")
}
}),
hlayout(
[
text({
text: "Received:",
textColor: Color.WHITE,
}),
this.contentLabel = text({
text: "",
textColor: Color.WHITE,
}),
],
{
space: 10
})
],
{
layoutConfig: {
@@ -44,11 +76,134 @@ class Module2 extends Panel {
top: 20,
bottom: 20
},
space: 20,
gravity: Gravity.Center,
backgroundColor: Color.parse("#f39c12")
}
).in(root)
}
onMessage(message: string) {
this.contentLabel!.text = message
}
}
class Module3 extends Module {
build(root: Group) {
vlayout(
[
text({
text: "Third Module",
textColor: Color.WHITE,
onClick: () => {
this.dispatchMessage("Hello from Third Module")
}
}),
],
{
layoutConfig: {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT,
},
padding: {
top: 20,
bottom: 20
},
gravity: Gravity.Center,
backgroundColor: Color.parse("#2ecc71"),
space: 20,
}
).in(root)
}
}
class Module4 extends Module {
build(root: Group) {
vlayout(
[
text({
text: "Fourth Module",
textColor: Color.WHITE,
onClick: () => {
this.dispatchMessage("Hello from Fourth Module")
}
}),
],
{
layoutConfig: {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT
},
padding: {
top: 20,
bottom: 20
},
gravity: Gravity.Center,
backgroundColor: Color.parse("#e74c3c"),
space: 20,
}
).in(root)
}
}
class Module5 extends ModularPanel {
setupModules() {
return [
Module3,
Module4,
Module3,
Module4,
Module3,
Module4,
]
}
setupShelf(root: Group): Group {
const shelf = new HLayout
shelf.apply({
layoutConfig: {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT
},
space: 10,
})
vlayout(
[
text({
text: "Fifth Module",
textColor: Color.WHITE,
onClick: () => {
this.dispatchMessage("Hello from Fifth Module")
}
}),
scroller(
shelf,
{
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.FIT
},
})
],
{
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.FIT
},
backgroundColor: Color.parse("#9b59b6"),
padding: {
left: 10,
right: 10,
top: 10,
bottom: 10,
},
space: 10,
gravity: Gravity.Center,
}
).in(root)
return shelf
}
}
@Entry
@@ -57,6 +212,7 @@ class ModularDemo extends ModularPanel {
return [
Module1,
Module2,
Module5,
CounterPage,
]
}
@@ -67,7 +223,8 @@ class ModularDemo extends ModularPanel {
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.FIT
}
},
space: 10,
}
)
scroller(