tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat:add PlcaeHolder and Error setting for Image

Browse Source
This commit is contained in:
pengfei.zhou 2020-03-05 11:01:10 +08:00 committed by osborn
parent 9394e8927e
commit 5053262dd5
13 changed files with 393 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
doric-android/doric/src/main/java/pub/doric/DoricRegistry.java
View File

@ -15,6 +15,7 @@
*/
package pub.doric;
import android.graphics.drawable.Drawable;
import android.text.TextUtils;
import java.util.HashMap;
@ -70,6 +71,10 @@ public class DoricRegistry {
private Set<IDoricMonitor> monitors = new HashSet<>();
private Drawable defaultPlaceHolderDrawable = null;
private Drawable defaultErrorDrawable = null;
private static void initRegistry(DoricRegistry doricRegistry) {
for (DoricLibrary library : doricLibraries) {
library.load(doricRegistry);
@ -168,4 +173,26 @@ public class DoricRegistry {
monitor.onLog(type, message);
}
}
public Drawable getDefaultPlaceHolderDrawable() {
return defaultPlaceHolderDrawable;
}
/**
* @param defaultPlaceHolderDrawable Default display when image is loading and not set by JS API
*/
public void setDefaultPlaceHolderDrawable(Drawable defaultPlaceHolderDrawable) {
this.defaultPlaceHolderDrawable = defaultPlaceHolderDrawable;
}
public Drawable getDefaultErrorDrawable() {
return defaultErrorDrawable;
}
/**
* @param defaultErrorDrawable Default display when image load error and not set by JS API
*/
public void setDefaultErrorDrawable(Drawable defaultErrorDrawable) {
this.defaultErrorDrawable = defaultErrorDrawable;
}
}

76
doric-android/doric/src/main/java/pub/doric/shader/ImageNode.java
View File

@ -17,6 +17,8 @@ package pub.doric.shader;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.text.TextUtils;
import android.util.Base64;
@ -41,6 +43,7 @@ import androidx.annotation.Nullable;
import jp.wasabeef.glide.transformations.BlurTransformation;
import pub.doric.DoricContext;
import pub.doric.extension.bridge.DoricPlugin;
import pub.doric.utils.DoricLog;
import pub.doric.utils.DoricUtils;
/**
@ -52,6 +55,10 @@ import pub.doric.utils.DoricUtils;
public class ImageNode extends ViewNode<ImageView> {
private String loadCallbackId = "";
private boolean isBlur;
private String placeHolderImage;
private String errorImage;
private int placeHolderColor = Color.TRANSPARENT;
private int errorColor = Color.TRANSPARENT;
public ImageNode(DoricContext doricContext) {
super(doricContext);
@ -69,21 +76,86 @@ public class ImageNode extends ViewNode<ImageView> {
if (jsValue.isBoolean()) {
isBlur = jsValue.asBoolean().value();
}
JSValue placeHolder = jsObject.getProperty("placeHolderImage");
if (placeHolder.isString()) {
this.placeHolderImage = placeHolder.asString().value();
}
JSValue error = jsObject.getProperty("errorImage");
if (error.isString()) {
this.errorImage = error.asString().value();
}
JSValue placeHolderColor = jsObject.getProperty("placeHolderColor");
if (placeHolderColor.isNumber()) {
this.placeHolderColor = placeHolderColor.asNumber().toInt();
}
JSValue errorColor = jsObject.getProperty("errorColor");
if (errorColor.isNumber()) {
this.errorColor = errorColor.asNumber().toInt();
}
}
super.blend(jsObject);
}
private Drawable getPlaceHolderDrawable() {
if (!TextUtils.isEmpty(placeHolderImage)) {
int resId = getDoricContext().getContext().getResources().getIdentifier(
placeHolderImage.toLowerCase(),
"drawable",
getDoricContext().getContext().getPackageName());
if (resId > 0) {
return getDoricContext().getContext().getResources().getDrawable(resId);
} else {
DoricLog.e("Cannot find PlaceHolder Drawable for " + placeHolderImage);
return new ColorDrawable(Color.GRAY);
}
} else if (placeHolderColor != Color.TRANSPARENT) {
return new ColorDrawable(placeHolderColor);
} else {
return getDoricContext().getDriver().getRegistry().getDefaultPlaceHolderDrawable();
}
}
private Drawable getErrorDrawable() {
if (!TextUtils.isEmpty(errorImage)) {
int resId = getDoricContext().getContext().getResources().getIdentifier(
errorImage.toLowerCase(),
"drawable",
getDoricContext().getContext().getPackageName());
if (resId > 0) {
return getDoricContext().getContext().getResources().getDrawable(resId);
} else {
DoricLog.e("Cannot find Error Drawable for " + errorImage);
return new ColorDrawable(Color.GRAY);
}
} else if (errorColor != Color.TRANSPARENT) {
return new ColorDrawable(errorColor);
} else {
return getDoricContext().getDriver().getRegistry().getDefaultErrorDrawable();
}
}
@Override
protected void blend(ImageView view, String name, JSValue prop) {
switch (name) {
case "imageUrl":
RequestBuilder<Drawable> requestBuilder = Glide.with(getContext()).load(prop.asString().value());
RequestBuilder<Drawable> requestBuilder = Glide.with(getContext())
.load(prop.asString().value());
if (isBlur) {
requestBuilder = requestBuilder
.apply(RequestOptions
.bitmapTransform(new BlurTransformation(25, 3)));
}
Drawable placeHolderDrawable = getPlaceHolderDrawable();
if (placeHolderDrawable != null) {
requestBuilder = requestBuilder.apply(new RequestOptions().placeholder(placeHolderDrawable));
}
Drawable errorDrawable = getErrorDrawable();
if (errorDrawable != null) {
requestBuilder = requestBuilder.apply(new RequestOptions().error(errorDrawable));
}
requestBuilder
.listener(new RequestListener<Drawable>() {
@Override

3
doric-iOS/Pod/Classes/DoricRegistry.h
View File

@ -22,11 +22,14 @@
#import <Foundation/Foundation.h>
#import "DoricMonitorProtocol.h"
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@class DoricLibrary;
@interface DoricRegistry : NSObject <DoricMonitorProtocol>
@property(nonatomic, strong) UIImage *defaultPlaceHolderImage;
@property(nonatomic, strong) UIImage *defaultErrorImage;
- (NSString *)acquireJSBundle:(NSString *)name;

77
doric-iOS/Pod/Classes/Shader/DoricImageNode.m
View File

@ -27,6 +27,11 @@
@interface DoricImageNode ()
@property(nonatomic, copy) NSString *loadCallbackId;
@property(nonatomic, assign) BOOL isBlur;
@property(nonatomic, assign) UIViewContentMode contentMode;
@property(nonatomic, strong) NSNumber *placeHolderColor;
@property(nonatomic, strong) NSString *placeHolderImage;
@property(nonatomic, strong) NSNumber *errorColor;
@property(nonatomic, strong) NSString *errorImage;
@end
@implementation DoricImageNode
@ -39,19 +44,78 @@ - (UIImageView *)build {
- (void)blend:(NSDictionary *)props {
NSInteger value = [props[@"isBlur"] intValue];
if(value == 1) {
if (value == 1) {
self.isBlur = YES;
}
[props[@"placeHolderColor"] also:^(id it) {
self.placeHolderColor = it;
}];
[props[@"placeHolderImage"] also:^(id it) {
self.placeHolderImage = it;
}];
[props[@"errorColor"] also:^(id it) {
self.errorColor = it;
}];
[props[@"errorImage"] also:^(id it) {
self.errorImage = it;
}];
[super blend:props];
}
- (UIImage *)currentPlaceHolderImage {
if (self.placeHolderImage) {
return [UIImage imageNamed:self.placeHolderImage];
}
if (self.placeHolderColor) {
UIColor *color = DoricColor(self.placeHolderColor);
CGRect rect = CGRectMake(0, 0, 1, 1);
self.view.contentMode = UIViewContentModeScaleToFill;
UIGraphicsBeginImageContextWithOptions(rect.size, NO, [UIScreen mainScreen].scale);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextFillRect(context, rect);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
return self.doricContext.driver.registry.defaultPlaceHolderImage;
}
- (UIImage *)currentErrorImage {
if (self.errorImage) {
return [UIImage imageNamed:self.errorImage];
}
if (self.errorColor) {
UIColor *color = DoricColor(self.errorColor);
CGRect rect = CGRectMake(0, 0, 1, 1);
self.view.contentMode = UIViewContentModeScaleToFill;
UIGraphicsBeginImageContextWithOptions(rect.size, NO, [UIScreen mainScreen].scale);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextFillRect(context, rect);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
return self.doricContext.driver.registry.defaultErrorImage;
}
- (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id)prop {
if ([@"imageUrl" isEqualToString:name]) {
__weak typeof(self) _self = self;
[view yy_setImageWithURL:[NSURL URLWithString:prop] placeholder:nil options:0 completion:^(UIImage *image, NSURL *url, YYWebImageFromType from, YYWebImageStage stage, NSError *error) {
[view yy_setImageWithURL:[NSURL URLWithString:prop] placeholder:[self currentPlaceHolderImage] options:0 completion:^(UIImage *image, NSURL *url, YYWebImageFromType from, YYWebImageStage stage, NSError *error) {
__strong typeof(_self) self = _self;
if (self.placeHolderColor || self.errorColor) {
self.view.contentMode = self.contentMode;
}
if (error) {
[[self currentErrorImage] also:^(UIImage *it) {
view.image = it;
}];
if (self.loadCallbackId.length > 0) {
[self callJSResponse:self.loadCallbackId, nil];
}
@ -63,10 +127,10 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
}
[self requestLayout];
}
if(self.isBlur) {
if (self.isBlur) {
UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVisualEffectView *effectView = [[UIVisualEffectView alloc]initWithEffect:blurEffect];
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
effectView.frame = CGRectMake(0, 0, image.size.width, image.size.height);
[view addSubview:effectView];
}
@ -86,6 +150,7 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
break;
}
}
self.contentMode = self.view.contentMode;
} else if ([@"loadCallback" isEqualToString:name]) {
self.loadCallbackId = prop;
} else if ([@"imageBase64" isEqualToString:name]) {

21
doric-js/bundle/doric-lib.es5.js
View File

@ -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)

21
doric-js/bundle/doric-lib.js
View File

@ -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)

21
doric-js/bundle/doric-vm.js
View File

@ -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)

65
doric-js/index.d.ts vendored
View File

@ -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;
}

27
doric-js/lib/src/widget/image.d.ts vendored
View File

@ -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;

22
doric-js/lib/src/widget/image.js
View File

@ -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)

38
doric-js/src/widget/image.ts
View File

@ -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
}

21
doric-web/dist/index.js vendored
View File

@ -2745,6 +2745,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)

2
doric-web/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long