Rewrite AnimatedNumber component with React hooks (#24559)
parent
85b1b45820
commit
ab740f464a
2 changed files with 58 additions and 76 deletions
@ -1,76 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import PropTypes from 'prop-types'; |
|
||||||
import ShortNumber from 'mastodon/components/short_number'; |
|
||||||
import TransitionMotion from 'react-motion/lib/TransitionMotion'; |
|
||||||
import spring from 'react-motion/lib/spring'; |
|
||||||
import { reduceMotion } from 'mastodon/initial_state'; |
|
||||||
|
|
||||||
const obfuscatedCount = count => { |
|
||||||
if (count < 0) { |
|
||||||
return 0; |
|
||||||
} else if (count <= 1) { |
|
||||||
return count; |
|
||||||
} else { |
|
||||||
return '1+'; |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
export default class AnimatedNumber extends React.PureComponent { |
|
||||||
|
|
||||||
static propTypes = { |
|
||||||
value: PropTypes.number.isRequired, |
|
||||||
obfuscate: PropTypes.bool, |
|
||||||
}; |
|
||||||
|
|
||||||
state = { |
|
||||||
direction: 1, |
|
||||||
}; |
|
||||||
|
|
||||||
componentWillReceiveProps (nextProps) { |
|
||||||
if (nextProps.value > this.props.value) { |
|
||||||
this.setState({ direction: 1 }); |
|
||||||
} else if (nextProps.value < this.props.value) { |
|
||||||
this.setState({ direction: -1 }); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
willEnter = () => { |
|
||||||
const { direction } = this.state; |
|
||||||
|
|
||||||
return { y: -1 * direction }; |
|
||||||
}; |
|
||||||
|
|
||||||
willLeave = () => { |
|
||||||
const { direction } = this.state; |
|
||||||
|
|
||||||
return { y: spring(1 * direction, { damping: 35, stiffness: 400 }) }; |
|
||||||
}; |
|
||||||
|
|
||||||
render () { |
|
||||||
const { value, obfuscate } = this.props; |
|
||||||
const { direction } = this.state; |
|
||||||
|
|
||||||
if (reduceMotion) { |
|
||||||
return obfuscate ? obfuscatedCount(value) : <ShortNumber value={value} />; |
|
||||||
} |
|
||||||
|
|
||||||
const styles = [{ |
|
||||||
key: `${value}`, |
|
||||||
data: value, |
|
||||||
style: { y: spring(0, { damping: 35, stiffness: 400 }) }, |
|
||||||
}]; |
|
||||||
|
|
||||||
return ( |
|
||||||
<TransitionMotion styles={styles} willEnter={this.willEnter} willLeave={this.willLeave}> |
|
||||||
{items => ( |
|
||||||
<span className='animated-number'> |
|
||||||
{items.map(({ key, data, style }) => ( |
|
||||||
<span key={key} style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : <ShortNumber value={data} />}</span> |
|
||||||
))} |
|
||||||
</span> |
|
||||||
)} |
|
||||||
</TransitionMotion> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
@ -0,0 +1,58 @@ |
|||||||
|
import React, { useCallback, useState } from 'react'; |
||||||
|
import ShortNumber from './short_number'; |
||||||
|
import { TransitionMotion, spring } from 'react-motion'; |
||||||
|
import { reduceMotion } from '../initial_state'; |
||||||
|
|
||||||
|
const obfuscatedCount = (count: number) => { |
||||||
|
if (count < 0) { |
||||||
|
return 0; |
||||||
|
} else if (count <= 1) { |
||||||
|
return count; |
||||||
|
} else { |
||||||
|
return '1+'; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
type Props = { |
||||||
|
value: number; |
||||||
|
obfuscate?: boolean; |
||||||
|
} |
||||||
|
export const AnimatedNumber: React.FC<Props> = ({ |
||||||
|
value, |
||||||
|
obfuscate, |
||||||
|
})=> { |
||||||
|
const [previousValue, setPreviousValue] = useState(value); |
||||||
|
const [direction, setDirection] = useState<1|-1>(1); |
||||||
|
|
||||||
|
if (previousValue !== value) { |
||||||
|
setPreviousValue(value); |
||||||
|
setDirection(value > previousValue ? 1 : -1); |
||||||
|
} |
||||||
|
|
||||||
|
const willEnter = useCallback(() => ({ y: -1 * direction }), [direction]); |
||||||
|
const willLeave = useCallback(() => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }), [direction]); |
||||||
|
|
||||||
|
if (reduceMotion) { |
||||||
|
return obfuscate ? <>{obfuscatedCount(value)}</> : <ShortNumber value={value} />; |
||||||
|
} |
||||||
|
|
||||||
|
const styles = [{ |
||||||
|
key: `${value}`, |
||||||
|
data: value, |
||||||
|
style: { y: spring(0, { damping: 35, stiffness: 400 }) }, |
||||||
|
}]; |
||||||
|
|
||||||
|
return ( |
||||||
|
<TransitionMotion styles={styles} willEnter={willEnter} willLeave={willLeave}> |
||||||
|
{items => ( |
||||||
|
<span className='animated-number'> |
||||||
|
{items.map(({ key, data, style }) => ( |
||||||
|
<span key={key} style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : <ShortNumber value={data} />}</span> |
||||||
|
))} |
||||||
|
</span> |
||||||
|
)} |
||||||
|
</TransitionMotion> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default AnimatedNumber; |
Loading…
Reference in new issue