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

TDesign Component for React

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var constants = require('../../../_chunks/dep-15247f60.js');
var hooks_useMouseEvent = require('../../../hooks/useMouseEvent.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var Saturation = function Saturation(props) {
  var color = props.color,
    disabled = props.disabled,
    onChange = props.onChange,
    baseClassName = props.baseClassName;
  var panelRef = React.useRef(null);
  var panelRectRef = React.useRef({
    width: constants.SATURATION_PANEL_DEFAULT_WIDTH,
    height: constants.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 = React.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]);
  hooks_useMouseEvent["default"](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);
    }
  });
  React.useEffect(function () {
    var _panelRef$current, _panelRef$current2;
    panelRectRef.current.width = ((_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.offsetWidth) || constants.SATURATION_PANEL_DEFAULT_WIDTH;
    panelRectRef.current.height = ((_panelRef$current2 = panelRef.current) === null || _panelRef$current2 === void 0 ? void 0 : _panelRef$current2.offsetHeight) || constants.SATURATION_PANEL_DEFAULT_HEIGHT;
  }, [handleDrag]);
  return /* @__PURE__ */React__default["default"].createElement("div", {
    ref: panelRef,
    className: "".concat(baseClassName, "__saturation"),
    style: {
      background: "hsl(".concat(color.hue, ", 100%, 50%)")
    }
  }, /* @__PURE__ */React__default["default"].createElement("span", {
    className: "".concat(baseClassName, "__thumb"),
    role: "slider",
    tabIndex: 0,
    style: styles()
  }));
};
var SaturationPanel = /*#__PURE__*/React__default["default"].memo(Saturation);

exports["default"] = SaturationPanel;
//# sourceMappingURL=saturation.js.map