mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
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:
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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user