app/javascript/mastodon/components/animated_number.js

   1 import React from 'react';
   2 import PropTypes from 'prop-types';
   3 import { FormattedNumber } from 'react-intl';
   4 import TransitionMotion from 'react-motion/lib/TransitionMotion';
   5 import spring from 'react-motion/lib/spring';
   6 import { reduceMotion } from 'mastodon/initial_state';
   7
   8 const obfuscatedCount = count => {
   9   if (count < 0) {
  10     return 0;
  11   } else if (count <= 1) {
  12     return count;
  13   } else {
  14     return '1+';
  15   }
  16 };
  17
  18 export default class AnimatedNumber extends React.PureComponent {
  19
  20   static propTypes = {
  21     value: PropTypes.number.isRequired,
  22     obfuscate: PropTypes.bool,
  23   };
  24
  25   state = {
  26     direction: 1,
  27   };
  28
  29   componentWillReceiveProps (nextProps) {
  30     if (nextProps.value > this.props.value) {
  31       this.setState({ direction: 1 });
  32     } else if (nextProps.value < this.props.value) {
  33       this.setState({ direction: -1 });
  34     }
  35   }
  36
  37   willEnter = () => {
  38     const { direction } = this.state;
  39
  40     return { y: -1 * direction };
  41   }
  42
  43   willLeave = () => {
  44     const { direction } = this.state;
  45
  46     return { y: spring(1 * direction, { damping: 35, stiffness: 400 }) };
  47   }
  48
  49   render () {
  50     const { value, obfuscate } = this.props;
  51     const { direction } = this.state;
  52
  53     if (reduceMotion) {
  54       return obfuscate ? obfuscatedCount(value) : <FormattedNumber value={value} />;
  55     }
  56
  57     const styles = [{
  58       key: `${value}`,
  59       data: value,
  60       style: { y: spring(0, { damping: 35, stiffness: 400 }) },
  61     }];
  62
  63     return (
  64       <TransitionMotion styles={styles} willEnter={this.willEnter} willLeave={this.willLeave}>
  65         {items => (
  66           <span className='animated-number'>
  67             {items.map(({ key, data, style }) => (
  68               <span key={key} style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : <FormattedNumber value={data} />}</span>
  69             ))}
  70           </span>
  71         )}
  72       </TransitionMotion>
  73     );
  74   }
  75
  76 }