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

Color Saturation

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["prefixCls", "radius", "pointer", "className", "hue", "style", "hsva", "onChange"];
import React, { useMemo, useState } from 'react';
import { hsvaToHslaString } from '@uiw/color-convert';
import Interactive, { clamp } from '@uiw/react-drag-event-interactive';
import { Pointer } from './Pointer';
import { jsx as _jsx } from "react/jsx-runtime";
var Saturation = /*#__PURE__*/React.forwardRef((props, ref) => {
  var _hsva$h;
  var {
      prefixCls = 'w-color-saturation',
      radius = 0,
      pointer,
      className,
      hue = 0,
      style,
      hsva,
      onChange
    } = props,
    other = _objectWithoutPropertiesLoose(props, _excluded);
  var containerStyle = _extends({
    width: 200,
    height: 200,
    borderRadius: radius
  }, style, {
    position: 'relative'
  });
  var [interaction, setInteraction] = useState({
    left: 0,
    top: 0,
    x: 0,
    y: 0,
    width: 0,
    height: 0
  });
  var 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 = useMemo(() => {
    if (!hsva) return null;
    var ponitX = clamp(interaction.x, 0, interaction.width) + "px";
    var ponitY = clamp(interaction.y, 0, interaction.height) + "px";
    if (interaction.width === 0 || interaction.height === 0) {
      ponitX = hsva.s + "%";
      ponitY = 100 - hsva.v + "%";
    }
    var comProps = {
      top: ponitY,
      left: ponitX,
      color: hsvaToHslaString(hsva)
    };
    if (pointer && typeof pointer === 'function') {
      return pointer(_extends({
        prefixCls
      }, comProps));
    }
    return /*#__PURE__*/_jsx(Pointer, _extends({
      prefixCls: prefixCls
    }, comProps));
  }, [hsva, interaction, pointer, prefixCls]);
  return /*#__PURE__*/_jsx(Interactive, _extends({
    className: [prefixCls, className || ''].filter(Boolean).join(' ')
  }, other, {
    style: _extends({
      position: 'absolute',
      inset: 0,
      cursor: 'crosshair',
      backgroundImage: "linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsl(" + ((_hsva$h = hsva == null ? void 0 : hsva.h) != null ? _hsva$h : hue) + ", 100%, 50%))"
    }, containerStyle),
    ref: ref,
    onMove: handleChange,
    onDown: handleChange,
    children: pointerElement
  }));
});
Saturation.displayName = 'Saturation';
export default Saturation;