tdesign-react
Version:
TDesign Component for React
145 lines (137 loc) • 6.22 kB
JavaScript
/**
* tdesign v1.16.6
* (c) 2026 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var classNames = require('classnames');
var tdesignIconsReact = require('tdesign-icons-react');
var color = require('../../../_chunks/dep-086b36f5.js');
var hooks_useGlobalIcon = require('../../../hooks/useGlobalIcon.js');
var hooks_useCommonClassName = require('../../../hooks/useCommonClassName.js');
require('../../../_chunks/dep-3281986a.js');
require('../../../_chunks/dep-54373955.js');
require('../../../_chunks/dep-ef5bfcf1.js');
require('../../../_chunks/dep-5eada4cb.js');
require('../../../_chunks/dep-1f6c39e3.js');
require('../../../_chunks/dep-90a93885.js');
require('../../../_chunks/dep-79967866.js');
require('../../../_chunks/dep-0b355e35.js');
require('../../../_chunks/dep-202d6c73.js');
require('../../../_chunks/dep-615c149d.js');
require('../../../_chunks/dep-a8d5081a.js');
require('../../../_chunks/dep-0173c82c.js');
require('../../../_chunks/dep-2bd15884.js');
require('../../../hooks/useConfig.js');
require('../../../config-provider/ConfigContext.js');
require('../../../_chunks/dep-875a5344.js');
require('../../../_chunks/dep-20f09a63.js');
require('dayjs');
require('../../../_chunks/dep-e691746e.js');
require('../../../_chunks/dep-9d3b1a05.js');
require('../../../_chunks/dep-1f8c969d.js');
require('../../../_chunks/dep-403f5edf.js');
require('../../../_chunks/dep-d24b94bc.js');
require('../../../_chunks/dep-6478e7e3.js');
require('../../../_chunks/dep-c9025587.js');
require('../../../_chunks/dep-8663a5c9.js');
require('../../../_chunks/dep-50349518.js');
require('../../../_chunks/dep-8c9795f9.js');
require('../../../_chunks/dep-723e29d6.js');
require('../../../_chunks/dep-0bd8b970.js');
require('../../../_chunks/dep-73ef2133.js');
require('../../../_chunks/dep-cae1e5aa.js');
require('../../../_chunks/dep-0b97e212.js');
require('../../../_chunks/dep-0652d2a6.js');
require('../../../_chunks/dep-1a7ce20e.js');
require('../../../_chunks/dep-116af952.js');
require('../../../_chunks/dep-f6a777ad.js');
require('../../../_chunks/dep-ff301423.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
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 = hooks_useGlobalIcon["default"]({
DeleteIcon: tdesignIconsReact.DeleteIcon,
AddIcon: tdesignIconsReact.AddIcon
}),
DeleteIcon = _useGlobalIcon.DeleteIcon,
AddIcon = _useGlobalIcon.AddIcon;
var swatchesClass = "".concat(baseClassName, "__swatches");
var _useCommonClassName = hooks_useCommonClassName["default"](),
statusClassNames = _useCommonClassName.STATUS;
var isEqualCurrentColor = function isEqualCurrentColor(color$1) {
return color.Color.compare(color$1, 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__default["default"].createElement("div", {
className: swatchesClass
}, title ? /* @__PURE__ */React__default["default"].createElement("h3", {
className: "".concat(swatchesClass, "--title")
}, /* @__PURE__ */React__default["default"].createElement("span", null, title), editable && /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(swatchesClass, "--actions")
}, /* @__PURE__ */React__default["default"].createElement("span", {
role: "button",
className: "".concat(baseClassName, "__icon"),
onClick: function onClick() {
return handleAddColor();
}
}, /* @__PURE__ */React__default["default"].createElement(AddIcon, null)), colors.length > 0 ? /* @__PURE__ */React__default["default"].createElement("span", {
role: "button",
className: "".concat(baseClassName, "__icon"),
onClick: function onClick() {
return handleRemoveColor();
}
}, /* @__PURE__ */React__default["default"].createElement(DeleteIcon, null)) : null)) : /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null), /* @__PURE__ */React__default["default"].createElement("ul", {
className: classNames__default["default"]("".concat(swatchesClass, "--items"), "narrow-scrollbar")
}, colors.map(function (color) {
return /* @__PURE__ */React__default["default"].createElement("li", {
className: classNames__default["default"]("".concat(swatchesClass, "--item"), isEqualCurrentColor(color) && editable ? statusClassNames.active : ""),
key: color,
onClick: function onClick() {
if (disabled) {
return;
}
handleClick(color);
}
}, /* @__PURE__ */React__default["default"].createElement("div", {
className: classNames__default["default"]("".concat(swatchesClass, "--item__color"), "".concat(baseClassName, "--bg-alpha"))
}, /* @__PURE__ */React__default["default"].createElement("span", {
className: "".concat(swatchesClass, "--item__inner"),
style: {
background: color
}
})));
})));
};
var SwatchesPanel = /*#__PURE__*/React__default["default"].memo(Swatches);
exports["default"] = SwatchesPanel;
//# sourceMappingURL=swatches.js.map