Make animation cancelable for auto-save indicator
This commit is contained in:
parent
831d758f2f
commit
0e32a2299c
|
@ -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'}
|
||||
>
|
||||
{(() => {
|
||||
switch (savingState) {
|
||||
case 'saving':
|
||||
return 'Saving...';
|
||||
case 'saved':
|
||||
return 'Saved';
|
||||
case 'error':
|
||||
return errorMessage;
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
})()}
|
||||
{message}
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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
|
||||
transitionName='AutoSaveIndicator'
|
||||
transitionEnterTimeout={500}
|
||||
transitionLeaveTimeout={1000}
|
||||
>
|
||||
{ this.state.savingState === 'done' ? null : <AutoSaveIndicator
|
||||
<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>
|
||||
|
|
|
@ -16,21 +16,8 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.AutoSaveIndicator-enter {
|
||||
opacity: 0.01;
|
||||
}
|
||||
|
||||
.AutoSaveIndicator-enter.AutoSaveIndicator-enter-active {
|
||||
opacity: 1;
|
||||
transition: opacity 0ms;
|
||||
}
|
||||
|
||||
.AutoSaveIndicator-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.AutoSaveIndicator-leave.AutoSaveIndicator-leave-active {
|
||||
opacity: 0.01;
|
||||
.AutoSaveIndicator.AutoSaveIndicator-Leave {
|
||||
opacity: 0;
|
||||
transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue