@javierbyte/react-colorizer/lib/components/BarWrapper/component/index.native.js

A color picker component for React and React Native.

"use strict";

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

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _BarWrapperStyled = require("../components-styled/BarWrapperStyled.native");

var _BarWrapperStyled2 = _interopRequireDefault(_BarWrapperStyled);

var _config = require("../utils/config");

var _Handler = require("../../Handler");

var _Handler2 = _interopRequireDefault(_Handler);

var _position = require("../../../utils/position");

var _position2 = _interopRequireDefault(_position);

var _positionValidation = require("../../../utils/position-validation");

var _positionValidation2 = _interopRequireDefault(_positionValidation);

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

var propTypes = {
  children: _propTypes2.default.any.isRequired,
  height: _propTypes2.default.number.isRequired,
  isDisabled: _propTypes2.default.bool.isRequired,
  position: _propTypes2.default.number.isRequired,
  width: _propTypes2.default.number.isRequired,
  onValueChanged: _propTypes2.default.func.isRequired,
  onValueChangeEnd: _propTypes2.default.func,
  onValueChangeStart: _propTypes2.default.func
};

var defaultProps = {};

var BarWrapper = function (_React$Component) {
  (0, _inherits3.default)(BarWrapper, _React$Component);

  function BarWrapper(props) {
    (0, _classCallCheck3.default)(this, BarWrapper);

    var _this = (0, _possibleConstructorReturn3.default)(this, (BarWrapper.__proto__ || (0, _getPrototypeOf2.default)(BarWrapper)).call(this, props));

    _this.cache = {
      holdTimer: null,
      holdHandler: null,
      holdPositionX: null,
      holdPositionY: null
    };
    _this.state = {
      dragging: false,
      holding: false,
      isDomInitialized: false
    };
    _this.onDraggingChanged = _this.onDraggingChanged.bind(_this);
    _this.onSetBarDom = _this.onSetBarDom.bind(_this);
    _this.onTouchStart = _this.onTouchStart.bind(_this);
    _this.onTouchMove = _this.onTouchMove.bind(_this);
    _this.onTouchRelease = _this.onTouchRelease.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(BarWrapper, [{
    key: "componentWillMount",
    value: function componentWillMount() {
      this.panResponder = _reactNative.PanResponder.create({
        onStartShouldSetPanResponder: function onStartShouldSetPanResponder() {
          return true;
        },
        onMoveShouldSetPanResponder: function onMoveShouldSetPanResponder() {
          return true;
        },
        onPanResponderGrant: this.onTouchStart,
        onPanResponderMove: this.onTouchMove,
        onPanResponderRelease: this.onTouchRelease,
        onPanResponderTerminationRequest: function onPanResponderTerminationRequest() {
          return false;
        }
      });
    }
  }, {
    key: "onTouchStart",
    value: function onTouchStart(e, gestureState) {
      var _props = this.props,
          isDisabled = _props.isDisabled,
          width = _props.width;

      if (isDisabled) {
        return;
      }
      var targetBoundingClientRect = {
        left: 0,
        width: width
      };
      this.cache.holdPositionX = gestureState.x0;
      this.cache.holdPositionY = gestureState.y0;
      this.setState(function () {
        return {
          holding: true
        };
      });
      this.setOnHoldTimerInitIfNeed(this.getOnHoldHandler(gestureState.x0, targetBoundingClientRect));
    }
  }, {
    key: "onTouchMove",
    value: function onTouchMove(e, gestureState) {
      var _props2 = this.props,
          isDisabled = _props2.isDisabled,
          width = _props2.width,
          onValueChanged = _props2.onValueChanged,
          position = _props2.position,
          height = _props2.height,
          onValueChangeStart = _props2.onValueChangeStart;

      if (isDisabled) {
        return;
      }
      var _state = this.state,
          dragging = _state.dragging,
          holding = _state.holding;

      if (this.checkHolding(gestureState.moveX, gestureState.moveY)) {
        return;
      }
      // disable move if moved over handler
      if (!dragging && (!holding || Math.abs(position * width - gestureState.moveX) > height / 2)) {
        return;
      }
      if (!dragging) {
        if (onValueChangeStart) {
          onValueChangeStart();
        }
        this.onDraggingChanged(true);
      }
      var newPosition = (0, _position2.default)(0, gestureState.moveX, width);
      (0, _positionValidation2.default)(newPosition, onValueChanged);
    }
  }, {
    key: "onTouchRelease",
    value: function onTouchRelease() {
      var _props3 = this.props,
          isDisabled = _props3.isDisabled,
          onValueChangeEnd = _props3.onValueChangeEnd;

      if (isDisabled) {
        return;
      }
      if (onValueChangeEnd) {
        onValueChangeEnd();
      }
      this.onDraggingChanged(false);
      this.setCancelTimer();
    }
  }, {
    key: "onDraggingChanged",
    value: function onDraggingChanged(dragging) {
      this.setState(function () {
        return {
          dragging: dragging
        };
      });
    }
  }, {
    key: "onSetBarDom",
    value: function onSetBarDom(barDom) {
      this.barDom = barDom;
      this.setState(function () {
        return {
          isDomInitialized: true
        };
      });
    }
  }, {
    key: "getOnHoldHandler",
    value: function getOnHoldHandler(clientX, targetBoundingClientRect) {
      var _this2 = this;

      return function () {
        var _props4 = _this2.props,
            isDisabled = _props4.isDisabled,
            onValueChanged = _props4.onValueChanged,
            onValueChangeStart = _props4.onValueChangeStart;

        if (isDisabled) {
          return;
        }
        if (_this2.state.holding) {
          onValueChanged((0, _position2.default)(targetBoundingClientRect.left, clientX, targetBoundingClientRect.width));
          if (onValueChangeStart) {
            onValueChangeStart();
          }
          _this2.onDraggingChanged(true);
        }
      };
    }
  }, {
    key: "setOnHoldTimerInitIfNeed",
    value: function setOnHoldTimerInitIfNeed(holdHandler) {
      var holdTimer = this.cache.holdTimer;
      if (holdTimer === null || holdTimer === undefined) {
        this.cache.holdHandler = holdHandler;
        this.cache.holdTimer = setTimeout(this.cache.holdHandler, _config.HOLD_TIME);
      }
    }
  }, {
    key: "setCancelTimer",
    value: function setCancelTimer() {
      clearTimeout(this.cache.holdTimer);
      this.cache.holdTimer = null;
      this.cache.holdPositionX = null;
      this.setState(function () {
        return {
          holding: false
        };
      });
    }
  }, {
    key: "checkHolding",
    value: function checkHolding(x, y) {
      if (this.state.holding) {
        var diffX = Math.abs(this.cache.holdPositionX - x);
        var diffY = Math.abs(this.cache.holdPositionY - y);
        if (diffX !== 0 && diffX > _config.TOLERANCE || diffY !== 0 && diffY > _config.TOLERANCE) {
          this.setState(function () {
            return {
              holding: false
            };
          });
          return false;
        }
      }
      return this.state.holding;
    }
  }, {
    key: "renderHandler",
    value: function renderHandler(height, position) {
      var width = this.props.width;
      var isDomInitialized = this.state.isDomInitialized;

      if (!isDomInitialized) {
        return null;
      }
      return _react2.default.createElement(_Handler2.default, { position: position, size: height, width: width });
    }
  }, {
    key: "render",
    value: function render() {
      var _props5 = this.props,
          children = _props5.children,
          height = _props5.height,
          isDisabled = _props5.isDisabled,
          position = _props5.position,
          width = _props5.width,
          onValueChanged = _props5.onValueChanged,
          props = (0, _objectWithoutProperties3.default)(_props5, ["children", "height", "isDisabled", "position", "width", "onValueChanged"]);

      return _react2.default.createElement(
        _BarWrapperStyled2.default,
        (0, _extends3.default)({
          isDisabled: isDisabled,
          ref: this.onSetBarDom,
          styleHeight: height,
          styleWidth: width
        }, props, this.panResponder.panHandlers),
        children,
        this.renderHandler(height, position)
      );
    }
  }]);
  return BarWrapper;
}(_react2.default.Component);

exports.default = BarWrapper;


BarWrapper.propTypes = propTypes;
BarWrapper.defaultProps = defaultProps;