@uiw/react-color-saturation/cjs/index.js

Color Saturation

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _colorConvert = require("@uiw/color-convert");
var _reactDragEventInteractive = _interopRequireWildcard(require("@uiw/react-drag-event-interactive"));
var _Pointer = require("./Pointer");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "radius", "pointer", "className", "hue", "style", "hsva", "onChange"];
var Saturation = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  var _hsva$h;
  var _props$prefixCls = props.prefixCls,
    prefixCls = _props$prefixCls === void 0 ? 'w-color-saturation' : _props$prefixCls,
    _props$radius = props.radius,
    radius = _props$radius === void 0 ? 0 : _props$radius,
    pointer = props.pointer,
    className = props.className,
    _props$hue = props.hue,
    hue = _props$hue === void 0 ? 0 : _props$hue,
    style = props.style,
    hsva = props.hsva,
    onChange = props.onChange,
    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var containerStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
    width: 200,
    height: 200,
    borderRadius: radius
  }, style), {}, {
    position: 'relative'
  });
  var _useState = (0, _react.useState)({
      left: 0,
      top: 0,
      x: 0,
      y: 0,
      width: 0,
      height: 0
    }),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    interaction = _useState2[0],
    setInteraction = _useState2[1];
  var handleChange = function handleChange(interaction, event) {
    setInteraction(interaction);
    onChange && hsva && onChange({
      h: hsva.h,
      s: interaction.left * 100,
      v: (1 - interaction.top) * 100,
      a: hsva.a
      // source: 'hsv',
    });
  };
  var pointerElement = (0, _react.useMemo)(function () {
    if (!hsva) return null;
    var ponitX = "".concat((0, _reactDragEventInteractive.clamp)(interaction.x, 0, interaction.width), "px");
    var ponitY = "".concat((0, _reactDragEventInteractive.clamp)(interaction.y, 0, interaction.height), "px");
    if (interaction.width === 0 || interaction.height === 0) {
      ponitX = "".concat(hsva.s, "%");
      ponitY = "".concat(100 - hsva.v, "%");
    }
    var comProps = {
      top: ponitY,
      left: ponitX,
      color: (0, _colorConvert.hsvaToHslaString)(hsva)
    };
    if (pointer && typeof pointer === 'function') {
      return pointer((0, _objectSpread2["default"])({
        prefixCls: prefixCls
      }, comProps));
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pointer.Pointer, (0, _objectSpread2["default"])({
      prefixCls: prefixCls
    }, comProps));
  }, [hsva, interaction, pointer, prefixCls]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDragEventInteractive["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
    className: [prefixCls, className || ''].filter(Boolean).join(' ')
  }, other), {}, {
    style: (0, _objectSpread2["default"])({
      position: 'absolute',
      inset: 0,
      cursor: 'crosshair',
      backgroundImage: "linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsl(".concat((_hsva$h = hsva === null || hsva === void 0 ? void 0 : hsva.h) !== null && _hsva$h !== void 0 ? _hsva$h : hue, ", 100%, 50%))")
    }, containerStyle),
    ref: ref,
    onMove: handleChange,
    onDown: handleChange,
    children: pointerElement
  }));
});
Saturation.displayName = 'Saturation';
var _default = exports["default"] = Saturation;
module.exports = exports.default;