Fix more forwardRef displayNames
Reviewed By: TheSavior Differential Revision: D8342904 fbshipit-source-id: b6e53da7305d71635528a42e80910f4a9db0455c
This commit is contained in:
parent
ddf2c2ffd6
commit
d1336ab16e
|
@ -70,12 +70,10 @@ type Props = $ReadOnly<{|
|
|||
* See http://facebook.github.io/react-native/docs/activityindicator.html
|
||||
*/
|
||||
const ActivityIndicator = (
|
||||
props: $ReadOnly<{|
|
||||
...Props,
|
||||
forwardedRef?: ?React.Ref<'RCTActivityIndicatorView'>,
|
||||
|}>,
|
||||
props: Props,
|
||||
forwardedRef: ?React.Ref<'RCTActivityIndicatorView'>,
|
||||
) => {
|
||||
const {onLayout, style, forwardedRef, ...restProps} = props;
|
||||
const {onLayout, style, ...restProps} = props;
|
||||
let sizeStyle;
|
||||
|
||||
switch (props.size) {
|
||||
|
@ -99,16 +97,19 @@ const ActivityIndicator = (
|
|||
};
|
||||
|
||||
return (
|
||||
<View onLayout={onLayout} style={[styles.container, style]}>
|
||||
<View
|
||||
onLayout={onLayout}
|
||||
style={StyleSheet.compose(
|
||||
styles.container,
|
||||
style,
|
||||
)}>
|
||||
<RCTActivityIndicator {...nativeProps} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
ActivityIndicator.displayName = 'ActivityIndicator'; // TODO(T30332650) remove workaround for hermes bug
|
||||
// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
|
||||
const ActivityIndicatorWithRef = React.forwardRef((props: Props, ref) => {
|
||||
return <ActivityIndicator {...props} forwardedRef={ref} />;
|
||||
});
|
||||
const ActivityIndicatorWithRef = React.forwardRef(ActivityIndicator);
|
||||
|
||||
ActivityIndicatorWithRef.defaultProps = {
|
||||
animating: true,
|
||||
|
@ -116,7 +117,6 @@ ActivityIndicatorWithRef.defaultProps = {
|
|||
hidesWhenStopped: true,
|
||||
size: 'small',
|
||||
};
|
||||
ActivityIndicatorWithRef.displayName = 'ActivityIndicator';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
|
|
|
@ -4,41 +4,60 @@
|
|||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @flow
|
||||
* @format
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const ColorPropType = require('ColorPropType');
|
||||
const PropTypes = require('prop-types');
|
||||
const React = require('React');
|
||||
const ViewPropTypes = require('ViewPropTypes');
|
||||
|
||||
const requireNativeComponent = require('requireNativeComponent');
|
||||
|
||||
const STYLE_ATTRIBUTES = [
|
||||
'Horizontal',
|
||||
'Normal',
|
||||
'Small',
|
||||
'Large',
|
||||
'Inverse',
|
||||
'SmallInverse',
|
||||
'LargeInverse',
|
||||
];
|
||||
const RCTAndroidProgressBar = requireNativeComponent('AndroidProgressBar');
|
||||
|
||||
const indeterminateType = function(props, propName, componentName, ...rest) {
|
||||
const checker = function() {
|
||||
const indeterminate = props[propName];
|
||||
const styleAttr = props.styleAttr;
|
||||
if (!indeterminate && styleAttr !== 'Horizontal') {
|
||||
return new Error(
|
||||
'indeterminate=false is only valid for styleAttr=Horizontal',
|
||||
);
|
||||
}
|
||||
};
|
||||
import type {NativeComponent} from 'ReactNative';
|
||||
import type {ViewProps} from 'ViewPropTypes';
|
||||
|
||||
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
|
||||
|
@ -63,59 +82,20 @@ const indeterminateType = function(props, propName, componentName, ...rest) {
|
|||
* },
|
||||
* ```
|
||||
*/
|
||||
class ProgressBarAndroid extends React.Component {
|
||||
static propTypes = {
|
||||
...ViewPropTypes,
|
||||
const ProgressBarAndroid = (
|
||||
props: Props,
|
||||
forwardedRef: ?React.Ref<'RCTAndroidProgressBar'>,
|
||||
) => {
|
||||
return <RCTAndroidProgressBar {...props} ref={forwardedRef} />;
|
||||
};
|
||||
ProgressBarAndroid.displayName = 'ProgressBarAndroid'; // TODO(T30332650) remove bug workaround
|
||||
|
||||
/**
|
||||
* Style of the ProgressBar. One of:
|
||||
*
|
||||
* - Horizontal
|
||||
* - Normal (default)
|
||||
* - Small
|
||||
* - Large
|
||||
* - 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,
|
||||
};
|
||||
ProgressBarAndroid.defaultProps = {
|
||||
styleAttr: 'Normal',
|
||||
indeterminate: true,
|
||||
animating: true,
|
||||
};
|
||||
// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
|
||||
const ProgressBarAndroidToExport = React.forwardRef(ProgressBarAndroid);
|
||||
|
||||
static defaultProps = {
|
||||
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} />
|
||||
));
|
||||
module.exports = (ProgressBarAndroidToExport: Class<NativeComponent<Props>>);
|
||||
|
|
|
@ -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.
|
||||
const SliderWithRef = React.forwardRef(Slider);
|
||||
|
@ -250,19 +251,9 @@ SliderWithRef.defaultProps = {
|
|||
maximumValue: 1,
|
||||
step: 0,
|
||||
};
|
||||
SliderWithRef.displayName = 'Slider';
|
||||
|
||||
let styles;
|
||||
if (Platform.OS === 'ios') {
|
||||
styles = StyleSheet.create({
|
||||
slider: {
|
||||
height: 40,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
styles = StyleSheet.create({
|
||||
slider: {},
|
||||
});
|
||||
}
|
||||
const styles = StyleSheet.create({
|
||||
slider: Platform.OS === 'ios' ? {height: 40} : {},
|
||||
});
|
||||
|
||||
module.exports = (SliderWithRef: Class<ReactNative.NativeComponent<Props>>);
|
||||
|
|
Loading…
Reference in New Issue