tdesign-react
Version:
TDesign Component for React
329 lines (320 loc) • 15.1 kB
JavaScript
/**
* tdesign v1.16.2
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var defineProperty = require('../_chunks/dep-0fe55884.js');
var _typeof = require('../_chunks/dep-b325182b.js');
var slicedToArray = require('../_chunks/dep-5cb0d66d.js');
var objectWithoutProperties = require('../_chunks/dep-40583e7c.js');
var React = require('react');
var classNames = require('classnames');
var helper = require('../_chunks/dep-779273e7.js');
var isNull = require('../_chunks/dep-22771603.js');
var _util_noop = require('../_util/noop.js');
var _util_parseTNode = require('../_util/parseTNode.js');
var hooks_useConfig = require('../hooks/useConfig.js');
var hooks_useControlled = require('../hooks/useControlled.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
var hooks_useEventCallback = require('../hooks/useEventCallback.js');
var hooks_useLayoutEffect = require('../hooks/useLayoutEffect.js');
var textarea_defaultProps = require('./defaultProps.js');
require('../_chunks/dep-737b8bd8.js');
require('../_chunks/dep-a7fe58de.js');
require('../_chunks/dep-bb3e9667.js');
require('../_chunks/dep-4ce0670e.js');
require('../_chunks/dep-3448f35f.js');
require('../_chunks/dep-b304bc94.js');
require('../_chunks/dep-bdafd287.js');
require('../_chunks/dep-05f87b98.js');
require('../_chunks/dep-967e785f.js');
require('../_chunks/dep-5c8525ea.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-17dea53e.js');
require('../_chunks/dep-a0cbf081.js');
require('dayjs');
require('../_chunks/dep-481a1ecc.js');
require('../_chunks/dep-474eb386.js');
require('../_chunks/dep-3b256bc0.js');
require('../_chunks/dep-b6a3ada9.js');
require('../_chunks/dep-735cd5b9.js');
require('../_chunks/dep-4d300b8f.js');
require('../_chunks/dep-3332ad6f.js');
require('../_chunks/dep-98783318.js');
require('../_chunks/dep-fc884a8e.js');
require('../_chunks/dep-008b21d4.js');
require('../_chunks/dep-9193eded.js');
require('../_chunks/dep-afe817f9.js');
require('../_chunks/dep-0b70c7ec.js');
require('../_chunks/dep-a1e3e59b.js');
require('../_chunks/dep-24ab8f68.js');
require('../_chunks/dep-753b7d52.js');
require('../_chunks/dep-908ffaed.js');
require('../_chunks/dep-a76ede3e.js');
require('../_chunks/dep-2ad01263.js');
require('../_chunks/dep-7659797a.js');
require('../_chunks/dep-eb2203ae.js');
require('../_chunks/dep-e0735b5f.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 TEXTAREA_STYLE = "\n min-height:0 !important;\n max-height:none !important;\n height:0 !important;\n visibility:hidden !important;\n overflow:hidden !important;\n position:absolute !important;\n z-index:-1000 !important;\n top:0 !important;\n right:0 !important\n";
var hiddenTextarea;
function calcTextareaHeight(targetElement) {
var _hiddenTextarea;
var minRows = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
var maxRows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
if (!hiddenTextarea) {
hiddenTextarea = document.createElement("textarea");
document.body.appendChild(hiddenTextarea);
}
var _calculateNodeSize = helper.calculateNodeSize(targetElement),
paddingSize = _calculateNodeSize.paddingSize,
borderSize = _calculateNodeSize.borderSize,
boxSizing = _calculateNodeSize.boxSizing,
sizingStyle = _calculateNodeSize.sizingStyle;
hiddenTextarea.setAttribute("style", "".concat(sizingStyle, ";").concat(TEXTAREA_STYLE));
hiddenTextarea.value = targetElement.value || targetElement.placeholder || "";
var height = hiddenTextarea.scrollHeight;
var result = {};
var isBorderbox = boxSizing === "border-box";
var isContentbox = boxSizing === "content-box";
if (isBorderbox) {
height += borderSize;
} else if (isContentbox) {
height -= paddingSize;
}
hiddenTextarea.value = "";
var singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
(_hiddenTextarea = hiddenTextarea) === null || _hiddenTextarea === void 0 || (_hiddenTextarea = _hiddenTextarea.parentNode) === null || _hiddenTextarea === void 0 || _hiddenTextarea.removeChild(hiddenTextarea);
hiddenTextarea = null;
var calcHeight = function calcHeight(rows) {
var rowsHeight = singleRowHeight * rows;
if (isBorderbox) {
rowsHeight = rowsHeight + paddingSize + borderSize;
}
return rowsHeight;
};
if (!isNull.isNull(minRows)) {
var minHeight = calcHeight(minRows);
height = Math.max(minHeight, height);
result.minHeight = "".concat(minHeight, "px");
}
if (!isNull.isNull(maxRows)) {
height = Math.min(calcHeight(maxRows), height);
}
result.height = "".concat(height, "px");
return result;
}
var _excluded = ["count", "disabled", "maxlength", "maxcharacter", "className", "autofocus", "style", "onKeydown", "onKeypress", "onKeyup", "autosize", "status", "tips", "allowInputOverMax", "rows"];
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 DEFAULT_TEXTAREA_STYLE = {
height: "auto",
minHeight: "auto"
};
var OMIT_PROPS = ["defaultValue", "readonly"];
var Textarea = /*#__PURE__*/React.forwardRef(function (originalProps, ref) {
var props = hooks_useDefaultProps["default"](originalProps, textarea_defaultProps.textareaDefaultProps);
var count = props.count,
disabled = props.disabled,
maxlength = props.maxlength,
maxcharacter = props.maxcharacter,
className = props.className,
autofocus = props.autofocus,
style = props.style,
_props$onKeydown = props.onKeydown,
onKeydown = _props$onKeydown === void 0 ? _util_noop["default"] : _props$onKeydown,
_props$onKeypress = props.onKeypress,
onKeypress = _props$onKeypress === void 0 ? _util_noop["default"] : _props$onKeypress,
_props$onKeyup = props.onKeyup,
onKeyup = _props$onKeyup === void 0 ? _util_noop["default"] : _props$onKeyup,
autosize = props.autosize,
status = props.status,
tips = props.tips,
allowInputOverMax = props.allowInputOverMax,
rows = props.rows,
otherProps = objectWithoutProperties._objectWithoutProperties(props, _excluded);
var hasMaxcharacter = typeof maxcharacter !== "undefined";
var _useControlled = hooks_useControlled["default"](props, "value", props.onChange),
_useControlled2 = slicedToArray._slicedToArray(_useControlled, 2),
_useControlled2$ = _useControlled2[0],
value = _useControlled2$ === void 0 ? "" : _useControlled2$,
setValue = _useControlled2[1];
var _useState = React.useState(false),
_useState2 = slicedToArray._slicedToArray(_useState, 2),
isFocused = _useState2[0],
setIsFocused = _useState2[1];
var _useState3 = React.useState(false),
_useState4 = slicedToArray._slicedToArray(_useState3, 2),
isOvermax = _useState4[0],
setIsOvermax = _useState4[1];
var _useState5 = React.useState(DEFAULT_TEXTAREA_STYLE),
_useState6 = slicedToArray._slicedToArray(_useState5, 2),
textareaStyle = _useState6[0],
setTextareaStyle = _useState6[1];
var _useState7 = React.useState(""),
_useState8 = slicedToArray._slicedToArray(_useState7, 2),
composingValue = _useState8[0],
setComposingValue = _useState8[1];
var composingRef = React.useRef(false);
var textareaRef = React.useRef(null);
var wrapperRef = React.useRef(null);
var currentLength = React.useMemo(function () {
return helper.getUnicodeLength(value);
}, [value]);
var characterLength = React.useMemo(function () {
var characterInfo = helper.getCharacterLength(String(value), allowInputOverMax ? Infinity : maxcharacter);
if (_typeof._typeof(characterInfo) === "object") return characterInfo.length;
return characterInfo;
}, [value, allowInputOverMax, maxcharacter]);
var _useConfig = hooks_useConfig["default"](),
classPrefix = _useConfig.classPrefix;
var textareaPropsNames = Object.keys(otherProps).filter(function (key) {
return !/^on[A-Z]/.test(key) && !OMIT_PROPS.includes(key);
});
var textareaProps = textareaPropsNames.reduce(function (textareaProps2, key) {
return Object.assign(textareaProps2, defineProperty._defineProperty({}, key, props[key]));
}, {});
var eventPropsNames = Object.keys(otherProps).filter(function (key) {
return /^on[A-Z]/.test(key);
});
var eventProps = eventPropsNames.reduce(function (eventProps2, key) {
Object.assign(eventProps2, defineProperty._defineProperty({}, key, function (e) {
if (disabled) return;
if (key === "onFocus") setIsFocused(true);
if (key === "onBlur") setIsFocused(false);
props[key](e.currentTarget.value, {
e: e
});
}));
return eventProps2;
}, {});
var textareaClassNames = classNames__default["default"]("".concat(classPrefix, "-textarea__inner"), className, defineProperty._defineProperty(defineProperty._defineProperty(defineProperty._defineProperty(defineProperty._defineProperty(defineProperty._defineProperty({}, "".concat(classPrefix, "-is-").concat(status), status), "".concat(classPrefix, "-is-disabled"), disabled), "".concat(classPrefix, "-is-focused"), isFocused), "".concat(classPrefix, "-resize-none"), _typeof._typeof(autosize) === "object"), "".concat(classPrefix, "-hide-scrollbar"), autosize === true));
var adjustTextareaHeight = hooks_useEventCallback["default"](function () {
if (autosize === true) {
setTextareaStyle(calcTextareaHeight(textareaRef.current));
} else if (_typeof._typeof(autosize) === "object") {
setTextareaStyle(calcTextareaHeight(textareaRef.current, autosize === null || autosize === void 0 ? void 0 : autosize.minRows, autosize === null || autosize === void 0 ? void 0 : autosize.maxRows));
}
});
var handleAutoFocus = hooks_useEventCallback["default"](function () {
requestAnimationFrame(function () {
if (autofocus && textareaRef.current) {
var textarea = textareaRef.current;
textarea.focus();
textarea.selectionStart = textarea.value.length;
textarea.selectionEnd = textarea.value.length;
}
});
});
function inputValueChangeHandle(e) {
var target = e.target;
var val = target.value;
if (composingRef.current) {
setComposingValue(val);
} else {
if (!allowInputOverMax) {
val = helper.limitUnicodeMaxLength(val, maxlength);
if (maxcharacter && maxcharacter >= 0) {
var stringInfo = helper.getCharacterLength(val, maxcharacter);
val = _typeof._typeof(stringInfo) === "object" && stringInfo.characters;
}
}
setComposingValue(val);
setValue(val, {
e: e
});
}
}
function handleCompositionStart() {
composingRef.current = true;
}
function handleCompositionEnd(e) {
if (composingRef.current) {
composingRef.current = false;
inputValueChangeHandle(e);
}
}
var renderLimitText = function renderLimitText(current, max) {
if (count === false) return null;
if (typeof count === "function") {
return _util_parseTNode["default"](count, {
value: value,
count: current,
maxLength: hasMaxcharacter ? void 0 : maxlength,
maxCharacter: hasMaxcharacter ? maxcharacter : void 0
});
}
if (!max) return;
return /* @__PURE__ */React__default["default"].createElement("span", {
className: "".concat(classPrefix, "-textarea__limit")
}, isOvermax && allowInputOverMax ? /* @__PURE__ */React__default["default"].createElement("span", {
className: "".concat(classPrefix, "-textarea__tips--warning")
}, " ", current) : "".concat(current), "/".concat(max));
};
hooks_useLayoutEffect["default"](function () {
if (autosize === false) {
setTextareaStyle(DEFAULT_TEXTAREA_STYLE);
} else {
adjustTextareaHeight();
}
}, [value, autosize, adjustTextareaHeight]);
React.useEffect(function () {
handleAutoFocus();
}, [handleAutoFocus]);
React.useEffect(function () {
if (allowInputOverMax) {
setIsOvermax(!!(maxlength && currentLength > maxlength) || !!(maxcharacter && characterLength > maxcharacter));
}
}, [allowInputOverMax, characterLength, currentLength, maxcharacter, maxlength]);
React.useImperativeHandle(ref, function () {
return {
currentElement: wrapperRef.current,
textareaElement: textareaRef.current
};
});
var textTips = tips && /* @__PURE__ */React__default["default"].createElement("div", {
className: classNames__default["default"]("".concat(classPrefix, "-textarea__tips"), defineProperty._defineProperty({}, "".concat(classPrefix, "-textarea__tips--").concat(status), status))
}, tips);
var limitText = renderLimitText(currentLength, maxlength !== null && maxlength !== void 0 ? maxlength : maxcharacter);
return /* @__PURE__ */React__default["default"].createElement("div", {
style: style,
ref: wrapperRef,
className: classNames__default["default"]("".concat(classPrefix, "-textarea"), className)
}, /* @__PURE__ */React__default["default"].createElement("textarea", _objectSpread(_objectSpread(_objectSpread({}, textareaProps), eventProps), {}, {
rows: rows,
value: composingRef.current ? composingValue : value,
style: textareaStyle,
className: textareaClassNames,
readOnly: props.readOnly || props.readonly,
autoFocus: autofocus,
disabled: disabled,
onChange: inputValueChangeHandle,
onKeyDown: function onKeyDown(e) {
return onKeydown(e.currentTarget.value, {
e: e
});
},
onKeyPress: function onKeyPress(e) {
return onKeypress(e.currentTarget.value, {
e: e
});
},
onKeyUp: function onKeyUp(e) {
return onKeyup(e.currentTarget.value, {
e: e
});
},
onCompositionStart: handleCompositionStart,
onCompositionEnd: handleCompositionEnd,
ref: textareaRef
})), textTips || limitText ? /* @__PURE__ */React__default["default"].createElement("div", {
className: classNames__default["default"]("".concat(classPrefix, "-textarea__info_wrapper"), defineProperty._defineProperty({}, "".concat(classPrefix, "-textarea__info_wrapper_align"), !textTips))
}, textTips, limitText) : null);
});
Textarea.displayName = "Textarea";
exports["default"] = Textarea;
//# sourceMappingURL=Textarea.js.map