tuya-panel-kit/lib/components/slider/slider.js

a functional component library for developing tuya device panels!

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.verticalStyles = undefined;

var _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; };

var _jsxFileName = 'src/components/slider/slider.js';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactNative = require('react-native');

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var _utils = require('../../utils');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var shallowCompare = require('react-addons-shallow-compare');
var styleEqual = require('style-equal');

var TRACK_SIZE = 4;
var THUMB_SIZE = 20;

var DEFAULT_ANIMATION_CONFIGS = {
  spring: {
    friction: 7,
    tension: 100
  },
  timing: {
    duration: 150,
    easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
    delay: 0
  }
};

var Rect = function () {
  function Rect(x, y, width, height) {
    _classCallCheck(this, Rect);

    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
  }

  _createClass(Rect, [{
    key: 'containsPoint',
    value: function containsPoint(x, y) {
      return x >= this.x && y >= this.y && x <= this.x + this.width && y <= this.y + this.height;
    }
  }]);

  return Rect;
}();

var Slider = function (_Component) {
  _inherits(Slider, _Component);

  function Slider(props) {
    _classCallCheck(this, Slider);

    var _this = _possibleConstructorReturn(this, (Slider.__proto__ || Object.getPrototypeOf(Slider)).call(this, props));

    _this.renderMaxNounView = function () {
      var _this$props = _this.props,
          horizontal = _this$props.horizontal,
          maxNounStyle = _this$props.maxNounStyle,
          stepValue = _this$props.stepValue,
          minimumValue = _this$props.minimumValue,
          maximumValue = _this$props.maximumValue,
          type = _this$props.type,
          thumbTouchSize = _this$props.thumbTouchSize,
          reverseValue = _this$props.reverseValue;
      var trackSize = _this.state.trackSize;

      var time = Math.floor((maximumValue - minimumValue) / stepValue);
      if (horizontal) {
        if (type === 'parcel') {
          return _lodash2.default.times(time + 1, function (n) {
            return _react2.default.createElement(_reactNative.View, {
              key: n,
              style: [{
                width: 3,
                height: 14,
                borderRadius: 1.5
              }, defaultStyles.parcelNumStyle, reverseValue ? {
                right: thumbTouchSize.width / 2 + n * (trackSize.width - thumbTouchSize.width) / time
              } : {
                left: thumbTouchSize.width / 2 + n * (trackSize.width - thumbTouchSize.width) / time
              }, maxNounStyle],
              __source: {
                fileName: _jsxFileName,
                lineNumber: 636
              }
            });
          });
        }
        return _lodash2.default.times(time + 1, function (n) {
          return _react2.default.createElement(_reactNative.View, {
            key: n,
            style: [{
              width: trackSize.height,
              height: trackSize.height,
              borderRadius: trackSize.height
            }, defaultStyles.parcelNumStyle, reverseValue ? {
              right: n * trackSize.height + n * (trackSize.width - trackSize.height * (time + 1)) / time
            } : {
              left: n * trackSize.height + n * (trackSize.width - trackSize.height * (time + 1)) / time
            }, maxNounStyle],
            __source: {
              fileName: _jsxFileName,
              lineNumber: 664
            }
          });
        });
      }
      if (type === 'parcel') {
        return _lodash2.default.times(time + 1, function (n) {
          return _react2.default.createElement(_reactNative.View, {
            key: n,
            style: [{
              width: 14,
              height: 3,
              borderRadius: 1.5
            }, defaultStyles.parcelNumStyle, reverseValue ? {
              bottom: thumbTouchSize.height / 2 + n * (trackSize.height - thumbTouchSize.height) / time
            } : {
              top: thumbTouchSize.height / 2 + n * (trackSize.height - thumbTouchSize.height) / time
            }, maxNounStyle],
            __source: {
              fileName: _jsxFileName,
              lineNumber: 693
            }
          });
        });
      }
      return _lodash2.default.times(time + 1, function (n) {
        return _react2.default.createElement(_reactNative.View, {
          key: n,
          style: [{
            width: trackSize.width,
            height: trackSize.width,
            borderRadius: trackSize.width
          }, defaultStyles.parcelNumStyle, reverseValue ? {
            bottom: n * trackSize.width + n * (trackSize.height - trackSize.width * (time + 1)) / time
          } : {
            top: n * trackSize.width + n * (trackSize.height - trackSize.width * (time + 1)) / time
          }, maxNounStyle],
          __source: {
            fileName: _jsxFileName,
            lineNumber: 721
          }
        });
      });
    };

    _this.renderMinNounView = function () {
      var _this$props2 = _this.props,
          horizontal = _this$props2.horizontal,
          minNounStyle = _this$props2.minNounStyle,
          stepValue = _this$props2.stepValue,
          minimumValue = _this$props2.minimumValue,
          maximumValue = _this$props2.maximumValue,
          type = _this$props2.type,
          reverseValue = _this$props2.reverseValue,
          thumbTouchSize = _this$props2.thumbTouchSize;
      var _this$state = _this.state,
          actualValue = _this$state.actualValue,
          trackSize = _this$state.trackSize;

      var actualNounNum = reverseValue ? Math.floor(maximumValue - actualValue) / stepValue + 1 : Math.floor(actualValue - minimumValue) / stepValue + 1;
      var time = Math.floor(maximumValue - minimumValue) / stepValue;
      if (horizontal) {
        if (type === 'parcel') {
          return _lodash2.default.times(actualNounNum, function (n) {
            return _react2.default.createElement(_reactNative.View, {
              key: n,
              style: [{
                width: 3,
                height: 14,
                borderRadius: 1.5
              }, defaultStyles.parcelNumStyle, reverseValue ? {
                right: thumbTouchSize.width / 2 + n * (trackSize.width - thumbTouchSize.width) / time
              } : {
                left: thumbTouchSize.width / 2 + n * (trackSize.width - thumbTouchSize.width) / time
              }, minNounStyle],
              __source: {
                fileName: _jsxFileName,
                lineNumber: 768
              }
            });
          });
        }
        return _lodash2.default.times(actualNounNum, function (n) {
          if (n === actualNounNum - 1) return null;
          return _react2.default.createElement(_reactNative.View, {
            key: n,
            style: [{
              width: trackSize.height,
              height: trackSize.height,
              borderRadius: trackSize.height
            }, defaultStyles.parcelNumStyle, reverseValue ? {
              right: n * trackSize.height + n * (trackSize.width - trackSize.height * (time + 1)) / time
            } : {
              left: n * trackSize.height + n * (trackSize.width - trackSize.height * (time + 1)) / time
            }, minNounStyle],
            __source: {
              fileName: _jsxFileName,
              lineNumber: 797
            }
          });
        });
      }
      if (type === 'parcel') {
        return _lodash2.default.times(actualNounNum, function (n) {
          return _react2.default.createElement(_reactNative.View, {
            key: n,
            style: [{
              width: 14,
              height: 3,
              borderRadius: 1.5
            }, defaultStyles.parcelNumStyle, reverseValue ? {
              bottom: thumbTouchSize.height / 2 + n * 3 + n * (trackSize.height - 3 * (time + 1) - thumbTouchSize.height) / time
            } : {
              top: thumbTouchSize.height / 2 + n * 3 + n * (trackSize.height - 3 * (time + 1) - thumbTouchSize.height) / time
            }, minNounStyle],
            __source: {
              fileName: _jsxFileName,
              lineNumber: 826
            }
          });
        });
      }
      return _lodash2.default.times(actualNounNum, function (n) {
        if (n === actualNounNum - 1) return null;
        return _react2.default.createElement(_reactNative.View, {
          key: n,
          style: [{
            width: trackSize.width,
            height: trackSize.width,
            borderRadius: trackSize.width
          }, defaultStyles.parcelNumStyle, reverseValue ? {
            bottom: n * trackSize.width + n * (trackSize.height - trackSize.width * (time + 1)) / time
          } : {
            top: n * trackSize.width + n * (trackSize.height - trackSize.width * (time + 1)) / time
          }, minNounStyle],
          __source: {
            fileName: _jsxFileName,
            lineNumber: 857
          }
        });
      });
    };

    _this._measureContainer = _this._measureContainer.bind(_this);
    _this._measureTrack = _this._measureTrack.bind(_this);
    _this._measureThumb = _this._measureThumb.bind(_this);

    _this._panResponder = _reactNative.PanResponder.create({
      onStartShouldSetPanResponder: _this._handleStartShouldSetPanResponder.bind(_this),
      onMoveShouldSetPanResponder: _this._handleMoveShouldSetPanResponder.bind(_this),
      onPanResponderGrant: _this._handlePanResponderGrant.bind(_this),
      onPanResponderMove: _this._handlePanResponderMove.bind(_this),
      onPanResponderRelease: _this._handlePanResponderEnd.bind(_this),
      onPanResponderTerminationRequest: _this._handlePanResponderRequestEnd.bind(_this),
      onPanResponderTerminate: _this._handlePanResponderEnd.bind(_this),
      onStartShouldSetResponderCapture: _this._handlePanResponderRequestEnd.bind(_this),
      onMoveShouldSetPanResponderCapture: _this._handlePanResponderRequestEnd.bind(_this)
    });

    _this.oldValue = _this._testValue(props.value, props);
    _this.touchLocked = false;

    _this.state = {
      containerSize: { width: 0, height: 0 },
      trackSize: { width: 0, height: 0 },
      thumbSize: { width: 0, height: 0 },
      allMeasured: false,
      value: new _reactNative.Animated.Value(_this.oldValue),
      actualValue: _this.oldValue
    };
    return _this;
  }

  _createClass(Slider, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.props.value !== nextProps.value && !this.touchLocked) {
        var newValue = this._testValue(nextProps.value, nextProps);
        this.oldValue = newValue;
        this.setState({
          actualValue: newValue
        });
        if (this.props.animateTransitions) {
          this._setCurrentValueAnimated(newValue);
        } else {
          this._setCurrentValue(newValue);
        }
      }
    }
  }, {
    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate(nextProps, nextState) {
      return shallowCompare({ props: this._getPropsForComponentUpdate(this.props), state: this.state }, this._getPropsForComponentUpdate(nextProps), nextState) || !styleEqual(this.props.style, nextProps.style) || !styleEqual(this.props.trackStyle, nextProps.trackStyle) || !styleEqual(this.props.thumbStyle, nextProps.thumbStyle) || !styleEqual(this.props.thumbTouchSize, nextProps.thumbTouchSize);
    }
  }, {
    key: 'setValue',
    value: function setValue(value) {
      if (this.touchLocked) return;
      if (this.props.animateTransitions) {
        this._setCurrentValueAnimated(value);
      } else {
        this._setCurrentValue(value);
      }
    }
  }, {
    key: 'setGestureGrant',
    value: function setGestureGrant(gestureDistance) {
      this._previousLeft = this._getThumbLeft(this._getCurrentValue());
      this._fireChangeEvent('onSlidingStart');
    }
  }, {
    key: 'setGestureMove',
    value: function setGestureMove(gestureDistance) {
      var thumbLeft = this._previousLeft + gestureDistance;
      this._setCurrentValue(this.__getValue(thumbLeft));
      this._fireValueChange();
    }
  }, {
    key: 'setGestureEnd',
    value: function setGestureEnd(gestureDistance) {
      var thumbLeft = this._previousLeft + gestureDistance;
      this._setCurrentValue(this.__getValue(thumbLeft));
      this._fireChangeEvent('onSlidingComplete');
    }
  }, {
    key: '_testValue',
    value: function _testValue(value, props) {
      var v = props.reverseValue ? props.maximumValue + props.minimumValue - value : value;
      return _utils.NumberUtils.inMaxMin(props.minimumValue, props.maximumValue, v);
    }
  }, {
    key: '_getPropsForComponentUpdate',
    value: function _getPropsForComponentUpdate(props) {
      var value = props.value,
          onValueChange = props.onValueChange,
          onSlidingStart = props.onSlidingStart,
          onSlidingComplete = props.onSlidingComplete,
          onScrollEvent = props.onScrollEvent,
          style = props.style,
          trackStyle = props.trackStyle,
          thumbStyle = props.thumbStyle,
          renderMinimumTrack = props.renderMinimumTrack,
          renderMaximumTrack = props.renderMaximumTrack,
          renderThumb = props.renderThumb,
          onLayout = props.onLayout,
          thumbTouchSize = props.thumbTouchSize,
          neededProps = _objectWithoutProperties(props, ['value', 'onValueChange', 'onSlidingStart', 'onSlidingComplete', 'onScrollEvent', 'style', 'trackStyle', 'thumbStyle', 'renderMinimumTrack', 'renderMaximumTrack', 'renderThumb', 'onLayout', 'thumbTouchSize']);

      return neededProps;
    }
  }, {
    key: '_handleStartShouldSetPanResponder',
    value: function _handleStartShouldSetPanResponder(e) {
      if (this.props.disabled) return false;
      if (this.props.canTouchTrack) return true;
      return this._thumbHitTest(e);
    }
  }, {
    key: '_handleMoveShouldSetPanResponder',
    value: function _handleMoveShouldSetPanResponder() {
      return false;
    }
  }, {
    key: '_handlePanResponderGrant',
    value: function _handlePanResponderGrant(event, gestureState) {
      this.touchLocked = true;
      if (this.props.canTouchTrack) {
        var newValue = this._getValueByGestureEvent(event);

        if (this.props.animateTransitions) {
          this._setCurrentValueAnimated(newValue);
        } else {
          this._setCurrentValue(newValue);
        }
        this._previousLeft = this._getThumbLeft(newValue);
      } else {
        this._previousLeft = this._getThumbLeft(this._getCurrentValue());
      }

      this._fireChangeEvent('onSlidingStart');
    }
  }, {
    key: '_handlePanResponderMove',
    value: function _handlePanResponderMove(event, gestureState) {
      this._setCurrentValue(this._getValueByGestureState(gestureState));
      this._fireValueChange();
    }
  }, {
    key: '_handlePanResponderRequestEnd',
    value: function _handlePanResponderRequestEnd() {
      return false;
    }
  }, {
    key: '_handlePanResponderEnd',
    value: function _handlePanResponderEnd(event, gestureState) {
      this._setCurrentValue(this._getValueByGestureState(gestureState));
      this._fireChangeEvent('onSlidingComplete');
      this.touchLocked = false;
    }
  }, {
    key: '_measureContainer',
    value: function _measureContainer(x) {
      this._handleMeasure('containerSize', x);
      if (this.props.onLayout) this.props.onLayout(x);
    }
  }, {
    key: '_measureTrack',
    value: function _measureTrack(x) {
      this._handleMeasure('trackSize', x);
    }
  }, {
    key: '_measureThumb',
    value: function _measureThumb(x) {
      this._handleMeasure('thumbSize', x);
    }
  }, {
    key: '_handleMeasure',
    value: function _handleMeasure(name, x) {
      var _x$nativeEvent$layout = x.nativeEvent.layout,
          width = _x$nativeEvent$layout.width,
          height = _x$nativeEvent$layout.height;

      var size = { width: width, height: height };

      var storeName = '_' + name;
      var currentSize = this[storeName];
      if (currentSize && width === currentSize.width && height === currentSize.height) {
        return;
      }
      this[storeName] = size;

      if (this._containerSize && this._trackSize && this._thumbSize) {
        this.setState({
          containerSize: this._containerSize,
          trackSize: this._trackSize,
          thumbSize: this._thumbSize,
          allMeasured: true
        });
      }
    }
  }, {
    key: '_getRatio',
    value: function _getRatio(value) {
      return (value - this.props.minimumValue) / (this.props.maximumValue - this.props.minimumValue);
    }
  }, {
    key: '_getThumbLeft',
    value: function _getThumbLeft(value) {
      return this._getThumbTranslate(value);
    }
  }, {
    key: '_getThumbTranslate',
    value: function _getThumbTranslate(value) {
      var ratio = this._getRatio(value);
      var length = this.props.horizontal ? this.state.containerSize.width - this.state.thumbSize.width : this.state.containerSize.height - this.state.thumbSize.height;
      return ratio * length;
    }
  }, {
    key: '_getValueByGestureEvent',
    value: function _getValueByGestureEvent(e) {
      var thumbLeft = this.props.horizontal ? e.nativeEvent.locationX - this.props.thumbTouchSize.width / 2 : e.nativeEvent.locationY - this.props.thumbTouchSize.height / 2;
      return this.__getValue(thumbLeft);
    }
  }, {
    key: '_getValueByGestureState',
    value: function _getValueByGestureState(gestureState) {
      var dsize = this.props.horizontal ? gestureState.dx : gestureState.dy;
      var thumbLeft = this._previousLeft + dsize;

      return this.__getValue(thumbLeft);
    }
  }, {
    key: '__getValue',
    value: function __getValue(thumbLeft) {
      var length = this.props.horizontal ? this.state.containerSize.width - this.state.thumbSize.width : this.state.containerSize.height - this.state.thumbSize.height;
      var ratio = thumbLeft / length;

      if (this.props.stepValue) {
        return Math.max(this.props.minimumValue, Math.min(this.props.maximumValue, Math.round(ratio * (this.props.maximumValue - this.props.minimumValue) / this.props.stepValue) * this.props.stepValue + this.props.minimumValue));
      }
      return Math.max(this.props.minimumValue, Math.min(this.props.maximumValue, ratio * (this.props.maximumValue - this.props.minimumValue) + this.props.minimumValue));
    }
  }, {
    key: '_getCurrentValue',
    value: function _getCurrentValue() {
      return this.state.value.__getValue();
    }
  }, {
    key: '_setCurrentValue',
    value: function _setCurrentValue(value) {
      this.setState({
        actualValue: value
      });
      this.state.value.setValue(value);
    }
  }, {
    key: '_setCurrentValueAnimated',
    value: function _setCurrentValueAnimated(value) {
      var animationType = this.props.animationType;

      var animationConfig = _extends({}, DEFAULT_ANIMATION_CONFIGS[animationType], this.props.animationConfig, { toValue: value });

      _reactNative.Animated[animationType](this.state.value, animationConfig).start();
    }
  }, {
    key: '_fireValueChange',
    value: function _fireValueChange() {
      var value = this._getCurrentValue();
      var newValue = this._testValue(value, this.props);
      if (this.props.onValueChange && this.oldValue !== value) {
        this.oldValue = value;
        this.props.onValueChange(newValue);
      }
      if (this.props.onScrollEvent) {
        this.props.onScrollEvent({ value: newValue });
      }
    }
  }, {
    key: '_fireChangeEvent',
    value: function _fireChangeEvent(event) {
      var value = this._getCurrentValue();
      var newValue = this._testValue(value, this.props);
      if (this.props[event]) {
        this.props[event](newValue);
      }
      if (this.props.onScrollEvent) {
        this.props.onScrollEvent({ value: newValue });
      }
    }
  }, {
    key: '_getTouchOverflowSize',
    value: function _getTouchOverflowSize() {
      var state = this.state,
          props = this.props;

      var size = {};
      if (state.allMeasured === true) {
        if (this.props.horizontal) {
          size.width = Math.max(0, props.thumbTouchSize.width - state.thumbSize.width);
          size.height = Math.max(0, props.thumbTouchSize.height - state.containerSize.height);
        } else {
          size.width = Math.max(0, props.thumbTouchSize.width - state.containerSize.width);
          size.height = Math.max(0, props.thumbTouchSize.height - state.thumbSize.height);
        }
      }

      return size;
    }
  }, {
    key: '_getTouchOverflowStyle',
    value: function _getTouchOverflowStyle() {
      var _getTouchOverflowSize2 = this._getTouchOverflowSize(),
          width = _getTouchOverflowSize2.width,
          height = _getTouchOverflowSize2.height;

      var touchOverflowStyle = {};
      if (width !== undefined && height !== undefined) {
        var verticalMargin = -height / 2;
        touchOverflowStyle.marginTop = verticalMargin;
        touchOverflowStyle.marginBottom = verticalMargin;

        var horizontalMargin = -width / 2;
        touchOverflowStyle.marginLeft = horizontalMargin;
        touchOverflowStyle.marginRight = horizontalMargin;
      }

      if (this.props.debugTouchArea === true) {
        touchOverflowStyle.backgroundColor = 'orange';
        touchOverflowStyle.opacity = 0.5;
      }

      return touchOverflowStyle;
    }
  }, {
    key: '_thumbHitTest',
    value: function _thumbHitTest(e) {
      var nativeEvent = e.nativeEvent;

      var thumbTouchRect = this._getThumbTouchRect();
      return thumbTouchRect.containsPoint(nativeEvent.locationX, nativeEvent.locationY);
    }
  }, {
    key: '_getThumbTouchRect',
    value: function _getThumbTouchRect() {
      var state = this.state,
          props = this.props;

      var touchOverflowSize = this._getTouchOverflowSize();

      var rect = this.props.horizontal ? new Rect(touchOverflowSize.width / 2 + this._getThumbLeft(this._getCurrentValue()) + (state.thumbSize.width - props.thumbTouchSize.width) / 2, touchOverflowSize.height / 2 + (state.containerSize.height - props.thumbTouchSize.height) / 2, props.thumbTouchSize.width, props.thumbTouchSize.height) : new Rect(touchOverflowSize.width / 2 + (state.containerSize.width - props.thumbTouchSize.width) / 2, touchOverflowSize.height / 2 + this._getThumbLeft(this._getCurrentValue()) + (state.thumbSize.height - props.thumbTouchSize.height) / 2, props.thumbTouchSize.width, props.thumbTouchSize.height);
      return rect;
    }
  }, {
    key: '_renderDebugThumbTouchRect',
    value: function _renderDebugThumbTouchRect(thumbLeft) {
      var thumbTouchRect = this._getThumbTouchRect();
      var positionStyle = this.props.horizontal ? {
        left: thumbLeft,
        top: thumbTouchRect.y,
        width: thumbTouchRect.width,
        height: thumbTouchRect.height
      } : {
        left: thumbTouchRect.x,
        top: thumbLeft,
        width: thumbTouchRect.width,
        height: thumbTouchRect.height
      };

      return _react2.default.createElement(_reactNative.Animated.View, {
        style: [defaultStyles.debugThumbTouchArea, positionStyle],
        pointerEvents: 'none',
        __source: {
          fileName: _jsxFileName,
          lineNumber: 612
        }
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          minimumValue = _props2.minimumValue,
          maximumValue = _props2.maximumValue,
          minimumTrackTintColor = _props2.minimumTrackTintColor,
          maximumTrackTintColor = _props2.maximumTrackTintColor,
          thumbTintColor = _props2.thumbTintColor,
          styles = _props2.styles,
          style = _props2.style,
          trackStyle = _props2.trackStyle,
          thumbStyle = _props2.thumbStyle,
          debugTouchArea = _props2.debugTouchArea,
          renderMinimumTrack = _props2.renderMinimumTrack,
          renderMaximumTrack = _props2.renderMaximumTrack,
          renderThumb = _props2.renderThumb,
          horizontal = _props2.horizontal,
          thumbTouchSize = _props2.thumbTouchSize,
          onlyMaximumTrack = _props2.onlyMaximumTrack,
          type = _props2.type,
          reverseValue = _props2.reverseValue,
          stepValue = _props2.stepValue,
          useNoun = _props2.useNoun;
      var _state = this.state,
          value = _state.value,
          containerSize = _state.containerSize,
          trackSize = _state.trackSize,
          thumbSize = _state.thumbSize,
          allMeasured = _state.allMeasured;

      var mainStyles = styles || defaultStyles;
      var valueVisibleStyle = {};
      var containerStyle = {};
      var minimumTrackStyle = {};
      var thumbTransformStyle = {};
      var thumbTranslate = 0;

      if (horizontal) {
        containerStyle = { height: thumbTouchSize.height, flexDirection: 'column' };
        var marginHeight = (containerSize.height - thumbSize.height) / 2;
        if (allMeasured) {
          thumbTranslate = type === 'normal' ? value.interpolate({
            inputRange: [minimumValue, maximumValue],
            outputRange: [0, containerSize.width - thumbSize.width]
          }) : value.interpolate({
            inputRange: [minimumValue, maximumValue],
            outputRange: [marginHeight, containerSize.width - thumbSize.width - marginHeight]
          });

          thumbTransformStyle = {
            transform: [{ translateX: thumbTranslate }]
          };
          if (!onlyMaximumTrack) {
            if (type === 'normal') {
              minimumTrackStyle = {
                width: _reactNative.Animated.add(thumbTranslate, thumbSize.width / 2)
              };
            } else if (type === 'parcel' && reverseValue) {
              minimumTrackStyle = {
                overflow: 'hidden',
                position: 'absolute',
                right: 0,
                width: _reactNative.Animated.add(value.interpolate({
                  inputRange: [minimumValue, maximumValue],
                  outputRange: [containerSize.width - thumbSize.width - marginHeight, marginHeight]
                }), thumbSize.width + marginHeight)
              };
            } else if (type === 'parcel' && !reverseValue) {
              minimumTrackStyle = {
                width: _reactNative.Animated.add(thumbTranslate, thumbSize.width + marginHeight)
              };
            }
          }
        }
      } else {
        containerStyle = { width: thumbTouchSize.width, flexDirection: 'row' };
        var marginWidth = (containerSize.width - thumbSize.width) / 2;
        if (allMeasured) {
          thumbTranslate = type === 'normal' ? value.interpolate({
            inputRange: [minimumValue, maximumValue],
            outputRange: [0, containerSize.height - thumbSize.height]
          }) : value.interpolate({
            inputRange: [minimumValue, maximumValue],
            outputRange: [marginWidth, containerSize.height - thumbSize.height - marginWidth]
          });
          thumbTransformStyle = {
            transform: [{ translateY: thumbTranslate }]
          };
          if (!onlyMaximumTrack) {
            if (type === 'normal') {
              minimumTrackStyle = {
                overflow: 'hidden',
                position: 'absolute',
                height: _reactNative.Animated.add(thumbTranslate, thumbSize.height / 2)
              };
            } else if (type === 'parcel' && reverseValue) {
              minimumTrackStyle = {
                overflow: 'hidden',
                position: 'absolute',
                bottom: 0,
                height: _reactNative.Animated.add(value.interpolate({
                  inputRange: [minimumValue, maximumValue],
                  outputRange: [containerSize.height - thumbSize.height - marginWidth, marginWidth]
                }), thumbSize.height + marginWidth)
              };
            } else if (type === 'parcel' && !reverseValue) {
              minimumTrackStyle = {
                overflow: 'hidden',
                position: 'absolute',
                height: _reactNative.Animated.add(thumbTranslate, thumbSize.height + marginWidth)
              };
            }
          }
        }
      }

      if (!allMeasured) {
        valueVisibleStyle.opacity = 0;
      }

      var touchOverflowStyle = this._getTouchOverflowStyle();

      return _react2.default.createElement(
        _reactNative.View,
        {
          accessibilityLabel: this.props.accessibilityLabel,
          onLayout: this._measureContainer,
          style: [mainStyles.container, containerStyle, style],
          __source: {
            fileName: _jsxFileName,
            lineNumber: 1020
          }
        },
        _react2.default.createElement(
          _reactNative.View,
          {
            style: [{ overflow: 'hidden', backgroundColor: maximumTrackTintColor }, mainStyles.track, trackStyle],
            onLayout: this._measureTrack,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 1025
            }
          },
          !!renderMaximumTrack && renderMaximumTrack()
        ),
        !!stepValue && !!useNoun && this.renderMaxNounView(),
        !onlyMaximumTrack && _react2.default.createElement(
          _reactNative.Animated.View,
          {
            style: [{
              overflow: 'hidden',
              position: 'absolute',
              backgroundColor: minimumTrackTintColor
            }, horizontal ? { justifyContent: 'center' } : { alignItems: 'center' }, mainStyles.track, trackStyle, minimumTrackStyle, valueVisibleStyle],
            __source: {
              fileName: _jsxFileName,
              lineNumber: 1037
            }
          },
          !!renderMinimumTrack && renderMinimumTrack()
        ),
        !!stepValue && !!useNoun && reverseValue && type !== 'parcel' && this.renderMaxNounView(),
        _react2.default.createElement(
          _reactNative.Animated.View,
          {
            renderToHardwareTextureAndroid: true,
            style: [{ position: 'absolute', backgroundColor: thumbTintColor }, mainStyles.thumb, thumbStyle, thumbTransformStyle, valueVisibleStyle],
            onLayout: this._measureThumb,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 1055
            }
          },
          !!renderThumb && renderThumb()
        ),
        !!stepValue && !!useNoun && this.renderMinNounView(),
        _react2.default.createElement(
          _reactNative.View,
          _extends({
            style: [defaultStyles.touchArea, touchOverflowStyle]
          }, this._panResponder.panHandlers, {
            __source: {
              fileName: _jsxFileName,
              lineNumber: 1069
            }
          }),
          debugTouchArea === true && this._renderDebugThumbTouchRect(thumbTranslate)
        )
      );
    }
  }]);

  return Slider;
}(_react.Component);

