tdesign-react
Version:
TDesign Component for React
252 lines (246 loc) • 10.4 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _defineProperty } from './dep-8618a2f1.js';
import React, { useRef, useEffect } from 'react';
import { throttle } from 'lodash-es';
import { C as Color } from './dep-7c4bfeee.js';
import { A as ALPHA_FORMAT_MAP, F as FORMATS, C as COLOR_FORMAT_INPUTS } from './dep-aeb8bcf5.js';
import { _ as _classCallCheck, a as _createClass } from './dep-c8ec9532.js';
import { _ as _toConsumableArray } from './dep-132961ab.js';
import { Input } from '../input/index.js';
import { InputNumber } from '../input-number/index.js';
function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
var defaultsOptions = {
start: function start(coordinate, event) {},
drag: function drag(coordinate, event) {},
end: function end(coordinate, event) {}
};
var _Draggable_brand = /*#__PURE__*/new WeakSet();
var Draggable = /*#__PURE__*/function () {
function Draggable(el, options) {
_classCallCheck(this, Draggable);
_classPrivateMethodInitSpec(this, _Draggable_brand);
_defineProperty(this, "dragging", false);
this.$el = el;
this.props = _objectSpread$1(_objectSpread$1({}, defaultsOptions), options);
this.handles = {
start: _assertClassBrand(_Draggable_brand, this, _dragStart).bind(this),
drag: _assertClassBrand(_Draggable_brand, this, _drag).bind(this),
end: _assertClassBrand(_Draggable_brand, this, _dragEnd).bind(this)
};
this.$el.addEventListener("mousedown", this.handles.start, false);
}
return _createClass(Draggable, [{
key: "destroy",
value: function destroy() {
this.$el.removeEventListener("mousedown", this.handles.start, false);
window.removeEventListener("mousemove", this.handles.drag, false);
window.removeEventListener("mouseup", this.handles.end, false);
window.removeEventListener("contextmenu", this.handles.end, false);
}
}]);
}();
function _dragStart(event) {
if (this.dragging) {
return;
}
window.addEventListener("mousemove", this.handles.drag, false);
window.addEventListener("mouseup", this.handles.end, false);
window.addEventListener("contextmenu", this.handles.end, false);
this.dragging = true;
this.props.start(_assertClassBrand(_Draggable_brand, this, _getCoordinate).call(this, event), event);
}
function _drag(event) {
if (!this.dragging) {
return;
}
this.props.drag(_assertClassBrand(_Draggable_brand, this, _getCoordinate).call(this, event), event);
}
function _dragEnd(event) {
var _this = this;
setTimeout(function () {
_this.dragging = false;
_this.props.end(_assertClassBrand(_Draggable_brand, _this, _getCoordinate).call(_this, event), event);
}, 0);
window.removeEventListener("mousemove", this.handles.drag, false);
window.removeEventListener("mouseup", this.handles.end, false);
window.removeEventListener("contextmenu", this.handles.end, false);
}
function _getCoordinate(event) {
var rect = this.$el.getBoundingClientRect();
var mouseEvent = event;
var left = mouseEvent.clientX - rect.left;
var top = mouseEvent.clientY - rect.top;
return {
y: Math.min(Math.max(0, top), rect.height),
x: Math.min(Math.max(0, left), rect.width)
};
}
var initColorFormat = function initColorFormat(format, enableAlpha) {
if (enableAlpha && format in ALPHA_FORMAT_MAP) {
return format in ALPHA_FORMAT_MAP ? ALPHA_FORMAT_MAP[format] : format;
}
return format;
};
var getColorFormatMap = function getColorFormatMap(color, type) {
if (type === "encode") {
return {
HSV: color.getHsva(),
HSVA: color.getHsva(),
HSL: color.getHsla(),
HSLA: color.getHsla(),
RGB: color.getRgba(),
RGBA: color.getRgba(),
CMYK: color.getCmyk(),
CSS: {
css: color.css
},
HEX: {
hex: color.hex
},
HEX8: {
hex: color.hex8
}
};
}
return color.getFormatsColorMap();
};
var getColorFormatOptions = function getColorFormatOptions(enableAlpha) {
return enableAlpha ? FORMATS.map(function (item) {
return item in ALPHA_FORMAT_MAP ? ALPHA_FORMAT_MAP[item] : item;
}) : FORMATS;
};
var getColorFormatInputs = function getColorFormatInputs() {
var format = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "RGB";
var enableAlpha = arguments.length > 1 ? arguments[1] : undefined;
var finalFormat;
if (enableAlpha) {
finalFormat = Object.keys(ALPHA_FORMAT_MAP).find(function (key) {
return key in ALPHA_FORMAT_MAP && ALPHA_FORMAT_MAP[key] === format;
}) || format;
} else {
finalFormat = format;
}
if (!COLOR_FORMAT_INPUTS[finalFormat]) return [];
var configs = _toConsumableArray(COLOR_FORMAT_INPUTS[finalFormat]);
if (enableAlpha && format !== "CMYK") {
configs.push({
type: "inputNumber",
key: "a",
min: 0,
max: 100,
format: function format(value) {
return "".concat(value, "%");
},
flex: 1.15
});
}
return configs;
};
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 FormatInputs = function FormatInputs(props) {
var format = props.format,
enableAlpha = props.enableAlpha,
inputProps = props.inputProps,
disabled = props.disabled,
onInputChange = props.onInputChange,
color = props.color;
var modelValueRef = useRef({});
var lastModelValue = useRef({});
var inputKey = useRef(0);
var updateModelValue = function updateModelValue() {
var value = getColorFormatMap(color, "encode")[format];
if (!value) return;
if (enableAlpha) {
value.a = Math.round(color.alpha * 100);
}
var changedFormatValue = {};
Object.keys(value).forEach(function (key) {
if (value[key] !== modelValueRef.current[key]) {
changedFormatValue[key] = value[key];
}
lastModelValue.current[key] = value[key];
});
if (Object.keys(changedFormatValue).length > 0) {
modelValueRef.current = value;
}
};
var handleInputChange = function handleInputChange(key, v, max) {
inputKey.current = performance.now();
if (v.toString().trim() === "") {
var lastValue = lastModelValue.current[key];
color.update(lastValue);
onInputChange();
return;
}
if (!v || v === lastModelValue.current[key] || Number(v) < 0 || Number(v) > max) return;
lastModelValue.current[key] = v;
var newFormatValue = _objectSpread(_objectSpread({}, modelValueRef.current), {}, _defineProperty({}, key, v));
modelValueRef.current = newFormatValue;
if (key === "a") {
color.alpha = v / 100;
} else if (key === "hex" || key === "css") {
color.update(v);
} else {
color.update(Color.object2color(newFormatValue, format));
}
onInputChange();
};
updateModelValue();
useEffect(function () {
var throttleUpdate = throttle(updateModelValue, 100);
throttleUpdate();
return function () {
return throttleUpdate.cancel();
};
}, [color.saturation, color.hue, color.value, color.alpha, format]);
return /* @__PURE__ */React.createElement("div", {
className: "input-group"
}, getColorFormatInputs(format, enableAlpha).map(function (config) {
var currentValue = modelValueRef.current[config.key];
var commonProps = _objectSpread(_objectSpread({}, inputProps), {}, {
disabled: disabled,
title: currentValue,
align: "center",
size: "small",
onBlur: function onBlur(v) {
return handleInputChange(config.key, v, config.max);
},
onEnter: function onEnter(v) {
return handleInputChange(config.key, v, config.max);
}
});
return /* @__PURE__ */React.createElement("div", {
className: "input-group__item",
key: config.key,
style: {
flex: config.flex || 1
}
}, config.type === "input" ? /* @__PURE__ */React.createElement(Input, _objectSpread(_objectSpread({}, commonProps), {}, {
defaultValue: currentValue,
key: "".concat(inputKey.current, "-").concat(currentValue),
maxlength: format === "HEX" ? 9 : void 0
})) : /* @__PURE__ */React.createElement(InputNumber, _objectSpread(_objectSpread({}, commonProps), {}, {
min: config.min,
max: config.max,
format: config.format,
step: 1,
value: currentValue,
onChange: function onChange(v) {
return handleInputChange(config.key, v || config.min, config.max);
},
theme: "normal"
})));
}));
};
var FormatInputs$1 = /*#__PURE__*/React.memo(FormatInputs);
export { FormatInputs$1 as F, getColorFormatOptions as g, initColorFormat as i };
//# sourceMappingURL=dep-d7ba3416.js.map