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

TDesign Component for React

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

'use strict';

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

var defineProperty = require('../../../_chunks/dep-cc768e34.js');
var React = require('react');
var constants = require('../../../_chunks/dep-11227668.js');
var hooks_useDrag = require('../../../hooks/useDrag.js');
require('../../../_chunks/dep-6d4d8660.js');

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

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

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { defineProperty._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Saturation = function Saturation(props) {
  var color = props.color,
    disabled = props.disabled,
    onChange = props.onChange,
    baseClassName = props.baseClassName;
  var panelRef = React.useRef(null);
  var thumbRef = 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 getSaturationAndValueByCoordinate = function getSaturationAndValueByCoordinate(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 isDragging = React.useRef(false);
  var handleDrag = React.useCallback(function (_ref, isEnd) {
    var x = _ref.x,
      y = _ref.y;
    if (disabled) {
      return;
    }
    isDragging.current = true;
    var _getSaturationAndValu = getSaturationAndValueByCoordinate({
        x: x,
        y: y
      }),
      saturation = _getSaturationAndValu.saturation,
      value = _getSaturationAndValu.value;
    onChange({
      saturation: saturation / 100,
      value: value / 100,
      addUsedColor: isEnd
    });
  }, [disabled, onChange]);
  var handleDragEnd = React.useCallback(function (coordinate) {
    if (disabled) {
      return;
    }
    isDragging.current = false;
    handleDrag(coordinate, true);
  }, []);
  hooks_useDrag["default"](panelRef, {
    start: function start() {
      panelRectRef.current.width = panelRef.current.offsetWidth;
      panelRectRef.current.height = panelRef.current.offsetHeight;
    },
    end: function end(coordinate) {
      handleDragEnd(coordinate);
    },
    drag: function drag(coordinate) {
      handleDrag(coordinate);
    }
  });
  React.useEffect(function () {
    panelRectRef.current.width = panelRef.current.offsetWidth || constants.SATURATION_PANEL_DEFAULT_WIDTH;
    panelRectRef.current.height = panelRef.current.offsetHeight || constants.SATURATION_PANEL_DEFAULT_HEIGHT;
  }, [handleDrag, handleDragEnd]);
  return /* @__PURE__ */React__default["default"].createElement("div", {
    className: "".concat(baseClassName, "__saturation"),
    ref: panelRef,
    style: {
      background: "hsl(".concat(color.hue, ", 100%, 50%)")
    }
  }, /* @__PURE__ */React__default["default"].createElement("span", {
    className: "".concat(baseClassName, "__thumb"),
    role: "slider",
    tabIndex: 0,
    ref: thumbRef,
    style: _objectSpread({}, styles())
  }));
};
var SaturationPanel = /*#__PURE__*/React__default["default"].memo(Saturation);

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