Implementing a momentary indicator in React - reactjs

Question

My goal is to have a save indicator that flashes a save icon when data has just been saved (not while it's being saved), as an indication to the user that their edit was successful. React seems better suited towards state than one-off "actions," but this was the best I was able to come up with:
import React, { PureComponent, PropTypes } from 'react';
import Radium from 'radium';
import moment from 'moment';
import { ContentSave as SaveIcon } from 'material-ui/svg-icons';
class SaveIndicator extends PureComponent {
getStyles = () => {
if (!this.props.saving) return { opacity: 0 };
return {
animation: 'x 700ms ease 0s 3 normal forwards',
animationName: saveAnimation,
};
};
render() {
return <div style={styles.root}>
<div style={{ display: 'flex' }}>
<div style={{ marginRight: 16 }}>
Last saved {moment(this.props.lastSaved).fromNow()}
</div>
<div
style={this.getStyles()}
onAnimationEnd={() => this.props.onIndicationComplete()}
>
<SaveIcon color="#666" />
</div>
</div>
</div>
}
}
const saveAnimation = Radium.keyframes({
'0%': { opacity: 0 },
'50%': { opacity: 1 },
'100%': { opacity: 0 },
});
const styles = {
root: {
display: 'inline-block',
},
};
SaveIndicator.defaultProps = {
saving: false,
};
SaveIndicator.propTypes = {
lastSaved: PropTypes.object.isRequired,
onIndicationComplete: PropTypes.func,
saving: PropTypes.bool,
};
export default Radium(SaveIndicator)
It works, but is there a way I could streamline this and make it even shorter?

Answer 1

How about this. I had a component a while back that needed something similar to what you're describing. I'll paste it in because it works fully but the strategy is kind of like this: pass in a time to start the animation. This prop triggers a function to start the animation which grabs the difference between that time and "now". It iteratively sets the state to close the gap between the initial time and now until it exceeds the passed in duration prop.
class SaveIndicator extends Component {
static propTypes = {
children: Types.element,
// time in milliseconds when the save is started; can change
indicationStartTime: Types.number.isRequired,
// time in milliseconds that the animation will take to fade
duration: Types.number,
// time in milliseconds to wait between renderings
frameRate: Types.number,
};
static defaultProps = {
duration: 7000,
frameRate: 100,
}
constructor(props) {
super(props);
this.state = { opacity: 0 };
}
componentDidMount() {
this.startAnimation();
}
componentWillReceiveProps({ indicationStartTime }) {
if (indicationStartTime !== this.props.indicationStartTime) {
this.startAnimation();
}
}
startAnimation() {
const { indicationStartTime, duration, frameRate } = this.props;
const now = new Date().getTime();
const newOpacity = 1 - ((now - indicationStartTime) / duration);
if (now - indicationStartTime < duration) {
this.setState({ opacity: newOpacity }, () =>
setTimeout(::this.startAnimation, frameRate)
);
} else {
this.setState({ opacity: 0 });
}
}
render() {
const { children } = this.props;
const { opacity } = this.state;
const style = { opacity };
return <div style={style}>{children}</div>;
}
}