feat: support nativeElement (#58)

Author: zombieJ

package.json

@@ -45,14 +45,14 @@
   "dependencies": {
     "@babel/runtime": "^7.10.1",
     "classnames": "^2.2.1",
-    "rc-input": "~1.4.0",
+    "rc-input": "~1.5.0",
     "rc-resize-observer": "^1.0.0",
     "rc-util": "^5.27.0"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/react": "^15.0.0",
     "@types/classnames": "^2.2.9",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",

src/TextArea.tsx

@@ -1,5 +1,6 @@
 import clsx from 'classnames';
 import { BaseInput } from 'rc-input';
+import { type HolderRef } from 'rc-input/lib/BaseInput';
 import useCount from 'rc-input/lib/hooks/useCount';
 import { resolveOnChange } from 'rc-input/lib/utils/commonUtils';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
@@ -54,6 +55,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     const [textareaResized, setTextareaResized] = React.useState<boolean>(null);
 
     // =============================== Ref ================================
+    const holderRef = useRef<HolderRef>(null);
     const resizableTextAreaRef = useRef<ResizableTextAreaRef>(null);
     const getTextArea = () => resizableTextAreaRef.current?.textArea;
 
@@ -67,6 +69,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
       blur: () => {
         getTextArea().blur();
       },
+      nativeElement: holderRef.current?.nativeElement || getTextArea(),
     }));
 
     useEffect(() => {
@@ -208,6 +211,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
 
     return (
       <BaseInput
+        ref={holderRef}
         value={formatValue}
         allowClear={allowClear}
         handleReset={handleReset}

src/interface.ts

@@ -42,4 +42,5 @@ export type TextAreaRef = {
   resizableTextArea: ResizableTextAreaRef;
   focus: () => void;
   blur: () => void;
+  nativeElement: HTMLElement;
 };

tests/index.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import type { TextAreaProps } from '../src';
+import type { TextAreaProps, TextAreaRef } from '../src';
 import TextArea from '../src';
 import calculateAutoSizeStyle, {
   calculateNodeStyling,
@@ -352,4 +352,32 @@ describe('TextArea', () => {
     const { container } = render(<TextArea value={BigInt('903')} autoSize />);
     expect(container.querySelector('textarea').value).toBe('903');
   });
+
+  describe('ref.nativeElement', () => {
+    it('textarea', () => {
+      const ref = React.createRef<TextAreaRef>();
+      const { container } = render(
+        <div>
+          <TextArea ref={ref} />
+        </div>,
+      );
+
+      expect(ref.current.nativeElement).toEqual(
+        container.querySelector('textarea'),
+      );
+    });
+
+    it('holder', () => {
+      const ref = React.createRef<TextAreaRef>();
+      const { container } = render(
+        <div>
+          <TextArea ref={ref} allowClear />
+        </div>,
+      );
+
+      expect(ref.current.nativeElement).toEqual(
+        container.querySelector('.rc-textarea-affix-wrapper'),
+      );
+    });
+  });
 });