ultra-design/es/color-picker/move-container.js

import _pt from 'prop-types';
import { useRef } from 'react';
import { clamp } from './color-transform.js';
import { jsx } from '@emotion/react/jsx-runtime';

var MoveContainer = function MoveContainer(_ref) {
  var className = _ref.className,
      style = _ref.style,
      onChange = _ref.onChange,
      children = _ref.children;
  var divRef = useRef(null);

  var move = function move(e) {
    if (divRef.current) {
      var div = divRef.current;

      var _div$getBoundingClien = div.getBoundingClientRect(),
          width = _div$getBoundingClien.width,
          height = _div$getBoundingClien.height,
          left = _div$getBoundingClien.left,
          top = _div$getBoundingClien.top;

      var x = clamp(e.clientX - left, width, 0);
      var y = clamp(e.clientY - top, height, 0);
      onChange({
        x: x,
        y: y
      });
    }
  };

  var onMouseDown = function onMouseDown(e) {
    if (e.button !== 0) return;
    move(e);

    var onMouseMove = function onMouseMove(e) {
      move(e);
    };

    var onMouseUp = function onMouseUp(e) {
      document.removeEventListener('mousemove', onMouseMove, false);
      document.removeEventListener('mouseup', onMouseUp, false);
      move(e);
    };

    document.addEventListener('mousemove', onMouseMove, false);
    document.addEventListener('mouseup', onMouseUp, false);
  };

  return jsx("div", {
    ref: divRef,
    className: className,
    style: style,
    onMouseDown: onMouseDown,
    children: children
  });
};

MoveContainer.propTypes = {
  className: _pt.string,
  onChange: _pt.func.isRequired
};
var MoveContainer$1 = MoveContainer;

export { MoveContainer$1 as default };