Slider.propTypes = {
  accessibilityLabel: _propTypes2.default.string,

  onLayout: _propTypes2.default.func,

  value: _propTypes2.default.number,

  disabled: _propTypes2.default.bool,

  minimumValue: _propTypes2.default.number,

  maximumValue: _propTypes2.default.number,

  stepValue: _propTypes2.default.number,

  reverseValue: _propTypes2.default.bool,
  minimumTrackTintColor: _reactNative.ColorPropType,

  maximumTrackTintColor: _reactNative.ColorPropType,

  thumbTintColor: _reactNative.ColorPropType,

  thumbTouchSize: _propTypes2.default.shape({
    width: _propTypes2.default.number,
    height: _propTypes2.default.number
  }),

  onValueChange: _propTypes2.default.func,

  onSlidingStart: _propTypes2.default.func,
  onSlidingComplete: _propTypes2.default.func,
  onScrollEvent: _propTypes2.default.func,

  style: _reactNative.ViewPropTypes.style,

  trackStyle: _reactNative.ViewPropTypes.style,

  thumbStyle: _reactNative.ViewPropTypes.style,

  debugTouchArea: _propTypes2.default.bool,

  onlyMaximumTrack: _propTypes2.default.bool,

  canTouchTrack: _propTypes2.default.bool,

  animateTransitions: _propTypes2.default.bool,

  animationType: _propTypes2.default.oneOf(['spring', 'timing']),

  animationConfig: _propTypes2.default.object,

  renderMinimumTrack: _propTypes2.default.func,

  renderMaximumTrack: _propTypes2.default.func,

  renderThumb: _propTypes2.default.func,

  horizontal: _propTypes2.default.bool,

  type: _propTypes2.default.oneOf(['parcel', 'normal']),

  useNoun: _propTypes2.default.bool,

  maxNounStyle: _reactNative.ViewPropTypes.style,

  minNounStyle: _reactNative.ViewPropTypes.style
};
Slider.defaultProps = {
  accessibilityLabel: 'Slider',
  value: 0,
  minimumValue: 0,
  maximumValue: 1,
  stepValue: 0,
  reverseValue: false,
  minimumTrackTintColor: '#3f3f3f',
  maximumTrackTintColor: '#b3b3b3',
  thumbTintColor: '#343434',
  thumbTouchSize: { width: 40, height: 40 },
  canTouchTrack: false,
  animateTransitions: false,
  debugTouchArea: false,
  animationType: 'timing',
  horizontal: true,
  onlyMaximumTrack: false,
  type: 'normal',
  useNoun: false,
  maxNounStyle: null,
  minNounStyle: null
};
exports.default = Slider;


Slider.Vertical = function (_props) {
  return _react2.default.createElement(Slider, _extends({}, _props, { ref: _props.sliderRef, horizontal: false, styles: verticalStyles, __source: {
      fileName: _jsxFileName,
      lineNumber: 1081
    }
  }));
};

Slider.Horizontal = function (_props) {
  return _react2.default.createElement(Slider, _extends({}, _props, { ref: _props.sliderRef, horizontal: true, __source: {
      fileName: _jsxFileName,
      lineNumber: 1084
    }
  }));
};

Slider.dpView = function (WrappedComponent) {
  return function (_props) {
    return _react2.default.createElement(WrappedComponent, _extends({}, _props, {
      minimumValue: _props.min || _props.minimumValue,
      maximumValue: _props.max || _props.maximumValue,
      stepValue: _props.step || _props.stepValue,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 1087
      }
    }));
  };
};

var defaultStyles = _reactNative.StyleSheet.create({
  container: {
    justifyContent: 'center',
    flexDirection: 'column'
  },

  track: {
    height: TRACK_SIZE,
    borderRadius: TRACK_SIZE / 2
  },

  thumb: {
    width: THUMB_SIZE,
    height: THUMB_SIZE,
    borderRadius: THUMB_SIZE / 2,
    shadowColor: 'rgba(0,0,0,0.3)',
    shadowOffset: {
      width: 2,
      height: 2
    },
    shadowOpacity: 1,
    shadowRadius: 2,
    elevation: 2
  },
  touchArea: {
    position: 'absolute',
    backgroundColor: 'transparent',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  },
  debugThumbTouchArea: {
    position: 'absolute',
    backgroundColor: 'green',
    opacity: 0.5
  },
  parcelNumStyle: {
    backgroundColor: '#FFF',
    position: 'absolute',
    justifyContent: 'center'
  }
});

var verticalStyles = exports.verticalStyles = _reactNative.StyleSheet.create({
  container: {
    justifyContent: 'center',
    flexDirection: 'row'
  },

  track: {
    width: TRACK_SIZE,
    borderRadius: TRACK_SIZE / 2
  },

  thumb: {
    width: THUMB_SIZE,
    height: THUMB_SIZE,
    borderRadius: THUMB_SIZE / 2,
    shadowColor: 'rgba(0,0,0,0.3)',
    shadowOffset: {
      width: 2,
      height: 2
    },
    shadowOpacity: 1,
    shadowRadius: 2,
    elevation: 2
  }
});