feat:add switch for Android and iOS

doric-android/doric/src/main/java/pub/doric/DoricRegistry.java

@@ -44,6 +44,7 @@ import pub.doric.shader.InputNode;
 import pub.doric.shader.RootNode;
 import pub.doric.shader.ScrollerNode;
 import pub.doric.shader.StackNode;
+import pub.doric.shader.SwitchNode;
 import pub.doric.shader.TextNode;
 import pub.doric.shader.VLayoutNode;
 import pub.doric.shader.ViewNode;
@@ -116,6 +117,7 @@ public class DoricRegistry {
         this.registerViewNode(InputNode.class);
         this.registerViewNode(NestedSliderNode.class);
         this.registerViewNode(DraggableNode.class);
+        this.registerViewNode(SwitchNode.class);
         initRegistry(this);
     }
 

doric-android/doric/src/main/java/pub/doric/shader/SwitchNode.java

@@ -0,0 +1,98 @@
+/*
+ * 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.
+ */
+package pub.doric.shader;
+
+import android.content.res.ColorStateList;
+import android.graphics.Color;
+import android.widget.CompoundButton;
+
+import androidx.appcompat.widget.SwitchCompat;
+
+import com.github.pengfeizhou.jscore.JSObject;
+import com.github.pengfeizhou.jscore.JSValue;
+
+import pub.doric.DoricContext;
+import pub.doric.extension.bridge.DoricMethod;
+import pub.doric.extension.bridge.DoricPlugin;
+
+/**
+ * @Description: pub.doric.shader
+ * @Author: pengfei.zhou
+ * @CreateDate: 2020-03-13
+ */
+@DoricPlugin(name = "Switch")
+public class SwitchNode extends ViewNode<SwitchCompat> {
+    private int offTintColor = 0xffe6e6e6;
+    private int onTintColor = 0xff52d769;
+    private int thumbTintColor = Color.WHITE;
+
+    public SwitchNode(DoricContext doricContext) {
+        super(doricContext);
+    }
+
+    @Override
+    protected SwitchCompat build() {
+        return new SwitchCompat(getContext());
+    }
+
+    @Override
+    protected void blend(SwitchCompat view, String name, JSValue prop) {
+        switch (name) {
+            case "state":
+                view.setChecked(prop.asBoolean().value());
+                break;
+            case "onSwitch":
+                final String callbackId = prop.asString().value();
+                view.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
+                    @Override
+                    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
+                        callJSResponse(callbackId, isChecked);
+                    }
+                });
+                break;
+            case "offTintColor":
+                this.offTintColor = prop.asNumber().toInt();
+                break;
+            case "onTintColor":
+                this.onTintColor = prop.asNumber().toInt();
+                break;
+            case "thumbTintColor":
+                this.thumbTintColor = prop.asNumber().toInt();
+                break;
+            default:
+                super.blend(view, name, prop);
+                break;
+        }
+    }
+
+    @DoricMethod
+    public boolean getState() {
+        return mView.isChecked();
+    }
+
+    @Override
+    public void blend(JSObject jsObject) {
+        super.blend(jsObject);
+        ColorStateList thumbTintList = new ColorStateList(new int[][]{
+                new int[]{android.R.attr.state_checked}, new int[]{}},
+                new int[]{thumbTintColor, thumbTintColor});
+        ColorStateList trackTintList = new ColorStateList(new int[][]{
+                new int[]{android.R.attr.state_checked}, new int[]{}},
+                new int[]{onTintColor, offTintColor});
+        mView.setThumbTintList(thumbTintList);
+        mView.setTrackTintList(trackTintList);
+    }
+}

doric-demo/src/SwitchDemo.ts

