Fix more forwardRef displayNames

Reviewed By: TheSavior

Differential Revision: D8342904

fbshipit-source-id: b6e53da7305d71635528a42e80910f4a9db0455c
This commit is contained in:
Spencer Ahrens 2018-06-11 19:10:28 -07:00 committed by Facebook Github Bot
parent ddf2c2ffd6
commit d1336ab16e
3 changed files with 73 additions and 102 deletions

View File

@ -70,12 +70,10 @@ type Props = $ReadOnly<{|
* See http://facebook.github.io/react-native/docs/activityindicator.html * See http://facebook.github.io/react-native/docs/activityindicator.html
*/ */
const ActivityIndicator = ( const ActivityIndicator = (
props: $ReadOnly<{| props: Props,
...Props, forwardedRef: ?React.Ref<'RCTActivityIndicatorView'>,
forwardedRef?: ?React.Ref<'RCTActivityIndicatorView'>,
|}>,
) => { ) => {
const {onLayout, style, forwardedRef, ...restProps} = props; const {onLayout, style, ...restProps} = props;
let sizeStyle; let sizeStyle;
switch (props.size) { switch (props.size) {
@ -99,16 +97,19 @@ const ActivityIndicator = (
}; };
return ( return (
<View onLayout={onLayout} style={[styles.container, style]}> <View
onLayout={onLayout}
style={StyleSheet.compose(
styles.container,
style,
)}>
<RCTActivityIndicator {...nativeProps} /> <RCTActivityIndicator {...nativeProps} />
</View> </View>
); );
}; };
ActivityIndicator.displayName = 'ActivityIndicator'; // TODO(T30332650) remove workaround for hermes bug
// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet. // $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
const ActivityIndicatorWithRef = React.forwardRef((props: Props, ref) => { const ActivityIndicatorWithRef = React.forwardRef(ActivityIndicator);
return <ActivityIndicator {...props} forwardedRef={ref} />;
});
ActivityIndicatorWithRef.defaultProps = { ActivityIndicatorWithRef.defaultProps = {
animating: true, animating: true,
@ -116,7 +117,6 @@ ActivityIndicatorWithRef.defaultProps = {
hidesWhenStopped: true, hidesWhenStopped: true,
size: 'small', size: 'small',
}; };
ActivityIndicatorWithRef.displayName = 'ActivityIndicator';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {

View File

@ -4,41 +4,60 @@
* This source code is licensed under the MIT license found in the * This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
* *
* @flow
* @format * @format
*/ */
'use strict'; 'use strict';
const ColorPropType = require('ColorPropType');
const PropTypes = require('prop-types');
const React = require('React'); const React = require('React');
const ViewPropTypes = require('ViewPropTypes');
const requireNativeComponent = require('requireNativeComponent'); const requireNativeComponent = require('requireNativeComponent');
const STYLE_ATTRIBUTES = [ const RCTAndroidProgressBar = requireNativeComponent('AndroidProgressBar');
'Horizontal',
'Normal',
'Small',
'Large',
'Inverse',
'SmallInverse',
'LargeInverse',
];
const indeterminateType = function(props, propName, componentName, ...rest) { import type {NativeComponent} from 'ReactNative';
const checker = function() { import type {ViewProps} from 'ViewPropTypes';
const indeterminate = props[propName];
const styleAttr = props.styleAttr;
if (!indeterminate && styleAttr !== 'Horizontal') {
return new Error(
'indeterminate=false is only valid for styleAttr=Horizontal',
);
}
};
return PropTypes.bool(props, propName, componentName, ...rest) || checker(); type Props = $ReadOnly<{|
}; ...ViewProps,
/**
* Style of the ProgressBar and whether it shows indeterminate progress (e.g. spinner).
*
* `indeterminate` can only be false if `styleAttr` is Horizontal, and requires a
* `progress` value.
*/
...
| {|
styleAttr: 'Horizontal',
indeterminate: false,
progress: number,
|}
| {|
typeAttr:
| 'Horizontal'
| 'Normal'
| 'Small'
| 'Large'
| 'Inverse'
| 'SmallInverse'
| 'LargeInverse',
indeterminate: true,
|},
/**
* Whether to show the ProgressBar (true, the default) or hide it (false).
*/
animating?: ?boolean,
/**
* Color of the progress bar.
*/
color?: ?string,
/**
* Used to locate this view in end-to-end tests.
*/
testID?: ?string,
|}>;
/** /**
* React component that wraps the Android-only `ProgressBar`. This component is * React component that wraps the Android-only `ProgressBar`. This component is
@ -63,59 +82,20 @@ const indeterminateType = function(props, propName, componentName, ...rest) {
* }, * },
* ``` * ```
*/ */
class ProgressBarAndroid extends React.Component { const ProgressBarAndroid = (
static propTypes = { props: Props,
...ViewPropTypes, forwardedRef: ?React.Ref<'RCTAndroidProgressBar'>,
) => {
return <RCTAndroidProgressBar {...props} ref={forwardedRef} />;
};
ProgressBarAndroid.displayName = 'ProgressBarAndroid'; // TODO(T30332650) remove bug workaround
/** ProgressBarAndroid.defaultProps = {
* Style of the ProgressBar. One of: styleAttr: 'Normal',
* indeterminate: true,
* - Horizontal animating: true,
* - Normal (default) };
* - Small // $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
* - Large const ProgressBarAndroidToExport = React.forwardRef(ProgressBarAndroid);
* - Inverse
* - SmallInverse
* - LargeInverse
*/
styleAttr: PropTypes.oneOf(STYLE_ATTRIBUTES),
/**
* Whether to show the ProgressBar (true, the default) or hide it (false).
*/
animating: PropTypes.bool,
/**
* If the progress bar will show indeterminate progress. Note that this
* can only be false if styleAttr is Horizontal.
*/
indeterminate: indeterminateType,
/**
* The progress value (between 0 and 1).
*/
progress: PropTypes.number,
/**
* Color of the progress bar.
*/
color: ColorPropType,
/**
* Used to locate this view in end-to-end tests.
*/
testID: PropTypes.string,
};
static defaultProps = { module.exports = (ProgressBarAndroidToExport: Class<NativeComponent<Props>>);
styleAttr: 'Normal',
indeterminate: true,
animating: true,
};
render() {
const {forwardedRef, ...props} = this.props;
return <AndroidProgressBar {...props} ref={forwardedRef} />;
}
}
const AndroidProgressBar = requireNativeComponent('AndroidProgressBar');
module.exports = React.forwardRef((props, ref) => (
<ProgressBarAndroid {...props} forwardedRef={ref} />
));

View File

@ -239,6 +239,7 @@ const Slider = (
/> />
); );
}; };
Slider.displayName = 'Slider'; // TODO(T30332650) remove bug workaround
// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet. // $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
const SliderWithRef = React.forwardRef(Slider); const SliderWithRef = React.forwardRef(Slider);
@ -250,19 +251,9 @@ SliderWithRef.defaultProps = {
maximumValue: 1, maximumValue: 1,
step: 0, step: 0,
}; };
SliderWithRef.displayName = 'Slider';
let styles; const styles = StyleSheet.create({
if (Platform.OS === 'ios') { slider: Platform.OS === 'ios' ? {height: 40} : {},
styles = StyleSheet.create({ });
slider: {
height: 40,
},
});
} else {
styles = StyleSheet.create({
slider: {},
});
}
module.exports = (SliderWithRef: Class<ReactNative.NativeComponent<Props>>); module.exports = (SliderWithRef: Class<ReactNative.NativeComponent<Props>>);