Props to disable interactivity

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Changed
 - Update `PULL_REQUEST_TEMPLATE.md` [@corinagum](https://github.com/corinagum) in PR [#1065](https://github.com/Microsoft/BotFramework-WebChat/pull/1065)
 - Add `role === 'user'` to `fromMe` check in [#1053](https://github.com/Microsoft/BotFramework-WebChat/pull/1053)
+- Add `disabled` props to disable all controls in PR [#988](https://github.com/Microsoft/BotFramework-WebChat/pull/988)
 
 ## [0.14.1] - 2018-07-31
 ### Added

src/ActivityView.tsx

@@ -7,29 +7,34 @@ import { FormattedText } from './FormattedText';
 import { FormatState, SizeState } from './Store';
 
 const Attachments = (props: {
-    attachments: Attachment[],
-    attachmentLayout: AttachmentLayout,
-    format: FormatState,
-    size: SizeState,
-    onCardAction: IDoCardAction,
-    onImageLoad: () => void
+    attachmentLayout: AttachmentLayout;
+    attachments: Attachment[];
+    disabled: boolean;
+    format: FormatState;
+    onCardAction: IDoCardAction;
+    onImageLoad: () => void;
+    size: SizeState;
 }) => {
     const { attachments, attachmentLayout, ...otherProps } = props;
+
     if (!attachments || attachments.length === 0) {
         return null;
     }
+
     return attachmentLayout === 'carousel' ?
         <Carousel
             attachments={ attachments }
+            disabled={ props.disabled }
             { ...otherProps }
         />
     :
         <div className="wc-list">
             { attachments.map((attachment, index) =>
                 <AttachmentView
-                    key={ index }
                     attachment={ attachment }
                     format={ props.format }
+                    disabled={ props.disabled }
+                    key={ index }
                     onCardAction={ props.onCardAction }
                     onImageLoad={ props.onImageLoad }
                 />
@@ -38,11 +43,12 @@ const Attachments = (props: {
 };
 
 export interface ActivityViewProps {
-    format: FormatState;
-    size: SizeState;
     activity: Activity;
+    disabled: boolean;
+    format: FormatState;
     onCardAction: IDoCardAction;
     onImageLoad: () => void;
+    size: SizeState;
 }
 
 export class ActivityView extends React.Component<ActivityViewProps, {}> {
@@ -58,11 +64,13 @@ export class ActivityView extends React.Component<ActivityViewProps, {}> {
         // if it's a carousel and the size changed, re-render
             || (this.props.activity.type === 'message'
                 && this.props.activity.attachmentLayout === 'carousel'
-                && this.props.size !== nextProps.size);
+                && this.props.size !== nextProps.size)
+            || !this.props.disabled !== !nextProps.disabled;
     }
 
     render() {
         const { activity, ...props } = this.props;
+
         switch (activity.type) {
             case 'message':
                 return (
@@ -75,6 +83,7 @@ export class ActivityView extends React.Component<ActivityViewProps, {}> {
                         <Attachments
                             attachments={ activity.attachments }
                             attachmentLayout={ activity.attachmentLayout }
+                            disabled={ props.disabled }
                             format={ props.format }
                             onCardAction={ props.onCardAction }
                             onImageLoad={ props.onImageLoad }

src/AdaptiveCardContainer.tsx

@@ -13,6 +13,7 @@ import { AdaptiveCardsState, ChatState } from './Store';
 
 export interface Props {
     className?: string;
+    disabled?: boolean;
     hostConfig: HostConfig;
     jsonCard?: IAdaptiveCard;
     nativeCard?: AdaptiveCard;
@@ -90,7 +91,7 @@ class AdaptiveCardContainer extends React.Component<Props, State> {
     }
 
     private onClick(e: React.MouseEvent<HTMLElement>) {
-        if (!this.props.onClick) {
+        if (this.props.disabled || !this.props.onClick) {
             return;
         }
 
@@ -112,7 +113,11 @@ class AdaptiveCardContainer extends React.Component<Props, State> {
     }
 
     private onExecuteAction(action: Action) {
-        if (action instanceof OpenUrlAction) {
+        if (this.props.disabled) {
+            return;
+        } else if (action instanceof OpenUrlAction) {
+            // TODO: Should we let this one bubble to Chat.tsx?
+            //       this.props.onCardAction('openUrl', action.url) might work
             window.open(action.url);
         } else if (action instanceof SubmitAction) {
             if (action.data !== undefined) {
@@ -135,6 +140,7 @@ class AdaptiveCardContainer extends React.Component<Props, State> {
         if (
             prevProps.hostConfig !== this.props.hostConfig
             || prevProps.jsonCard !== this.props.jsonCard
+            || !prevProps.disabled !== !this.props.disabled
             || prevProps.nativeCard !== this.props.nativeCard
         ) {
             this.unmountAdaptiveCards();
@@ -166,7 +172,7 @@ class AdaptiveCardContainer extends React.Component<Props, State> {
             errors = adaptiveCard.validate();
         }
 
-        adaptiveCard.onExecuteAction = action => this.onExecuteAction(action);
+        adaptiveCard.onExecuteAction = this.onExecuteAction.bind(this);
 
         if (errors.length === 0) {
             let renderedCard: HTMLElement;
@@ -187,11 +193,28 @@ class AdaptiveCardContainer extends React.Component<Props, State> {
             }
 
             if (renderedCard) {
+                if (this.props.disabled) {
+                    const hyperlinks = renderedCard.querySelectorAll('a');
+                    const inputs = renderedCard.querySelectorAll('button, input, select, textarea');
+
+                    [].forEach.call(inputs, (input: HTMLInputElement) => {
+                        input.disabled = true;
+                    });
+
+                    [].forEach.call(hyperlinks, (hyperlink: HTMLAnchorElement) => {
+                        hyperlink.addEventListener('click', event => {
+                            event.preventDefault();
+                            event.stopImmediatePropagation();
+                            event.stopPropagation();
+                        });
+                    });
+                }
+
                 if (this.props.onImageLoad) {
                     const imgs = renderedCard.querySelectorAll('img');
 
                     if (imgs && imgs.length > 0) {
-                        Array.prototype.forEach.call(imgs, (img: HTMLImageElement) => {
+                        [].forEach.call(imgs, (img: HTMLImageElement) => {
                             img.addEventListener('load', this.handleImageLoad);
                         });
                     }
@@ -201,9 +224,7 @@ class AdaptiveCardContainer extends React.Component<Props, State> {
 
                 return;
             }
-        }
-
-        if (errors.length > 0) {
+        } else {
             console.log('Error(s) rendering AdaptiveCard:');
             errors.forEach(e => console.log(e.message));
             this.setState({ errors: errors.map(e => e.message) });