@@ -0,0 +1,35 @@
+import { Group, Panel, switchView, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, scroller, layoutConfig, Text } from "doric";
+
+@Entry
+class SwitchDemo extends Panel {
+    build(rootView: Group): void {
+        let switchStatus: Text
+        vlayout(
+            [
+                switchStatus = text({
+                    text: "Switch开关"
+                }),
+                switchView({
+                    state: true,
+                    onSwitch: (state) => {
+                        switchStatus.text = `Switch 当前状态:${state ? "ON" : "OFF"}`
+                    },
+                }),
+                switchView({
+                    state: true,
+                    onSwitch: (state) => {
+                        switchStatus.text = `Switch 当前状态:${state ? "ON" : "OFF"}`
+                    },
+                    // backgroundColor: Color.RED,
+                    offTintColor: Color.RED,
+                    onTintColor: Color.YELLOW,
+                    //thumbTintColor: Color.RED,
+                }),
+            ],
+            {
+                layoutConfig: layoutConfig().most(),
+                space: 20,
+                gravity: Gravity.Center
+            }).in(rootView)
+    }
+}

doric-iOS/Pod/Classes/DoricRegistry.m

@@ -50,6 +50,7 @@
 #import "DoricStatusBarPlugin.h"
 #import "DoricUtil.h"
 #import "DoricCoordinatorPlugin.h"
+#import "DoricSwitchNode.h"
 
 @interface DoricLibraries : NSObject
 @property(nonatomic, strong) NSMutableSet <DoricLibrary *> *libraries;
