You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
InternshipProject/node_modules/antd/es/input/TextArea.js

226 lines
8.6 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

import _typeof from "@babel/runtime/helpers/esm/typeof";
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
}
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import * as React from 'react';
import RcTextArea from 'rc-textarea';
import omit from "rc-util/es/omit";
import classNames from 'classnames';
import useMergedState from "rc-util/es/hooks/useMergedState";
import ClearableLabeledInput from './ClearableLabeledInput';
import { ConfigContext } from '../config-provider';
import { fixControlledValue, resolveOnChange, triggerFocus } from './Input';
import SizeContext from '../config-provider/SizeContext';
function fixEmojiLength(value, maxLength) {
return _toConsumableArray(value || '').slice(0, maxLength).join('');
}
function setTriggerValue(isCursorInEnd, preValue, triggerValue, maxLength) {
var newTriggerValue = triggerValue;
if (isCursorInEnd) {
// 光标在尾部,直接截断
newTriggerValue = fixEmojiLength(triggerValue, maxLength);
} else if (_toConsumableArray(preValue || '').length < triggerValue.length && _toConsumableArray(triggerValue || '').length > maxLength) {
// 光标在中间,如果最后的值超过最大值,则采用原先的值
newTriggerValue = preValue;
}
return newTriggerValue;
}
var TextArea = /*#__PURE__*/React.forwardRef(function (_a, ref) {
var _classNames;
var customizePrefixCls = _a.prefixCls,
_a$bordered = _a.bordered,
bordered = _a$bordered === void 0 ? true : _a$bordered,
_a$showCount = _a.showCount,
showCount = _a$showCount === void 0 ? false : _a$showCount,
maxLength = _a.maxLength,
className = _a.className,
style = _a.style,
customizeSize = _a.size,
onCompositionStart = _a.onCompositionStart,
onCompositionEnd = _a.onCompositionEnd,
onChange = _a.onChange,
props = __rest(_a, ["prefixCls", "bordered", "showCount", "maxLength", "className", "style", "size", "onCompositionStart", "onCompositionEnd", "onChange"]);
var _React$useContext = React.useContext(ConfigContext),
getPrefixCls = _React$useContext.getPrefixCls,
direction = _React$useContext.direction;
var size = React.useContext(SizeContext);
var innerRef = React.useRef(null);
var clearableInputRef = React.useRef(null);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
compositing = _React$useState2[0],
setCompositing = _React$useState2[1];
var oldCompositionValueRef = React.useRef();
var oldSelectionStartRef = React.useRef(0);
var _useMergedState = useMergedState(props.defaultValue, {
value: props.value
}),
_useMergedState2 = _slicedToArray(_useMergedState, 2),
value = _useMergedState2[0],
setValue = _useMergedState2[1];
var hidden = props.hidden;
var handleSetValue = function handleSetValue(val, callback) {
if (props.value === undefined) {
setValue(val);
callback === null || callback === void 0 ? void 0 : callback();
}
}; // =========================== Value Update ===========================
// Max length value
var hasMaxLength = Number(maxLength) > 0;
var onInternalCompositionStart = function onInternalCompositionStart(e) {
setCompositing(true); // 拼音输入前保存一份旧值
oldCompositionValueRef.current = value; // 保存旧的光标位置
oldSelectionStartRef.current = e.currentTarget.selectionStart;
onCompositionStart === null || onCompositionStart === void 0 ? void 0 : onCompositionStart(e);
};
var onInternalCompositionEnd = function onInternalCompositionEnd(e) {
var _a;
setCompositing(false);
var triggerValue = e.currentTarget.value;
if (hasMaxLength) {
var isCursorInEnd = oldSelectionStartRef.current >= maxLength + 1 || oldSelectionStartRef.current === ((_a = oldCompositionValueRef.current) === null || _a === void 0 ? void 0 : _a.length);
triggerValue = setTriggerValue(isCursorInEnd, oldCompositionValueRef.current, triggerValue, maxLength);
} // Patch composition onChange when value changed
if (triggerValue !== value) {
handleSetValue(triggerValue);
resolveOnChange(e.currentTarget, e, onChange, triggerValue);
}
onCompositionEnd === null || onCompositionEnd === void 0 ? void 0 : onCompositionEnd(e);
};
var handleChange = function handleChange(e) {
var triggerValue = e.target.value;
if (!compositing && hasMaxLength) {
// 1. 复制粘贴超过maxlength的情况 2.未超过maxlength的情况
var isCursorInEnd = e.target.selectionStart >= maxLength + 1 || e.target.selectionStart === triggerValue.length || !e.target.selectionStart;
triggerValue = setTriggerValue(isCursorInEnd, value, triggerValue, maxLength);
}
handleSetValue(triggerValue);
resolveOnChange(e.currentTarget, e, onChange, triggerValue);
}; // ============================== Reset ===============================
var handleReset = function handleReset(e) {
var _a, _b;
handleSetValue('', function () {
var _a;
(_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
});
resolveOnChange((_b = (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.resizableTextArea) === null || _b === void 0 ? void 0 : _b.textArea, e, onChange);
};
var prefixCls = getPrefixCls('input', customizePrefixCls);
React.useImperativeHandle(ref, function () {
var _a;
return {
resizableTextArea: (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.resizableTextArea,
focus: function focus(option) {
var _a, _b;
triggerFocus((_b = (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.resizableTextArea) === null || _b === void 0 ? void 0 : _b.textArea, option);
},
blur: function blur() {
var _a;
return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.blur();
}
};
});
var textArea = /*#__PURE__*/React.createElement(RcTextArea, _extends({}, omit(props, ['allowClear']), {
className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-borderless"), !bordered), _defineProperty(_classNames, className, className && !showCount), _defineProperty(_classNames, "".concat(prefixCls, "-sm"), size === 'small' || customizeSize === 'small'), _defineProperty(_classNames, "".concat(prefixCls, "-lg"), size === 'large' || customizeSize === 'large'), _classNames)),
style: showCount ? undefined : style,
prefixCls: prefixCls,
onCompositionStart: onInternalCompositionStart,
onChange: handleChange,
onCompositionEnd: onInternalCompositionEnd,
ref: innerRef
}));
var val = fixControlledValue(value);
if (!compositing && hasMaxLength && (props.value === null || props.value === undefined)) {
// fix #27612 将value转为数组进行截取解决 '😂'.length === 2 等emoji表情导致的截取乱码的问题
val = fixEmojiLength(val, maxLength);
} // TextArea
var textareaNode = /*#__PURE__*/React.createElement(ClearableLabeledInput, _extends({}, props, {
prefixCls: prefixCls,
direction: direction,
inputType: "text",
value: val,
element: textArea,
handleReset: handleReset,
ref: clearableInputRef,
bordered: bordered,
style: showCount ? undefined : style
})); // Only show text area wrapper when needed
if (showCount) {
var valueLength = _toConsumableArray(val).length;
var dataCount = '';
if (_typeof(showCount) === 'object') {
dataCount = showCount.formatter({
count: valueLength,
maxLength: maxLength
});
} else {
dataCount = "".concat(valueLength).concat(hasMaxLength ? " / ".concat(maxLength) : '');
}
return /*#__PURE__*/React.createElement("div", {
hidden: hidden,
className: classNames("".concat(prefixCls, "-textarea"), _defineProperty({}, "".concat(prefixCls, "-textarea-rtl"), direction === 'rtl'), "".concat(prefixCls, "-textarea-show-count"), className),
style: style,
"data-count": dataCount
}, textareaNode);
}
return textareaNode;
});
export default TextArea;