microsoft · faceach · Oct 16, 2019 · Oct 17, 2019
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,2 @@
+registry=https://msasg.pkgs.visualstudio.com/_packaging/react-native-cortana-conversation/npm/registry/
+always-auth=true
diff --git a/dist/Components/Basic/ImageBlock.d.ts b/dist/Components/Basic/ImageBlock.d.ts
@@ -21,6 +21,7 @@ interface IProps {
     onLayout?: (event: LayoutChangeEvent) => void;
     onLoad?: (data: any) => void;
     onError?: (error: any) => void;
+    avatarFallbackRender?: (diameter: number, altText: string, url: string) => React.ReactNode;
 }
 interface IState {
     loaded: boolean;

diff --git a/dist/Components/Basic/ImageBlock.js b/dist/Components/Basic/ImageBlock.js
@@ -88,7 +88,18 @@ export class ImageBlock extends React.Component {
             ], resizeMethod: 'resize', resizeMode: 'contain' }));
     }
     renderImage() {
-        if (UrlUtils.isSvgXml(this.props.url)) {
+        if (this.props.mode === 'avatar' && this.props.avatarFallbackRender) {
+            return React.createElement(View, { style: [
+                    {
+                        width: this.props.width,
+                        height: this.props.height,
+                        overflow: 'hidden',
+                    },
+                    this.borderRadius,
+                    this.props.style
+                ] }, this.props.avatarFallbackRender(this.props.width, this.props.alt, this.props.url));
+        }
+        else if (UrlUtils.isSvgXml(this.props.url)) {
             return (React.createElement(View, { style: [
                     {
                         width: this.props.width,

diff --git a/dist/Contexts/CardContext.d.ts b/dist/Contexts/CardContext.d.ts
@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { CardModel } from '../Models/Cards/Card';
 import { TreeNode } from '../Shared/Types';
 import { FormStore } from './FormStore';
@@ -13,6 +14,7 @@ export declare class CardContext extends TreeNode<CardContext> {
     private onSubmitAction?;
     private onCallbackAction?;
     private onSelectAction?;
+    private avatarFallbackRender?;
     readonly form: FormStore;
     readonly schemas: SchemaStore;
     readonly children: CardContext[];
@@ -31,6 +33,7 @@ export declare class CardContext extends TreeNode<CardContext> {
         [key: string]: string;
     }) => Promise<any>): void;
     registerSelectActionHandler(handler: (data: any) => Promise<any>): void;
+    registerAvatarFallbackRenderHandler(handler: (diameter: number, altText: string, url: string) => ReactNode): void;
     private findRequiredContext;
     readonly errorHandler: (error: any) => void;
     readonly infoHandler: (info: any) => void;
@@ -44,4 +47,5 @@ export declare class CardContext extends TreeNode<CardContext> {
         [key: string]: string;
     }) => Promise<any>;
     readonly selectActionHandler: (data: any) => Promise<any>;
+    readonly avatarFallbackRenderHandler: (diameter: number, altText: string, url: string) => ReactNode;
 }
diff --git a/dist/Contexts/CardContext.js b/dist/Contexts/CardContext.js
@@ -48,6 +48,9 @@ export class CardContext extends TreeNode {
     registerSelectActionHandler(handler) {
         this.onSelectAction = handler;
     }
+    registerAvatarFallbackRenderHandler(handler) {
+        this.avatarFallbackRender = handler;
+    }
     findRequiredContext(selector) {
         if (selector) {
             if (selector(this)) {
@@ -129,4 +132,11 @@ export class CardContext extends TreeNode {
         }
         return undefined;
     }
+    get avatarFallbackRenderHandler() {
+        let context = this.findRequiredContext(context => context.avatarFallbackRender !== undefined);
+        if (context) {
+            return context.avatarFallbackRender;
+        }
+        return undefined;
+    }
 }
diff --git a/dist/Views/CardElements/Image.js b/dist/Views/CardElements/Image.js
@@ -80,7 +80,21 @@ export class ImageView extends React.Component {
                         handler(`AdaptiveCard >> Start Load Image >> ${model.url}`);
                     }
                 }
-                ImageUtils.fetchSize(model.url, size || model.size, { width: maxWidth, height: maxHeight }, this.onImageSize, this.onImageSizeError);
+                if (model.style === 'person' && model.context.avatarFallbackRenderHandler) {
+                    const definedSize = StyleManager.getImageSize(size || model.size);
+                    if (typeof definedSize === 'number') {
+                        this.onImageSize({
+                            width: definedSize,
+                            height: definedSize
+                        });
+                    }
+                    else {
+                        this.onImageSizeError(new Error('Avatar image size should be actual number.'));
+                    }
+                }
+                else {
+                    ImageUtils.fetchSize(model.url, size || model.size, { width: maxWidth, height: maxHeight }, this.onImageSize, this.onImageSizeError);
+                }
             }
         };
         this.state = {
@@ -107,7 +121,7 @@ export class ImageView extends React.Component {
             return DebugOutputFactory.createDebugOutputBanner(model.type + '>>' + model.url + ' is not valid', theme, 'error');
         }
         if (this.state.loaded) {
-            return (React.createElement(ImageBlock, { url: model.url, alt: model.alt, flex: this.flex, alignSelf: StyleManager.getHorizontalAlign(model.horizontalAlignment), width: this.state.width, height: this.state.height, onPress: model.selectAction ? this.onPress : undefined, onLayout: this.onLayout, onLoad: this.onImageLoad, onError: this.onImageError, marginTop: this.spacing, marginLeft: spacing, mode: model.style === 'person' ? 'avatar' : 'default' }));
+            return (React.createElement(ImageBlock, { url: model.url, alt: model.alt, flex: this.flex, alignSelf: StyleManager.getHorizontalAlign(model.horizontalAlignment), width: this.state.width, height: this.state.height, onPress: model.selectAction ? this.onPress : undefined, onLayout: this.onLayout, onLoad: this.onImageLoad, onError: this.onImageError, marginTop: this.spacing, marginLeft: spacing, mode: model.style === 'person' ? 'avatar' : 'default', avatarFallbackRender: model.context && model.context.avatarFallbackRenderHandler }));
         }
         return null;
     }

diff --git a/dist/Views/Root.d.ts b/dist/Views/Root.d.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { CardContext } from '../Contexts/CardContext';
 export interface IAdaptiveCardProps {
     adaptiveCard: any;
@@ -14,6 +14,7 @@ export interface IAdaptiveCardProps {
     onError?: (error: any) => void;
     onInfo?: (info: any) => void;
     onWarning?: (warning: any) => void;
+    avatarFallbackRender?: (diameter: number, altText: string, url: string) => ReactNode;
 }
 export declare class CardRootView extends React.Component<IAdaptiveCardProps> {
     rootCardContext: CardContext;

diff --git a/dist/Views/Root.js b/dist/Views/Root.js
@@ -18,6 +18,7 @@ export class CardRootView extends React.Component {
         this.rootCardContext.registerErrorHandler(this.props.onError);
         this.rootCardContext.registerInfoHandler(this.props.onInfo);
         this.rootCardContext.registerWarningHandler(this.props.onWarning);
+        this.rootCardContext.registerAvatarFallbackRenderHandler(this.props.avatarFallbackRender);
     }
     shouldComponentUpdate(nextProps) {
         if (JSON.stringify(nextProps) !== JSON.stringify(this.props)) {

diff --git a/examples/AdaptiveCards/Components/Basic/ImageBlock.d.ts b/examples/AdaptiveCards/Components/Basic/ImageBlock.d.ts
@@ -21,6 +21,7 @@ interface IProps {
     onLayout?: (event: LayoutChangeEvent) => void;
     onLoad?: (data: any) => void;
     onError?: (error: any) => void;
+    avatarFallbackRender?: (diameter: number, altText: string, url: string) => React.ReactNode;
 }
 interface IState {
     loaded: boolean;

diff --git a/examples/AdaptiveCards/Components/Basic/ImageBlock.js b/examples/AdaptiveCards/Components/Basic/ImageBlock.js
@@ -88,7 +88,18 @@ export class ImageBlock extends React.Component {
             ], resizeMethod: 'resize', resizeMode: 'contain' }));
     }
     renderImage() {
-        if (UrlUtils.isSvgXml(this.props.url)) {
+        if (this.props.mode === 'avatar' && this.props.avatarFallbackRender) {
+            return React.createElement(View, { style: [
+                    {
+                        width: this.props.width,
+                        height: this.props.height,
+                        overflow: 'hidden',
+                    },
+                    this.borderRadius,
+                    this.props.style
+                ] }, this.props.avatarFallbackRender(this.props.width, this.props.alt, this.props.url));
+        }
+        else if (UrlUtils.isSvgXml(this.props.url)) {
             return (React.createElement(View, { style: [
                     {
                         width: this.props.width,

diff --git a/examples/AdaptiveCards/Contexts/CardContext.d.ts b/examples/AdaptiveCards/Contexts/CardContext.d.ts
@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { CardModel } from '../Models/Cards/Card';
 import { TreeNode } from '../Shared/Types';
 import { FormStore } from './FormStore';
@@ -13,6 +14,7 @@ export declare class CardContext extends TreeNode<CardContext> {
     private onSubmitAction?;
     private onCallbackAction?;
     private onSelectAction?;
+    private avatarFallbackRender?;
     readonly form: FormStore;
     readonly schemas: SchemaStore;
     readonly children: CardContext[];
@@ -31,6 +33,7 @@ export declare class CardContext extends TreeNode<CardContext> {
         [key: string]: string;
     }) => Promise<any>): void;
     registerSelectActionHandler(handler: (data: any) => Promise<any>): void;
+    registerAvatarFallbackRenderHandler(handler: (diameter: number, altText: string, url: string) => ReactNode): void;
     private findRequiredContext;
     readonly errorHandler: (error: any) => void;
     readonly infoHandler: (info: any) => void;
@@ -44,4 +47,5 @@ export declare class CardContext extends TreeNode<CardContext> {
         [key: string]: string;
     }) => Promise<any>;
     readonly selectActionHandler: (data: any) => Promise<any>;
+    readonly avatarFallbackRenderHandler: (diameter: number, altText: string, url: string) => ReactNode;
 }
diff --git a/examples/AdaptiveCards/Contexts/CardContext.js b/examples/AdaptiveCards/Contexts/CardContext.js
@@ -48,6 +48,9 @@ export class CardContext extends TreeNode {
     registerSelectActionHandler(handler) {
         this.onSelectAction = handler;
     }
+    registerAvatarFallbackRenderHandler(handler) {
+        this.avatarFallbackRender = handler;
+    }
     findRequiredContext(selector) {
         if (selector) {
             if (selector(this)) {
@@ -129,4 +132,11 @@ export class CardContext extends TreeNode {
         }
         return undefined;
     }
+    get avatarFallbackRenderHandler() {
+        let context = this.findRequiredContext(context => context.avatarFallbackRender !== undefined);
+        if (context) {
+            return context.avatarFallbackRender;
+        }
+        return undefined;
+    }
 }
diff --git a/examples/AdaptiveCards/Views/CardElements/Image.js b/examples/AdaptiveCards/Views/CardElements/Image.js
@@ -80,7 +80,21 @@ export class ImageView extends React.Component {
                         handler(`AdaptiveCard >> Start Load Image >> ${model.url}`);
                     }
                 }
-                ImageUtils.fetchSize(model.url, size || model.size, { width: maxWidth, height: maxHeight }, this.onImageSize, this.onImageSizeError);
+                if (model.style === 'person' && model.context.avatarFallbackRenderHandler) {
+                    const definedSize = StyleManager.getImageSize(size || model.size);
+                    if (typeof definedSize === 'number') {
+                        this.onImageSize({
+                            width: definedSize,
+                            height: definedSize
+                        });
+                    }
+                    else {
+                        this.onImageSizeError(new Error('Avatar image size should be actual number.'));
+                    }
+                }
+                else {
+                    ImageUtils.fetchSize(model.url, size || model.size, { width: maxWidth, height: maxHeight }, this.onImageSize, this.onImageSizeError);
+                }
             }
         };
         this.state = {
@@ -107,7 +121,7 @@ export class ImageView extends React.Component {
             return DebugOutputFactory.createDebugOutputBanner(model.type + '>>' + model.url + ' is not valid', theme, 'error');
         }
         if (this.state.loaded) {
-            return (React.createElement(ImageBlock, { url: model.url, alt: model.alt, flex: this.flex, alignSelf: StyleManager.getHorizontalAlign(model.horizontalAlignment), width: this.state.width, height: this.state.height, onPress: model.selectAction ? this.onPress : undefined, onLayout: this.onLayout, onLoad: this.onImageLoad, onError: this.onImageError, marginTop: this.spacing, marginLeft: spacing, mode: model.style === 'person' ? 'avatar' : 'default' }));
+            return (React.createElement(ImageBlock, { url: model.url, alt: model.alt, flex: this.flex, alignSelf: StyleManager.getHorizontalAlign(model.horizontalAlignment), width: this.state.width, height: this.state.height, onPress: model.selectAction ? this.onPress : undefined, onLayout: this.onLayout, onLoad: this.onImageLoad, onError: this.onImageError, marginTop: this.spacing, marginLeft: spacing, mode: model.style === 'person' ? 'avatar' : 'default', avatarFallbackRender: model.context && model.context.avatarFallbackRenderHandler }));
         }
         return null;
     }

diff --git a/examples/AdaptiveCards/Views/Root.d.ts b/examples/AdaptiveCards/Views/Root.d.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { CardContext } from '../Contexts/CardContext';
 export interface IAdaptiveCardProps {
     adaptiveCard: any;
@@ -14,6 +14,7 @@ export interface IAdaptiveCardProps {
     onError?: (error: any) => void;
     onInfo?: (info: any) => void;
     onWarning?: (warning: any) => void;
+    avatarFallbackRender?: (diameter: number, altText: string, url: string) => ReactNode;
 }
 export declare class CardRootView extends React.Component<IAdaptiveCardProps> {
     rootCardContext: CardContext;

diff --git a/examples/AdaptiveCards/Views/Root.js b/examples/AdaptiveCards/Views/Root.js
@@ -18,6 +18,7 @@ export class CardRootView extends React.Component {
         this.rootCardContext.registerErrorHandler(this.props.onError);
         this.rootCardContext.registerInfoHandler(this.props.onInfo);
         this.rootCardContext.registerWarningHandler(this.props.onWarning);
+        this.rootCardContext.registerAvatarFallbackRenderHandler(this.props.avatarFallbackRender);
     }
     shouldComponentUpdate(nextProps) {
         if (JSON.stringify(nextProps) !== JSON.stringify(this.props)) {

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-native-adaptivecards",
   "description": "React Native implementation of AdaptiveCards.",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "repository": {
     "url": "git+https://github.com/Microsoft/react-native-adaptivecards",
     "type": "git"

diff --git a/src/Components/Basic/ImageBlock.tsx b/src/Components/Basic/ImageBlock.tsx
@@ -31,6 +31,7 @@ interface IProps {
     onLayout?: (event: LayoutChangeEvent) => void;
     onLoad?: (data: any) => void;
     onError?: (error: any) => void;
+    avatarFallbackRender?: (diameter: number, altText: string, url: string) => React.ReactNode;
 }
 
 interface IState {
@@ -137,7 +138,21 @@ export class ImageBlock extends React.Component<IProps, IState> {
     }
 
     private renderImage() {
-        if (UrlUtils.isSvgXml(this.props.url)) {
+        if (this.props.mode === 'avatar' && this.props.avatarFallbackRender) {
+            return <View
+                style={[
+                    {
+                        width: this.props.width,
+                        height: this.props.height,
+                        overflow: 'hidden',
+                    },
+                    this.borderRadius,
+                    this.props.style
+                ]}
+            >
+                {this.props.avatarFallbackRender(this.props.width, this.props.alt, this.props.url)}
+            </View>;
+        } else if (UrlUtils.isSvgXml(this.props.url)) {
             return (
                 <View
                     style={[

diff --git a/src/Contexts/CardContext.ts b/src/Contexts/CardContext.ts
@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { CardModel } from '../Models/Cards/Card';
 import { TreeNode } from '../Shared/Types';
 import { FormStore } from './FormStore';
@@ -14,6 +15,7 @@ export class CardContext extends TreeNode<CardContext> {
     private onSubmitAction?: (data: any) => Promise<any>;
     private onCallbackAction?: (url: string, parameters: { [key: string]: string }) => Promise<any>;
     private onSelectAction?: (data: any) => Promise<any>;
+    private avatarFallbackRender?: (diameter: number, altText: string, url: string) => ReactNode;
     public readonly form: FormStore;
     public readonly schemas: SchemaStore;
     public readonly children: CardContext[] = [];
@@ -75,6 +77,10 @@ export class CardContext extends TreeNode<CardContext> {
         this.onSelectAction = handler;
     }
 
+    public registerAvatarFallbackRenderHandler(handler: (diameter: number, altText: string, url: string) => ReactNode) {
+        this.avatarFallbackRender = handler;
+    }
+
     private findRequiredContext(selector: (context: CardContext) => boolean): CardContext {
         if (selector) {
             if (selector(this)) {
@@ -95,23 +101,23 @@ export class CardContext extends TreeNode<CardContext> {
         return undefined;
     }
 
-    public get infoHandler() : (info: any) => void {
+    public get infoHandler(): (info: any) => void {
         let context = this.findRequiredContext(context => context.onInfo !== undefined);
         if (context) {
             return context.onInfo;
         }
         return undefined;
     }
 
-    public get warningHandler() : (warning: any) => void {
+    public get warningHandler(): (warning: any) => void {
         let context = this.findRequiredContext(context => context.onWarning !== undefined);
         if (context) {
             return context.onWarning;
         }
         return undefined;
     }
 
-    public get focusHandler() : () => void {
+    public get focusHandler(): () => void {
         let context = this.findRequiredContext(context => context.onFocus !== undefined);
         if (context) {
             return context.onFocus;
@@ -166,4 +172,12 @@ export class CardContext extends TreeNode<CardContext> {
         }
         return undefined;
     }
+
+    public get avatarFallbackRenderHandler(): (diameter: number, altText: string, url: string) => ReactNode {
+        let context = this.findRequiredContext(context => context.avatarFallbackRender !== undefined);
+        if (context) {
+            return context.avatarFallbackRender;
+        }
+        return undefined;
+    }
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		registry=https://msasg.pkgs.visualstudio.com/_packaging/react-native-cortana-conversation/npm/registry/
		always-auth=true