diff --git a/Libraries/Components/Slider/RCTSliderNativeComponent.js b/Libraries/Components/Slider/RCTSliderNativeComponent.js new file mode 100644 index 000000000..c718c67ee --- /dev/null +++ b/Libraries/Components/Slider/RCTSliderNativeComponent.js @@ -0,0 +1,52 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow + */ + +'use strict'; + +const requireNativeComponent = require('requireNativeComponent'); + +import type {ColorValue} from 'StyleSheetTypes'; +import type {ImageSource} from 'ImageSource'; +import type {NativeComponent} from 'ReactNative'; +import type {SyntheticEvent} from 'CoreEventTypes'; +import type {ViewProps} from 'ViewPropTypes'; +import type {ViewStyleProp} from 'StyleSheet'; + +type Event = SyntheticEvent< + $ReadOnly<{| + value: number, + fromUser?: boolean, + |}>, +>; + +type NativeProps = $ReadOnly<{| + ...ViewProps, + disabled?: ?boolean, + enabled?: ?boolean, + maximumTrackImage?: ?ImageSource, + maximumTrackTintColor?: ?ColorValue, + maximumValue?: ?number, + minimumTrackImage?: ?ImageSource, + minimumTrackTintColor?: ?ColorValue, + minimumValue?: ?number, + onChange?: ?(event: Event) => void, + onSlidingComplete?: ?(event: Event) => void, + onValueChange?: ?(event: Event) => void, + step?: ?number, + testID?: ?string, + thumbImage?: ?ImageSource, + thumbTintColor?: ?ColorValue, + trackImage?: ?ImageSource, + value?: ?number, +|}>; + +type RCTSliderType = Class>; + +module.exports = ((requireNativeComponent('RCTSlider'): any): RCTSliderType); diff --git a/Libraries/Components/Slider/Slider.js b/Libraries/Components/Slider/Slider.js index 03819d8d8..34391e6a6 100644 --- a/Libraries/Components/Slider/Slider.js +++ b/Libraries/Components/Slider/Slider.js @@ -5,26 +5,23 @@ * LICENSE file in the root directory of this source tree. * * @format - * @flow strict-local + * @flow */ 'use strict'; -const ReactNative = require('ReactNative'); const Platform = require('Platform'); +const RCTSliderNativeComponent = require('RCTSliderNativeComponent'); const React = require('React'); +const ReactNative = require('ReactNative'); const StyleSheet = require('StyleSheet'); -const requireNativeComponent = require('requireNativeComponent'); - import type {ImageSource} from 'ImageSource'; import type {ViewStyleProp} from 'StyleSheet'; import type {ColorValue} from 'StyleSheetTypes'; import type {ViewProps} from 'ViewPropTypes'; import type {SyntheticEvent} from 'CoreEventTypes'; -const RCTSlider = requireNativeComponent('RCTSlider'); - type Event = SyntheticEvent< $ReadOnly<{| value: number, @@ -200,45 +197,43 @@ type Props = $ReadOnly<{| */ const Slider = ( props: Props, - forwardedRef?: ?React.Ref<'RCTActivityIndicatorView'>, + forwardedRef?: ?React.Ref, ) => { 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 != null && event.nativeEvent.fromUser; + const {onValueChange, onSlidingComplete, ...localProps} = props; + + const onValueChangeEvent = 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 != null && event.nativeEvent.fromUser; + } + userEvent && onValueChange(event.nativeEvent.value); } - props.onValueChange && - userEvent && - props.onValueChange(event.nativeEvent.value); - }); + : null; - const onChange = onValueChange; - - const onSlidingComplete = - props.onSlidingComplete && - ((event: Event) => { - props.onSlidingComplete && - props.onSlidingComplete(event.nativeEvent.value); - }); + const onChangeEvent = onValueChangeEvent; + const onSlidingCompleteEvent = onSlidingComplete + ? (event: Event) => { + onSlidingComplete(event.nativeEvent.value); + } + : null; return ( - true} onResponderTerminationRequest={() => false}