Make animation cancelable for auto-save indicator

src/browser/components/AutoSaveIndicator.jsx

@@ -1,26 +1,34 @@
 const React = require('react');
 const {Alert} = require('react-bootstrap');
 
+const baseClassName = 'AutoSaveIndicator';
+const leaveClassName = `${baseClassName}-Leave`;
+
+function getClassNameAndMessage(savingState, errorMessage) {
+  switch (savingState) {
+  case 'saving':
+    return {className: baseClassName, message: 'Saving...'};
+  case 'saved':
+    return {className: baseClassName, message: 'Saved'};
+  case 'error':
+    return {className: `${baseClassName}`, message: errorMessage};
+  case 'done':
+    return {className: `${baseClassName} ${leaveClassName}`, message: 'Saved'};
+  default:
+    return {className: `${baseClassName} ${leaveClassName}`, message: ''};
+  }
+}
+
 function AutoSaveIndicator(props) {
   const {savingState, errorMessage, ...rest} = props;
+  const {className, message} = getClassNameAndMessage(savingState, errorMessage);
   return (
     <Alert
-      className='AutoSaveIndicator'
+      className={className}
       {...rest}
       bsStyle={savingState === 'error' ? 'danger' : 'info'}
     >
-      {(() => {
+      {message}
-        switch (savingState) {
-        case 'saving':
-          return 'Saving...';
-        case 'saved':
-          return 'Saved';
-        case 'error':
-          return errorMessage;
-        default:
-          return '';
-        }
-      })()}
     </Alert>
   );
 }

src/browser/components/SettingsPage.jsx

@@ -1,6 +1,5 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group');
 const {Button, Checkbox, Col, FormGroup, Grid, HelpBlock, Navbar, Radio, Row} = require('react-bootstrap');
 
 const {ipcRenderer, remote} = require('electron');
@@ -432,16 +431,10 @@ const SettingsPage = React.createClass({
           style={settingsPage.navbar}
         >
           <div className='IndicatorContainer'>
-            <ReactCSSTransitionGroup
+            <AutoSaveIndicator
-              transitionName='AutoSaveIndicator'
+              savingState={this.state.savingState}
-              transitionEnterTimeout={500}
+              errorMessage={'Can\'t save your changes. Please try again.'}
-              transitionLeaveTimeout={1000}
+            />
-            >
-              { this.state.savingState === 'done' ? null : <AutoSaveIndicator
-                savingState={this.state.savingState}
-                errorMessage={'Can\'t save your changes. Please try again.'}
-                                                           /> }
-            </ReactCSSTransitionGroup>
           </div>
           <div style={{position: 'relative'}}>
             <h1 style={settingsPage.heading}>{'Settings'}</h1>

src/browser/css/settings.css

@@ -16,21 +16,8 @@
   margin: 0;
 }
 
-.AutoSaveIndicator-enter {
+.AutoSaveIndicator.AutoSaveIndicator-Leave {
-  opacity: 0.01;
+  opacity: 0;
-}
-
-.AutoSaveIndicator-enter.AutoSaveIndicator-enter-active {
-  opacity: 1;
-  transition: opacity 0ms;
-}
-
-.AutoSaveIndicator-leave {
-  opacity: 1;
-}
-
-.AutoSaveIndicator-leave.AutoSaveIndicator-leave-active {
-  opacity: 0.01;
   transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1);
 }