tdesign-react
Version:
TDesign Component for React
112 lines (108 loc) • 4.3 kB
JavaScript
/**
* tdesign v1.16.2
* (c) 2025 tdesign
* @license MIT
*/
import React from 'react';
import classNames from 'classnames';
import { DeleteIcon, AddIcon } from 'tdesign-icons-react';
import { C as Color } from '../../../_chunks/dep-28ed5864.js';
import useGlobalIcon from '../../../hooks/useGlobalIcon.js';
import useCommonClassName from '../../../hooks/useCommonClassName.js';
import '../../../_chunks/dep-10d5731f.js';
import '../../../_chunks/dep-74a10cfb.js';
import '../../../_chunks/dep-8de6c984.js';
import '../../../_chunks/dep-d67deb2c.js';
import '../../../_chunks/dep-8abcbcbc.js';
import '../../../_chunks/dep-5af45ced.js';
import '../../../_chunks/dep-8def4f8a.js';
import 'lodash-es';
import '../../../hooks/useConfig.js';
import '../../../config-provider/ConfigContext.js';
import '../../../locale/zh_CN.js';
import '../../../_chunks/dep-751cada9.js';
import 'dayjs';
import '../../../_chunks/dep-37c4dbb1.js';
var Swatches = function Swatches(props) {
var baseClassName = props.baseClassName,
_props$colors = props.colors,
colors = _props$colors === void 0 ? [] : _props$colors,
_props$editable = props.editable,
editable = _props$editable === void 0 ? false : _props$editable,
title = props.title,
onChange = props.onChange,
disabled = props.disabled,
onSetColor = props.onSetColor,
handleAddColor = props.handleAddColor;
var _useGlobalIcon = useGlobalIcon({
DeleteIcon: DeleteIcon,
AddIcon: AddIcon
}),
DeleteIcon$1 = _useGlobalIcon.DeleteIcon,
AddIcon$1 = _useGlobalIcon.AddIcon;
var swatchesClass = "".concat(baseClassName, "__swatches");
var _useCommonClassName = useCommonClassName(),
statusClassNames = _useCommonClassName.STATUS;
var isEqualCurrentColor = function isEqualCurrentColor(color) {
return Color.compare(color, props.color.css);
};
var selectedColorIndex = function selectedColorIndex() {
return colors.findIndex(function (color) {
return isEqualCurrentColor(color);
});
};
var handleRemoveColor = function handleRemoveColor() {
var selectedIndex = selectedColorIndex();
if (selectedIndex > -1) {
var newColors = colors.filter(function (item, index) {
return index !== selectedIndex;
});
onChange(newColors);
}
};
var handleClick = function handleClick(color) {
return onSetColor(color);
};
return /* @__PURE__ */React.createElement("div", {
className: swatchesClass
}, title ? /* @__PURE__ */React.createElement("h3", {
className: "".concat(swatchesClass, "--title")
}, /* @__PURE__ */React.createElement("span", null, title), editable && /* @__PURE__ */React.createElement("div", {
className: "".concat(swatchesClass, "--actions")
}, /* @__PURE__ */React.createElement("span", {
role: "button",
className: "".concat(baseClassName, "__icon"),
onClick: function onClick() {
return handleAddColor();
}
}, /* @__PURE__ */React.createElement(AddIcon$1, null)), colors.length > 0 ? /* @__PURE__ */React.createElement("span", {
role: "button",
className: "".concat(baseClassName, "__icon"),
onClick: function onClick() {
return handleRemoveColor();
}
}, /* @__PURE__ */React.createElement(DeleteIcon$1, null)) : null)) : /* @__PURE__ */React.createElement(React.Fragment, null), /* @__PURE__ */React.createElement("ul", {
className: classNames("".concat(swatchesClass, "--items"), "narrow-scrollbar")
}, colors.map(function (color) {
return /* @__PURE__ */React.createElement("li", {
className: classNames("".concat(swatchesClass, "--item"), isEqualCurrentColor(color) && editable ? statusClassNames.active : ""),
key: color,
onClick: function onClick() {
if (disabled) {
return;
}
handleClick(color);
}
}, /* @__PURE__ */React.createElement("div", {
className: classNames("".concat(swatchesClass, "--item__color"), "".concat(baseClassName, "--bg-alpha"))
}, /* @__PURE__ */React.createElement("span", {
className: "".concat(swatchesClass, "--item__inner"),
style: {
background: color
}
})));
})));
};
var SwatchesPanel = /*#__PURE__*/React.memo(Swatches);
export { SwatchesPanel as default };
//# sourceMappingURL=swatches.js.map