From 7387032c1a7a62afc8e92a47adc582f07c2bc4d5 Mon Sep 17 00:00:00 2001
From: Zhijie Zhang <zhijiezhang0124@gmail.com>
Date: Wed, 9 Sep 2020 11:04:36 -0700
Subject: [PATCH] fix: Properties of buttons in the menu overlay component
 can't be customized

---
 src/components/ActionButton/ActionButton.js |  8 +-
 src/components/MenuOverlay/MenuOverlay.js   | 92 ++++++++++-----------
 src/components/MenuOverlay/MenuOverlay.scss | 28 ++++---
 3 files changed, 66 insertions(+), 62 deletions(-)

diff --git a/src/components/ActionButton/ActionButton.js b/src/components/ActionButton/ActionButton.js
index cf750908c..9474ae125 100644
--- a/src/components/ActionButton/ActionButton.js
+++ b/src/components/ActionButton/ActionButton.js
@@ -1,9 +1,13 @@
 import { connect } from 'react-redux';
+import classNames from 'classnames';
 
 import Button from 'components/Button';
 
-const mapStateToProps = (state, { isNotClickableSelector }) => ({
-  className: 'ActionButton',
+const mapStateToProps = (state, { isNotClickableSelector, className }) => ({
+  className: classNames({
+    ActionButton: true,
+    [className]: !!className,
+  }),
   disabled: isNotClickableSelector && isNotClickableSelector(state),
 });
 
diff --git a/src/components/MenuOverlay/MenuOverlay.js b/src/components/MenuOverlay/MenuOverlay.js
index 70fb55476..0ce10ac22 100644
--- a/src/components/MenuOverlay/MenuOverlay.js
+++ b/src/components/MenuOverlay/MenuOverlay.js
@@ -1,6 +1,5 @@
 import actions from 'actions';
-import DataElementWrapper from 'components/DataElementWrapper';
-import Icon from 'components/Icon';
+import ActionButton from 'components/ActionButton';
 import { workerTypes } from 'constants/types';
 import core from 'core';
 import { isIOS, isIE } from 'helpers/device';
@@ -23,8 +22,9 @@ function MenuOverlay() {
 
   const activeTheme = useSelector(selectors.getActiveTheme);
   const isEmbedPrintSupported = useSelector(selectors.isEmbedPrintSupported);
+  const colorMap = useSelector(selectors.getColorMap);
+  const sortStrategy = useSelector(selectors.getSortStrategy);
   const isFullScreen = useSelector(selectors.isFullScreen);
-  const isFilePickerButtonDisabled = useSelector(state => selectors.isElementDisabled(state, 'filePickerButton'));
 
   const closeMenuOverlay = useCallback(() => dispatch(actions.closeElements(['menuOverlay'])), [dispatch]);
   const setActiveLightTheme = useCallback(() => dispatch(actions.setActiveTheme('light')), [dispatch]);
@@ -40,7 +40,7 @@ function MenuOverlay() {
 
   const handlePrintButtonClick = () => {
     closeMenuOverlay();
-    print(dispatch, isEmbedPrintSupported);
+    print(dispatch, isEmbedPrintSupported, sortStrategy, colorMap);
   };
 
   const downloadDocument = () => {
@@ -49,54 +49,52 @@ function MenuOverlay() {
 
   return (
     <FlyoutMenu menu="menuOverlay" trigger="menuButton" onClose={undefined}>
-      {!isFilePickerButtonDisabled && (
-        <DataElementWrapper className="row" dataElement="filePickerButton">
-          <button className="MenuItem" onClick={openFilePicker} aria-label={t('action.openFile')}>
-            <Icon className="MenuIcon" glyph="icon-header-file-picker-line" />
-            <div className="MenuLabel">{t('action.openFile')}</div>
-          </button>
-        </DataElementWrapper>
-      )}
+      <ActionButton
+        dataElement="filePickerButton"
+        className="row"
+        img="icon-header-file-picker-line"
+        label={t('action.openFile')}
+        ariaLabel={t('action.openFile')}
+        onClick={openFilePicker}
+      />
       {!isIOS && (
-        <div className="row">
-          <button
-            className="MenuItem"
-            onClick={toggleFullscreen}
-            aria-label={isFullScreen ? t('action.exitFullscreen') : t('action.enterFullscreen')}
-          >
-            <Icon
-              className="MenuIcon"
-              glyph={isFullScreen ? 'icon-header-full-screen-exit' : 'icon-header-full-screen'}
-            />
-            <div className="MenuLabel">{isFullScreen ? t('action.exitFullscreen') : t('action.enterFullscreen')}</div>
-          </button>
-        </div>
+        <ActionButton
+          dataElement="fullscreenButton"
+          className="row"
+          img={isFullScreen ? 'icon-header-full-screen-exit' : 'icon-header-full-screen'}
+          label={isFullScreen ? t('action.exitFullscreen') : t('action.enterFullscreen')}
+          ariaLabel={isFullScreen ? t('action.exitFullscreen') : t('action.enterFullscreen')}
+          onClick={toggleFullscreen}
+        />
       )}
       {documentType !== workerTypes.XOD && (
-        <DataElementWrapper className="row" dataElement="downloadButton">
-          <button className="MenuItem" onClick={downloadDocument} aria-label={t('action.download')}>
-            <Icon className="MenuIcon" glyph="icon-header-download" />
-            <div className="MenuLabel">{t('action.download')}</div>
-          </button>
-        </DataElementWrapper>
+        <ActionButton
+          dataElement="downloadButton"
+          className="row"
+          img="icon-header-download"
+          label={t('action.download')}
+          ariaLabel={t('action.download')}
+          onClick={downloadDocument}
+        />
       )}
-      <DataElementWrapper className="row" dataElement="printButton">
-        <button className="MenuItem" onClick={handlePrintButtonClick} aria-label={t('action.print')}>
-          <Icon className="MenuIcon" glyph="icon-header-print-line" />
-          <div className="MenuLabel">{t('action.print')}</div>
-        </button>
-      </DataElementWrapper>
+      <ActionButton
+        dataElement="printButton"
+        className="row"
+        img="icon-header-print-line"
+        label={t('action.print')}
+        ariaLabel={t('action.print')}
+        onClick={handlePrintButtonClick}
+      />
       {!isIE && (
-        <div className="row">
-          <button
-            className="MenuItem"
-            onClick={activeTheme === 'dark' ? setActiveLightTheme : setActiveDarkTheme}
-            aria-label={activeTheme === 'dark' ? t('action.lightMode') : t('action.darkMode')}
-          >
-            <Icon className="MenuIcon" glyph={`icon - header - mode - ${activeTheme === 'dark' ? 'day' : 'night'}`} />
-            <div className="MenuLabel">{activeTheme === 'dark' ? t('action.lightMode') : t('action.darkMode')}</div>
-          </button>
-        </div>)}
+        <ActionButton
+          dataElement="themeChangeButton"
+          className="row"
+          img={`icon - header - mode - ${activeTheme === 'dark' ? 'day' : 'night'}`}
+          label={activeTheme === 'dark' ? t('action.lightMode') : t('action.darkMode')}
+          ariaLabel={activeTheme === 'dark' ? t('action.lightMode') : t('action.darkMode')}
+          onClick={activeTheme === 'dark' ? setActiveLightTheme : setActiveDarkTheme}
+        />
+      )}
     </FlyoutMenu>
   );
 }
diff --git a/src/components/MenuOverlay/MenuOverlay.scss b/src/components/MenuOverlay/MenuOverlay.scss
index 7cd2b7cec..acfab6fff 100644
--- a/src/components/MenuOverlay/MenuOverlay.scss
+++ b/src/components/MenuOverlay/MenuOverlay.scss
@@ -1,20 +1,22 @@
 @import '../../constants/styles';
 @import '../../constants/overlay';
 
-.MenuItem {
-  @include button-reset;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  cursor: pointer;
-  border-radius: 4px;
+.FlyoutMenu[data-element="menuOverlay"] {
+  .ActionButton {
+    justify-content: flex-start;
 
-  .MenuIcon {
-    margin: 4px;
+    .Icon {
+      margin: 4px;
+    }
+
+    span {
+      margin: 0 4px;
+    }
   }
 
-  .MenuLabel {
-    margin: 0 4px;
+  // override the styles defined in FlyoutMenu.scss
+  .ActionButton.row.disabled:hover {
+    background: none;
+    cursor: default;
   }
-}
+}
\ No newline at end of file