wix-style-react/dist/src/ColorPicker/ColorPickerHsb.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 _ColorPickerHsbSt = require("./ColorPickerHsb.st.css");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/ColorPicker/ColorPickerHsb.js";
class ColorPickerHsb 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('touchend', this.onMarkerDragEnd);
      window.addEventListener('touchcancel', this.onMarkerDragEnd);
      this.gradientRect = this.gradient.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.getSVByMouseEvent = e => {
      var eventX = 0;
      var eventY = 0;
      if (e.clientX) {
        eventX = e.clientX;
        eventY = e.clientY;
      } else {
        eventX = e.touches[0].clientX;
        eventY = e.touches[0].clientY;
      }
      var x = eventX - this.gradientRect.left;
      var y = eventY - this.gradientRect.top;
      var s = (0, _clamp.default)(100 * x / this.gradientRect.width, 0, 100);
      var v = (0, _clamp.default)(100 - 100 * y / this.gradientRect.height, 0, 100);
      return {
        s,
        v
      };
    };
    this.setNewColorByMouseEvent = e => {
      var {
        onChange,
        current
      } = this.props;
      var {
        s,
        v
      } = this.getSVByMouseEvent(e);
      onChange((0, _color.default)({
        h: current.hue(),
        s,
        v
      }));
    };
  }
  componentWillUnmount() {
    this.onMarkerDragEnd();
  }
  render() {
    var {
      dataHook,
      current
    } = this.props;
    var hue = current.saturationv(100).lightness(50);
    var style = {
      left: "".concat(current.saturationv(), "%"),
      top: "".concat(100 - current.value(), "%")
    };
    return /*#__PURE__*/_react.default.createElement("div", {
      className: _ColorPickerHsbSt.classes.root,
      "data-hook": dataHook,
      ref: e => this.gradient = e,
      onMouseDown: this.onMarkerDragStart,
      onTouchStart: this.onMarkerDragStart,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 78,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: _ColorPickerHsbSt.classes.hue,
      style: {
        background: hue.hex()
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 85,
        columnNumber: 9
      }
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: _ColorPickerHsbSt.classes.saturation,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 86,
        columnNumber: 9
      }
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: _ColorPickerHsbSt.classes.brightness,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 87,
        columnNumber: 9
      }
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: _ColorPickerHsbSt.classes.handle,
      style: style,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 88,
        columnNumber: 9
      }
    }));
  }
}
ColorPickerHsb.propTypes = {
  /** Applied as data-hook HTML attribute that can be used to create driver in testing */
  dataHook: _propTypes.default.string,
  /** The current Hsb value */
  current: _propTypes.default.object.isRequired,
  /** A callback function that will be triggered when the value is changed */
  onChange: _propTypes.default.func.isRequired
};
var _default = exports.default = ColorPickerHsb;
//# sourceMappingURL=ColorPickerHsb.js.map