react-native/Libraries/Components/Slider/Slider.js

268 lines
6.2 KiB
JavaScript

/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* 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 ReactNative = require('ReactNative');
const Platform = require('Platform');
const React = require('React');
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';
const RCTSlider = requireNativeComponent('RCTSlider');
type Event = Object;
type IOSProps = $ReadOnly<{|
/**
* Assigns a single image for the track. Only static images are supported.
* The center pixel of the image will be stretched to fill the track.
*/
trackImage?: ?ImageSource,
/**
* Assigns a minimum track image. Only static images are supported. The
* rightmost pixel of the image will be stretched to fill the track.
*/
minimumTrackImage?: ?ImageSource,
/**
* Assigns a maximum track image. Only static images are supported. The
* leftmost pixel of the image will be stretched to fill the track.
*/
maximumTrackImage?: ?ImageSource,
/**
* Sets an image for the thumb. Only static images are supported.
*/
thumbImage?: ?ImageSource,
|}>;
type AndroidProps = $ReadOnly<{|
/**
* Color of the foreground switch grip.
* @platform android
*/
thumbTintColor?: ?ColorValue,
|}>;
type Props = $ReadOnly<{|
...ViewProps,
...IOSProps,
...AndroidProps,
/**
* Used to style and layout the `Slider`. See `StyleSheet.js` and
* `ViewStylePropTypes.js` for more info.
*/
style?: ?ViewStyleProp,
/**
* Initial value of the slider. The value should be between minimumValue
* and maximumValue, which default to 0 and 1 respectively.
* Default value is 0.
*
* *This is not a controlled component*, you don't need to update the
* value during dragging.
*/
value?: ?number,
/**
* Step value of the slider. The value should be
* between 0 and (maximumValue - minimumValue).
* Default value is 0.
*/
step?: ?number,
/**
* Initial minimum value of the slider. Default value is 0.
*/
minimumValue?: ?number,
/**
* Initial maximum value of the slider. Default value is 1.
*/
maximumValue?: ?number,
/**
* The color used for the track to the left of the button.
* Overrides the default blue gradient image on iOS.
*/
minimumTrackTintColor?: ?ColorValue,
/**
* The color used for the track to the right of the button.
* Overrides the default blue gradient image on iOS.
*/
maximumTrackTintColor?: ?ColorValue,
/**
* If true the user won't be able to move the slider.
* Default value is false.
*/
disabled?: ?boolean,
/**
* Callback continuously called while the user is dragging the slider.
*/
onValueChange?: ?Function,
/**
* Callback that is called when the user releases the slider,
* regardless if the value has changed. The current value is passed
* as an argument to the callback handler.
*/
onSlidingComplete?: ?Function,
/**
* Used to locate this view in UI automation tests.
*/
testID?: ?string,
|}>;
/**
* A component used to select a single value from a range of values.
*
* ### Usage
*
* The example below shows how to use `Slider` to change
* a value used by `Text`. The value is stored using
* the state of the root component (`App`). The same component
* subscribes to the `onValueChange` of `Slider` and changes
* the value using `setState`.
*
*```
* import React from 'react';
* import { StyleSheet, Text, View, Slider } from 'react-native';
*
* export default class App extends React.Component {
* constructor(props) {
* super(props);
* this.state = {
* value: 50
* }
* }
*
* change(value) {
* this.setState(() => {
* return {
* value: parseFloat(value)
* };
* });
* }
*
* render() {
* const {value} = this.state;
* return (
* <View style={styles.container}>
* <Text style={styles.text}>{String(value)}</Text>
* <Slider
* step={1}
* maximumValue={100}
* onValueChange={this.change.bind(this)}
* value={value} />
* </View>
* );
* }
* }
*
* const styles = StyleSheet.create({
* container: {
* flex: 1,
* flexDirection: 'column',
* justifyContent: 'center'
* },
* text: {
* fontSize: 50,
* textAlign: 'center'
* }
* });
*```
*
*/
const Slider = (
props: 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}
ref={forwardedRef}
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(Slider);
SliderWithRef.defaultProps = {
disabled: false,
value: 0,
minimumValue: 0,
maximumValue: 1,
step: 0,
};
let styles;
if (Platform.OS === 'ios') {
styles = StyleSheet.create({
slider: {
height: 40,
},
});
} else {
styles = StyleSheet.create({
slider: {},
});
}
module.exports = (SliderWithRef: Class<ReactNative.NativeComponent<Props>>);