@wordpress/components/build/color-picker/picker.js

UI components for WordPress.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Picker = void 0;
var _reactColorful = require("react-colorful");
var _colord = require("colord");
var _element = require("@wordpress/element");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const Picker = ({
  color,
  enableAlpha,
  onChange
}) => {
  const Component = enableAlpha ? _reactColorful.RgbaStringColorPicker : _reactColorful.RgbStringColorPicker;
  const rgbColor = (0, _element.useMemo)(() => color.toRgbString(), [color]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
    color: rgbColor,
    onChange: nextColor => {
      onChange((0, _colord.colord)(nextColor));
    }
    // Pointer capture fortifies drag gestures so that they continue to
    // work while dragging outside the component over objects like
    // iframes. If a newer version of react-colorful begins to employ
    // pointer capture this will be redundant and should be removed.
    ,
    onPointerDown: ({
      currentTarget,
      pointerId
    }) => {
      currentTarget.setPointerCapture(pointerId);
    },
    onPointerUp: ({
      currentTarget,
      pointerId
    }) => {
      currentTarget.releasePointerCapture(pointerId);
    }
  });
};
exports.Picker = Picker;
//# sourceMappingURL=picker.js.map