tdesign-react/esm/color-picker/components/panel/saturation.js

TDesign Component for React

/**
 * tdesign v1.16.2
 * (c) 2025 tdesign
 * @license MIT
 */

import React, { useRef, useCallback, useEffect } from 'react';
import { S as SATURATION_PANEL_DEFAULT_WIDTH, d as SATURATION_PANEL_DEFAULT_HEIGHT } from '../../../_chunks/dep-8def4f8a.js';
import useMouseEvent from '../../../hooks/useMouseEvent.js';

var Saturation = function Saturation(props) {
  var color = props.color,
    disabled = props.disabled,
    onChange = props.onChange,
    baseClassName = props.baseClassName;
  var panelRef = useRef(null);
  var panelRectRef = useRef({
    width: SATURATION_PANEL_DEFAULT_WIDTH,
    height: SATURATION_PANEL_DEFAULT_HEIGHT
  });
  var styles = function styles() {
    var saturation = color.saturation,
      value = color.value,
      rgb = color.rgb;
    var _panelRectRef$current = panelRectRef.current,
      width = _panelRectRef$current.width,
      height = _panelRectRef$current.height;
    var top = Math.round((1 - value) * height);
    var left = Math.round(saturation * width);
    return {
      color: rgb,
      left: "".concat(left, "px"),
      top: "".concat(top, "px")
    };
  };
  var getSaturationAndValue = function getSaturationAndValue(coordinate) {
    var _panelRectRef$current2 = panelRectRef.current,
      width = _panelRectRef$current2.width,
      height = _panelRectRef$current2.height;
    var x = coordinate.x,
      y = coordinate.y;
    var saturation = Math.round(x / width * 100);
    var value = Math.round((1 - y / height) * 100);
    return {
      saturation: saturation,
      value: value
    };
  };
  var handleDrag = useCallback(function (_ref) {
    var x = _ref.x,
      y = _ref.y;
    if (disabled) return;
    var _getSaturationAndValu = getSaturationAndValue({
        x: x,
        y: y
      }),
      saturation = _getSaturationAndValu.saturation,
      value = _getSaturationAndValu.value;
    onChange({
      saturation: saturation / 100,
      value: value / 100
    });
  }, [disabled, onChange]);
  useMouseEvent(panelRef, {
    onDown: function onDown() {
      if (disabled) return;
      panelRectRef.current.width = panelRef.current.offsetWidth;
      panelRectRef.current.height = panelRef.current.offsetHeight;
    },
    onMove: function onMove(_, ctx) {
      handleDrag(ctx.coordinate);
    },
    onUp: function onUp(_, ctx) {
      handleDrag(ctx.coordinate);
    }
  });
  useEffect(function () {
    var _panelRef$current, _panelRef$current2;
    panelRectRef.current.width = ((_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.offsetWidth) || SATURATION_PANEL_DEFAULT_WIDTH;
    panelRectRef.current.height = ((_panelRef$current2 = panelRef.current) === null || _panelRef$current2 === void 0 ? void 0 : _panelRef$current2.offsetHeight) || SATURATION_PANEL_DEFAULT_HEIGHT;
  }, [handleDrag]);
  return /* @__PURE__ */React.createElement("div", {
    ref: panelRef,
    className: "".concat(baseClassName, "__saturation"),
    style: {
      background: "hsl(".concat(color.hue, ", 100%, 50%)")
    }
  }, /* @__PURE__ */React.createElement("span", {
    className: "".concat(baseClassName, "__thumb"),
    role: "slider",
    tabIndex: 0,
    style: styles()
  }));
};
var SaturationPanel = /*#__PURE__*/React.memo(Saturation);

export { SaturationPanel as default };
//# sourceMappingURL=saturation.js.map