tdesign-react
Version:
TDesign Component for React
187 lines (179 loc) • 7.12 kB
JavaScript
/**
* tdesign v1.16.2
* (c) 2025 tdesign
* @license MIT
*/
;
var defineProperty = require('./dep-0fe55884.js');
var React = require('react');
var color = require('./dep-8d0229b3.js');
var toConsumableArray = require('./dep-a7fe58de.js');
var constants = require('./dep-2dde8b60.js');
var input_index = require('../input/index.js');
var inputNumber_index = require('../input-number/index.js');
var throttle = require('./dep-495688c7.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var initColorFormat = function initColorFormat(format, enableAlpha) {
if (enableAlpha && format in constants.ALPHA_FORMAT_MAP) {
return format in constants.ALPHA_FORMAT_MAP ? constants.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 ? constants.FORMATS.map(function (item) {
return item in constants.ALPHA_FORMAT_MAP ? constants.ALPHA_FORMAT_MAP[item] : item;
}) : constants.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(constants.ALPHA_FORMAT_MAP).find(function (key) {
return key in constants.ALPHA_FORMAT_MAP && constants.ALPHA_FORMAT_MAP[key] === format;
}) || format;
} else {
finalFormat = format;
}
if (!constants.COLOR_FORMAT_INPUTS[finalFormat]) return [];
var configs = toConsumableArray._toConsumableArray(constants.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._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$1 = props.color;
var modelValueRef = React.useRef({});
var lastModelValue = React.useRef({});
var inputKey = React.useRef(0);
var updateModelValue = function updateModelValue() {
var value = getColorFormatMap(color$1, "encode")[format];
if (!value) return;
if (enableAlpha) {
value.a = Math.round(color$1.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$1.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._defineProperty({}, key, v));
modelValueRef.current = newFormatValue;
if (key === "a") {
color$1.alpha = v / 100;
} else if (key === "hex" || key === "css") {
color$1.update(v);
} else {
color$1.update(color.Color.object2color(newFormatValue, format));
}
onInputChange();
};
updateModelValue();
React.useEffect(function () {
var throttleUpdate = throttle.throttle(updateModelValue, 100);
throttleUpdate();
return function () {
return throttleUpdate.cancel();
};
}, [color$1.saturation, color$1.hue, color$1.value, color$1.alpha, format]);
return /* @__PURE__ */React__default["default"].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__default["default"].createElement("div", {
className: "input-group__item",
key: config.key,
style: {
flex: config.flex || 1
}
}, config.type === "input" ? /* @__PURE__ */React__default["default"].createElement(input_index.Input, _objectSpread(_objectSpread({}, commonProps), {}, {
defaultValue: currentValue,
key: "".concat(inputKey.current, "-").concat(currentValue),
maxlength: format === "HEX" ? 9 : void 0
})) : /* @__PURE__ */React__default["default"].createElement(inputNumber_index.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__default["default"].memo(FormatInputs);
exports.FormatInputs = FormatInputs$1;
exports.getColorFormatOptions = getColorFormatOptions;
exports.initColorFormat = initColorFormat;
//# sourceMappingURL=dep-6179c869.js.map