chenglou / react-motion

A spring that solves your animation problems.
MIT License
21.68k stars 1.15k forks source link

Convert TransitionMotion types to generic types #530

Open 10xjs opened 6 years ago

10xjs commented 6 years ago

Replace the use of data: any among the diferent TransitionMotion types with a generic type. This allows proper accurate typing between the different callback props and removes the dangerous behavior of casting any provided data value to any.

While change has no impact on any of the behavior of the react-motion (this PR only touches flow annotations), it could pose a small breaking change to consumers that are using flow as it will potentially uncover errors in their code.

The exported types are not directly backwards compatible, however updating application code to restore the previous type behavior is very simple. TransitionMotion will now infer the type of data from the provided props. To restore the original behavior, explicitly declare data: any in styles using either the exported types or manually;

Using TransitionStyle<>:

// @flow
import TransitionMotion from 'react-motion';
import type {TransitionStyle} from 'react-motion/lib/Types';

type Data = any;

class Example extends React.Component<{}> {
  render() {
    const styles: Array<TransitionStyle<Data>> = [...];
    return <TransitionMotion styles={styles} ... />;
  }
}

Manual Types:

// @flow
import TransitionMotion from 'react-motion';

type Data = any;

class Example extends React.Component<{}> {
  render() {
    const styles = [...].map((item: {data: Data}) => ({
      key: item.key,
      data: item.data,
      style: {...},
    }));

    return <TransitionMotion styles={styles} ... />;
  }
}