Permalink
Browse files

Slider to ES6 Class

Reviewed By: yungsters

Differential Revision: D8246422

fbshipit-source-id: 1955ae87abe077115ac8f8ea105be85db8ea66b4
  • Loading branch information...
TheSavior authored and facebook-github-bot committed Jun 3, 2018
1 parent 615daeb commit 5259450c143f71c65e157d6b7d3f0e1655eb7aa1
Showing with 58 additions and 89 deletions.
  1. +58 −89 Libraries/Components/Slider/Slider.js
@@ -10,18 +10,11 @@
'use strict';
const Image = require('Image');
const ColorPropType = require('ColorPropType');
const NativeMethodsMixin = require('NativeMethodsMixin');
const ReactNative = require('ReactNative');
const ReactNativeViewAttributes = require('ReactNativeViewAttributes');
const Platform = require('Platform');
const React = require('React');
const PropTypes = require('prop-types');
const StyleSheet = require('StyleSheet');
const ViewPropTypes = require('ViewPropTypes');
const createReactClass = require('create-react-class');
const requireNativeComponent = require('requireNativeComponent');
import type {ImageSource} from 'ImageSource';
@@ -200,89 +193,65 @@ type Props = $ReadOnly<{|
*```
*
*/
const Slider = createReactClass({
displayName: 'Slider',
mixins: [NativeMethodsMixin],
propTypes: {
...ViewPropTypes,
style: ViewPropTypes.style,
value: PropTypes.number,
step: PropTypes.number,
minimumValue: PropTypes.number,
maximumValue: PropTypes.number,
minimumTrackTintColor: ColorPropType,
maximumTrackTintColor: ColorPropType,
disabled: PropTypes.bool,
trackImage: Image.propTypes.source,
minimumTrackImage: Image.propTypes.source,
maximumTrackImage: Image.propTypes.source,
thumbImage: Image.propTypes.source,
thumbTintColor: ColorPropType,
onValueChange: PropTypes.func,
onSlidingComplete: PropTypes.func,
testID: PropTypes.string,
},
getDefaultProps: function(): any {
return {
disabled: false,
value: 0,
minimumValue: 0,
maximumValue: 1,
step: 0,
};
},
viewConfig: {
uiViewClassName: 'RCTSlider',
validAttributes: {
...ReactNativeViewAttributes.RCTView,
value: true,
},
},
render: function() {
const style = StyleSheet.compose(styles.slider, this.props.style);
const onValueChange =
this.props.onValueChange &&
((event: Event) => {
let userEvent = true;
if (Platform.OS === 'android') {
// On Android there's a special flag telling us the user is
// dragging the slider.
userEvent = event.nativeEvent.fromUser;
}
this.props.onValueChange &&
userEvent &&
this.props.onValueChange(event.nativeEvent.value);
});
const onChange = onValueChange;
const onSlidingComplete =
this.props.onSlidingComplete &&
((event: Event) => {
this.props.onSlidingComplete &&
this.props.onSlidingComplete(event.nativeEvent.value);
});
return (
<RCTSlider
{...this.props}
style={style}
onChange={onChange}
onSlidingComplete={onSlidingComplete}
onValueChange={onValueChange}
enabled={!this.props.disabled}
onStartShouldSetResponder={() => true}
onResponderTerminationRequest={() => false}
/>
);
},
const Slider = (
props: $ReadOnly<{|
...Props,
forwardedRef?: ?React.Ref<'RCTActivityIndicatorView'>,
|}>,
) => {
const style = StyleSheet.compose(styles.slider, props.style);
const onValueChange =
props.onValueChange &&
((event: Event) => {
let userEvent = true;
if (Platform.OS === 'android') {
// On Android there's a special flag telling us the user is
// dragging the slider.
userEvent = event.nativeEvent.fromUser;
}
props.onValueChange &&
userEvent &&
props.onValueChange(event.nativeEvent.value);
});
const onChange = onValueChange;
const onSlidingComplete =
props.onSlidingComplete &&
((event: Event) => {
props.onSlidingComplete &&
props.onSlidingComplete(event.nativeEvent.value);
});
return (
<RCTSlider
{...props}
style={style}
onChange={onChange}
onSlidingComplete={onSlidingComplete}
onValueChange={onValueChange}
enabled={!props.disabled}
onStartShouldSetResponder={() => true}
onResponderTerminationRequest={() => false}
/>
);
};
// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
const SliderWithRef = React.forwardRef((props: Props, ref) => {
return <Slider {...props} forwardedRef={ref} />;
});
SliderWithRef.defaultProps = {
disabled: false,
value: 0,
minimumValue: 0,
maximumValue: 1,
step: 0,
};
SliderWithRef.displayName = 'Slider';
let styles;
if (Platform.OS === 'ios') {
styles = StyleSheet.create({
@@ -296,4 +265,4 @@ if (Platform.OS === 'ios') {
});
}
module.exports = ((Slider: any): Class<ReactNative.NativeComponent<Props>>);
module.exports = (SliderWithRef: Class<ReactNative.NativeComponent<Props>>);

0 comments on commit 5259450

Please sign in to comment.