Skip to content

Commit

Permalink
RefreshControl ES6 Class
Browse files Browse the repository at this point in the history
Reviewed By: sahrens

Differential Revision: D8219221

fbshipit-source-id: 445243964d64dd5274c1e47bdc137645dc8eecaf
  • Loading branch information
elicwhite authored and facebook-github-bot committed Jun 1, 2018
1 parent 2314c83 commit a35a238
Showing 1 changed file with 55 additions and 95 deletions.
150 changes: 55 additions & 95 deletions Libraries/Components/RefreshControl/RefreshControl.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,12 @@

'use strict';

const ColorPropType = require('ColorPropType');
const NativeMethodsMixin = require('NativeMethodsMixin');
const Platform = require('Platform');
const React = require('React');
const ReactNative = require('ReactNative');
const PropTypes = require('prop-types');
const ViewPropTypes = require('ViewPropTypes');
const {NativeComponent} = require('ReactNative');

const createReactClass = require('create-react-class');
const requireNativeComponent = require('requireNativeComponent');
const nullthrows = require('fbjs/lib/nullthrows');

import type {ColorValue} from 'StyleSheetTypes';
import type {ViewProps} from 'ViewPropTypes';
Expand All @@ -33,29 +29,67 @@ if (Platform.OS === 'android') {
} else {
var RefreshLayoutConsts = {SIZE: {}};
}
type NativeRefreshControlType = Class<NativeComponent<Props>>;

const NativeRefreshControl: NativeRefreshControlType =
Platform.OS === 'ios'
? (requireNativeComponent('RCTRefreshControl'): any)
: (requireNativeComponent('AndroidSwipeRefreshLayout'): any);

type IOSProps = $ReadOnly<{|
/**
* The color of the refresh indicator.
*/
tintColor?: ?ColorValue,
/**
* Title color.
*/
titleColor?: ?ColorValue,
/**
* The title displayed under the refresh indicator.
*/
title?: ?string,
|}>;

type AndroidProps = $ReadOnly<{|
/**
* Whether the pull to refresh functionality is enabled.
*/
enabled?: ?boolean,
/**
* The colors (at least one) that will be used to draw the refresh indicator.
*/
colors?: ?$ReadOnlyArray<ColorValue>,
/**
* The background color of the refresh indicator.
*/
progressBackgroundColor?: ?ColorValue,
/**
* Size of the refresh indicator, see RefreshControl.SIZE.
*/
size?: ?(
| typeof RefreshLayoutConsts.SIZE.DEFAULT
| typeof RefreshLayoutConsts.SIZE.LARGE
),
/**
* Progress view top offset
*/
progressViewOffset?: ?number,
|}>;

type Props = $ReadOnly<{|
...ViewProps,
...IOSProps,
...AndroidProps,

/**
* Called when the view starts refreshing.
*/
onRefresh?: ?Function,

/**
* Whether the view should be indicating an active refresh.
*/
refreshing: boolean,
|}>;

Expand Down Expand Up @@ -104,87 +138,29 @@ type Props = $ReadOnly<{|
* __Note:__ `refreshing` is a controlled prop, this is why it needs to be set to true
* in the `onRefresh` function otherwise the refresh indicator will stop immediately.
*/
const RefreshControl = createReactClass({
displayName: 'RefreshControl',
statics: {
SIZE: RefreshLayoutConsts.SIZE,
},

mixins: [NativeMethodsMixin],

propTypes: {
...ViewPropTypes,
/**
* Called when the view starts refreshing.
*/
onRefresh: PropTypes.func,
/**
* Whether the view should be indicating an active refresh.
*/
refreshing: PropTypes.bool.isRequired,
/**
* The color of the refresh indicator.
* @platform ios
*/
tintColor: ColorPropType,
/**
* Title color.
* @platform ios
*/
titleColor: ColorPropType,
/**
* The title displayed under the refresh indicator.
* @platform ios
*/
title: PropTypes.string,
/**
* Whether the pull to refresh functionality is enabled.
* @platform android
*/
enabled: PropTypes.bool,
/**
* The colors (at least one) that will be used to draw the refresh indicator.
* @platform android
*/
colors: PropTypes.arrayOf(ColorPropType),
/**
* The background color of the refresh indicator.
* @platform android
*/
progressBackgroundColor: ColorPropType,
/**
* Size of the refresh indicator, see RefreshControl.SIZE.
* @platform android
*/
size: PropTypes.oneOf([
RefreshLayoutConsts.SIZE.DEFAULT,
RefreshLayoutConsts.SIZE.LARGE,
]),
/**
* Progress view top offset
* @platform android
*/
progressViewOffset: PropTypes.number,
},

_nativeRef: (null: any),
_lastNativeRefreshing: false,
class RefreshControl extends React.Component<Props> {
static SIZE = RefreshLayoutConsts.SIZE;

_nativeRef: ?React.ElementRef<NativeRefreshControlType> = null;
_lastNativeRefreshing = false;

componentDidMount() {
this._lastNativeRefreshing = this.props.refreshing;
},
}

componentDidUpdate(prevProps: {refreshing: boolean}) {
componentDidUpdate(prevProps: Props) {
// RefreshControl is a controlled component so if the native refreshing
// value doesn't match the current js refreshing prop update it to
// the js value.
if (this.props.refreshing !== prevProps.refreshing) {
this._lastNativeRefreshing = this.props.refreshing;
} else if (this.props.refreshing !== this._lastNativeRefreshing) {
this._nativeRef.setNativeProps({refreshing: this.props.refreshing});
nullthrows(this._nativeRef).setNativeProps({
refreshing: this.props.refreshing,
});
this._lastNativeRefreshing = this.props.refreshing;
}
},
}

render() {
return (
Expand All @@ -196,33 +172,17 @@ const RefreshControl = createReactClass({
onRefresh={this._onRefresh}
/>
);
},
}

_onRefresh() {
_onRefresh = () => {
this._lastNativeRefreshing = true;

this.props.onRefresh && this.props.onRefresh();

// The native component will start refreshing so force an update to
// make sure it stays in sync with the js component.
this.forceUpdate();
},
});

class TypedRefreshControl extends ReactNative.NativeComponent<Props> {
static SIZE = RefreshLayoutConsts.SIZE;
}

if (Platform.OS === 'ios') {
var NativeRefreshControl = requireNativeComponent(
'RCTRefreshControl',
RefreshControl,
);
} else if (Platform.OS === 'android') {
var NativeRefreshControl = requireNativeComponent(
'AndroidSwipeRefreshLayout',
RefreshControl,
);
};
}

module.exports = ((RefreshControl: any): Class<TypedRefreshControl>);
module.exports = RefreshControl;

0 comments on commit a35a238

Please sign in to comment.