tdesign-react
Version:
TDesign Component for React
179 lines (174 loc) • 6.59 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _defineProperty } from './dep-cb0a3966.js';
import React, { useRef, useEffect } from 'react';
import { throttle } from 'lodash-es';
import { C as Color } from './dep-e0e49a93.js';
import { _ as _toConsumableArray } from './dep-87d110df.js';
import { A as ALPHA_FORMAT_MAP, F as FORMATS, C as COLOR_FORMAT_INPUTS } from './dep-3ac1dd01.js';
import { Input } from '../input/index.js';
import { InputNumber } from '../input-number/index.js';
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-7b1ffd7e.js.map