@wix/design-system/dist/cjs/AngleInput/hooks/useAngleInput.js

@wix/design-system

"use strict";

exports.__esModule = true;
exports.useAngleInput = void 0;
var _react = require("react");
var _useEventCallback = require("../../common/useEventCallback/useEventCallback");
var _AngleInput = require("../AngleInput.constants");
var useAngleInput = _ref => {
  var onChange = _ref.onChange,
    onPointerDown = _ref.onPointerDown,
    onPointerUp = _ref.onPointerUp,
    onFocus = _ref.onFocus,
    onBlur = _ref.onBlur,
    step = _ref.step;
  var rootRef = (0, _react.useRef)(null);
  var calculateAngleFromEvent = (0, _react.useCallback)((clientX, clientY) => {
    var rootElement = rootRef.current;
    if (!rootElement) return;
    var _rootElement$getBound = rootElement.getBoundingClientRect(),
      left = _rootElement$getBound.left,
      top = _rootElement$getBound.top,
      width = _rootElement$getBound.width,
      height = _rootElement$getBound.height;
    var centerX = left + width / 2;
    var centerY = top + height / 2;
    var dx = clientX - centerX;
    var dy = clientY - centerY;
    var rawAngle = Math.atan2(dx, -dy) * (180 / Math.PI);
    var normalizedAngle = normalizeAngle(rawAngle);
    return Math.round(normalizedAngle / step) * step % 360;
  }, [step]);
  var updateAngle = (0, _useEventCallback.useEventCallback)((clientX, clientY) => {
    var angle = calculateAngleFromEvent(clientX, clientY);
    if (angle !== undefined) onChange(angle);
  });
  var handlePointerDown = (0, _useEventCallback.useEventCallback)(event => {
    event.currentTarget.setPointerCapture(event.pointerId);
    onPointerDown == null || onPointerDown();
    updateAngle(event.clientX, event.clientY);
  });
  var handlePointerMove = (0, _useEventCallback.useEventCallback)(event => {
    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
      updateAngle(event.clientX, event.clientY);
    }
  });
  var handlePointerUp = (0, _useEventCallback.useEventCallback)(event => {
    onPointerUp == null || onPointerUp();
    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
      event.currentTarget.releasePointerCapture(event.pointerId);
    }
  });
  var handleInputChange = (0, _useEventCallback.useEventCallback)(event => {
    onChange(normalizeAngle(Number(event.target.value)));
  });
  var handleKeyboardEvent = (0, _useEventCallback.useEventCallback)(event => {
    var key = event.key,
      currentTarget = event.currentTarget;
    var currentAngle = Number(currentTarget.value);
    var newAngle = currentAngle;
    switch (key) {
      case 'ArrowUp':
      case 'ArrowRight':
      case 'PageUp':
        newAngle += step;
        break;
      case 'ArrowDown':
      case 'ArrowLeft':
      case 'PageDown':
        newAngle -= step;
        break;
      default:
        return;
    }
    if (newAngle > _AngleInput.angleLimits.max || newAngle < _AngleInput.angleLimits.min) {
      event.preventDefault();
      onChange(normalizeAngle(newAngle));
    }
  });
  var handleFocus = (0, _useEventCallback.useEventCallback)(() => {
    onFocus == null || onFocus();
  });
  var handleBlur = (0, _useEventCallback.useEventCallback)(() => {
    onBlur == null || onBlur();
  });
  return {
    rootRef,
    handlePointerDown,
    handlePointerUp,
    handlePointerMove,
    handleInputChange,
    handleKeyboardEvent,
    handleFocus,
    handleBlur
  };
};
exports.useAngleInput = useAngleInput;
var normalizeAngle = angle => (angle + 360) % 360;
//# sourceMappingURL=useAngleInput.js.map