Skip to content

Commit

Permalink
Slider to ES6 Class
Browse files Browse the repository at this point in the history
Reviewed By: yungsters

Differential Revision: D8246422

fbshipit-source-id: 1955ae87abe077115ac8f8ea105be85db8ea66b4
  • Loading branch information
elicwhite authored and facebook-github-bot committed Jun 3, 2018
1 parent 615daeb commit 5259450
Showing 1 changed file with 58 additions and 89 deletions.
147 changes: 58 additions & 89 deletions Libraries/Components/Slider/Slider.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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({
Expand All @@ -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.