react-native-vertical-slider-component/lib/module/index.js

A vertical Slider for React Native written entirely in javascript.

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import * as React from 'react';
import { View, Text, Animated, PanResponder, StyleSheet, Easing } from 'react-native';
export default class VerticalSlider extends React.Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "_moveStartValue", 0);

    _defineProperty(this, "_fetchNewValueFromGesture", gestureState => {
      const {
        min,
        max,
        step,
        height
      } = this.props;
      const ratio = -gestureState.dy / height;
      const diff = max - min;

      if (step) {
        return Math.max(min, Math.min(max, this._moveStartValue + Math.round(ratio * diff / step) * step));
      }

      let value = Math.max(min, this._moveStartValue + ratio * diff);
      return Math.floor(value * 100) / 100;
    });

    _defineProperty(this, "_getSliderHeight", value => {
      const {
        min,
        max,
        height
      } = this.props;
      return (value - min) * height / (max - min);
    });

    _defineProperty(this, "_changeState", value => {
      const {
        height,
        ballIndicatorWidth = 48,
        ballIndicatorHeight = 48,
        renderIndicator = null,
        animationDuration
      } = this.props;

      const sliderHeight = this._getSliderHeight(value);

      let ballPosition = sliderHeight;
      const ballHeight = renderIndicator ? ballIndicatorHeight : ballIndicatorWidth;

      if (ballPosition + ballHeight >= height) {
        ballPosition = height - ballHeight;
      } else if (ballPosition - ballHeight <= 0) {
        ballPosition = 0;
      } else {
        ballPosition = ballPosition - ballHeight / 2;
      }

      Animated.parallel([Animated.timing(this.state.sliderHeight, {
        toValue: sliderHeight,
        easing: Easing.linear,
        duration: animationDuration || 0,
        useNativeDriver: false
      }), Animated.timing(this.state.ballHeight, {
        toValue: ballPosition,
        easing: Easing.linear,
        duration: animationDuration || 0,
        useNativeDriver: false
      })]).start();
      this.setState({
        value
      });
    });

    let panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => false,
      onPanResponderGrant: () => {
        this._moveStartValue = this.state.value;
      },
      onPanResponderMove: (_event, gestureState) => {
        if (this.props.disabled) {
          return;
        }

        const value = this._fetchNewValueFromGesture(gestureState);

        this._changeState(value);

        if (this.props.onChange) {
          this.props.onChange(value);
        }
      },
      onPanResponderRelease: (_event, gestureState) => {
        if (this.props.disabled) {
          return;
        }

        const value = this._fetchNewValueFromGesture(gestureState);

        this._changeState(value);

        if (this.props.onComplete) {
          this.props.onComplete(value);
        }
      },
      onPanResponderTerminationRequest: () => false,
      onPanResponderTerminate: (_event, gestureState) => {
        if (this.props.disabled) {
          return;
        }

        const value = this._fetchNewValueFromGesture(gestureState);

        this._changeState(value);

        if (this.props.onComplete) {
          this.props.onComplete(value);
        }
      }
    });
    this.state = {
      value: props.value || props.min,
      sliderHeight: new Animated.Value(0),
      ballHeight: new Animated.Value(0),
      panResponder
    };
  }

  componentDidMount() {
    const {
      value
    } = this.props;

    if (value) {
      this._changeState(value);
    }
  }

  componentWillReceiveProps(nextProps) {
    if (this.props !== nextProps) {
      this.setState({
        value: nextProps.value
      });

      this._changeState(nextProps.value);
    }
  }

  render() {
    const {
      width = 350,
      height = 30,
      borderRadius = 5,
      maximumTrackTintColor = '#3F2DA5',
      minimumTrackTintColor = '#77ADE6',
      showBallIndicator = false,
      ballIndicatorColor = '#ECECEC',
      ballIndicatorWidth = 48,
      ballIndicatorHeight = 48,
      ballIndicatorPosition = -60,
      ballIndicatorTextColor = '#000000',
      showBackgroundShadow = true,
      shadowProps: {
        shadowOffsetWidth = 0,
        shadowOffsetHeight = 1,
        shadowOpacity = 0.22,
        shadowRadius = 2.22,
        elevation = 3,
        shadowColor = '#000'
      } = {},
      renderIndicator = null
    } = this.props;
    const shadowStyles = {
      shadowColor,
      shadowOffset: {
        width: shadowOffsetWidth,
        height: shadowOffsetHeight
      },
      shadowOpacity,
      shadowRadius,
      elevation
    };
    const {
      value
    } = this.state;
    console.log("this.state", this.state.value);
    return /*#__PURE__*/React.createElement(View, {
      style: [showBackgroundShadow ? shadowStyles : {}, {
        height,
        width,
        borderRadius
      }]
    }, /*#__PURE__*/React.createElement(View, _extends({
      style: [styles.container, {
        height,
        width,
        borderRadius,
        backgroundColor: maximumTrackTintColor
      }]
    }, this.state.panResponder.panHandlers), /*#__PURE__*/React.createElement(Animated.View, {
      style: [styles.slider, {
        height: this.state.sliderHeight,
        width,
        backgroundColor: minimumTrackTintColor
      }]
    })), showBallIndicator ? /*#__PURE__*/React.createElement(Animated.View, {
      style: [styles.ball, showBackgroundShadow ? shadowStyles : {}, {
        height: renderIndicator ? ballIndicatorHeight : ballIndicatorWidth,
        bottom: this.state.ballHeight,
        left: ballIndicatorPosition,
        width: ballIndicatorWidth
      }, renderIndicator ? {} : {
        borderRadius: ballIndicatorWidth,
        backgroundColor: ballIndicatorColor
      }]
    }, renderIndicator ? renderIndicator(this.state.value) : /*#__PURE__*/React.createElement(Text, {
      style: [styles.ballText, {
        color: ballIndicatorTextColor
      }]
    }, Math.round(value * 100) / 100)) : null);
  }

}
const styles = StyleSheet.create({
  ball: {
    position: 'absolute',
    alignItems: 'center',
    justifyContent: 'center'
  },
  ballText: {
    fontWeight: '900'
  },
  container: {
    overflow: 'hidden'
  },
  slider: {
    position: 'absolute',
    bottom: 0
  }
});
//# sourceMappingURL=index.js.map