Add useDisabled

CHANGELOG.md

@@ -40,6 +40,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
    -  PR [#2540](https://github.com/microsoft/BotFramework-WebChat/pull/2540): `useActivities`, `useReferenceGrammarID`, `useSendBoxDictationStarted`
    -  PR [#2541](https://github.com/microsoft/BotFramework-WebChat/pull/2541): `useStyleOptions`, `useStyleSet`
    -  PR [#2542](https://github.com/microsoft/BotFramework-WebChat/pull/2542): `useLanguage`, `useLocalize`, `useLocalizeDate`
+   -  PR [#2548](https://github.com/microsoft/BotFramework-WebChat/pull/2548): `useDisabled`
 
 ### Fixed
 

__tests__/hooks/useDisabled.js

@@ -0,0 +1,29 @@
+import { timeouts } from '../constants.json';
+
+// selenium-webdriver API doc:
+// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
+
+jest.setTimeout(timeouts.test);
+
+test('getter should return true if disabled set to true in props', async () => {
+  const { pageObjects } = await setupWebDriver({ props: { disabled: true } });
+
+  const [disabled] = await pageObjects.runHook('useDisabled');
+
+  expect(disabled).toMatchInlineSnapshot(`true`);
+});
+
+test('getter should return false if disabled is not set in props', async () => {
+  const { pageObjects } = await setupWebDriver();
+
+  const [disabled] = await pageObjects.runHook('useDisabled');
+
+  expect(disabled).toMatchInlineSnapshot(`false`);
+});
+
+test('setter should be falsy', async () => {
+  const { pageObjects } = await setupWebDriver();
+  const [_, setDisabled] = await pageObjects.runHook('useDisabled');
+
+  expect(setDisabled).toBeFalsy();
+});

packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardRenderer.js

@@ -7,7 +7,7 @@ import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { Components, connectToWebChat, getTabIndex, hooks } from 'botframework-webchat-component';
 
 const { ErrorBox } = Components;
-const { useLocalize, useStyleSet } = hooks;
+const { useDisabled, useLocalize, useStyleSet } = hooks;
 
 function isPlainObject(obj) {
   return Object.getPrototypeOf(obj) === Object.prototype;
@@ -65,12 +65,13 @@ function saveInputValues(element) {
 const AdaptiveCardRenderer = ({
   adaptiveCard,
   adaptiveCardHostConfig,
-  disabled,
   performCardAction,
   renderMarkdown,
   tapAction
 }) => {
   const [{ adaptiveCardRenderer: adaptiveCardRendererStyleSet }] = useStyleSet();
+  const [disabled] = useDisabled();
+
   const errorMessage = useLocalize('Adaptive Card render error');
 
   const [error, setError] = useState();
@@ -208,7 +209,6 @@ const AdaptiveCardRenderer = ({
 AdaptiveCardRenderer.propTypes = {
   adaptiveCard: PropTypes.any.isRequired,
   adaptiveCardHostConfig: PropTypes.any.isRequired,
-  disabled: PropTypes.bool,
   performCardAction: PropTypes.func.isRequired,
   renderMarkdown: PropTypes.func.isRequired,
   tapAction: PropTypes.shape({
@@ -218,12 +218,10 @@ AdaptiveCardRenderer.propTypes = {
 };
 
 AdaptiveCardRenderer.defaultProps = {
-  disabled: false,
   tapAction: undefined
 };
 
-export default connectToWebChat(({ disabled, onCardAction, renderMarkdown, tapAction }) => ({
-  disabled,
+export default connectToWebChat(({ onCardAction, renderMarkdown, tapAction }) => ({
   performCardAction: onCardAction,
   renderMarkdown,
   tapAction

packages/component/src/Dictation.js

@@ -6,6 +6,7 @@ import React, { useCallback, useMemo } from 'react';
 import connectToWebChat from './connectToWebChat';
 
 import useActivities from './hooks/useActivities';
+import useDisabled from './hooks/useDisabled';
 import useLanguage from './hooks/useLanguage';
 
 const {
@@ -14,7 +15,6 @@ const {
 
 const Dictation = ({
   dictateState,
-  disabled,
   emitTypingIndicator,
   onError,
   sendTypingIndicator,
@@ -27,6 +27,7 @@ const Dictation = ({
   webSpeechPonyfill: { SpeechGrammarList, SpeechRecognition } = {}
 }) => {
   const [activities] = useActivities();
+  const [disabled] = useDisabled();
   const [language] = useLanguage();
 
   const numSpeakingActivities = useMemo(() => activities.filter(({ channelData: { speak } = {} }) => speak).length, [
@@ -84,14 +85,12 @@ const Dictation = ({
 };
 
 Dictation.defaultProps = {
-  disabled: false,
   onError: undefined,
   webSpeechPonyfill: undefined
 };
 
 Dictation.propTypes = {
   dictateState: PropTypes.number.isRequired,
-  disabled: PropTypes.bool,
   emitTypingIndicator: PropTypes.func.isRequired,
   onError: PropTypes.func,
   sendTypingIndicator: PropTypes.bool.isRequired,
@@ -110,7 +109,6 @@ Dictation.propTypes = {
 export default connectToWebChat(
   ({
     dictateState,
-    disabled,
     emitTypingIndicator,
     postActivity,
     sendTypingIndicator,
@@ -123,7 +121,6 @@ export default connectToWebChat(
     webSpeechPonyfill
   }) => ({
     dictateState,
-    disabled,
     emitTypingIndicator,
     postActivity,
     sendTypingIndicator,

packages/component/src/SendBox/MicrophoneButton.js

@@ -11,6 +11,7 @@ import React from 'react';
 import connectToWebChat from '../connectToWebChat';
 import IconButton from './IconButton';
 import MicrophoneIcon from './Assets/MicrophoneIcon';
+import useDisabled from '../hooks/useDisabled';
 import useLocalize from '../hooks/useLocalize';
 import useStyleSet from '../hooks/useStyleSet';
 
@@ -77,8 +78,9 @@ const connectMicrophoneButton = (...selectors) => {
   );
 };
 
-const MicrophoneButton = ({ className, click, dictating, disabled }) => {
+const MicrophoneButton = ({ className, click, dictating }) => {
   const [{ microphoneButton: microphoneButtonStyleSet }] = useStyleSet();
+  const [disabled] = useDisabled();
   const iconButtonAltText = useLocalize('Speak');
   const screenReaderText = useLocalize(dictating ? 'Microphone on' : 'Microphone off');
 
@@ -99,15 +101,13 @@ const MicrophoneButton = ({ className, click, dictating, disabled }) => {
 
 MicrophoneButton.defaultProps = {
   className: '',
-  dictating: false,
-  disabled: false
+  dictating: false
 };
 
 MicrophoneButton.propTypes = {
   className: PropTypes.string,
   click: PropTypes.func.isRequired,
-  dictating: PropTypes.bool,
-  disabled: PropTypes.bool
+  dictating: PropTypes.bool
 };
 
 export default connectMicrophoneButton()(MicrophoneButton);

packages/component/src/SendBox/SendButton.js

@@ -4,6 +4,7 @@ import React from 'react';
 import connectToWebChat from '../connectToWebChat';
 import IconButton from './IconButton';
 import SendIcon from './Assets/SendIcon';
+import useDisabled from '../hooks/useDisabled';
 import useLocalize from '../hooks/useLocalize';
 
 const connectSendButton = (...selectors) =>
@@ -16,7 +17,8 @@ const connectSendButton = (...selectors) =>
     ...selectors
   );
 
-const SendButton = ({ disabled, submitSendBox }) => {
+const SendButton = ({ submitSendBox }) => {
+  const [disabled] = useDisabled();
   const altText = useLocalize('Send');
 
   return (
@@ -26,12 +28,7 @@ const SendButton = ({ disabled, submitSendBox }) => {
   );
 };
 
-SendButton.defaultProps = {
-  disabled: false
-};
-
 SendButton.propTypes = {
-  disabled: PropTypes.bool,
   submitSendBox: PropTypes.func.isRequired
 };
 

packages/component/src/SendBox/SuggestedAction.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import connectToWebChat from '../connectToWebChat';
+import useDisabled from '../hooks/useDisabled';
 import useStyleSet from '../hooks/useStyleSet';
 
 const SUGGESTED_ACTION_CSS = css({
@@ -28,8 +29,9 @@ const connectSuggestedAction = (...selectors) =>
     ...selectors
   );
 
-const SuggestedAction = ({ buttonText, click, disabled, image }) => {
+const SuggestedAction = ({ buttonText, click, image }) => {
   const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
+  const [disabled] = useDisabled();
 
   return (
     <div className={classNames(suggestedActionStyleSet + '', SUGGESTED_ACTION_CSS + '')}>
@@ -42,14 +44,12 @@ const SuggestedAction = ({ buttonText, click, disabled, image }) => {
 };
 
 SuggestedAction.defaultProps = {
-  disabled: false,
   image: ''
 };
 
 SuggestedAction.propTypes = {
   buttonText: PropTypes.string.isRequired,
   click: PropTypes.func.isRequired,
-  disabled: PropTypes.bool,
   image: PropTypes.string
 };
 

packages/component/src/SendBox/TextBox.js

@@ -5,6 +5,7 @@ import React from 'react';
 
 import { Context as TypeFocusSinkContext } from '../Utils/TypeFocusSink';
 import connectToWebChat from '../connectToWebChat';
+import useDisabled from '../hooks/useDisabled';
 import useLocalize from '../hooks/useLocalize';
 import useStyleOptions from '../hooks/useStyleOptions';
 import useStyleSet from '../hooks/useStyleSet';
@@ -55,9 +56,10 @@ const connectSendTextBox = (...selectors) =>
     ...selectors
   );
 
-const TextBox = ({ className, disabled, onChange, onKeyPress, onSubmit, value }) => {
+const TextBox = ({ className, onChange, onKeyPress, onSubmit, value }) => {
   const [{ sendBoxTextWrap }] = useStyleOptions();
   const [{ sendBoxTextArea: sendBoxTextAreaStyleSet, sendBoxTextBox: sendBoxTextBoxStyleSet }] = useStyleSet();
+  const [disabled] = useDisabled();
   const sendBoxString = useLocalize('Sendbox');
   const typeYourMessageString = useLocalize('Type your message');
 
@@ -105,13 +107,11 @@ const TextBox = ({ className, disabled, onChange, onKeyPress, onSubmit, value })
 
 TextBox.defaultProps = {
   className: '',
-  disabled: false,
   value: ''
 };
 
 TextBox.propTypes = {
   className: PropTypes.string,
-  disabled: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
   onKeyPress: PropTypes.func.isRequired,
   onSubmit: PropTypes.func.isRequired,

packages/component/src/SendBox/UploadButton.js

@@ -7,6 +7,7 @@ import AttachmentIcon from './Assets/AttachmentIcon';
 import connectToWebChat from '../connectToWebChat';
 import downscaleImageToDataURL from '../Utils/downscaleImageToDataURL';
 import IconButton from './IconButton';
+import useDisabled from '../hooks/useDisabled';
 import useLocalize from '../hooks/useLocalize';
 import useStyleSet from '../hooks/useStyleSet';
 
@@ -81,8 +82,9 @@ const connectUploadButton = (...selectors) =>
     ...selectors
   );
 
-const UploadButton = ({ disabled, sendFiles }) => {
+const UploadButton = ({ sendFiles }) => {
   const [{ uploadButton: uploadButtonStyleSet }] = useStyleSet();
+  const [disabled] = useDisabled();
   const uploadFileString = useLocalize('Upload file');
 
   const inputRef = useRef();
@@ -122,12 +124,7 @@ const UploadButton = ({ disabled, sendFiles }) => {
   );
 };
 
-UploadButton.defaultProps = {
-  disabled: false
-};
-
 UploadButton.propTypes = {
-  disabled: PropTypes.bool,
   sendFiles: PropTypes.func.isRequired
 };
 

packages/component/src/hooks/index.js

@@ -1,4 +1,5 @@
 import useActivities from './useActivities';
+import useDisabled from './useDisabled';
 import useLanguage from './useLanguage';
 import useLocalize from './useLocalize';
 import useLocalizeDate from './useLocalizeDate';
@@ -10,6 +11,7 @@ import { useSendBoxDictationStarted } from '../BasicSendBox';
 
 export {
   useActivities,
+  useDisabled,
   useLanguage,
   useLocalize,
   useLocalizeDate,

packages/component/src/hooks/useDisabled.js

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import WebChatUIContext from '../WebChatUIContext';
+
+export default function useDisabled() {
+  return [useContext(WebChatUIContext).disabled];
+}