wip(dashboard): change the 'Confirmation' component

Signed-off-by: Gianfranco Manganiello <gmanganiello@teclib.com>
flyve-mdm · Jul 30, 2018 · 6b3e3d5 · 6b3e3d5
1 parent bd836b6
commit 6b3e3d5
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 19 deletions.
diff --git a/src/assets/styles/scss/architecture/1_level_settings/_colors.scss b/src/assets/styles/scss/architecture/1_level_settings/_colors.scss
@@ -35,4 +35,31 @@ $splitview-color-fonts-hover: $font-color-primary;
 // Colors dropdown
 
 $dropdown-color: #FFFFFF;
-$dropdown-color-hover: rgba(0,0,0,.1);
+$dropdown-color-hover: rgba(0,0,0,.1);
+
+// Fabric palette
+
+$themePrimaryColor: #158784;
+$themeLighterAltColor: #f2fafa;
+$themeLighterColor: #cceceb;
+$themeLightColor: #a4dbd9;
+$themeTertiaryColor: #5bb7b4;
+$themeSecondaryColor: #279692;
+$themeDarkAltColor: #137a76;
+$themeDarkColor: #106764;
+$themeDarkerColor: #0c4c4a;
+$neutralLighterAltColor: #f3f3f3;
+$neutralLighterColor: #efefef;
+$neutralLightColor: #e5e5e5;
+$neutralQuaternaryAltColor: #d6d6d6;
+$neutralQuaternaryColor: #cccccc;
+$neutralTertiaryAltColor: #c4c4c4;
+$neutralTertiaryColor: #c2c2c2;
+$neutralSecondaryColor: #858585;
+$neutralPrimaryAltColor: #4b4b4b;
+$neutralPrimaryColor: #333;
+$neutralDarkColor: #272727;
+$blackColor: #1d1d1d;
+$whiteColor: #fafafa;
+$bodyBackgroundColor: #fafafa;
+$bodyTextColor: #333;
diff --git a/src/components/Confirmation/index.js b/src/components/Confirmation/index.js
@@ -30,7 +30,13 @@ import React, {
   PureComponent,
 } from 'react'
 import PropTypes from 'prop-types'
-import ReactWinJS from 'react-winjs'
+import {
+  Dialog,
+  DialogType,
+  DialogFooter,
+  PrimaryButton,
+  DefaultButton,
+} from 'office-ui-fabric-react'
 import I18n from 'shared/i18n'
 
 /**
@@ -51,30 +57,68 @@ class Confirmation extends PureComponent {
     result,
   }) => result === 'primary')
 
+  /** @constructor */
+  constructor(props) {
+    super(props)
+    this.state = {
+      hideDialog: this.props.hideDialog,
+    }
+  }
+
+  /**
+   * Make sure that the state and props are in sync for when it is required
+   * @param {object} nextProps
+   * @param {object} prevState
+   */
+  static getDerivedStateFromProps(nextProps, prevState) {
+    return {
+      ...prevState,
+      hideDialog: nextProps.hideDialog,
+    }
+  }
+
+  /**
+   * hide the content dialog
+   * @function closeDialog
+   */
+  closeDialog = () => {
+    this.setState({ hideDialog: true })
+  }
+
   /**
    * Render component
    * @function render
    */
   render() {
     return (
-      <ReactWinJS.ContentDialog
-        ref={this.props.reference}
-        title={this.props.title}
-        primaryCommandText={I18n.t('commons.ok')}
-        secondaryCommandText={I18n.t('commons.cancel')}
+      <Dialog
+        hidden={this.state.hideDialog}
+        onDismiss={this.closeDialog}
+        dialogContentProps={{
+          type: DialogType.normal,
+          title: this.props.title,
+          subText: this.props.message,
+        }}
       >
-        <p>
-          { this.props.message }
-        </p>
-      </ReactWinJS.ContentDialog>
+        {null /** You can also include null values as the result of conditionals */}
+        <DialogFooter>
+          <PrimaryButton onClick={this.props.onClick} text={I18n.t('commons.ok')} />
+          <DefaultButton onClick={this.closeDialog} text={I18n.t('commons.cancel')} />
+        </DialogFooter>
+      </Dialog>
     )
   }
 }
 
+Confirmation.defaultProps = {
+  hideDialog: true,
+}
+
 Confirmation.propTypes = {
-  reference: PropTypes.func.isRequired,
+  hideDialog: PropTypes.bool,
   title: PropTypes.string.isRequired,
   message: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
 }
 
 export default Confirmation
diff --git a/src/hoc/withAdminDashboardLayout/index.js b/src/hoc/withAdminDashboardLayout/index.js
@@ -101,10 +101,12 @@ const withAdminDashboardLayout = (WrappedComponent) => {
 
     /** Close current session */
     logout = async () => {
-      const isOK = await Confirmation.isOK(this.contentDialog)
-      if (isOK) {
-        this.props.auth.logout(this.props.history)
-      }
+      console.log(this.contentDialog)
+      this.contentDialog.props.hideDialog = false
+      // const isOK = await Confirmation.isOK(this.contentDialog)
+      // if (isOK) {
+      //   this.props.auth.logout(this.props.history)
+      // }
     }
 
     /** Change 'mode' according to the resolution of the screen */
@@ -132,7 +134,10 @@ const withAdminDashboardLayout = (WrappedComponent) => {
       })
     }
 
-    /** Collapse the side menu */
+    /**
+     * Collapse the side menu
+     * @function handleContract
+     */
     handleContract = () => {
       this.setState({
         contract: true,
@@ -141,7 +146,10 @@ const withAdminDashboardLayout = (WrappedComponent) => {
       })
     }
 
-    /** Collapse the side menu after of the timeout */
+    /**
+     * Collapse the side menu after of the timeout
+     * @function handleSetTimeOut
+     */
     handleSetTimeOut = () => {
       if (this.state.contract) {
         setTimeout(() => {
@@ -183,7 +191,7 @@ const withAdminDashboardLayout = (WrappedComponent) => {
             <Confirmation
               title={I18n.t('logout.close_session')}
               message={I18n.t('settings.security.close_session_message')}
-              reference={(el) => { this.contentDialog = el }}
+              ref={(el) => { this.contentDialog = el }}
             />
           </div>
         </main>