wix-style-react/dist/src/ColorPicker/ColorPickerHue.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _color = _interopRequireDefault(require("color"));
var _clamp = _interopRequireDefault(require("lodash/clamp"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ColorPickerHueSt = require("./ColorPickerHue.st.css");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/ColorPicker/ColorPickerHue.js";
class ColorPickerHue extends _react.default.PureComponent {
  constructor() {
    super(...arguments);
    this.onMarkerDragStart = e => {
      e.preventDefault();
      window.addEventListener('mousemove', this.setNewColorByMouseEvent);
      window.addEventListener('touchmove', this.setNewColorByMouseEvent);
      window.addEventListener('mouseup', this.onMarkerDragEnd);
      window.addEventListener('touchcancel', this.onMarkerDragEnd);
      window.addEventListener('touchend', this.onMarkerDragEnd);
      this.sliderRect = this.slider.getBoundingClientRect();
      this.setNewColorByMouseEvent(e);
    };
    this.onMarkerDragEnd = () => {
      window.removeEventListener('touchmove', this.setNewColorByMouseEvent);
      window.removeEventListener('mousemove', this.setNewColorByMouseEvent);
      window.removeEventListener('touchcancel', this.onMarkerDragEnd);
      window.removeEventListener('touchend', this.onMarkerDragEnd);
      window.removeEventListener('mouseup', this.onMarkerDragEnd);
    };
    this.getHueByMouseEvent = e => {
      var eventX = 0;
      if (e.clientX) {
        eventX = e.clientX;
      } else if (e.touches && e.touches[0]) {
        eventX = e.touches[0].clientX;
      }
      var x = eventX - this.sliderRect.left;
      return (0, _clamp.default)(360 * x / this.sliderRect.width, 0, 359);
    };
    this.setNewColorByMouseEvent = e => {
      var {
        onChange,
        current
      } = this.props;
      var h = this.getHueByMouseEvent(e);
      onChange((0, _color.default)({
        h,
        s: current.saturationv(),
        v: current.value()
      }));
    };
  }
  componentWillUnmount() {
    this.onMarkerDragEnd();
  }
  render() {
    var {
      dataHook,
      current
    } = this.props;
    // HUE is an integer value from 0 to 360.
    var percentage = current.hue() / 360 * 100;
    return /*#__PURE__*/_react.default.createElement("div", {
      className: _ColorPickerHueSt.classes.root,
      "data-hook": dataHook,
      ref: e => this.slider = e,
      onMouseDown: this.onMarkerDragStart,
      onTouchStart: this.onMarkerDragStart,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 65,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: _ColorPickerHueSt.classes.handle,
      style: {
        left: "".concat(percentage, "%")
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 72,
        columnNumber: 9
      }
    }));
  }
}
exports.default = ColorPickerHue;
ColorPickerHue.propTypes = {
  /** Applied as data-hook HTML attribute that can be used to create driver in testing */
  dataHook: _propTypes.default.string,
  /** The current Hue value */
  current: _propTypes.default.object.isRequired,
  /** A callback function that will be triggered when the value is changed */
  onChange: _propTypes.default.func.isRequired
};
//# sourceMappingURL=ColorPickerHue.js.map