2020-06-13 11:58:24 +08:00
|
|
|
import { Panel, Group, scroller, vlayout, layoutConfig, LayoutSpec, Input, Gravity, log, Color, input, text, InputType } from "doric";
|
2019-12-07 15:50:37 +08:00
|
|
|
import { title, colors } from "./utils";
|
2020-05-06 15:11:57 +08:00
|
|
|
|
|
|
|
|
|
|
|
function getInput(c: Partial<Input>) {
|
|
|
|
const inputView = input(c)
|
|
|
|
const isFocused = text({
|
|
|
|
layoutConfig: {
|
|
|
|
widthSpec: LayoutSpec.MOST,
|
|
|
|
heightSpec: LayoutSpec.JUST,
|
|
|
|
},
|
|
|
|
height: 50,
|
|
|
|
})
|
|
|
|
const inputed = text({
|
|
|
|
layoutConfig: {
|
|
|
|
widthSpec: LayoutSpec.MOST,
|
|
|
|
heightSpec: LayoutSpec.JUST,
|
|
|
|
},
|
|
|
|
height: 50,
|
|
|
|
})
|
|
|
|
inputView.onFocusChange = (onFocusChange) => {
|
|
|
|
isFocused.text = onFocusChange ? `Focused` : `Unfocused`
|
|
|
|
}
|
|
|
|
inputView.onTextChange = (text) => {
|
|
|
|
inputed.text = `Inputed:${text}`
|
|
|
|
}
|
|
|
|
return [inputView, isFocused, inputed]
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2019-12-07 15:50:37 +08:00
|
|
|
@Entry
|
|
|
|
class InputDemo extends Panel {
|
|
|
|
build(root: Group) {
|
2020-05-08 16:16:41 +08:00
|
|
|
var [inputView, ...otherView] = getInput({
|
|
|
|
layoutConfig: {
|
|
|
|
widthSpec: LayoutSpec.FIT,
|
|
|
|
heightSpec: LayoutSpec.FIT,
|
|
|
|
},
|
|
|
|
hintText: "Please input something in one line",
|
|
|
|
border: {
|
|
|
|
width: 1,
|
|
|
|
color: Color.GRAY,
|
|
|
|
},
|
|
|
|
multiline: false,
|
|
|
|
textSize: 20,
|
|
|
|
maxLength: 20,
|
2020-06-13 11:58:24 +08:00
|
|
|
padding: { top: 10, bottom: 11 },
|
|
|
|
inputType: InputType.Decimal
|
2020-05-08 16:16:41 +08:00
|
|
|
});
|
2019-12-07 15:50:37 +08:00
|
|
|
scroller(
|
2020-01-06 10:43:18 +08:00
|
|
|
vlayout(
|
|
|
|
[
|
2020-04-30 16:36:28 +08:00
|
|
|
|
|
|
|
title("Demo"),
|
2020-05-06 15:11:57 +08:00
|
|
|
// ...getInput({
|
|
|
|
// layoutConfig: {
|
|
|
|
// widthSpec: LayoutSpec.JUST,
|
|
|
|
// heightSpec: LayoutSpec.FIT,
|
|
|
|
// },
|
|
|
|
// width: 300,
|
|
|
|
// hintText: "Please input something",
|
|
|
|
// border: {
|
|
|
|
// width: 1,
|
|
|
|
// color: Color.GRAY,
|
|
|
|
// },
|
|
|
|
// textSize: 40,
|
|
|
|
// maxLength: 20,
|
|
|
|
// }),
|
2020-05-08 16:16:41 +08:00
|
|
|
inputView,
|
|
|
|
...otherView,
|
2020-01-06 10:43:18 +08:00
|
|
|
],
|
|
|
|
{
|
|
|
|
space: 10,
|
2020-05-08 16:16:41 +08:00
|
|
|
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.MOST),
|
2020-06-13 11:58:24 +08:00
|
|
|
onClick: () => {
|
2020-05-08 16:16:41 +08:00
|
|
|
(inputView as Input).releaseFocus(context);
|
|
|
|
}
|
2020-01-06 10:43:18 +08:00
|
|
|
}
|
|
|
|
),
|
|
|
|
{
|
2019-12-14 16:32:04 +08:00
|
|
|
layoutConfig: layoutConfig().most()
|
2020-01-06 10:43:18 +08:00
|
|
|
}
|
|
|
|
).in(root)
|
2019-12-07 15:50:37 +08:00
|
|
|
}
|
|
|
|
|
2020-04-30 16:36:28 +08:00
|
|
|
}
|