107 lines
3.6 KiB
TypeScript
107 lines
3.6 KiB
TypeScript
import { Group, Panel, gravity, Color, LayoutSpec, vlayout, layoutConfig, modal, keyboard, text, input, Input, InputType, Gravity, stack } from "doric";
|
|
import { title, label, colors } from "./utils";
|
|
|
|
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];
|
|
}
|
|
|
|
@Entry
|
|
class KeyboardDemo extends Panel {
|
|
subscribeId?: string
|
|
build(rootView: Group): void {
|
|
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,
|
|
padding: { top: 10, bottom: 11 },
|
|
inputType: InputType.Decimal,
|
|
password: true,
|
|
});
|
|
|
|
let bottomView = label('Bottom View').apply({
|
|
width: 200,
|
|
height: 50,
|
|
backgroundColor: colors[0],
|
|
textSize: 30,
|
|
textColor: Color.WHITE,
|
|
layoutConfig: layoutConfig().just().configAlignment(new Gravity().bottom().centerX())
|
|
})
|
|
|
|
stack([
|
|
vlayout([
|
|
title("Keyboard Demo"),
|
|
label('Subscribe').apply({
|
|
width: 200,
|
|
height: 50,
|
|
backgroundColor: colors[0],
|
|
textSize: 30,
|
|
textColor: Color.WHITE,
|
|
layoutConfig: layoutConfig().just(),
|
|
onClick: () => {
|
|
keyboard(context).subscribe(data => {
|
|
bottomView.translationY = - (data.bottomMargin + data.height)
|
|
}).then(e => {
|
|
modal(context).toast(`Keyboard Subscribe`)
|
|
this.subscribeId = e
|
|
})
|
|
}
|
|
}),
|
|
label('Unsubscribe').apply({
|
|
width: 200,
|
|
height: 50,
|
|
backgroundColor: colors[0],
|
|
textSize: 30,
|
|
textColor: Color.WHITE,
|
|
layoutConfig: layoutConfig().just(),
|
|
onClick: () => {
|
|
if (this.subscribeId) {
|
|
keyboard(context).unsubscribe(this.subscribeId).then(e => {
|
|
modal(context).toast(`Keyboard Unsubscribe`)
|
|
this.subscribeId = undefined
|
|
})
|
|
}
|
|
}
|
|
}),
|
|
inputView,
|
|
...otherView,
|
|
]).apply({
|
|
layoutConfig: layoutConfig().most(),
|
|
gravity: gravity().centerX(),
|
|
space: 10,
|
|
}),
|
|
bottomView,
|
|
]).apply({
|
|
layoutConfig: layoutConfig().most(),
|
|
}).in(rootView)
|
|
}
|
|
} |