feat: re-render with new autoSize property. (#13)

* feat: re-render with  new autoSize property.

* test: add test to auto calculate according to autoSize property.

* chore: install shallowequal to npm packages

* fix: improve comparison logic and test module

Author: losgif

package.json

@@ -45,13 +45,15 @@
     "@babel/runtime": "^7.10.1",
     "classnames": "^2.2.1",
     "rc-resize-observer": "^1.0.0",
-    "rc-util": "^5.7.0"
+    "rc-util": "^5.7.0",
+    "shallowequal": "^1.1.0"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.9",
     "@types/enzyme": "^3.10.10",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
+    "@types/shallowequal": "^1.1.1",
     "@umijs/fabric": "^2.0.8",
     "coveralls": "^3.0.6",
     "cross-env": "^7.0.2",

src/ResizableTextArea.tsx

@@ -3,7 +3,8 @@ import ResizeObserver from 'rc-resize-observer';
 import omit from 'rc-util/lib/omit';
 import classNames from 'classnames';
 import calculateNodeHeight from './calculateNodeHeight';
-import { TextAreaProps } from '.';
+import type { TextAreaProps } from '.';
+import shallowEqual from 'shallowequal';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 enum RESIZE_STATUS {
@@ -43,8 +44,11 @@ class ResizableTextArea extends React.Component<TextAreaProps, TextAreaState> {
   };
 
   componentDidUpdate(prevProps: TextAreaProps) {
-    // Re-render with the new content then recalculate the height as required.
-    if (prevProps.value !== this.props.value) {
+    // Re-render with the new content or new autoSize property then recalculate the height as required.
+    if (
+      prevProps.value !== this.props.value ||
+      !shallowEqual(prevProps.autoSize, this.props.autoSize)
+    ) {
       this.resizeTextarea();
     }
   }

tests/index.spec.js

@@ -41,7 +41,7 @@ describe('TextArea', () => {
     expect(onChange.mock.calls[0][0].target.value).toBe('222');
   });
 
-  it('should auto calculate height according to content length', async () => {
+  it('should auto calculate height according to content length and autoSize property', async () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
     const wrapper = mount(
@@ -62,6 +62,24 @@ describe('TextArea', () => {
     wrapper.setProps({ value: '1111' });
     await sleep(0);
     expect(mockFunc).toHaveBeenCalledTimes(2);
+
+    wrapper.setProps({ autoSize: { minRows: 1, maxRows: 6 } });
+    await sleep(0);
+    expect(mockFunc).toHaveBeenCalledTimes(3);
+    wrapper.setProps({ autoSize: { minRows: 1, maxRows: 6 } });
+    await sleep(0);
+    expect(mockFunc).toHaveBeenCalledTimes(3);
+    wrapper.setProps({ autoSize: { minRows: 1, maxRows: 12 } });
+    await sleep(0);
+    expect(mockFunc).toHaveBeenCalledTimes(4);
+
+    wrapper.setProps({ autoSize: true });
+    await sleep(0);
+    expect(mockFunc).toHaveBeenCalledTimes(5);
+    wrapper.setProps({ autoSize: false });
+    await sleep(0);
+    expect(mockFunc).toHaveBeenCalledTimes(6);
+
     wrapper.update();
     expect(wrapper.find('textarea').props().style.overflow).toBeFalsy();