Use useStyleOptions and useStyleSet

microsoft · Nov 3, 2019 · b6d1050 · b6d1050
1 parent 0aa1a34
commit b6d1050
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 159 deletions.
diff --git a/packages/component/src/Activity/CarouselLayout.js b/packages/component/src/Activity/CarouselLayout.js
@@ -16,6 +16,7 @@ const ROOT_CSS = css({
 
 const CarouselLayout = ({ activity, children, language, timestampClassName }) => {
   const [{ carouselFlipper: carouselFlipperStyleSet }] = useStyleSet();
+
   const filmStyleSet = createBasicStyleSet({ cursor: null });
 
   return (

diff --git a/packages/component/src/SendBox/ConnectivityStatus.js b/packages/component/src/SendBox/ConnectivityStatus.js
@@ -6,6 +6,7 @@ import connectToWebChat from '../connectToWebChat';
 import ErrorNotificationIcon from '../Attachment/Assets/ErrorNotificationIcon';
 import ScreenReaderText from '../ScreenReaderText';
 import SpinnerAnimation from '../Attachment/Assets/SpinnerAnimation';
+import useStyleSet from '../hooks/useStyleSet';
 import WarningNotificationIcon from '../Attachment/Assets/WarningNotificationIcon';
 
 const CONNECTIVITY_STATUS_DEBOUNCE = 400;
@@ -50,76 +51,84 @@ DebouncedConnectivityStatus.propTypes = {
 const connectConnectivityStatus = (...selectors) =>
   connectToWebChat(({ connectivityStatus, language }) => ({ connectivityStatus, language }), ...selectors);
 
-const ConnectivityStatus = ({ connectivityStatus, language, styleSet }) => {
+const ConnectivityStatus = ({ connectivityStatus, language }) => {
+  const [
+    {
+      connectivityNotification: connectivityNotificationStyleSet,
+      errorNotification: errorNotificationStyleSet,
+      warningNotification: warningNotificationStyleSet
+    }
+  ] = useStyleSet();
+
   const renderConnectingSlow = useCallback(() => {
     const localizedText = localize('SLOW_CONNECTION_NOTIFICATION', language);
 
     return (
       <React.Fragment>
         <ScreenReaderText text={localizedText} />
-        <div aria-hidden={true} className={styleSet.warningNotification}>
+        <div aria-hidden={true} className={warningNotificationStyleSet}>
           <WarningNotificationIcon />
           {localizedText}
         </div>
       </React.Fragment>
     );
-  }, [language, styleSet.warningNotification]);
+  }, [language, warningNotificationStyleSet]);
 
   const renderNotConnected = useCallback(() => {
     const localizedText = localize('FAILED_CONNECTION_NOTIFICATION', language);
 
     return (
       <React.Fragment>
         <ScreenReaderText text={localizedText} />
-        <div aria-hidden={true} className={styleSet.errorNotification}>
+        <div aria-hidden={true} className={errorNotificationStyleSet}>
           <ErrorNotificationIcon />
           {localizedText}
         </div>
       </React.Fragment>
     );
-  }, [language, styleSet.errorNotification]);
+  }, [language, errorNotificationStyleSet]);
 
   const renderUninitialized = useCallback(() => {
     const localizedText = localize('INITIAL_CONNECTION_NOTIFICATION', language);
 
     return (
       <React.Fragment>
         <ScreenReaderText text={localizedText} />
-        <div aria-hidden={true} className={styleSet.connectivityNotification}>
+        <div aria-hidden={true} className={connectivityNotificationStyleSet}>
           <SpinnerAnimation />
           {localizedText}
         </div>
       </React.Fragment>
     );
-  }, [language, styleSet.connectivityNotification]);
+  }, [language, connectivityNotificationStyleSet]);
 
   const renderReconnecting = useCallback(() => {
     const localizedText = localize('INTERRUPTED_CONNECTION_NOTIFICATION', language);
 
     return (
       <React.Fragment>
         <ScreenReaderText text={localizedText} />
-        <div aria-hidden={true} className={styleSet.connectivityNotification}>
+        <div aria-hidden={true} className={connectivityNotificationStyleSet}>
           <SpinnerAnimation />
           {localizedText}
         </div>
       </React.Fragment>
     );
-  }, [language, styleSet.connectivityNotification]);
+  }, [language, connectivityNotificationStyleSet]);
 
   const renderSagaError = useCallback(() => {
     const localizedText = localize('RENDER_ERROR_NOTIFICATION', language);
 
     return (
       <React.Fragment>
         <ScreenReaderText text={localizedText} />
-        <div className={styleSet.errorNotification}>
+        <div className={errorNotificationStyleSet}>
           <ErrorNotificationIcon />
           {localizedText}
         </div>
       </React.Fragment>
     );
-  }, [language, styleSet.errorNotification]);
+  }, [language, errorNotificationStyleSet]);
 
   const renderEmptyStatus = useCallback(
     () => <ScreenReaderText text={localize('CONNECTED_NOTIFICATION', language)} />,
@@ -165,12 +174,7 @@ const ConnectivityStatus = ({ connectivityStatus, language, styleSet }) => {
 
 ConnectivityStatus.propTypes = {
   connectivityStatus: PropTypes.string.isRequired,
-  language: PropTypes.string.isRequired,
-  styleSet: PropTypes.shape({
-    connectivityNotification: PropTypes.any.isRequired,
-    errorNotification: PropTypes.any.isRequired,
-    warningNotification: PropTypes.any.isRequired
-  }).isRequired
+  language: PropTypes.string.isRequired
 };
 
-export default connectConnectivityStatus(({ styleSet }) => ({ styleSet }))(ConnectivityStatus);
+export default connectConnectivityStatus()(ConnectivityStatus);
diff --git a/packages/component/src/SendBox/DictationInterims.js b/packages/component/src/SendBox/DictationInterims.js
@@ -9,6 +9,7 @@ import { Constants } from 'botframework-webchat-core';
 
 import connectToWebChat from '../connectToWebChat';
 import Localize from '../Localization/Localize';
+import useStyleSet from '../hooks/useStyleSet';
 
 const {
   DictateState: { DICTATING, STARTING, STOPPING }
@@ -29,28 +30,31 @@ const connectDictationInterims = (...selectors) =>
     ...selectors
   );
 
-const DictationInterims = ({ className, dictateInterims = [], dictateState, styleSet }) =>
-  dictateState === STARTING || dictateState === STOPPING ? (
-    <p className={classNames(styleSet.dictationInterims + '', ROOT_CSS + '', className + '', 'status')}>
+const DictationInterims = ({ className, dictateInterims = [], dictateState }) => {
+  const [{ dictationInterims: dictationInterimsStyleSet }] = useStyleSet();
+
+  return dictateState === STARTING || dictateState === STOPPING ? (
+    <p className={classNames(dictationInterimsStyleSet + '', ROOT_CSS + '', className + '', 'status')}>
       {dictateState === STARTING && <Localize text="Starting&hellip;" />}
     </p>
   ) : (
     dictateState === DICTATING &&
-    (dictateInterims.length ? (
-      <p className={classNames(styleSet.dictationInterims + '', ROOT_CSS + '', className + '', 'dictating')}>
-        {dictateInterims.map((interim, index) => (
-          <span key={index}>
-            {interim}
-            &nbsp;
-          </span>
-        ))}
-      </p>
-    ) : (
-      <p className={classNames(styleSet.dictationInterims + '', ROOT_CSS + '', className + '', 'status')}>
-        <Localize text="Listening&hellip;" />
-      </p>
-    ))
+      (dictateInterims.length ? (
+        <p className={classNames(dictationInterimsStyleSet + '', ROOT_CSS + '', className + '', 'dictating')}>
+          {dictateInterims.map((interim, index) => (
+            <span key={index}>
+              {interim}
+              &nbsp;
+            </span>
+          ))}
+        </p>
+      ) : (
+        <p className={classNames(dictationInterimsStyleSet + '', ROOT_CSS + '', className + '', 'status')}>
+          <Localize text="Listening&hellip;" />
+        </p>
+      ))
   );
+};
 
 DictationInterims.defaultProps = {
   className: ''
@@ -59,15 +63,12 @@ DictationInterims.defaultProps = {
 DictationInterims.propTypes = {
   className: PropTypes.string,
   dictateInterims: PropTypes.arrayOf(PropTypes.string).isRequired,
-  dictateState: PropTypes.number.isRequired,
-  styleSet: PropTypes.shape({
-    dictationInterims: PropTypes.any.isRequired
-  }).isRequired
+  dictateState: PropTypes.number.isRequired
 };
 
 // TODO: [P3] After speech started, when clicking on the transcript, it should
 //       stop the dictation and allow the user to type-correct the transcript
 
-export default connectDictationInterims(({ styleSet }) => ({ styleSet }))(DictationInterims);
+export default connectDictationInterims()(DictationInterims);
 
 export { connectDictationInterims };
diff --git a/packages/component/src/SendBox/IconButton.js b/packages/component/src/SendBox/IconButton.js
@@ -2,19 +2,23 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import connectToWebChat from '../connectToWebChat';
+import useStyleSet from '../hooks/useStyleSet';
 
-const IconButton = ({ alt, children, className, disabled, onClick, styleSet }) => (
-  <button
-    className={classNames(styleSet.sendBoxButton + '', className + '')}
-    disabled={disabled}
-    onClick={onClick}
-    title={alt}
-    type="button"
-  >
-    {children}
-  </button>
-);
+const IconButton = ({ alt, children, className, disabled, onClick }) => {
+  const [{ sendBoxButton: sendBoxButtonStyleSet }] = useStyleSet();
+
+  return (
+    <button
+      className={classNames(sendBoxButtonStyleSet + '', className + '')}
+      disabled={disabled}
+      onClick={onClick}
+      title={alt}
+      type="button"
+    >
+      {children}
+    </button>
+  );
+};
 
 IconButton.defaultProps = {
   alt: '',
@@ -29,10 +33,7 @@ IconButton.propTypes = {
   children: PropTypes.any,
   className: PropTypes.string,
   disabled: PropTypes.bool,
-  onClick: PropTypes.func,
-  styleSet: PropTypes.shape({
-    sendBoxButton: PropTypes.any.isRequired
-  }).isRequired
+  onClick: PropTypes.func
 };
 
-export default connectToWebChat(({ styleSet }) => ({ styleSet }))(IconButton);
+export default IconButton;
diff --git a/packages/component/src/SendBox/MicrophoneButton.js b/packages/component/src/SendBox/MicrophoneButton.js
@@ -12,6 +12,7 @@ import { localize } from '../Localization/Localize';
 import connectToWebChat from '../connectToWebChat';
 import IconButton from './IconButton';
 import MicrophoneIcon from './Assets/MicrophoneIcon';
+import useStyleSet from '../hooks/useStyleSet';
 
 const { DictateState } = Constants;
 
@@ -76,19 +77,23 @@ const connectMicrophoneButton = (...selectors) => {
   );
 };
 
-const MicrophoneButton = ({ className, click, dictating, disabled, language, styleSet }) => (
-  <div
-    aria-controls="webchatSendBoxMicrophoneButton"
-    className={classNames(styleSet.microphoneButton + '', ROOT_CSS + '', className + '', { dictating })}
-  >
-    <IconButton alt={localize('Speak', language)} disabled={disabled} onClick={click}>
-      <MicrophoneIcon />
-    </IconButton>
-    <div aria-live="polite" className="sr-only" id="webchatSendBoxMicrophoneButton" role="status">
-      {localize(dictating ? 'Microphone on' : 'Microphone off', language)}
+const MicrophoneButton = ({ className, click, dictating, disabled, language }) => {
+  const [{ microphoneButton: microphoneButtonStyleSet }] = useStyleSet();
+
+  return (
+    <div
+      aria-controls="webchatSendBoxMicrophoneButton"
+      className={classNames(microphoneButtonStyleSet + '', ROOT_CSS + '', className + '', { dictating })}
+    >
+      <IconButton alt={localize('Speak', language)} disabled={disabled} onClick={click}>
+        <MicrophoneIcon />
+      </IconButton>
+      <div aria-live="polite" className="sr-only" id="webchatSendBoxMicrophoneButton" role="status">
+        {localize(dictating ? 'Microphone on' : 'Microphone off', language)}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 MicrophoneButton.defaultProps = {
   className: '',
@@ -101,12 +106,9 @@ MicrophoneButton.propTypes = {
   click: PropTypes.func.isRequired,
   dictating: PropTypes.bool,
   disabled: PropTypes.bool,
-  language: PropTypes.string.isRequired,
-  styleSet: PropTypes.shape({
-    microphoneButton: PropTypes.any.isRequired
-  }).isRequired
+  language: PropTypes.string.isRequired
 };
 
-export default connectMicrophoneButton(({ styleSet }) => ({ styleSet }))(MicrophoneButton);
+export default connectMicrophoneButton()(MicrophoneButton);
 
 export { connectMicrophoneButton };
diff --git a/packages/component/src/SendBox/SuggestedAction.js b/packages/component/src/SendBox/SuggestedAction.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import connectToWebChat from '../connectToWebChat';
+import useStyleSet from '../hooks/useStyleSet';
 
 const SUGGESTED_ACTION_CSS = css({
   display: 'inline-block',
@@ -27,14 +28,18 @@ const connectSuggestedAction = (...selectors) =>
     ...selectors
   );
 
-const SuggestedAction = ({ buttonText, click, disabled, image, styleSet }) => (
-  <div className={classNames(styleSet.suggestedAction + '', SUGGESTED_ACTION_CSS + '')}>
-    <button disabled={disabled} onClick={click} type="button">
-      {image && <img src={image} />}
-      <nobr>{buttonText}</nobr>
-    </button>
-  </div>
-);
+const SuggestedAction = ({ buttonText, click, disabled, image }) => {
+  const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
+
+  return (
+    <div className={classNames(suggestedActionStyleSet + '', SUGGESTED_ACTION_CSS + '')}>
+      <button disabled={disabled} onClick={click} type="button">
+        {image && <img src={image} />}
+        <nobr>{buttonText}</nobr>
+      </button>
+    </div>
+  );
+};
 
 SuggestedAction.defaultProps = {
   disabled: false,
@@ -45,12 +50,9 @@ SuggestedAction.propTypes = {
   buttonText: PropTypes.string.isRequired,
   click: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
-  image: PropTypes.string,
-  styleSet: PropTypes.shape({
-    suggestedAction: PropTypes.any.isRequired
-  }).isRequired
+  image: PropTypes.string
 };
 
-export default connectSuggestedAction(({ styleSet }) => ({ styleSet }))(SuggestedAction);
+export default connectSuggestedAction()(SuggestedAction);
 
 export { connectSuggestedAction };