@@ -149,6 +150,7 @@ - (void)innerRegister {
     [self registerViewNode:DoricNestedSliderNode.class withName:@"NestedSlider"];
     [self registerViewNode:DoricInputNode.class withName:@"Input"];
     [self registerViewNode:DoricDraggableNode.class withName:@"Draggable"];
+    [self registerViewNode:DoricSwitchNode.class withName:@"Switch"];
 }
 
 - (void)registerJSBundle:(NSString *)bundle withName:(NSString *)name {

doric-iOS/Pod/Classes/Shader/DoricSwitchNode.h

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+//
+// Created by pengfei.zhou on 2020/3/12.
+//
+
+#import <Foundation/Foundation.h>
+#import "DoricViewNode.h"
+
+@interface DoricSwitchNode : DoricViewNode <UISwitch *>
+@end

doric-iOS/Pod/Classes/Shader/DoricSwitchNode.m

@@ -0,0 +1,73 @@
+/*
+ * 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.
+ */
+//
+// Created by pengfei.zhou on 2020/3/12.
+//
+
+#import "DoricSwitchNode.h"
+#import "DoricExtensions.h"
+#import "DoricUtil.h"
+
+@interface DoricSwitchNode ()
+@property(nonatomic, copy) NSString *onSwitchFuncId;
+@end
+
+@implementation DoricSwitchNode
+- (UISwitch *)build {
+    return [[UISwitch new] also:^(UISwitch *it) {
+        [it addTarget:self action:@selector(onSwitch) forControlEvents:UIControlEventValueChanged];
+    }];
+}
+
+- (void)onSwitch {
+    if (self.onSwitchFuncId.length > 0) {
+        [self callJSResponse:self.onSwitchFuncId, @(self.view.isOn), nil];
+    }
+}
+
+- (void)blend:(NSDictionary *)props {
+    [super blend:props];
+    [self.view also:^(UISwitch *it) {
+        it.layer.cornerRadius = it.bounds.size.height / 2;
+        it.layer.masksToBounds = YES;
+        it.clipsToBounds = NO;
+    }];
+}
+
+- (void)blendView:(UISwitch *)view forPropName:(NSString *)name propValue:(id)prop {
+    if ([@"state" isEqualToString:name]) {
+        view.on = [prop boolValue];
+    } else if ([@"onSwitch" isEqualToString:name]) {
+        self.onSwitchFuncId = prop;
+    } else if ([@"offTintColor" isEqualToString:name]) {
+        UIColor *color = DoricColor(prop);
+        view.tintColor = color;
+        view.backgroundColor = color;
+    } else if ([@"onTintColor" isEqualToString:name]) {
+        UIColor *color = DoricColor(prop);
+        view.onTintColor = color;
+    } else if ([@"thumbTintColor" isEqualToString:name]) {
+        UIColor *color = DoricColor(prop);
+        view.thumbTintColor = color;
+    } else {
+        [super blendView:view forPropName:name propValue:prop];
+    }
+}
+
+- (NSNumber *)getState {
+    return @(self.view.isOn);
+}
+@end

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

@@ -1686,12 +1686,7 @@ var Image = /** @class */ (function (_super) {
     ], Image.prototype, "placeHolderImage", void 0);
     __decorate$4([
         Property,
-        __metadata$4("design:type", Color
+        __metadata$4("design:type", Color)
-        /**
-         * Display while image is failed to load
-         * It can be file name in local path
-         */
-        )
     ], Image.prototype, "placeHolderColor", void 0);
     __decorate$4([
         Property,
@@ -2523,6 +2518,66 @@ function draggable(views, config) {
     return ret;
 }
 
+var __extends$d = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) { if (b.hasOwnProperty(p)) { d[p] = b[p]; } } };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") { r = Reflect.decorate(decorators, target, key, desc); }
+    else { for (var i = decorators.length - 1; i >= 0; i--) { if (d = decorators[i]) { r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; } } }
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata$d = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
+};
+var Switch = /** @class */ (function (_super) {
+    __extends$d(Switch, _super);
+    function Switch() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate$d([
+        Property,
+        __metadata$d("design:type", Boolean)
+    ], Switch.prototype, "state", void 0);
+    __decorate$d([
+        Property,
+        __metadata$d("design:type", Function)
+    ], Switch.prototype, "onSwitch", void 0);
+    __decorate$d([
+        Property,
+        __metadata$d("design:type", Color)
+    ], Switch.prototype, "offTintColor", void 0);
+    __decorate$d([
+        Property,
+        __metadata$d("design:type", Color)
+    ], Switch.prototype, "onTintColor", void 0);
+    __decorate$d([
+        Property,
+        __metadata$d("design:type", Color)
+    ], Switch.prototype, "thumbTintColor", void 0);
+    return Switch;
+}(View));
+function switchView(config) {
+    var ret = new Switch;
+    ret.layoutConfig = layoutConfig().just();
+    ret.width = 50;
+    ret.height = 30;
+    for (var key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+    }
+    return ret;
+}
+
 function modal(context) {
     return {
         toast: function (msg, gravity) {
@@ -3038,7 +3093,7 @@ var Provider = /** @class */ (function () {
     return Provider;
 }());
 
-var __extends$d = (undefined && undefined.__extends) || (function () {
+var __extends$e = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -3079,7 +3134,7 @@ var ViewModel = /** @class */ (function () {
     return ViewModel;
 }());
 var VMPanel = /** @class */ (function (_super) {
-    __extends$d(VMPanel, _super);
+    __extends$e(VMPanel, _super);
     function VMPanel() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -3129,6 +3184,7 @@ exports.SlideItem = SlideItem;
 exports.Slider = Slider;
 exports.Stack = Stack;
 exports.Superview = Superview;
+exports.Switch = Switch;
 exports.TOP = TOP;
 exports.Text = Text;
 exports.TranslationAnimation = TranslationAnimation;
@@ -3168,6 +3224,7 @@ exports.slider = slider;
 exports.stack = stack;
 exports.statusbar = statusbar;
 exports.storage = storage;
+exports.switchView = switchView;
 exports.take = take;
 exports.takeAlso = takeAlso;
 exports.takeIf = takeIf;

doric-js/bundle/doric-lib.js

@@ -1252,12 +1252,7 @@ __decorate$4([
 ], Image.prototype, "placeHolderImage", void 0);
 __decorate$4([
     Property,
-    __metadata$4("design:type", Color
+    __metadata$4("design:type", Color)
-    /**
-     * Display while image is failed to load
-     * It can be file name in local path
-     */
-    )
 ], Image.prototype, "placeHolderColor", void 0);
 __decorate$4([
     Property,
@@ -1884,6 +1879,48 @@ function draggable(views, config) {
     return ret;
 }
 
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata$d = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+class Switch extends View {
+}
+__decorate$d([
+    Property,
+    __metadata$d("design:type", Boolean)
+], Switch.prototype, "state", void 0);
+__decorate$d([
+    Property,
+    __metadata$d("design:type", Function)
+], Switch.prototype, "onSwitch", void 0);
+__decorate$d([
+    Property,
+    __metadata$d("design:type", Color)
+], Switch.prototype, "offTintColor", void 0);
+__decorate$d([
+    Property,
+    __metadata$d("design:type", Color)
+], Switch.prototype, "onTintColor", void 0);
+__decorate$d([
+    Property,
+    __metadata$d("design:type", Color)
+], Switch.prototype, "thumbTintColor", void 0);
+function switchView(config) {
+    const ret = new Switch;
+    ret.layoutConfig = layoutConfig().just();
+    ret.width = 50;
+    ret.height = 30;
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+    }
+    return ret;
+}
+
 function modal(context) {
     return {
         toast: (msg, gravity = Gravity.Bottom) => {
@@ -2375,6 +2412,7 @@ exports.SlideItem = SlideItem;
 exports.Slider = Slider;
 exports.Stack = Stack;
 exports.Superview = Superview;
+exports.Switch = Switch;
 exports.TOP = TOP;
 exports.Text = Text;
 exports.TranslationAnimation = TranslationAnimation;
@@ -2414,6 +2452,7 @@ exports.slider = slider;
 exports.stack = stack;
 exports.statusbar = statusbar;
 exports.storage = storage;
+exports.switchView = switchView;
 exports.take = take;
 exports.takeAlso = takeAlso;
 exports.takeIf = takeIf;

doric-js/bundle/doric-vm.js

@@ -2711,12 +2711,7 @@ __decorate$4([
 ], Image.prototype, "placeHolderImage", void 0);
 __decorate$4([
     Property,
-    __metadata$4("design:type", Color
+    __metadata$4("design:type", Color)
-    /**
-     * Display while image is failed to load
-     * It can be file name in local path
-     */
-    )
 ], Image.prototype, "placeHolderColor", void 0);
 __decorate$4([
     Property,
@@ -3343,6 +3338,48 @@ function draggable(views, config) {
     return ret;
 }
 
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata$d = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+class Switch extends View {
+}
+__decorate$d([
+    Property,
+    __metadata$d("design:type", Boolean)
+], Switch.prototype, "state", void 0);
+__decorate$d([
+    Property,
+    __metadata$d("design:type", Function)
+], Switch.prototype, "onSwitch", void 0);
+__decorate$d([
+    Property,
+    __metadata$d("design:type", Color)
+], Switch.prototype, "offTintColor", void 0);
+__decorate$d([
+    Property,
+    __metadata$d("design:type", Color)
+], Switch.prototype, "onTintColor", void 0);
+__decorate$d([
+    Property,
+    __metadata$d("design:type", Color)
+], Switch.prototype, "thumbTintColor", void 0);
+function switchView(config) {
+    const ret = new Switch;
+    ret.layoutConfig = layoutConfig().just();
+    ret.width = 50;
+    ret.height = 30;
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+    }
+    return ret;
+}
+
 function modal(context) {
     return {
         toast: (msg, gravity = Gravity.Bottom) => {
@@ -3969,6 +4006,7 @@ exports.SlideItem = SlideItem;
 exports.Slider = Slider;
 exports.Stack = Stack;
 exports.Superview = Superview;
+exports.Switch = Switch;
 exports.TOP = TOP;
 exports.Text = Text;
 exports.TranslationAnimation = TranslationAnimation;
@@ -4008,6 +4046,7 @@ exports.slider = slider;
 exports.stack = stack;
 exports.statusbar = statusbar;
 exports.storage = storage;
+exports.switchView = switchView;
 exports.take = take;
 exports.takeAlso = takeAlso;
 exports.takeIf = takeIf;

doric-js/index.d.ts

@@ -78,6 +78,7 @@ declare module 'doric/lib/src/widget/index.widget' {
     export * from 'doric/lib/src/widget/input';
     export * from 'doric/lib/src/widget/nestedSlider';
     export * from 'doric/lib/src/widget/draggable';
+    export * from 'doric/lib/src/widget/switch';
 }
 
 declare module 'doric/lib/src/native/index.native' {
@@ -498,21 +499,6 @@ declare module 'doric/lib/src/widget/image' {
             imageBase64?: string;
             scaleType?: ScaleType;
             isBlur?: boolean;
-            placeHolderImage?: string;
-            placeHolderColor?: Color;
-            errorImage?: string;
-            errorColor?: Color;
-            loadCallback?: (image: {
-                    width: number;
-                    height: number;
-            } | undefined) => void;
-    }
-    export class Image extends View implements IImage {
-            imageUrl?: string;
-            imagePath?: string;
-            imageRes?: string;
-            scaleType?: ScaleType;
-            isBlur?: boolean;
             /**
                 * Display while image is loading
                 * Local file name
@@ -540,6 +526,21 @@ declare module 'doric/lib/src/widget/image' {
                     height: number;
             } | undefined) => void;
     }
+    export class Image extends View implements IImage {
+            imageUrl?: string;
+            imagePath?: string;
+            imageRes?: string;
+            scaleType?: ScaleType;
+            isBlur?: boolean;
+            placeHolderImage?: string;
+            placeHolderColor?: Color;
+            errorImage?: string;
+            errorColor?: Color;
+            loadCallback?: (image: {
+                    width: number;
+                    height: number;
+            } | undefined) => void;
+    }
     export function image(config: IImage): Image;
 }
 
@@ -811,6 +812,35 @@ declare module 'doric/lib/src/widget/draggable' {
     export function draggable(views: View | View[], config?: IDraggable): Draggable;
 }
 
+declare module 'doric/lib/src/widget/switch' {
+    import { View, IView } from "doric/lib/src/ui/view";
+    import { Color } from "doric/lib/src/util/color";
+    export interface ISwitch extends IView {
+            /**
+                * True is on ,false is off,defalut is off.
+                */
+            state?: boolean;
+            /**
+                * Switch change callback
+                */
+            onSwitch?: (state: boolean) => void;
+            onTintColor?: Color;
+            offTintColor?: Color;
+            thumbTintColor?: Color;
+    }
+    export class Switch extends View {
+            /**
+                * True is on ,false is off,defalut is off.
+                */
+            state?: boolean;
+            onSwitch?: (state: boolean) => void;
+            offTintColor?: Color;
+            onTintColor?: Color;
+            thumbTintColor?: Color;
+    }
+    export function switchView(config: ISwitch): Switch;
+}
+
 declare module 'doric/lib/src/native/modal' {
     import { BridgeContext } from "doric/lib/src/runtime/global";
     import { Gravity } from "doric/lib/src/util/gravity";

doric-js/lib/src/widget/image.d.ts

@@ -22,21 +22,6 @@ export interface IImage extends IView {
     imageBase64?: string;
     scaleType?: ScaleType;
     isBlur?: boolean;
-    placeHolderImage?: string;
-    placeHolderColor?: Color;
-    errorImage?: string;
-    errorColor?: Color;
-    loadCallback?: (image: {
-        width: number;
-        height: number;
-    } | undefined) => void;
-}
-export declare class Image extends View implements IImage {
-    imageUrl?: string;
-    imagePath?: string;
-    imageRes?: string;
-    scaleType?: ScaleType;
-    isBlur?: boolean;
     /**
      * Display while image is loading
      * Local file name
@@ -64,4 +49,19 @@ export declare class Image extends View implements IImage {
         height: number;
     } | undefined) => void;
 }
+export declare class Image extends View implements IImage {
+    imageUrl?: string;
+    imagePath?: string;
+    imageRes?: string;
+    scaleType?: ScaleType;
+    isBlur?: boolean;
+    placeHolderImage?: string;
+    placeHolderColor?: Color;
+    errorImage?: string;
+    errorColor?: Color;
+    loadCallback?: (image: {
+        width: number;
+        height: number;
+    } | undefined) => void;
+}
 export declare function image(config: IImage): Image;

doric-js/lib/src/widget/image.js

@@ -59,12 +59,7 @@ __decorate([
 ], Image.prototype, "placeHolderImage", void 0);
 __decorate([
     Property,
-    __metadata("design:type", Color
+    __metadata("design:type", Color)
-    /**
-     * Display while image is failed to load
-     * It can be file name in local path
-     */
-    )
 ], Image.prototype, "placeHolderColor", void 0);
 __decorate([
     Property,

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

@@ -9,3 +9,4 @@ export * from './flowlayout';
 export * from './input';
 export * from './nestedSlider';
 export * from './draggable';
+export * from './switch';

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

@@ -24,3 +24,4 @@ export * from './flowlayout';
 export * from './input';
 export * from './nestedSlider';
 export * from './draggable';
+export * from './switch';

doric-js/lib/src/widget/slider.js

@@ -7,6 +7,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+/*
+ * 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 { Superview, View, Property } from "../ui/view";
 import { Stack } from "./layouts";
 import { layoutConfig } from "../util/layoutconfig";

doric-js/lib/src/widget/switch.d.ts

@@ -0,0 +1,26 @@
+import { View, IView } from "../ui/view";
+import { Color } from "../util/color";
+export interface ISwitch extends IView {
+    /**
+     * True is on ,false is off,defalut is off.
+     */
+    state?: boolean;
+    /**
+     * Switch change callback
+     */
+    onSwitch?: (state: boolean) => void;
+    onTintColor?: Color;
+    offTintColor?: Color;
+    thumbTintColor?: Color;
+}
+export declare class Switch extends View {
+    /**
+     * True is on ,false is off,defalut is off.
+     */
+    state?: boolean;
+    onSwitch?: (state: boolean) => void;
+    offTintColor?: Color;
+    onTintColor?: Color;
+    thumbTintColor?: Color;
+}
+export declare function switchView(config: ISwitch): Switch;

doric-js/lib/src/widget/switch.js

@@ -0,0 +1,59 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+/*
+ * 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 { View, Property } from "../ui/view";
+import { Color } from "../util/color";
+import { layoutConfig } from "../util/index.util";
+export class Switch extends View {
+}
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], Switch.prototype, "state", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], Switch.prototype, "onSwitch", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Color)
+], Switch.prototype, "offTintColor", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Color)
+], Switch.prototype, "onTintColor", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Color)
+], Switch.prototype, "thumbTintColor", void 0);
+export function switchView(config) {
+    const ret = new Switch;
+    ret.layoutConfig = layoutConfig().just();
+    ret.width = 50;
+    ret.height = 30;
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+    }
+    return ret;
+}

doric-js/src/widget/image.ts

@@ -42,9 +42,30 @@ export interface IImage extends IView {
     imageBase64?: string
     scaleType?: ScaleType
     isBlur?: boolean
+    /**
+     * Display while image is loading 
+     * Local file name
+     */
     placeHolderImage?: string
+
+    /**
+     * Display while image is loading 
+     * Color
+     * This priority is lower than placeHolderImage
+     */
     placeHolderColor?: Color
+
+    /**
+     * Display while image is failed to load 
+     * It can be file name in local path
+     */
     errorImage?: string
+
+    /**
+     * Display while image is failed to load  
+     * Color
+     * This priority is lower than errorImage
+     */
     errorColor?: Color
     loadCallback?: (image: { width: number; height: number } | undefined) => void
 }
@@ -65,33 +86,15 @@ export class Image extends View implements IImage {
     @Property
     isBlur?: boolean
 
-    /**
-     * Display while image is loading 
-     * Local file name
-     */
     @Property
     placeHolderImage?: string
 
-    /**
-     * Display while image is loading 
-     * Color
-     * This priority is lower than placeHolderImage
-     */
     @Property
     placeHolderColor?: Color
 
-    /**
-     * Display while image is failed to load 
-     * It can be file name in local path
-     */
     @Property
     errorImage?: string
 
-    /**
-     * Display while image is failed to load  
-     * Color
-     * This priority is lower than errorImage
-     */
     @Property
     errorColor?: Color
 

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

@@ -24,3 +24,4 @@ export * from './flowlayout'
 export * from './input'
 export * from './nestedSlider'
 export * from './draggable'
+export * from './switch'

doric-js/src/widget/slider.ts

@@ -1,3 +1,18 @@
+/*
+ * 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 { Superview, View, Property, IView } from "../ui/view";
 import { Stack, IStack } from "./layouts";
 import { layoutConfig } from "../util/layoutconfig";

doric-js/src/widget/switch.ts

@@ -0,0 +1,67 @@
+/*
+ * 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 { View, Property, IView } from "../ui/view";
+import { Color } from "../util/color";
+import { layoutConfig } from "../util/index.util";
+
+export interface ISwitch extends IView {
+    /**
+     * True is on ,false is off,defalut is off.
+     */
+    state?: boolean
+    /**
+     * Switch change callback
+     */
+    onSwitch?: (state: boolean) => void
+
+
+    onTintColor?: Color
+
+    offTintColor?: Color
+
+    thumbTintColor?: Color
+}
+
+export class Switch extends View {
+    /**
+     * True is on ,false is off,defalut is off.
+     */
+    @Property
+    state?: boolean
+
+    @Property
+    onSwitch?: (state: boolean) => void
+
+    @Property
+    offTintColor?: Color
+
+    @Property
+    onTintColor?: Color
+
+    @Property
+    thumbTintColor?: Color
+}
+
+export function switchView(config: ISwitch) {
+    const ret = new Switch
+    ret.layoutConfig = layoutConfig().just()
+    ret.width = 50
+    ret.height = 30
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+    }
+    return ret
+}

doric-web/dist/index.js

@@ -2750,7 +2750,11 @@ __decorate$4([
 __decorate$4([
     Property,
     __metadata$4("design:type", String)
-], Image.prototype, "imageBase64", void 0);
+], Image.prototype, "imagePath", void 0);
+__decorate$4([
+    Property,
+    __metadata$4("design:type", String)
+], Image.prototype, "imageRes", void 0);
 __decorate$4([
     Property,
     __metadata$4("design:type", Number)
@@ -2765,12 +2769,7 @@ __decorate$4([
 ], Image.prototype, "placeHolderImage", void 0);
 __decorate$4([
     Property,
-    __metadata$4("design:type", Color
+    __metadata$4("design:type", Color)
-    /**
-     * Display while image is failed to load
-     * It can be file name in local path
-     */
-    )
 ], Image.prototype, "placeHolderColor", void 0);
 __decorate$4([
     Property,
@@ -3397,6 +3396,48 @@ function draggable(views, config) {
     return ret;
 }
 
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata$d = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+class Switch extends View {
+}
+__decorate$d([
+    Property,
+    __metadata$d("design:type", Boolean)
+], Switch.prototype, "state", void 0);
+__decorate$d([
+    Property,
+    __metadata$d("design:type", Function)
+], Switch.prototype, "onSwitch", void 0);
+__decorate$d([
+    Property,
+    __metadata$d("design:type", Color)
+], Switch.prototype, "offTintColor", void 0);
+__decorate$d([
+    Property,
+    __metadata$d("design:type", Color)
+], Switch.prototype, "onTintColor", void 0);
+__decorate$d([
+    Property,
+    __metadata$d("design:type", Color)
+], Switch.prototype, "thumbTintColor", void 0);
+function switchView(config) {
+    const ret = new Switch;
+    ret.layoutConfig = layoutConfig().just();
+    ret.width = 50;
+    ret.height = 30;
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+    }
+    return ret;
+}
+
 function modal(context) {
     return {
         toast: (msg, gravity = Gravity.Bottom) => {
@@ -3888,6 +3929,7 @@ exports.SlideItem = SlideItem;
 exports.Slider = Slider;
 exports.Stack = Stack;
 exports.Superview = Superview;
+exports.Switch = Switch;
 exports.TOP = TOP;
 exports.Text = Text;
 exports.TranslationAnimation = TranslationAnimation;
@@ -3927,6 +3969,7 @@ exports.slider = slider;
 exports.stack = stack;
 exports.statusbar = statusbar;
 exports.storage = storage;
+exports.switchView = switchView;
 exports.take = take;
 exports.takeAlso = takeAlso;
 exports.takeIf = takeIf;