js: implement keyboard related api

doric-demo/src/KeyboardDemo.ts

@@ -0,0 +1,107 @@
+import { Group, Panel, gravity, Color, LayoutSpec, vlayout, LayoutConfigImpl, 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.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)
+    }
+}

doric-js/bundle/doric-lib.es5.js

@@ -3409,6 +3409,18 @@ function notch(context) {
     };
 }
 
+function keyboard(context) {
+    return {
+        subscribe: function (callback) {
+            return context.callNative('keyboard', 'subscribe', context.function2Id(callback));
+        },
+        unsubscribe: function (subscribeId) {
+            context.removeFuncById(subscribeId);
+            return context.callNative('keyboard', 'unsubscribe', subscribeId);
+        }
+    };
+}
+
 var __values = (undefined && undefined.__values) || function(o) {
     var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
     if (m) { return m.call(o); }
@@ -3603,6 +3615,7 @@ exports.hlayout = hlayout;
 exports.image = image;
 exports.input = input;
 exports.internalScheme = internalScheme;
+exports.keyboard = keyboard;
 exports.layoutConfig = layoutConfig;
 exports.list = list;
 exports.listItem = listItem;

doric-js/bundle/doric-lib.js

@@ -2643,6 +2643,18 @@ function notch(context) {
     };
 }
 
+function keyboard(context) {
+    return {
+        subscribe: (callback) => {
+            return context.callNative('keyboard', 'subscribe', context.function2Id(callback));
+        },
+        unsubscribe: (subscribeId) => {
+            context.removeFuncById(subscribeId);
+            return context.callNative('keyboard', 'unsubscribe', subscribeId);
+        }
+    };
+}
+
 class Observable {
     constructor(provider, clz) {
         this.observers = new Set;
@@ -2789,6 +2801,7 @@ exports.hlayout = hlayout;
 exports.image = image;
 exports.input = input;
 exports.internalScheme = internalScheme;
+exports.keyboard = keyboard;
 exports.layoutConfig = layoutConfig;
 exports.list = list;
 exports.listItem = listItem;

doric-js/bundle/doric-vm.js

@@ -4142,6 +4142,18 @@ function notch(context) {
     };
 }
 
+function keyboard(context) {
+    return {
+        subscribe: (callback) => {
+            return context.callNative('keyboard', 'subscribe', context.function2Id(callback));
+        },
+        unsubscribe: (subscribeId) => {
+            context.removeFuncById(subscribeId);
+            return context.callNative('keyboard', 'unsubscribe', subscribeId);
+        }
+    };
+}
+
 class Observable {
     constructor(provider, clz) {
         this.observers = new Set;
@@ -4529,6 +4541,7 @@ exports.hlayout = hlayout;
 exports.image = image;
 exports.input = input;
 exports.internalScheme = internalScheme;
+exports.keyboard = keyboard;
 exports.layoutConfig = layoutConfig;
 exports.list = list;
 exports.listItem = listItem;

doric-js/index.d.ts

@@ -101,6 +101,7 @@ declare module 'doric/lib/src/native/index.native' {
     export * from 'doric/lib/src/native/statusbar';
     export * from 'doric/lib/src/native/coordinator';
     export * from 'doric/lib/src/native/notch';
+    export * from 'doric/lib/src/native/keyboard';
 }
 
 declare module 'doric/lib/src/util/index.util' {
@@ -991,6 +992,16 @@ declare module 'doric/lib/src/native/notch' {
     };
 }
 
+declare module 'doric/lib/src/native/keyboard' {
+    import { BridgeContext } from "doric/lib/src/runtime/global";
+    export function keyboard(context: BridgeContext): {
+        subscribe: (callback: (data: {
+            height: number;
+        }) => void) => Promise<string>;
+        unsubscribe: (subscribeId: string) => Promise<any>;
+    };
+}
+
 declare module 'doric/lib/src/util/color' {
     import { Modeling } from "doric/lib/src/util/types";
     /**

doric-js/lib/src/native/index.native.d.ts

@@ -9,3 +9,4 @@ export * from './notification';
 export * from './statusbar';
 export * from './coordinator';
 export * from './notch';
+export * from './keyboard';

doric-js/lib/src/native/index.native.js

@@ -24,3 +24,4 @@ export * from './notification';
 export * from './statusbar';
 export * from './coordinator';
 export * from './notch';
+export * from './keyboard';

doric-js/lib/src/native/keyboard.d.ts

@@ -0,0 +1,7 @@
+import { BridgeContext } from "../runtime/global";
+export declare function keyboard(context: BridgeContext): {
+    subscribe: (callback: (data: {
+        height: number;
+    }) => void) => Promise<string>;
+    unsubscribe: (subscribeId: string) => Promise<any>;
+};

doric-js/lib/src/native/keyboard.js

@@ -0,0 +1,11 @@
+export function keyboard(context) {
+    return {
+        subscribe: (callback) => {
+            return context.callNative('keyboard', 'subscribe', context.function2Id(callback));
+        },
+        unsubscribe: (subscribeId) => {
+            context.removeFuncById(subscribeId);
+            return context.callNative('keyboard', 'unsubscribe', subscribeId);
+        }
+    };
+}

doric-js/src/native/index.native.ts

@@ -23,4 +23,5 @@ export * from './animate'
 export * from './notification'
 export * from './statusbar'
 export * from './coordinator'
-export * from './notch'
+export * from './notch'
+export * from './keyboard'

doric-js/src/native/keyboard.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { BridgeContext } from "../runtime/global"
+export function keyboard(context: BridgeContext) {
+    return {
+        subscribe: (callback: (data: { height: number }) => void) => {
+            return context.callNative('keyboard', 'subscribe', context.function2Id(callback)) as Promise<string>
+        },
+        unsubscribe: (subscribeId: string) => {
+            context.removeFuncById(subscribeId)
+            return context.callNative('keyboard', 'unsubscribe', subscribeId)
+        }
+    }
+}