@wix/design-system/dist/cjs/ColorPicker/ColorPickerHue.js

@wix/design-system

"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.js");
var _ColorPickerKeyboardUtils = require("./ColorPickerKeyboardUtils");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/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.onKeyDown = (0, _ColorPickerKeyboardUtils.createColorPickerKeyHandler)({
      onChange: this.props.onChange,
      getCurrentColor: () => this.props.current,
      getNewColor: _ColorPickerKeyboardUtils.getHueColorFromKey,
      largeStep: 30
    });
    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;
    var hue = Math.round(current.hue());
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _ColorPickerHueSt.st)(_ColorPickerHueSt.classes.root, {
        noBorderRadius: this.props.showHistory
      }),
      "data-hook": dataHook,
      ref: e => this.slider = e,
      onMouseDown: this.onMarkerDragStart,
      onTouchStart: this.onMarkerDragStart,
      onKeyDown: this.onKeyDown,
      tabIndex: 0,
      role: "slider",
      "aria-label": "Hue",
      "aria-valuemin": 0,
      "aria-valuemax": 359,
      "aria-valuenow": hue,
      "aria-valuetext": "Hue: ".concat(hue, " degrees"),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 81,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: _ColorPickerHueSt.classes.handle,
      style: {
        left: "".concat(percentage, "%")
      },
      "aria-hidden": "true",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 98,
        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,
  /** Specifies whether history should be displayed */
  showHistory: _propTypes.default.bool
};
//# sourceMappingURL=ColorPickerHue.js.map