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

A color picker component for React and React Native.

"use strict";

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

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 _ColorPickerCircleWrapper = require("../components-styled/ColorPickerCircleWrapper");

var _ColorPickerCircleWrapper2 = _interopRequireDefault(_ColorPickerCircleWrapper);

var _ColorPickerTargetWrapper = require("../components-styled/ColorPickerTargetWrapper");

var _ColorPickerTargetWrapper2 = _interopRequireDefault(_ColorPickerTargetWrapper);

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

var _positionValidation2 = _interopRequireDefault(_positionValidation);

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

var _position2 = _interopRequireDefault(_position);

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

/* global window */
var propTypes = {
  isDisabled: _propTypes2.default.bool.isRequired,
  isDragging: _propTypes2.default.bool.isRequired,
  position: _propTypes2.default.number.isRequired,
  positionLeft: _propTypes2.default.number.isRequired,
  positionRight: _propTypes2.default.number.isRequired,
  size: _propTypes2.default.number.isRequired,
  width: _propTypes2.default.number.isRequired,
  onDraggingChanged: _propTypes2.default.func.isRequired,
  onPositionChanged: _propTypes2.default.func.isRequired
};

var defaultProps = {};

var Handler = function (_React$PureComponent) {
  (0, _inherits3.default)(Handler, _React$PureComponent);

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

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

    _this.onGestureResponderStart = _this.onGestureResponderStart.bind(_this);
    _this.onMouseResponderMove = _this.onMouseResponderMove.bind(_this);
    _this.onTouchResponderMove = _this.onTouchResponderMove.bind(_this);
    _this.onGestureResponderEnd = _this.onGestureResponderEnd.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(Handler, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      window.addEventListener("mousemove", this.onMouseResponderMove, true);
      window.addEventListener("touchmove", this.onTouchResponderMove, true);
      window.addEventListener("mouseup", this.onGestureResponderEnd);
      window.addEventListener("touchend", this.onGestureResponderEnd);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      window.removeEventListener("mousemove", this.onMouseResponderMove, true);
      window.removeEventListener("touchmove", this.onTouchResponderMove, true);
      window.removeEventListener("mouseup", this.onGestureResponderEnd);
      window.removeEventListener("touchend", this.onGestureResponderEnd);
    }
  }, {
    key: "onGestureResponderStart",
    value: function onGestureResponderStart(e) {
      // prevent selecting text
      e.preventDefault();
      // parents don't need to know about this event
      e.stopPropagation();
      var isDisabled = this.props.isDisabled;

      if (isDisabled) {
        return;
      }
      var onDraggingChanged = this.props.onDraggingChanged;

      onDraggingChanged(true);
    }
  }, {
    key: "onMouseResponderMove",
    value: function onMouseResponderMove(e) {
      var isDisabled = this.props.isDisabled;

      if (isDisabled) {
        return;
      }
      var isDragging = this.props.isDragging;

      if (!isDragging) {
        return;
      }
      var _props = this.props,
          positionLeft = _props.positionLeft,
          positionRight = _props.positionRight,
          onPositionChanged = _props.onPositionChanged;
      // prevent selecting text

      e.preventDefault();
      // prevent any other movement
      e.stopImmediatePropagation();
      (0, _positionValidation2.default)((0, _position2.default)(positionLeft, e.clientX, positionRight - positionLeft), onPositionChanged);
    }
  }, {
    key: "onTouchResponderMove",
    value: function onTouchResponderMove(e) {
      var isDisabled = this.props.isDisabled;

      if (isDisabled) {
        return;
      }
      var isDragging = this.props.isDragging;

      if (!isDragging) {
        return;
      }
      var _props2 = this.props,
          positionLeft = _props2.positionLeft,
          positionRight = _props2.positionRight,
          onPositionChanged = _props2.onPositionChanged;
      // prevent selecting text

      e.preventDefault();
      // prevent any other movement
      e.stopImmediatePropagation();
      (0, _positionValidation2.default)((0, _position2.default)(positionLeft, e.changedTouches[0].clientX, positionRight - positionLeft), onPositionChanged);
    }
  }, {
    key: "onGestureResponderEnd",
    value: function onGestureResponderEnd() {
      var isDisabled = this.props.isDisabled;

      if (isDisabled) {
        return;
      }
      var onDraggingChanged = this.props.onDraggingChanged;

      onDraggingChanged(false);
    }
  }, {
    key: "render",
    value: function render() {
      var width = this.props.width;
      var _props3 = this.props,
          position = _props3.position,
          size = _props3.size;

      return _react2.default.createElement(
        _ColorPickerCircleWrapper2.default,
        {
          position: position,
          size: size,
          width: width,
          onMouseDown: this.onGestureResponderStart,
          onTouchStart: this.onGestureResponderStart
        },
        _react2.default.createElement(_ColorPickerTargetWrapper2.default, { size: size })
      );
    }
  }]);
  return Handler;
}(_react2.default.PureComponent);

exports.default = Handler;


Handler.propTypes = propTypes;
Handler.defaultProps = defaultProps;