TextArea.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. exports.default = void 0;
  9. var _react = _interopRequireWildcard(require("react"));
  10. var React = _react;
  11. var _classnames = _interopRequireDefault(require("classnames"));
  12. var _rcTextarea = _interopRequireDefault(require("rc-textarea"));
  13. var _getAllowClear = _interopRequireDefault(require("../_util/getAllowClear"));
  14. var _statusUtils = require("../_util/statusUtils");
  15. var _warning = require("../_util/warning");
  16. var _context = require("../config-provider/context");
  17. var _DisabledContext = _interopRequireDefault(require("../config-provider/DisabledContext"));
  18. var _useCSSVarCls = _interopRequireDefault(require("../config-provider/hooks/useCSSVarCls"));
  19. var _useSize = _interopRequireDefault(require("../config-provider/hooks/useSize"));
  20. var _context2 = require("../form/context");
  21. var _useVariants = _interopRequireDefault(require("../form/hooks/useVariants"));
  22. var _Compact = require("../space/Compact");
  23. var _Input = require("./Input");
  24. var _style = require("./style");
  25. var _textarea = _interopRequireDefault(require("./style/textarea"));
  26. var __rest = void 0 && (void 0).__rest || function (s, e) {
  27. var t = {};
  28. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  29. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  30. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  31. }
  32. return t;
  33. };
  34. const TextArea = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  35. var _a;
  36. const {
  37. prefixCls: customizePrefixCls,
  38. bordered = true,
  39. size: customizeSize,
  40. disabled: customDisabled,
  41. status: customStatus,
  42. allowClear,
  43. classNames: classes,
  44. rootClassName,
  45. className,
  46. style,
  47. styles,
  48. variant: customVariant,
  49. showCount,
  50. onMouseDown,
  51. onResize
  52. } = props,
  53. rest = __rest(props, ["prefixCls", "bordered", "size", "disabled", "status", "allowClear", "classNames", "rootClassName", "className", "style", "styles", "variant", "showCount", "onMouseDown", "onResize"]);
  54. if (process.env.NODE_ENV !== 'production') {
  55. const {
  56. deprecated
  57. } = (0, _warning.devUseWarning)('TextArea');
  58. deprecated(!('bordered' in props), 'bordered', 'variant');
  59. }
  60. const {
  61. getPrefixCls,
  62. direction,
  63. allowClear: contextAllowClear,
  64. autoComplete: contextAutoComplete,
  65. className: contextClassName,
  66. style: contextStyle,
  67. classNames: contextClassNames,
  68. styles: contextStyles
  69. } = (0, _context.useComponentConfig)('textArea');
  70. // =================== Disabled ===================
  71. const disabled = React.useContext(_DisabledContext.default);
  72. const mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
  73. // ==================== Status ====================
  74. const {
  75. status: contextStatus,
  76. hasFeedback,
  77. feedbackIcon
  78. } = React.useContext(_context2.FormItemInputContext);
  79. const mergedStatus = (0, _statusUtils.getMergedStatus)(contextStatus, customStatus);
  80. // ===================== Ref ======================
  81. const innerRef = React.useRef(null);
  82. React.useImperativeHandle(ref, () => {
  83. var _a;
  84. return {
  85. resizableTextArea: (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.resizableTextArea,
  86. focus: option => {
  87. var _a, _b;
  88. (0, _Input.triggerFocus)((_b = (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.resizableTextArea) === null || _b === void 0 ? void 0 : _b.textArea, option);
  89. },
  90. blur: () => {
  91. var _a;
  92. return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.blur();
  93. }
  94. };
  95. });
  96. const prefixCls = getPrefixCls('input', customizePrefixCls);
  97. // ==================== Style =====================
  98. const rootCls = (0, _useCSSVarCls.default)(prefixCls);
  99. const [wrapSharedCSSVar, hashId, cssVarCls] = (0, _style.useSharedStyle)(prefixCls, rootClassName);
  100. const [wrapCSSVar] = (0, _textarea.default)(prefixCls, rootCls);
  101. // ================= Compact Item =================
  102. const {
  103. compactSize,
  104. compactItemClassnames
  105. } = (0, _Compact.useCompactItemContext)(prefixCls, direction);
  106. // ===================== Size =====================
  107. const mergedSize = (0, _useSize.default)(ctx => {
  108. var _a;
  109. return (_a = customizeSize !== null && customizeSize !== void 0 ? customizeSize : compactSize) !== null && _a !== void 0 ? _a : ctx;
  110. });
  111. const [variant, enableVariantCls] = (0, _useVariants.default)('textArea', customVariant, bordered);
  112. const mergedAllowClear = (0, _getAllowClear.default)(allowClear !== null && allowClear !== void 0 ? allowClear : contextAllowClear);
  113. // ==================== Resize ====================
  114. // https://github.com/ant-design/ant-design/issues/51594
  115. const [isMouseDown, setIsMouseDown] = React.useState(false);
  116. // When has wrapper, resize will make as dirty for `resize: both` style
  117. const [resizeDirty, setResizeDirty] = React.useState(false);
  118. const onInternalMouseDown = e => {
  119. setIsMouseDown(true);
  120. onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
  121. const onMouseUp = () => {
  122. setIsMouseDown(false);
  123. document.removeEventListener('mouseup', onMouseUp);
  124. };
  125. document.addEventListener('mouseup', onMouseUp);
  126. };
  127. const onInternalResize = size => {
  128. var _a, _b;
  129. onResize === null || onResize === void 0 ? void 0 : onResize(size);
  130. // Change to dirty since this maybe from the `resize: both` style
  131. if (isMouseDown && typeof getComputedStyle === 'function') {
  132. const ele = (_b = (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.querySelector('textarea');
  133. if (ele && getComputedStyle(ele).resize === 'both') {
  134. setResizeDirty(true);
  135. }
  136. }
  137. };
  138. // ==================== Render ====================
  139. return wrapSharedCSSVar(wrapCSSVar(/*#__PURE__*/React.createElement(_rcTextarea.default, Object.assign({
  140. autoComplete: contextAutoComplete
  141. }, rest, {
  142. style: Object.assign(Object.assign({}, contextStyle), style),
  143. styles: Object.assign(Object.assign({}, contextStyles), styles),
  144. disabled: mergedDisabled,
  145. allowClear: mergedAllowClear,
  146. className: (0, _classnames.default)(cssVarCls, rootCls, className, rootClassName, compactItemClassnames, contextClassName,
  147. // Only for wrapper
  148. resizeDirty && `${prefixCls}-textarea-affix-wrapper-resize-dirty`),
  149. classNames: Object.assign(Object.assign(Object.assign({}, classes), contextClassNames), {
  150. textarea: (0, _classnames.default)({
  151. [`${prefixCls}-sm`]: mergedSize === 'small',
  152. [`${prefixCls}-lg`]: mergedSize === 'large'
  153. }, hashId, classes === null || classes === void 0 ? void 0 : classes.textarea, contextClassNames.textarea, isMouseDown && `${prefixCls}-mouse-active`),
  154. variant: (0, _classnames.default)({
  155. [`${prefixCls}-${variant}`]: enableVariantCls
  156. }, (0, _statusUtils.getStatusClassNames)(prefixCls, mergedStatus)),
  157. affixWrapper: (0, _classnames.default)(`${prefixCls}-textarea-affix-wrapper`, {
  158. [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
  159. [`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small',
  160. [`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large',
  161. [`${prefixCls}-textarea-show-count`]: showCount || ((_a = props.count) === null || _a === void 0 ? void 0 : _a.show)
  162. }, hashId)
  163. }),
  164. prefixCls: prefixCls,
  165. suffix: hasFeedback && /*#__PURE__*/React.createElement("span", {
  166. className: `${prefixCls}-textarea-suffix`
  167. }, feedbackIcon),
  168. showCount: showCount,
  169. ref: innerRef,
  170. onResize: onInternalResize,
  171. onMouseDown: onInternalMouseDown
  172. }))));
  173. });
  174. var _default = exports.default = TextArea;