declarative ui

js-framework/src/ui/declarative.ts

@@ -0,0 +1,87 @@
+import { Text, Image, HLayout, VLayout, Stack, LayoutConfig, View } from './view'
+import { Color, GradientColor } from '../util/color'
+import { Gravity } from '../util/gravity'
+
+export interface IView {
+    width?: number
+    height?: number
+    bgColor?: Color | GradientColor
+    corners?: number | { leftTop?: number; rightTop?: number; leftBottom?: number; rightBottom?: number }
+    border?: { width: number; color: Color; }
+    shadow?: { color: Color; opacity: number; radius: number; offsetX: number; offsetY: number }
+    alpha?: number
+    hidden?: boolean
+    padding?: {
+        left?: number,
+        right?: number,
+        top?: number,
+        bottom?: number,
+    }
+    layoutConfig?: LayoutConfig
+    onClick?: Function
+    identifier?: string
+}
+export interface IText extends IView {
+    text?: string
+    textColor?: Color
+    textSize?: number
+    maxLines?: number
+    textAlignment?: Gravity
+}
+
+export interface IImage extends IView {
+    imageUrl?: string
+}
+
+export interface IStack extends IView {
+    gravity?: Gravity
+}
+
+export interface IVLayout extends IView {
+    space?: number
+    gravity?: Gravity
+}
+
+export interface IHLayout extends IView {
+    space?: number
+    gravity?: Gravity
+}
+export function text(config: IText) {
+    const ret = new Text
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+    }
+    return ret
+}
+
+export function image(config: IImage) {
+    const ret = new Image
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+    }
+    return ret
+}
+
+export function stack(views: View[]) {
+    const ret = new Stack
+    for (let v of views) {
+        ret.addChild(v)
+    }
+    return ret
+}
+
+export function hlayout(views: View[]) {
+    const ret = new HLayout
+    for (let v of views) {
+        ret.addChild(v)
+    }
+    return ret
+}
+
+export function vlayout(views: View[]) {
+    const ret = new VLayout
+    for (let v of views) {
+        ret.addChild(v)
+    }
+    return ret
+}

js-framework/src/ui/state.ts

@@ -1,47 +0,0 @@
-/*
- * 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.
- */
-function from(obj: Object) {
-    return new Proxy(obj, {
-        set: (target, prop, value, receiver) => {
-            return Reflect.set(target, prop, value, receiver)
-        }
-    })
-}
-
-
-class Wrapper {
-    val: any
-    constructor(val: any) {
-        this.val = val
-    }
-    toVal(): any {
-        return this.val
-    }
-}
-export class State {
-    static of<T extends Object>(obj: T): T {
-        return new Proxy(obj, {
-            get: (target, prop) => {
-                const ret = Reflect.get(target, prop)
-                if (ret instanceof Object) {
-                    return State.of(ret)
-                } else {
-                    return new Wrapper(ret)
-                }
-            }
-        })
-    }
-}

js-framework/src/ui/view.ts

@@ -37,8 +37,6 @@ export interface LayoutConfig {
     alignment?: Gravity
 }
 
-
-
 export function Property(target: Object, propKey: string) {
     Reflect.defineMetadata(propKey, true, target)
 }

js-framework/src/util/candies.ts

@@ -13,36 +13,36 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { View, Stack, VLayout, HLayout } from "../ui/view"
+// import { View, Stack, VLayout, HLayout } from "../ui/view"
 
-export type ViewBlock = () => View
+// export type ViewBlock = () => View
 
-export function stack(blocks: ViewBlock[]) {
-    return takeAlso(new Stack)(
-        it => {
-            for (let block of blocks) {
-                it.addChild(block())
-            }
-        })
-}
+// export function stack(blocks: ViewBlock[]) {
+//     return takeAlso(new Stack)(
+//         it => {
+//             for (let block of blocks) {
+//                 it.addChild(block())
+//             }
+//         })
+// }
 
-export function vlayout(blocks: ViewBlock[]) {
-    return takeAlso(new VLayout)(
-        it => {
-            for (let block of blocks) {
-                it.addChild(block())
-            }
-        })
-}
+// export function vlayout(blocks: ViewBlock[]) {
+//     return takeAlso(new VLayout)(
+//         it => {
+//             for (let block of blocks) {
+//                 it.addChild(block())
+//             }
+//         })
+// }
 
-export function hlayout(blocks: ViewBlock[]) {
-    return takeAlso(new HLayout)(
-        it => {
-            for (let block of blocks) {
-                it.addChild(block())
-            }
-        })
-}
+// export function hlayout(blocks: ViewBlock[]) {
+//     return takeAlso(new HLayout)(
+//         it => {
+//             for (let block of blocks) {
+//                 it.addChild(block())
+//             }
+//         })
+// }
 
 export function take<T>(target: T) {
     return (block: (p: T) => void) => {