Skip to content

Commit

Permalink
Animated: Minor createAnimatedComponent Cleanup
Browse files Browse the repository at this point in the history
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
  • Loading branch information
yungsters authored and facebook-github-bot committed Nov 3, 2019
1 parent dcd6307 commit 86d90c0
Showing 1 changed file with 38 additions and 68 deletions.
106 changes: 38 additions & 68 deletions Libraries/Animated/src/createAnimatedComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down Expand Up @@ -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`.
Expand Down Expand Up @@ -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() {
Expand All @@ -175,42 +148,39 @@ 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();
}
}

// $FlowFixMe We don't want people using propTypes so we don't include it in the type
const propTypes = Component.propTypes;
UNSAFE_componentWillReceiveProps(newProps) {
this._attachProps(newProps);
}

AnimatedComponent.propTypes = {
style: function(props, propName, componentName) {
if (!propTypes) {
return;
componentDidUpdate(prevProps) {
if (this._component !== this._prevComponent) {
this._propsAnimated.setNativeView(this._component);
}

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 +
': ... } }`',
);
}
if (this._component !== this._prevComponent || prevProps !== this.props) {
this._detachNativeEvents();
this._attachNativeEvents();
}
},
};
}

componentWillUnmount() {
this._propsAnimated && this._propsAnimated.__detach();
this._detachNativeEvents();
}
}

return AnimatedComponent;
}
Expand Down

0 comments on commit 86d90c0

Please sign in to comment.