tdesign-react
Version:
TDesign Component for React
434 lines (430 loc) • 19.1 kB
JavaScript
/**
* tdesign v1.11.6
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _defineProperty } from '../../../_chunks/dep-fb209a0c.js';
import { _ as _toConsumableArray } from '../../../_chunks/dep-7a114245.js';
import { _ as _slicedToArray } from '../../../_chunks/dep-889449c8.js';
import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
import classNames from 'classnames';
import tinyColor from 'tinycolor2';
import { C as Color, g as getColorObject } from '../../../_chunks/dep-6967e9a4.js';
import { D as DEFAULT_LINEAR_GRADIENT, a as DEFAULT_COLOR, b as DEFAULT_SYSTEM_SWATCH_COLORS, T as TD_COLOR_USED_COLORS_MAX_SIZE } from '../../../_chunks/dep-4ba7829f.js';
import useCommonClassName from '../../../hooks/useCommonClassName.js';
import useControlled from '../../../hooks/useControlled.js';
import { useLocaleReceiver } from '../../../locale/LocalReceiver.js';
import useClassNames from '../../hooks/useClassNames.js';
import PanelHeader from './header.js';
import { colorPickerDefaultProps } from '../../defaultProps.js';
import LinearGradient from './linear-gradient.js';
import SaturationPanel from './saturation.js';
import HUESlider from './hue.js';
import AlphaSlider from './alpha.js';
import FormatPanel from './format/index.js';
import SwatchesPanel from './swatches.js';
import '../../../_chunks/dep-9a3c539e.js';
import '../../../_chunks/dep-901cf2d8.js';
import '../../../_chunks/dep-404a8dbf.js';
import 'lodash-es';
import '../../../hooks/useConfig.js';
import '../../../config-provider/ConfigContext.js';
import '../../../_chunks/dep-14e7d402.js';
import '../../../_chunks/dep-72ba05e7.js';
import 'dayjs';
import '../../../_util/noop.js';
import '../../../config-provider/ConfigProvider.js';
import '../../../radio/index.js';
import '../../../_chunks/dep-39ceacc5.js';
import '../../../_util/forwardRefWithStatics.js';
import 'hoist-non-react-statics';
import '../../../common/Check.js';
import '../../../_chunks/dep-2c6eb8e0.js';
import '../../../_util/helper.js';
import '../../../_chunks/dep-4382179f.js';
import '../../../radio/defaultProps.js';
import '../../../hooks/useDefaultProps.js';
import '../../../radio/useKeyboard.js';
import '../../../_chunks/dep-97a8ef1f.js';
import '../../../_util/dom.js';
import 'raf';
import '../../../_util/easing.js';
import '../../../input-number/index.js';
import '../../../input-number/InputNumber.js';
import 'tdesign-icons-react';
import '../../../input/index.js';
import '../../../input/Input.js';
import '../../../hooks/useLayoutEffect.js';
import '../../../hooks/useGlobalIcon.js';
import '../../../input/InputGroup.js';
import '../../../input/defaultProps.js';
import '../../../_util/parseTNode.js';
import '../../../_chunks/dep-fad5d621.js';
import '../../../input/useLengthLimit.js';
import '../../../_chunks/dep-3bd4dc4e.js';
import '../../../button/index.js';
import '../../../button/Button.js';
import '../../../hooks/useDomRefCallback.js';
import '../../../hooks/useRipple.js';
import '../../../hooks/useAnimation.js';
import '../../../_util/setStyle.js';
import '../../../loading/index.js';
import '../../../loading/Loading.js';
import '../../../common/Portal.js';
import 'react-dom';
import '../../../_chunks/dep-6a220fbc.js';
import '../../../loading/defaultProps.js';
import '../../../loading/plugin.js';
import '../../../_util/react-render.js';
import '../../../_chunks/dep-6625929b.js';
import '../../../common/PluginContainer.js';
import '../../../button/defaultProps.js';
import '../../../input-number/useInputNumber.js';
import '../../../input-number/defaultProps.js';
import '../../../hooks/useDrag.js';
import './slider.js';
import '../../hooks/useStyles.js';
import '../../../select/index.js';
import '../../../select/base/Select.js';
import '../../../select/util/helper.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 'react-popper';
import '../../../popup/hooks/useTrigger.js';
import 'react-is';
import '../../../popup/utils/ref.js';
import '../../../_util/composeRefs.js';
import '../../../popup/utils/transition.js';
import '../../../hooks/useMutationObserver.js';
import '../../../hooks/useLatest.js';
import '../../../hooks/useWindowSize.js';
import '../../../popup/defaultProps.js';
import '../../../hooks/useAttach.js';
import '../../../popup/PopupPlugin.js';
import '@popperjs/core';
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 '../../../tag/defaultProps.js';
import '../../../tag/CheckTag.js';
import '../../../tag/CheckTagGroup.js';
import '../../../tag-input/useHover.js';
import '../../../tag-input/defaultProps.js';
import '../../../select-input/useOverlayInnerStyle.js';
import '../../../select-input/defaultProps.js';
import '../../../select/base/PopupContent.js';
import '../../../select/hooks/usePanelVirtualScroll.js';
import '../../../hooks/useVirtualScroll.js';
import '../../../hooks/useResizeObserver.js';
import '../../../select/hooks/useOptions.js';
import './format/inputs.js';
import './format/config.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 mathRound = Math.round;
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 value = props.value,
disabled = props.disabled,
onChange = props.onChange,
_props$enableAlpha = props.enableAlpha,
enableAlpha = _props$enableAlpha === void 0 ? false : _props$enableAlpha,
format = props.format,
onPaletteBarChange = props.onPaletteBarChange,
swatchColors = props.swatchColors,
className = props.className,
_props$style = props.style,
style = _props$style === void 0 ? {} : _props$style,
togglePopup = props.togglePopup,
closeBtn = props.closeBtn,
_props$colorModes = props.colorModes,
colorModes = _props$colorModes === void 0 ? ["linear-gradient", "monochrome"] : _props$colorModes,
_props$showPrimaryCol = props.showPrimaryColorPreview,
showPrimaryColorPreview = _props$showPrimaryCol === void 0 ? true : _props$showPrimaryCol,
onRecentColorsChange = props.onRecentColorsChange;
var _useControlled = useControlled(props, "value", onChange),
_useControlled2 = _slicedToArray(_useControlled, 2),
innerValue = _useControlled2[0],
setInnerValue = _useControlled2[1];
var _useState = useState(function () {
return (colorModes === null || colorModes === void 0 ? void 0 : colorModes.length) === 1 ? colorModes[0] : "monochrome";
}),
_useState2 = _slicedToArray(_useState, 2),
mode = _useState2[0],
setMode = _useState2[1];
var _useState3 = useState(0),
_useState4 = _slicedToArray(_useState3, 2),
updateId = _useState4[0],
setUpdateId = _useState4[1];
var isGradient = mode === "linear-gradient";
var defaultEmptyColor = isGradient ? DEFAULT_LINEAR_GRADIENT : DEFAULT_COLOR;
var _useControlled3 = useControlled(props, "recentColors", onRecentColorsChange, {
defaultRecentColors: colorPickerDefaultProps.recentColors
}),
_useControlled4 = _slicedToArray(_useControlled3, 2),
recentlyUsedColors = _useControlled4[0],
setRecentlyUsedColors = _useControlled4[1];
var colorInstanceRef = useRef(new Color(innerValue || defaultEmptyColor));
var getModeByColor = colorInstanceRef.current.isGradient ? "linear-gradient" : "monochrome";
var formatRef = useRef(colorInstanceRef.current.isGradient ? "CSS" : format !== null && format !== void 0 ? format : "RGB");
var update = useCallback(function (value2) {
colorInstanceRef.current.update(value2);
setUpdateId(updateId + 1);
}, [updateId]);
var formatValue = useCallback(function () {
if (colorInstanceRef.current.isGradient) {
return colorInstanceRef.current.linearGradient;
}
var finalFormat = format === "HEX" && enableAlpha ? "HEX8" : format;
return colorInstanceRef.current.getFormatsColorMap()[finalFormat] || colorInstanceRef.current.css;
}, [format, enableAlpha]);
var emitColorChange = useCallback(function (trigger) {
var value2 = formatValue();
setInnerValue(value2, {
color: getColorObject(colorInstanceRef.current),
trigger: trigger || "palette-saturation-brightness"
});
update(value2);
}, [formatValue, setInnerValue, update]);
useEffect(function () {
if (typeof value === "undefined" || mode === "linear-gradient") {
return;
}
var newUniqColor = tinyColor(value).toRgb();
var r = newUniqColor.r,
g = newUniqColor.g,
b = newUniqColor.b,
a = newUniqColor.a;
var newUniqRgbaColor = "rgba(".concat(mathRound(r), ", ").concat(mathRound(g), ", ").concat(mathRound(b), ", ").concat(a, ")");
var newColor = new Color(value);
var formattedColor = newUniqRgbaColor || DEFAULT_COLOR;
var currentColor = colorInstanceRef.current.rgba;
var isInRightMode = mode === "monochrome" && !newColor.isGradient;
if (formattedColor !== currentColor && isInRightMode) {
update(value);
setMode(newColor.isGradient ? "linear-gradient" : "monochrome");
}
}, [value, formatValue, setInnerValue, mode, update]);
useEffect(function () {
if (colorModes.length === 1) {
setMode(colorModes[0]);
} else {
setMode(getModeByColor);
}
}, [colorModes, getModeByColor]);
var baseProps = {
color: colorInstanceRef.current,
disabled: disabled,
baseClassName: baseClassName
};
var handleModeChange = function handleModeChange(value2) {
setMode(value2);
var _colorInstanceRef$cur = colorInstanceRef.current,
rgba = _colorInstanceRef$cur.rgba,
gradientColors = _colorInstanceRef$cur.gradientColors,
linearGradient = _colorInstanceRef$cur.linearGradient;
if (value2 === "linear-gradient") {
colorInstanceRef.current = new Color(gradientColors.length > 0 ? linearGradient : DEFAULT_LINEAR_GRADIENT);
} else {
colorInstanceRef.current = new Color(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 handleSaturationChange = function handleSaturationChange(_ref) {
var saturation = _ref.saturation,
value2 = _ref.value;
var _colorInstanceRef$cur3 = colorInstanceRef.current,
sat = _colorInstanceRef$cur3.saturation,
val = _colorInstanceRef$cur3.value;
var changeTrigger = "palette-saturation-brightness";
if (value2 !== val && saturation !== sat) {
changeTrigger = "palette-saturation-brightness";
colorInstanceRef.current.saturation = saturation;
colorInstanceRef.current.value = value2;
} else if (saturation !== sat) {
changeTrigger = "palette-saturation";
colorInstanceRef.current.saturation = saturation;
} else if (value2 !== val) {
changeTrigger = "palette-brightness";
colorInstanceRef.current.value = value2;
} 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;
setUpdateId(function (prevId) {
return prevId + 1;
});
break;
case "colors":
colorInstanceRef.current.gradientColors = payload;
break;
}
emitColorChange(trigger);
};
var handleFormatModeChange = useCallback(function (format2) {
return formatRef.current = format2;
}, []);
var handleInputChange = useCallback(function (input, alpha) {
update(input);
colorInstanceRef.current.alpha = alpha;
emitColorChange("input");
}, [emitColorChange, update]);
var SwatchesArea = /*#__PURE__*/React.memo(function () {
var _systemColors;
var showUsedColors = recentlyUsedColors !== null && recentlyUsedColors !== false;
var systemColors = swatchColors;
if (systemColors === void 0) {
systemColors = _toConsumableArray(DEFAULT_SYSTEM_SWATCH_COLORS);
}
var showSystemColors = ((_systemColors = systemColors) === null || _systemColors === void 0 ? void 0 : _systemColors.length) > 0;
if (!showSystemColors && !showUsedColors) {
return null;
}
var handleSetColor = function handleSetColor(value2, trigger) {
var isGradientValue = Color.isGradientColor(value2);
var color = colorInstanceRef.current;
if (isGradientValue) {
if (colorModes.includes("linear-gradient")) {
setMode("linear-gradient");
color.update(value2);
color.updateCurrentGradientColor();
} else {
console.warn("linear-gradient is not supported in this mode");
}
} else if (mode === "linear-gradient") {
setMode("monochrome");
color.update(value2);
} else {
color.update(value2);
}
emitColorChange(trigger);
};
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: recentlyUsedColors,
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,
closeBtn: closeBtn,
togglePopup: togglePopup,
onModeChange: handleModeChange
}), /* @__PURE__ */React.createElement("div", {
className: "".concat(baseClassName, "__body")
}, isGradient && /* @__PURE__ */React.createElement(LinearGradient, _objectSpread(_objectSpread({}, baseProps), {}, {
onChange: handleGradientChange
})), /* @__PURE__ */React.createElement(SaturationPanel, _objectSpread(_objectSpread({}, baseProps), {}, {
onChange: handleSaturationChange
})), /* @__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,
onModeChange: handleFormatModeChange,
onInputChange: handleInputChange
})), /* @__PURE__ */React.createElement(SwatchesArea, null)));
});
var ColorPanel = /*#__PURE__*/React.memo(Panel);
export { ColorPanel as default };
//# sourceMappingURL=index.js.map