@javierbyte/react-colorizer/lib/components/BarWrapper/component/index.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 _config = require("../utils/config");

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

var _Handler2 = _interopRequireDefault(_Handler);

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

var _BarWrapperStyled2 = _interopRequireDefault(_BarWrapperStyled);

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

var _position2 = _interopRequireDefault(_position);

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

/* global window */
var propTypes = {
  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
};

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.onMouseDown = _this.onMouseDown.bind(_this);
    _this.onMouseMove = _this.onMouseMove.bind(_this);
    _this.onMouseUp = _this.onMouseUp.bind(_this);
    _this.onSetBarDom = _this.onSetBarDom.bind(_this);
    _this.onTouchMove = _this.onTouchMove.bind(_this);
    _this.onTouchStart = _this.onTouchStart.bind(_this);
    _this.onTouchCancel = _this.onTouchCancel.bind(_this);
    _this.onTouchEnd = _this.onTouchEnd.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(BarWrapper, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      window.addEventListener("mouseup", this.onMouseUp);
      window.addEventListener("touchend", this.onTouchEnd);
      window.addEventListener("touchcancel", this.onTouchCancel);
      window.addEventListener("mousemove", this.onMouseMove);
      window.addEventListener("touchmove", this.onTouchMove);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      window.removeEventListener("mouseup", this.onMouseUp);
      window.removeEventListener("touchend", this.onTouchEnd);
      window.removeEventListener("touchcancel", this.onTouchCancel);
      window.removeEventListener("mousemove", this.onMouseMove);
      window.removeEventListener("touchmove", this.onTouchMove);
    }
  }, {
    key: "onMouseDown",
    value: function onMouseDown(e) {
      var targetBoundingClientRect = e.target.getBoundingClientRect();
      this.cache.holdPositionX = e.clientX;
      this.cache.holdPositionY = e.clientY;
      this.setState(function () {
        return {
          holding: true
        };
      });
      this.setOnHoldTimerInitIfNeed(e, this.getOnHoldHandler(e.clientX, targetBoundingClientRect));
    }
  }, {
    key: "onTouchStart",
    value: function onTouchStart(e) {
      var targetBoundingClientRect = e.target.getBoundingClientRect();
      var _e$touches$ = e.touches[0],
          clientX = _e$touches$.clientX,
          clientY = _e$touches$.clientY;

      this.cache.holdPositionX = clientX;
      this.cache.holdPositionY = clientY;
      this.setState(function () {
        return {
          holding: true
        };
      });
      this.setOnHoldTimerInitIfNeed(e, this.getOnHoldHandler(clientX, targetBoundingClientRect));
    }
  }, {
    key: "onMouseMove",
    value: function onMouseMove(e) {
      this.checkHolding(e, false);
    }
  }, {
    key: "onTouchMove",
    value: function onTouchMove(e) {
      this.checkHolding(e, true);
    }
  }, {
    key: "onMouseUp",
    value: function onMouseUp() {
      this.setCancelTimer();
    }
  }, {
    key: "onTouchEnd",
    value: function onTouchEnd() {
      this.setCancelTimer();
    }
  }, {
    key: "onTouchCancel",
    value: function onTouchCancel() {
      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 _props = _this2.props,
            isDisabled = _props.isDisabled,
            onValueChanged = _props.onValueChanged;

        if (isDisabled) {
          return;
        }
        if (_this2.state.holding) {
          onValueChanged((0, _position2.default)(targetBoundingClientRect.left, clientX, targetBoundingClientRect.width));
          _this2.onDraggingChanged(true);
        }
      };
    }
  }, {
    key: "setOnHoldTimerInitIfNeed",
    value: function setOnHoldTimerInitIfNeed(e, holdHandler) {
      var holdTimer = this.cache.holdTimer;
      // allow only left button
      if ((holdTimer === null || holdTimer === undefined) && (e.button === 0 || e.button === 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(e, isTouch) {
      if (this.state.holding) {
        var clientX = isTouch ? e.touches[0].clientX : e.clientX;
        var clientY = isTouch ? e.touches[0].clientY : e.clientY;
        var diffX = Math.abs(this.cache.holdPositionX - clientX);
        var diffY = Math.abs(this.cache.holdPositionY - clientY);
        if (diffX !== 0 && diffX > _config.TOLERANCE || diffY !== 0 && diffY > _config.TOLERANCE) {
          this.setState(function () {
            return {
              holding: false
            };
          });
        }
      }
    }
  }, {
    key: "renderHandler",
    value: function renderHandler(height, position, onValueChange) {
      var _props2 = this.props,
          isDisabled = _props2.isDisabled,
          width = _props2.width;
      var _state = this.state,
          dragging = _state.dragging,
          isDomInitialized = _state.isDomInitialized;

      if (!isDomInitialized) {
        return null;
      }
      var barDomBoundingClientRect = this.barDom.getBoundingClientRect();
      return _react2.default.createElement(_Handler2.default, {
        barDom: this.barDom,
        isDisabled: isDisabled,
        isDragging: dragging,
        position: position,
        positionLeft: barDomBoundingClientRect.left,
        positionRight: barDomBoundingClientRect.right,
        size: height,
        width: width,
        onDraggingChanged: this.onDraggingChanged,
        onPositionChanged: onValueChange
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _props3 = this.props,
          height = _props3.height,
          isDisabled = _props3.isDisabled,
          position = _props3.position,
          width = _props3.width,
          onValueChanged = _props3.onValueChanged,
          props = (0, _objectWithoutProperties3.default)(_props3, ["height", "isDisabled", "position", "width", "onValueChanged"]);

      return _react2.default.createElement(
        _BarWrapperStyled2.default,
        (0, _extends3.default)({
          innerRef: this.onSetBarDom,
          isDisabled: isDisabled,
          styleHeight: height,
          styleWidth: width,
          onMouseDown: this.onMouseDown,
          onTouchStart: this.onTouchStart
        }, props),
        this.renderHandler(height, position, onValueChanged)
      );
    }
  }]);
  return BarWrapper;
}(_react2.default.Component);

exports.default = BarWrapper;


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