feat(slide-down): remove unsafe method (#1093)

alfa-laboratory · Mar 27, 2020 · 44138fc · 44138fc
1 parent 2c9a8ce
commit 44138fc
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 26 deletions.
diff --git a/src/slide-down/slide-down.test.tsx b/src/slide-down/slide-down.test.tsx
@@ -50,7 +50,8 @@ describe('slide-down', () => {
             <SlideDown { ...props } />
         );
 
-        slideDownNode.instance().UNSAFE_componentWillReceiveProps({ ...props, isExpanded: true });
+        slideDownNode.setProps({ isExpanded: true });
+
         expect(onAnimationStart).toHaveBeenCalled();
     });
 

diff --git a/src/slide-down/slide-down.tsx b/src/slide-down/slide-down.tsx
@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import React from 'react';
+import React, { createRef } from 'react';
 import { DeepReadonly } from 'utility-types';
 import { createCn } from 'bem-react-classname';
 import { withTheme } from '../cn';
@@ -50,31 +50,39 @@ export type SlideDownProps = DeepReadonly<{
     'data-test-id'?: string;
 
 }>;
+
+type SlideDownState = {
+    height: number | string;
+    isHeightAuto: boolean;
+}
+
 /**
  * Компонент "расхлопа".
  * Позволяет скрывать и отображать контент.
  */
-export class SlideDown extends React.PureComponent<SlideDownProps> {
+export class SlideDown extends React.PureComponent<SlideDownProps, SlideDownState> {
     protected cn = createCn('slide-down');
 
     state = {
         height: this.props.isExpanded ? 'auto' : 0,
         isHeightAuto: this.props.isExpanded
     };
 
-    private slideDown;
-    private slideDownContent;
+    private slideDown = createRef<HTMLDivElement>();
+    private slideDownContent = createRef<HTMLDivElement>()
+
+    componentDidUpdate(prevProps: SlideDownProps) {
+        const { isExpanded, onAnimationStart } = this.props;
 
-    // eslint-disable-next-line camelcase
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        if (this.props.isExpanded !== nextProps.isExpanded) {
-            if (nextProps.isExpanded) {
+        if (prevProps.isExpanded !== isExpanded) {
+            if (isExpanded) {
                 this.setHeightToContentHeight();
             } else {
                 this.setHeightToNull();
             }
-            if (this.props.onAnimationStart) {
-                this.props.onAnimationStart();
+
+            if (onAnimationStart) {
+                onAnimationStart();
             }
         }
     }
@@ -88,24 +96,20 @@ export class SlideDown extends React.PureComponent<SlideDownProps> {
                     { height: this.getHeight() }
                 }
                 onTransitionEnd={ this.handleTransitionEnd }
-                ref={ (slideDown) => {
-                    this.slideDown = slideDown;
-                } }
+                ref={ this.slideDown }
                 data-test-id={ this.props['data-test-id'] }
             >
                 <div
                     className={ this.cn('content', { expanded: this.state.isHeightAuto }) }
-                    ref={ (slideDownContent) => {
-                        this.slideDownContent = slideDownContent;
-                    } }
+                    ref={ this.slideDownContent }
                 >
                     { this.props.children }
                 </div>
             </div>
         );
     }
 
-    private handleTransitionEnd = (event) => {
+    private handleTransitionEnd = (event: React.TransitionEvent<HTMLDivElement>) => {
         if (event.propertyName === 'height' && this.props.isExpanded) {
             this.setAutoHeight();
         }
@@ -121,10 +125,12 @@ export class SlideDown extends React.PureComponent<SlideDownProps> {
     }
 
     private setHeightToContentHeight() {
-        this.setState({
-            isHeightAuto: false,
-            height: this.slideDownContent.offsetHeight
-        });
+        if (this.slideDownContent.current) {
+            this.setState({
+                isHeightAuto: false,
+                height: this.slideDownContent.current.offsetHeight
+            });
+        }
     }
 
     private setHeightToNull() {
@@ -133,10 +139,11 @@ export class SlideDown extends React.PureComponent<SlideDownProps> {
         // Заставляем React перерисовать элемент
         this.forceUpdate(() => {
             // Заставляем браузер сделать reflow
-            this.slideDown.getBoundingClientRect();
-            this.setState({
-                height: 0
-            });
+            if (this.slideDown.current) {
+                this.slideDown.current.getBoundingClientRect();
+            }
+
+            this.setState({ height: 0 });
         });
     }