tdesign-react
Version:
TDesign Component for React
292 lines (287 loc) • 13 kB
JavaScript
/**
* tdesign v1.16.2
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _defineProperty } from '../_chunks/dep-d67deb2c.js';
import { _ as _typeof } from '../_chunks/dep-8abcbcbc.js';
import { _ as _slicedToArray } from '../_chunks/dep-10d5731f.js';
import { _ as _objectWithoutProperties } from '../_chunks/dep-ed34fbd4.js';
import React, { forwardRef, useState, useRef, useMemo, useEffect, useImperativeHandle } from 'react';
import classNames from 'classnames';
import { isNull } from 'lodash-es';
import { c as calculateNodeSize, b as getUnicodeLength, d as getCharacterLength, l as limitUnicodeMaxLength } from '../_chunks/dep-fe89155e.js';
import noop from '../_util/noop.js';
import parseTNode from '../_util/parseTNode.js';
import useConfig from '../hooks/useConfig.js';
import useControlled from '../hooks/useControlled.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import useEventCallback from '../hooks/useEventCallback.js';
import useIsomorphicLayoutEffect from '../hooks/useLayoutEffect.js';
import { textareaDefaultProps } from './defaultProps.js';
import '../_chunks/dep-74a10cfb.js';
import '../_chunks/dep-a3a3e527.js';
import '../_chunks/dep-2ba7b13f.js';
import '../config-provider/ConfigContext.js';
import '../_chunks/dep-6b235a32.js';
import '../_chunks/dep-b9afa32b.js';
import 'dayjs';
import '../_chunks/dep-ca8d3fa0.js';
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 = 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(minRows)) {
var minHeight = calcHeight(minRows);
height = Math.max(minHeight, height);
result.minHeight = "".concat(minHeight, "px");
}
if (!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(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__*/forwardRef(function (originalProps, ref) {
var props = useDefaultProps(originalProps, 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 ? noop : _props$onKeydown,
_props$onKeypress = props.onKeypress,
onKeypress = _props$onKeypress === void 0 ? noop : _props$onKeypress,
_props$onKeyup = props.onKeyup,
onKeyup = _props$onKeyup === void 0 ? noop : _props$onKeyup,
autosize = props.autosize,
status = props.status,
tips = props.tips,
allowInputOverMax = props.allowInputOverMax,
rows = props.rows,
otherProps = _objectWithoutProperties(props, _excluded);
var hasMaxcharacter = typeof maxcharacter !== "undefined";
var _useControlled = useControlled(props, "value", props.onChange),
_useControlled2 = _slicedToArray(_useControlled, 2),
_useControlled2$ = _useControlled2[0],
value = _useControlled2$ === void 0 ? "" : _useControlled2$,
setValue = _useControlled2[1];
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isFocused = _useState2[0],
setIsFocused = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
isOvermax = _useState4[0],
setIsOvermax = _useState4[1];
var _useState5 = useState(DEFAULT_TEXTAREA_STYLE),
_useState6 = _slicedToArray(_useState5, 2),
textareaStyle = _useState6[0],
setTextareaStyle = _useState6[1];
var _useState7 = useState(""),
_useState8 = _slicedToArray(_useState7, 2),
composingValue = _useState8[0],
setComposingValue = _useState8[1];
var composingRef = useRef(false);
var textareaRef = useRef(null);
var wrapperRef = useRef(null);
var currentLength = useMemo(function () {
return getUnicodeLength(value);
}, [value]);
var characterLength = useMemo(function () {
var characterInfo = getCharacterLength(String(value), allowInputOverMax ? Infinity : maxcharacter);
if (_typeof(characterInfo) === "object") return characterInfo.length;
return characterInfo;
}, [value, allowInputOverMax, maxcharacter]);
var _useConfig = useConfig(),
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({}, 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({}, 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("".concat(classPrefix, "-textarea__inner"), className, _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(autosize) === "object"), "".concat(classPrefix, "-hide-scrollbar"), autosize === true));
var adjustTextareaHeight = useEventCallback(function () {
if (autosize === true) {
setTextareaStyle(calcTextareaHeight(textareaRef.current));
} else if (_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 = useEventCallback(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 = limitUnicodeMaxLength(val, maxlength);
if (maxcharacter && maxcharacter >= 0) {
var stringInfo = getCharacterLength(val, maxcharacter);
val = _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 parseTNode(count, {
value: value,
count: current,
maxLength: hasMaxcharacter ? void 0 : maxlength,
maxCharacter: hasMaxcharacter ? maxcharacter : void 0
});
}
if (!max) return;
return /* @__PURE__ */React.createElement("span", {
className: "".concat(classPrefix, "-textarea__limit")
}, isOvermax && allowInputOverMax ? /* @__PURE__ */React.createElement("span", {
className: "".concat(classPrefix, "-textarea__tips--warning")
}, " ", current) : "".concat(current), "/".concat(max));
};
useIsomorphicLayoutEffect(function () {
if (autosize === false) {
setTextareaStyle(DEFAULT_TEXTAREA_STYLE);
} else {
adjustTextareaHeight();
}
}, [value, autosize, adjustTextareaHeight]);
useEffect(function () {
handleAutoFocus();
}, [handleAutoFocus]);
useEffect(function () {
if (allowInputOverMax) {
setIsOvermax(!!(maxlength && currentLength > maxlength) || !!(maxcharacter && characterLength > maxcharacter));
}
}, [allowInputOverMax, characterLength, currentLength, maxcharacter, maxlength]);
useImperativeHandle(ref, function () {
return {
currentElement: wrapperRef.current,
textareaElement: textareaRef.current
};
});
var textTips = tips && /* @__PURE__ */React.createElement("div", {
className: classNames("".concat(classPrefix, "-textarea__tips"), _defineProperty({}, "".concat(classPrefix, "-textarea__tips--").concat(status), status))
}, tips);
var limitText = renderLimitText(currentLength, maxlength !== null && maxlength !== void 0 ? maxlength : maxcharacter);
return /* @__PURE__ */React.createElement("div", {
style: style,
ref: wrapperRef,
className: classNames("".concat(classPrefix, "-textarea"), className)
}, /* @__PURE__ */React.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.createElement("div", {
className: classNames("".concat(classPrefix, "-textarea__info_wrapper"), _defineProperty({}, "".concat(classPrefix, "-textarea__info_wrapper_align"), !textTips))
}, textTips, limitText) : null);
});
Textarea.displayName = "Textarea";
export { Textarea as default };
//# sourceMappingURL=Textarea.js.map