feat:add PlcaeHolder and Error setting for Image

2020-03-05 11:01:10 +08:00
parent 9394e8927e
commit 5053262dd5
13 changed files with 393 additions and 28 deletions
--- a/doric-js/bundle/doric-lib.es5.js
+++ b/doric-js/bundle/doric-lib.es5.js
@@ -1662,6 +1662,27 @@ var Image = /** @class */ (function (_super) {
        Property,
        __metadata$4("design:type", Boolean)
    ], Image.prototype, "isBlur", void 0);
+    __decorate$4([
+        Property,
+        __metadata$4("design:type", String)
+    ], Image.prototype, "placeHolderImage", void 0);
+    __decorate$4([
+        Property,
+        __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,
+        __metadata$4("design:type", String)
+    ], Image.prototype, "errorImage", void 0);
+    __decorate$4([
+        Property,
+        __metadata$4("design:type", Color)
+    ], Image.prototype, "errorColor", void 0);
    __decorate$4([
        Property,
        __metadata$4("design:type", Function)
--- a/doric-js/bundle/doric-lib.js
+++ b/doric-js/bundle/doric-lib.js
@@ -1228,6 +1228,27 @@ __decorate$4([
    Property,
    __metadata$4("design:type", Boolean)
 ], Image.prototype, "isBlur", void 0);
+__decorate$4([
+    Property,
+    __metadata$4("design:type", String)
+], Image.prototype, "placeHolderImage", void 0);
+__decorate$4([
+    Property,
+    __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,
+    __metadata$4("design:type", String)
+], Image.prototype, "errorImage", void 0);
+__decorate$4([
+    Property,
+    __metadata$4("design:type", Color)
+], Image.prototype, "errorColor", void 0);
 __decorate$4([
    Property,
    __metadata$4("design:type", Function)
--- a/doric-js/bundle/doric-vm.js
+++ b/doric-js/bundle/doric-vm.js
@@ -2687,6 +2687,27 @@ __decorate$4([
    Property,
    __metadata$4("design:type", Boolean)
 ], Image.prototype, "isBlur", void 0);
+__decorate$4([
+    Property,
+    __metadata$4("design:type", String)
+], Image.prototype, "placeHolderImage", void 0);
+__decorate$4([
+    Property,
+    __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,
+    __metadata$4("design:type", String)
+], Image.prototype, "errorImage", void 0);
+__decorate$4([
+    Property,
+    __metadata$4("design:type", Color)
+], Image.prototype, "errorColor", void 0);
 __decorate$4([
    Property,
    __metadata$4("design:type", Function)
--- a/doric-js/index.d.ts
+++ b/doric-js/index.d.ts
@@ -473,30 +473,57 @@ declare module 'doric/lib/src/widget/text' {

 declare module 'doric/lib/src/widget/image' {
    import { IView, View } from "doric/lib/src/ui/view";
+    import { Color } from "doric/lib/src/util/color";
    export enum ScaleType {
-        ScaleToFill = 0,
-        ScaleAspectFit = 1,
-        ScaleAspectFill = 2
+            ScaleToFill = 0,
+            ScaleAspectFit = 1,
+            ScaleAspectFill = 2
    }
    export interface IImage extends IView {
-        imageUrl?: string;
-        imageBase64?: string;
-        scaleType?: ScaleType;
-        isBlur?: boolean;
-        loadCallback?: (image: {
-            width: number;
-            height: number;
-        } | undefined) => void;
+            imageUrl?: string;
+            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;
-        imageBase64?: string;
-        scaleType?: ScaleType;
-        isBlur?: boolean;
-        loadCallback?: (image: {
-            width: number;
-            height: number;
-        } | undefined) => void;
+            imageUrl?: string;
+            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;
    }
    export function image(config: IImage): Image;
 }
--- a/doric-js/lib/src/widget/image.d.ts
+++ b/doric-js/lib/src/widget/image.d.ts
@@ -1,4 +1,5 @@
 import { IView, View } from "../ui/view";
+import { Color } from "../util/color";
 export declare enum ScaleType {
    ScaleToFill = 0,
    ScaleAspectFit = 1,
@@ -9,6 +10,10 @@ 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;
@@ -19,6 +24,28 @@ export declare class Image extends View implements IImage {
    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;
--- a/doric-js/lib/src/widget/image.js
+++ b/doric-js/lib/src/widget/image.js
@@ -24,6 +24,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 */
 import { View, Property } from "../ui/view";
 import { layoutConfig } from "../util/layoutconfig";
+import { Color } from "../util/color";
 export var ScaleType;
 (function (ScaleType) {
    ScaleType[ScaleType["ScaleToFill"] = 0] = "ScaleToFill";
@@ -48,6 +49,27 @@ __decorate([
    Property,
    __metadata("design:type", Boolean)
 ], Image.prototype, "isBlur", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", String)
+], Image.prototype, "placeHolderImage", void 0);
+__decorate([
+    Property,
+    __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,
+    __metadata("design:type", String)
+], Image.prototype, "errorImage", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Color)
+], Image.prototype, "errorColor", void 0);
 __decorate([
    Property,
    __metadata("design:type", Function)
--- a/doric-js/src/widget/image.ts
+++ b/doric-js/src/widget/image.ts
@@ -15,6 +15,7 @@
 */
 import { IView, View, Property } from "../ui/view"
 import { layoutConfig } from "../util/layoutconfig"
+import { Color } from "../util/color"

 export enum ScaleType {
    ScaleToFill = 0,
@@ -27,19 +28,56 @@ 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 class Image extends View implements IImage {
    @Property
    imageUrl?: string
+
    @Property
    imageBase64?: string
+
    @Property
    scaleType?: ScaleType
+
    @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
+
    @Property
    loadCallback?: (image: { width: number; height: number } | undefined) => void
 }