Animated: Minor createAnimatedComponent Cleanup

Summary:
Some minor cleanup to `createAnimatedComponent`:

- Remove deprecated `propTypes`.
- Reorder lifecycle methods in rough order of execution.

Changelog:
[General] [Removed] - Removed `propTypes` from Animated components.

Reviewed By: TheSavior

Differential Revision: D18289773

fbshipit-source-id: f97d9ee4a2a42d210726267506de3b6b78860e8c
This commit is contained in:
Tim Yung
2019-11-03 11:59:53 -08:00
committed by Facebook Github Bot
parent dcd63078bd
commit 86d90c03eb
@@ -13,7 +13,6 @@
const {AnimatedEvent} = require('./AnimatedEvent');
const AnimatedProps = require('./nodes/AnimatedProps');
const React = require('react');
const DeprecatedViewStylePropTypes = require('../../DeprecatedPropTypes/DeprecatedViewStylePropTypes');
const invariant = require('invariant');
@@ -42,33 +41,6 @@ function createAnimatedComponent<Props, Instance>(
_propsAnimated: AnimatedProps;
_eventDetachers: Array<Function> = [];
constructor(props: Object) {
super(props);
}
componentWillUnmount() {
this._propsAnimated && this._propsAnimated.__detach();
this._detachNativeEvents();
}
setNativeProps(props) {
this._component.setNativeProps(props);
}
UNSAFE_componentWillMount() {
this._attachProps(this.props);
}
componentDidMount() {
if (this._invokeAnimatedPropsCallbackOnMount) {
this._invokeAnimatedPropsCallbackOnMount = false;
this._animatedPropsCallback();
}
this._propsAnimated.setNativeView(this._component);
this._attachNativeEvents();
}
_attachNativeEvents() {
// Make sure to get the scrollable node for components that implement
// `ScrollResponder.Mixin`.
@@ -144,18 +116,19 @@ function createAnimatedComponent<Props, Instance>(
oldPropsAnimated && oldPropsAnimated.__detach();
}
UNSAFE_componentWillReceiveProps(newProps) {
this._attachProps(newProps);
_setComponentRef = c => {
this._prevComponent = this._component;
this._component = c;
};
// A third party library can use getNode()
// to get the node reference of the decorated component
getNode() {
return this._component;
}
componentDidUpdate(prevProps) {
if (this._component !== this._prevComponent) {
this._propsAnimated.setNativeView(this._component);
}
if (this._component !== this._prevComponent || prevProps !== this.props) {
this._detachNativeEvents();
this._attachNativeEvents();
}
setNativeProps(props) {
this._component.setNativeProps(props);
}
render() {
@@ -175,43 +148,40 @@ function createAnimatedComponent<Props, Instance>(
);
}
_setComponentRef = c => {
this._prevComponent = this._component;
this._component = c;
};
UNSAFE_componentWillMount() {
this._attachProps(this.props);
}
// A third party library can use getNode()
// to get the node reference of the decorated component
getNode() {
return this._component;
componentDidMount() {
if (this._invokeAnimatedPropsCallbackOnMount) {
this._invokeAnimatedPropsCallbackOnMount = false;
this._animatedPropsCallback();
}
this._propsAnimated.setNativeView(this._component);
this._attachNativeEvents();
}
UNSAFE_componentWillReceiveProps(newProps) {
this._attachProps(newProps);
}
componentDidUpdate(prevProps) {
if (this._component !== this._prevComponent) {
this._propsAnimated.setNativeView(this._component);
}
if (this._component !== this._prevComponent || prevProps !== this.props) {
this._detachNativeEvents();
this._attachNativeEvents();
}
}
componentWillUnmount() {
this._propsAnimated && this._propsAnimated.__detach();
this._detachNativeEvents();
}
}
// $FlowFixMe We don't want people using propTypes so we don't include it in the type
const propTypes = Component.propTypes;
AnimatedComponent.propTypes = {
style: function(props, propName, componentName) {
if (!propTypes) {
return;
}
for (const key in DeprecatedViewStylePropTypes) {
if (!propTypes[key] && props[key] !== undefined) {
console.warn(
'You are setting the style `{ ' +
key +
': ... }` as a prop. You ' +
'should nest it in a style object. ' +
'E.g. `{ style: { ' +
key +
': ... } }`',
);
}
}
},
};
return AnimatedComponent;
}