123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228 |
- import _extends from "@babel/runtime/helpers/esm/extends";
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
- import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
- import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
- var _excluded = ["defaultValue", "value", "onFocus", "onBlur", "onChange", "allowClear", "maxLength", "onCompositionStart", "onCompositionEnd", "suffix", "prefixCls", "showCount", "count", "className", "style", "disabled", "hidden", "classNames", "styles", "onResize", "onClear", "onPressEnter", "readOnly", "autoSize", "onKeyDown"];
- import clsx from 'classnames';
- import { BaseInput } from 'rc-input';
- import useCount from "rc-input/es/hooks/useCount";
- import { resolveOnChange } from "rc-input/es/utils/commonUtils";
- import useMergedState from "rc-util/es/hooks/useMergedState";
- import React, { useEffect, useImperativeHandle, useRef } from 'react';
- import ResizableTextArea from "./ResizableTextArea";
- var TextArea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
- var _countConfig$max;
- var defaultValue = _ref.defaultValue,
- customValue = _ref.value,
- onFocus = _ref.onFocus,
- onBlur = _ref.onBlur,
- onChange = _ref.onChange,
- allowClear = _ref.allowClear,
- maxLength = _ref.maxLength,
- onCompositionStart = _ref.onCompositionStart,
- onCompositionEnd = _ref.onCompositionEnd,
- suffix = _ref.suffix,
- _ref$prefixCls = _ref.prefixCls,
- prefixCls = _ref$prefixCls === void 0 ? 'rc-textarea' : _ref$prefixCls,
- showCount = _ref.showCount,
- count = _ref.count,
- className = _ref.className,
- style = _ref.style,
- disabled = _ref.disabled,
- hidden = _ref.hidden,
- classNames = _ref.classNames,
- styles = _ref.styles,
- onResize = _ref.onResize,
- onClear = _ref.onClear,
- onPressEnter = _ref.onPressEnter,
- readOnly = _ref.readOnly,
- autoSize = _ref.autoSize,
- onKeyDown = _ref.onKeyDown,
- rest = _objectWithoutProperties(_ref, _excluded);
- var _useMergedState = useMergedState(defaultValue, {
- value: customValue,
- defaultValue: defaultValue
- }),
- _useMergedState2 = _slicedToArray(_useMergedState, 2),
- value = _useMergedState2[0],
- setValue = _useMergedState2[1];
- var formatValue = value === undefined || value === null ? '' : String(value);
- var _React$useState = React.useState(false),
- _React$useState2 = _slicedToArray(_React$useState, 2),
- focused = _React$useState2[0],
- setFocused = _React$useState2[1];
- var compositionRef = React.useRef(false);
- var _React$useState3 = React.useState(null),
- _React$useState4 = _slicedToArray(_React$useState3, 2),
- textareaResized = _React$useState4[0],
- setTextareaResized = _React$useState4[1];
- // =============================== Ref ================================
- var holderRef = useRef(null);
- var resizableTextAreaRef = useRef(null);
- var getTextArea = function getTextArea() {
- var _resizableTextAreaRef;
- return (_resizableTextAreaRef = resizableTextAreaRef.current) === null || _resizableTextAreaRef === void 0 ? void 0 : _resizableTextAreaRef.textArea;
- };
- var focus = function focus() {
- getTextArea().focus();
- };
- useImperativeHandle(ref, function () {
- var _holderRef$current;
- return {
- resizableTextArea: resizableTextAreaRef.current,
- focus: focus,
- blur: function blur() {
- getTextArea().blur();
- },
- nativeElement: ((_holderRef$current = holderRef.current) === null || _holderRef$current === void 0 ? void 0 : _holderRef$current.nativeElement) || getTextArea()
- };
- });
- useEffect(function () {
- setFocused(function (prev) {
- return !disabled && prev;
- });
- }, [disabled]);
- // =========================== Select Range ===========================
- var _React$useState5 = React.useState(null),
- _React$useState6 = _slicedToArray(_React$useState5, 2),
- selection = _React$useState6[0],
- setSelection = _React$useState6[1];
- React.useEffect(function () {
- if (selection) {
- var _getTextArea;
- (_getTextArea = getTextArea()).setSelectionRange.apply(_getTextArea, _toConsumableArray(selection));
- }
- }, [selection]);
- // ============================== Count ===============================
- var countConfig = useCount(count, showCount);
- var mergedMax = (_countConfig$max = countConfig.max) !== null && _countConfig$max !== void 0 ? _countConfig$max : maxLength;
- // Max length value
- var hasMaxLength = Number(mergedMax) > 0;
- var valueLength = countConfig.strategy(formatValue);
- var isOutOfRange = !!mergedMax && valueLength > mergedMax;
- // ============================== Change ==============================
- var triggerChange = function triggerChange(e, currentValue) {
- var cutValue = currentValue;
- if (!compositionRef.current && countConfig.exceedFormatter && countConfig.max && countConfig.strategy(currentValue) > countConfig.max) {
- cutValue = countConfig.exceedFormatter(currentValue, {
- max: countConfig.max
- });
- if (currentValue !== cutValue) {
- setSelection([getTextArea().selectionStart || 0, getTextArea().selectionEnd || 0]);
- }
- }
- setValue(cutValue);
- resolveOnChange(e.currentTarget, e, onChange, cutValue);
- };
- // =========================== Value Update ===========================
- var onInternalCompositionStart = function onInternalCompositionStart(e) {
- compositionRef.current = true;
- onCompositionStart === null || onCompositionStart === void 0 || onCompositionStart(e);
- };
- var onInternalCompositionEnd = function onInternalCompositionEnd(e) {
- compositionRef.current = false;
- triggerChange(e, e.currentTarget.value);
- onCompositionEnd === null || onCompositionEnd === void 0 || onCompositionEnd(e);
- };
- var onInternalChange = function onInternalChange(e) {
- triggerChange(e, e.target.value);
- };
- var handleKeyDown = function handleKeyDown(e) {
- if (e.key === 'Enter' && onPressEnter) {
- onPressEnter(e);
- }
- onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
- };
- var handleFocus = function handleFocus(e) {
- setFocused(true);
- onFocus === null || onFocus === void 0 || onFocus(e);
- };
- var handleBlur = function handleBlur(e) {
- setFocused(false);
- onBlur === null || onBlur === void 0 || onBlur(e);
- };
- // ============================== Reset ===============================
- var handleReset = function handleReset(e) {
- setValue('');
- focus();
- resolveOnChange(getTextArea(), e, onChange);
- };
- var suffixNode = suffix;
- var dataCount;
- if (countConfig.show) {
- if (countConfig.showFormatter) {
- dataCount = countConfig.showFormatter({
- value: formatValue,
- count: valueLength,
- maxLength: mergedMax
- });
- } else {
- dataCount = "".concat(valueLength).concat(hasMaxLength ? " / ".concat(mergedMax) : '');
- }
- suffixNode = /*#__PURE__*/React.createElement(React.Fragment, null, suffixNode, /*#__PURE__*/React.createElement("span", {
- className: clsx("".concat(prefixCls, "-data-count"), classNames === null || classNames === void 0 ? void 0 : classNames.count),
- style: styles === null || styles === void 0 ? void 0 : styles.count
- }, dataCount));
- }
- var handleResize = function handleResize(size) {
- var _getTextArea2;
- onResize === null || onResize === void 0 || onResize(size);
- if ((_getTextArea2 = getTextArea()) !== null && _getTextArea2 !== void 0 && _getTextArea2.style.height) {
- setTextareaResized(true);
- }
- };
- var isPureTextArea = !autoSize && !showCount && !allowClear;
- return /*#__PURE__*/React.createElement(BaseInput, {
- ref: holderRef,
- value: formatValue,
- allowClear: allowClear,
- handleReset: handleReset,
- suffix: suffixNode,
- prefixCls: prefixCls,
- classNames: _objectSpread(_objectSpread({}, classNames), {}, {
- affixWrapper: clsx(classNames === null || classNames === void 0 ? void 0 : classNames.affixWrapper, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-show-count"), showCount), "".concat(prefixCls, "-textarea-allow-clear"), allowClear))
- }),
- disabled: disabled,
- focused: focused,
- className: clsx(className, isOutOfRange && "".concat(prefixCls, "-out-of-range")),
- style: _objectSpread(_objectSpread({}, style), textareaResized && !isPureTextArea ? {
- height: 'auto'
- } : {}),
- dataAttrs: {
- affixWrapper: {
- 'data-count': typeof dataCount === 'string' ? dataCount : undefined
- }
- },
- hidden: hidden,
- readOnly: readOnly,
- onClear: onClear
- }, /*#__PURE__*/React.createElement(ResizableTextArea, _extends({}, rest, {
- autoSize: autoSize,
- maxLength: maxLength,
- onKeyDown: handleKeyDown,
- onChange: onInternalChange,
- onFocus: handleFocus,
- onBlur: handleBlur,
- onCompositionStart: onInternalCompositionStart,
- onCompositionEnd: onInternalCompositionEnd,
- className: clsx(classNames === null || classNames === void 0 ? void 0 : classNames.textarea),
- style: _objectSpread(_objectSpread({}, styles === null || styles === void 0 ? void 0 : styles.textarea), {}, {
- resize: style === null || style === void 0 ? void 0 : style.resize
- }),
- disabled: disabled,
- prefixCls: prefixCls,
- onResize: handleResize,
- ref: resizableTextAreaRef,
- readOnly: readOnly
- })));
- });
- export default TextArea;
|