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

TDesign Component for React

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

import { _ as _defineProperty } from '../../../_chunks/dep-8618a2f1.js';
import { _ as _toConsumableArray } from '../../../_chunks/dep-132961ab.js';
import { _ as _slicedToArray } from '../../../_chunks/dep-118954e6.js';
import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
import classNames from 'classnames';
import { i as initColorFormat } from '../../../_chunks/dep-d4db3ea3.js';
import useCommonClassName from '../../../hooks/useCommonClassName.js';
import useControlled from '../../../hooks/useControlled.js';
import useDefaultProps from '../../../hooks/useDefaultProps.js';
import { useLocaleReceiver } from '../../../locale/LocalReceiver.js';
import { colorPickerDefaultProps } from '../../defaultProps.js';
import useClassNames from '../../hooks/useClassNames.js';
import AlphaSlider from './alpha.js';
import FormatPanel from './format/index.js';
import PanelHeader from './header.js';
import HueSlider from './hue.js';
import LinearGradient from './linear-gradient.js';
import SaturationPanel from './saturation.js';
import SwatchesPanel from './swatches.js';
import { C as Color, g as getColorObject } from '../../../_chunks/dep-7c4bfeee.js';
import { D as DEFAULT_LINEAR_GRADIENT, a as DEFAULT_COLOR, T as TD_COLOR_USED_COLORS_MAX_SIZE, b as DEFAULT_SYSTEM_SWATCH_COLORS } from '../../../_chunks/dep-aeb8bcf5.js';
import '../../../_chunks/dep-c37cc2fd.js';
import '../../../_chunks/dep-61f5e3d1.js';
import 'lodash-es';
import '../../../_chunks/dep-c8ec9532.js';
import '../../../input/index.js';
import '../../../input/Input.js';
import '../../../_chunks/dep-30ed04a0.js';
import 'tdesign-icons-react';
import '../../../hooks/useLayoutEffect.js';
import '../../../_chunks/dep-82b8abc2.js';
import '../../../_util/forwardRefWithStatics.js';
import 'hoist-non-react-statics';
import '../../../hooks/useConfig.js';
import '../../../config-provider/ConfigContext.js';
import '../../../locale/zh_CN.js';
import '../../../_chunks/dep-ab140eb0.js';
import 'dayjs';
import '../../../_chunks/dep-95bd7102.js';
import '../../../hooks/useGlobalIcon.js';
import '../../../input/InputGroup.js';
import '../../../input/defaultProps.js';
import '../../../_util/parseTNode.js';
import '../../../_chunks/dep-4e5b1475.js';
import '../../../_chunks/dep-d104053f.js';
import '../../../input/useLengthLimit.js';
import '../../../_chunks/dep-f213e3a9.js';
import '../../../_util/noop.js';
import '../../../config-provider/index.js';
import '../../../config-provider/ConfigProvider.js';
import '../../../config-provider/type.js';
import '../../../input/style/index.js';
import '../../../input/type.js';
import '../../../input-number/index.js';
import '../../../input-number/InputNumber.js';
import '../../../button/index.js';
import '../../../button/Button.js';
import '../../../hooks/useDomRefCallback.js';
import '../../../hooks/useRipple.js';
import '../../../_chunks/dep-fab491d8.js';
import '../../../hooks/useAnimation.js';
import '../../../loading/index.js';
import '../../../loading/Loading.js';
import '../../../common/Portal.js';
import 'react-dom';
import '../../../loading/gradient.js';
import '../../../loading/defaultProps.js';
import '../../../loading/plugin.js';
import '../../../_util/react-render.js';
import '../../../_chunks/dep-1aea5672.js';
import '../../../common/PluginContainer.js';
import '../../../loading/style/index.js';
import '../../../loading/type.js';
import '../../../button/defaultProps.js';
import '../../../button/style/index.js';
import '../../../button/type.js';
import '../../../input-number/useInputNumber.js';
import '../../../_chunks/dep-dbd5931e.js';
import '../../../input-number/defaultProps.js';
import '../../../input-number/style/index.js';
import '../../../input-number/type.js';
import './slider.js';
import '../../../hooks/useDrag.js';
import '../../hooks/useStyles.js';
import '../../../select/index.js';
import '../../../select/base/Select.js';
import '../../../_util/helper.js';
import '../../../_chunks/dep-5f59b20a.js';
import '../../../select/base/OptionGroup.js';
import '../../../select/defaultProps.js';
import '../../../select/base/Option.js';
import '../../../common/FakeArrow.js';
import '../../../select-input/index.js';
import '../../../select-input/SelectInput.js';
import '../../../popup/index.js';
import '../../../popup/Popup.js';
import 'react-transition-group';
import '../../../_util/ref.js';
import 'react-is';
import '../../../_util/isFragment.js';
import '../../../hooks/useAttach.js';
import '../../../hooks/useMutationObserver.js';
import '../../../hooks/useLatest.js';
import '../../../hooks/usePopper.js';
import '@popperjs/core';
import 'react-fast-compare';
import '../../../hooks/useWindowSize.js';
import '../../../popup/defaultProps.js';
import '../../../popup/hooks/useTrigger.js';
import '../../../_util/composeRefs.js';
import '../../../_util/listener.js';
import '../../../popup/utils/transition.js';
import '../../../popup/PopupPlugin.js';
import '../../../popup/style/index.js';
import '../../../popup/type.js';
import '../../../select-input/useSingle.js';
import '../../../select-input/useMultiple.js';
import '../../../tag-input/index.js';
import '../../../tag-input/TagInput.js';
import '../../../hooks/useDragSorter.js';
import '../../../hooks/useEventCallback.js';
import '../../../tag-input/useTagScroll.js';
import '../../../tag-input/useTagList.js';
import '../../../tag/index.js';
import '../../../tag/Tag.js';
import '../../../_chunks/dep-ab4955c6.js';
import '../../../tag/defaultProps.js';
import '../../../tag/CheckTag.js';
import '../../../_chunks/dep-5fa28cf2.js';
import '../../../tag/CheckTagGroup.js';
import '../../../tag/style/index.js';
import '../../../tag/type.js';
import '../../../tag-input/useHover.js';
import '../../../tag-input/defaultProps.js';
import '../../../tag-input/style/index.js';
import '../../../tag-input/type.js';
import '../../../select-input/useOverlayInnerStyle.js';
import '../../../select-input/defaultProps.js';
import '../../../select-input/style/index.js';
import '../../../select-input/type.js';
import '../../../select/base/PopupContent.js';
import '../../../select/hooks/usePanelVirtualScroll.js';
import '../../../hooks/useVirtualScroll.js';
import '../../../hooks/useResizeObserver.js';
import '../../../select/style/index.js';
import '../../../select/type.js';
import '../../../radio/index.js';
import '../../../_chunks/dep-2820bcdf.js';
import '../../../common/Check.js';
import '../../../_chunks/dep-a533d566.js';
import '../../../radio/defaultProps.js';
import '../../../radio/useKeyboard.js';
import '../../../radio/style/index.js';
import '../../../radio/type.js';

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(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 Panel = /*#__PURE__*/forwardRef(function (props, ref) {
  var baseClassName = useClassNames();
  var _useCommonClassName = useCommonClassName(),
    STATUS = _useCommonClassName.STATUS;
  var _useLocaleReceiver = useLocaleReceiver("colorPicker"),
    _useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 2),
    local = _useLocaleReceiver2[0],
    t = _useLocaleReceiver2[1];
  var _useDefaultProps = useDefaultProps(props, colorPickerDefaultProps),
    className = _useDefaultProps.className,
    colorModes = _useDefaultProps.colorModes,
    defaultRecentColors = _useDefaultProps.defaultRecentColors,
    disabled = _useDefaultProps.disabled,
    enableAlpha = _useDefaultProps.enableAlpha,
    enableMultipleGradient = _useDefaultProps.enableMultipleGradient,
    format = _useDefaultProps.format,
    style = _useDefaultProps.style,
    swatchColors = _useDefaultProps.swatchColors,
    showPrimaryColorPreview = _useDefaultProps.showPrimaryColorPreview,
    onChange = _useDefaultProps.onChange,
    onPaletteBarChange = _useDefaultProps.onPaletteBarChange,
    onRecentColorsChange = _useDefaultProps.onRecentColorsChange;
  var _useControlled = useControlled(props, "value", onChange),
    _useControlled2 = _slicedToArray(_useControlled, 2),
    innerValue = _useControlled2[0],
    setInnerValue = _useControlled2[1];
  var _useState = useState(0),
    _useState2 = _slicedToArray(_useState, 2),
    setUpdateId = _useState2[1];
  var getModeByColor = function getModeByColor(input) {
    if (colorModes.length === 1) return colorModes[0];
    return colorModes.includes("linear-gradient") && Color.isGradientColor(input) ? "linear-gradient" : "monochrome";
  };
  var _useState3 = useState(function () {
      return getModeByColor(innerValue);
    }),
    _useState4 = _slicedToArray(_useState3, 2),
    mode = _useState4[0],
    setMode = _useState4[1];
  var isGradient = mode === "linear-gradient";
  var defaultEmptyColor = isGradient ? DEFAULT_LINEAR_GRADIENT : DEFAULT_COLOR;
  var _useControlled3 = useControlled(props, "recentColors", onRecentColorsChange, {
      defaultRecentColors: defaultRecentColors
    }),
    _useControlled4 = _slicedToArray(_useControlled3, 2),
    recentlyUsedColors = _useControlled4[0],
    setRecentlyUsedColors = _useControlled4[1];
  var colorInstanceRef = useRef(new Color(innerValue || defaultEmptyColor));
  var formatRef = useRef(initColorFormat(format, enableAlpha));
  var baseProps = {
    color: colorInstanceRef.current,
    disabled: disabled,
    baseClassName: baseClassName
  };
  var updateColor = function updateColor(value) {
    colorInstanceRef.current.update(value);
    setUpdateId(performance.now());
  };
  var emitColorChange = useCallback(function (trigger) {
    var value = colorInstanceRef.current.getFormattedColor(formatRef.current, enableAlpha);
    setInnerValue(value, {
      color: getColorObject(colorInstanceRef.current),
      trigger: trigger || "palette-saturation-brightness"
    });
    setUpdateId(performance.now());
  }, [enableAlpha, setInnerValue]);
  useEffect(function () {
    var currentColor = colorInstanceRef.current.getFormattedColor(formatRef.current, enableAlpha);
    if (innerValue === currentColor) return;
    var newMode = getModeByColor(innerValue);
    setMode(newMode);
    colorInstanceRef.current.isGradient = newMode === "linear-gradient";
    updateColor(innerValue);
  }, [innerValue]);
  var handleModeChange = function handleModeChange(newMode) {
    setMode(newMode);
    var isGradientMode = newMode === "linear-gradient";
    colorInstanceRef.current.isGradient = isGradientMode;
    var _colorInstanceRef$cur = colorInstanceRef.current,
      rgba = _colorInstanceRef$cur.rgba,
      gradientColors = _colorInstanceRef$cur.gradientColors,
      linearGradient = _colorInstanceRef$cur.linearGradient;
    if (isGradientMode) {
      updateColor(gradientColors.length > 0 ? linearGradient : DEFAULT_LINEAR_GRADIENT);
    } else {
      updateColor(rgba);
    }
    emitColorChange();
  };
  var handleRecentlyUsedColorsChange = function handleRecentlyUsedColorsChange(colors) {
    setRecentlyUsedColors(colors);
  };
  var addRecentlyUsedColor = function addRecentlyUsedColor() {
    var colors = _toConsumableArray(recentlyUsedColors || []);
    var _colorInstanceRef$cur2 = colorInstanceRef.current,
      isGradient2 = _colorInstanceRef$cur2.isGradient,
      linearGradient = _colorInstanceRef$cur2.linearGradient,
      rgba = _colorInstanceRef$cur2.rgba;
    var currentColor = isGradient2 ? linearGradient : rgba;
    var index = colors.indexOf(currentColor);
    if (index > -1) {
      colors.splice(index, 1);
    }
    colors.unshift(currentColor);
    if (colors.length > TD_COLOR_USED_COLORS_MAX_SIZE) {
      colors.length = TD_COLOR_USED_COLORS_MAX_SIZE;
    }
    handleRecentlyUsedColorsChange(colors);
  };
  var handleSatAndValueChange = function handleSatAndValueChange(_ref) {
    var saturation = _ref.saturation,
      value = _ref.value;
    var _colorInstanceRef$cur3 = colorInstanceRef.current,
      sat = _colorInstanceRef$cur3.saturation,
      val = _colorInstanceRef$cur3.value;
    var changeTrigger = "palette-saturation-brightness";
    if (value !== val && saturation !== sat) {
      changeTrigger = "palette-saturation-brightness";
      colorInstanceRef.current.saturation = saturation;
      colorInstanceRef.current.value = value;
    } else if (saturation !== sat) {
      changeTrigger = "palette-saturation";
      colorInstanceRef.current.saturation = saturation;
    } else if (value !== val) {
      changeTrigger = "palette-brightness";
      colorInstanceRef.current.value = value;
    } else {
      return;
    }
    emitColorChange(changeTrigger);
  };
  var handleHueChange = function handleHueChange(hue) {
    colorInstanceRef.current.hue = hue;
    emitColorChange("palette-hue-bar");
    onPaletteBarChange === null || onPaletteBarChange === void 0 || onPaletteBarChange({
      color: getColorObject(colorInstanceRef.current)
    });
  };
  var handleAlphaChange = function handleAlphaChange(alpha) {
    colorInstanceRef.current.alpha = alpha;
    emitColorChange("palette-alpha-bar");
    onPaletteBarChange === null || onPaletteBarChange === void 0 || onPaletteBarChange({
      color: getColorObject(colorInstanceRef.current)
    });
  };
  var handleGradientChange = function handleGradientChange(_ref2) {
    var key = _ref2.key,
      payload = _ref2.payload;
    var trigger = "palette-saturation-brightness";
    switch (key) {
      case "degree":
        colorInstanceRef.current.gradientDegree = payload;
        trigger = "input";
        break;
      case "selectedId":
        colorInstanceRef.current.gradientSelectedId = payload;
        break;
      case "colors":
        colorInstanceRef.current.gradientColors = payload;
        break;
    }
    emitColorChange(trigger);
  };
  var handleInputChange = function handleInputChange() {
    emitColorChange("input");
  };
  var SwatchesArea = /*#__PURE__*/React.memo(function () {
    var onlySupportGradient = colorModes.length === 1 && colorModes.includes("linear-gradient");
    var recentColors = recentlyUsedColors;
    if (onlySupportGradient && Array.isArray(recentColors)) {
      recentColors = recentColors.filter(function (color) {
        return Color.isGradientColor(color);
      });
    }
    var showUsedColors = Array.isArray(recentColors) || recentColors === true;
    var systemColors = swatchColors;
    if (systemColors === void 0) {
      systemColors = _toConsumableArray(DEFAULT_SYSTEM_SWATCH_COLORS);
    }
    if (onlySupportGradient) {
      var _systemColors;
      systemColors = (_systemColors = systemColors) === null || _systemColors === void 0 ? void 0 : _systemColors.filter(function (color) {
        return Color.isGradientColor(color);
      });
    }
    var showSystemColors = Array.isArray(systemColors);
    var handleSetColor = function handleSetColor(value, trigger) {
      var newMode = getModeByColor(value);
      setMode(newMode);
      colorInstanceRef.current.isGradient = newMode === "linear-gradient";
      updateColor(value);
      emitColorChange(trigger);
    };
    if (!showSystemColors && !showUsedColors) return null;
    return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("div", {
      className: "".concat(baseClassName, "__swatches-wrap")
    }, showUsedColors && /* @__PURE__ */React.createElement(SwatchesPanel, _objectSpread(_objectSpread({}, baseProps), {}, {
      title: t(local.recentColorTitle),
      editable: true,
      handleAddColor: addRecentlyUsedColor,
      colors: recentColors,
      onSetColor: function onSetColor(color) {
        return handleSetColor(color, "recent");
      },
      onChange: handleRecentlyUsedColorsChange
    })), showSystemColors && /* @__PURE__ */React.createElement(SwatchesPanel, _objectSpread(_objectSpread({}, baseProps), {}, {
      title: t(local.swatchColorTitle),
      colors: systemColors,
      onSetColor: function onSetColor(color) {
        return handleSetColor(color, "preset");
      }
    }))));
  });
  return /* @__PURE__ */React.createElement("div", {
    className: classNames("".concat(baseClassName, "__panel"), disabled ? STATUS.disabled : false, className),
    onClick: function onClick(e) {
      return e.stopPropagation();
    },
    style: _objectSpread({}, style),
    ref: ref
  }, /* @__PURE__ */React.createElement(PanelHeader, {
    baseClassName: baseClassName,
    mode: mode,
    colorModes: colorModes,
    onModeChange: handleModeChange
  }), /* @__PURE__ */React.createElement("div", {
    className: "".concat(baseClassName, "__body")
  }, isGradient && /* @__PURE__ */React.createElement(LinearGradient, _objectSpread(_objectSpread({}, baseProps), {}, {
    enableMultipleGradient: enableMultipleGradient,
    onChange: handleGradientChange
  })), /* @__PURE__ */React.createElement(SaturationPanel, _objectSpread(_objectSpread({}, baseProps), {}, {
    onChange: handleSatAndValueChange
  })), /* @__PURE__ */React.createElement("div", {
    className: "".concat(baseClassName, "__sliders-wrapper")
  }, /* @__PURE__ */React.createElement("div", {
    className: "".concat(baseClassName, "__sliders")
  }, /* @__PURE__ */React.createElement(HueSlider, _objectSpread(_objectSpread({}, baseProps), {}, {
    onChange: handleHueChange
  })), enableAlpha && /* @__PURE__ */React.createElement(AlphaSlider, _objectSpread(_objectSpread({}, baseProps), {}, {
    onChange: handleAlphaChange
  }))), showPrimaryColorPreview ? /* @__PURE__ */React.createElement("div", {
    className: classNames(["".concat(baseClassName, "__sliders-preview"), "".concat(baseClassName, "--bg-alpha")])
  }, /* @__PURE__ */React.createElement("span", {
    className: "".concat(baseClassName, "__sliders-preview-inner"),
    style: {
      background: isGradient ? colorInstanceRef.current.linearGradient : colorInstanceRef.current.rgba
    }
  })) : null), /* @__PURE__ */React.createElement(FormatPanel, _objectSpread(_objectSpread(_objectSpread({}, props), baseProps), {}, {
    format: formatRef.current,
    onInputChange: handleInputChange
  })), /* @__PURE__ */React.createElement(SwatchesArea, null)));
});
var ColorPanel = /*#__PURE__*/React.memo(Panel);

export { ColorPanel as default };
//# sourceMappingURL=index.js.map