Миграция со старых жизненных методов в Select

gulpfile.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const createTasks = require('library-utils/gulp-tasks');
 
 createTasks('arui-feather', {

src/select/select.tsx

@@ -8,19 +8,18 @@ import { DeepReadonly } from 'utility-types';
 import { createCn } from 'bem-react-classname';
 import { withTheme } from '../cn';
 
-import { Button } from '../button/button';
+import { Button } from '../button';
 import IconButton from '../icon-button/icon-button';
 import IconArrowDown from '../icon/ui/arrow-down';
 import IconArrowUp from '../icon/ui/arrow-up';
 import Menu from '../menu/menu';
 import Mq from '../mq/mq';
 import ThemedPopup from '../popup/popup';
 import PopupHeader from '../popup-header/popup-header';
-import { ResizeSensor } from '../resize-sensor/resize-sensor';
+import { ResizeSensor } from '../resize-sensor';
 
 import { HtmlElement } from '../lib/prop-types';
 import keyboardCode from '../lib/keyboard-code';
-import performance from '../performance';
 import scrollTo from '../lib/scroll-to';
 import { SCROLL_TO_CORRECTION, SCROLL_TO_NORMAL_DURATION } from '../vars';
 
@@ -317,8 +316,7 @@ type SelectState = DeepReadonly<{
 /**
  * Компонент выпадающего списка.
  */
-@performance(true)
-export class Select extends React.Component<SelectProps, SelectState> {
+export class Select extends React.PureComponent<SelectProps, SelectState> {
     protected cn = createCn('select');
 
     static defaultProps: Partial<SelectProps> = {
@@ -342,7 +340,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
     };
 
     state: SelectState = {
-        hasGroup: false,
+        // eslint-disable-next-line max-len
+        hasGroup: this.props.options.some((option) => !!(option.type === 'group' && !!option.content)),
         isMobile: false,
         opened: !!this.props.opened,
         popupStyles: {},
@@ -368,13 +367,6 @@ export class Select extends React.Component<SelectProps, SelectState> {
      */
     private awaitClosing = false;
 
-    // eslint-disable-next-line camelcase
-    UNSAFE_componentWillMount() {
-        this.setState({
-            hasGroup: this.props.options.some((option) => !!(option.type === 'group' && !!option.content)),
-        });
-    }
-
     componentDidMount() {
         if (this.isAutoSelectRequired()) {
             this.selectFirstOption();
@@ -384,24 +376,19 @@ export class Select extends React.Component<SelectProps, SelectState> {
         this.updatePopupStyles();
     }
 
-    // eslint-disable-next-line camelcase
-    UNSAFE_componentWillReceiveProps(nextProps) {
+    componentDidUpdate(prevProps: SelectProps) {
         this.setPopupTarget();
-        this.updatePopupStyles();
-
-        if (this.state.opened && nextProps.disabled) {
-            this.toggleOpened();
-        }
-
-        this.setState({
-            hasGroup: this.props.options.some((option) => !!(option.type === 'group' && !!option.content)),
-        });
-    }
 
-    componentDidUpdate() {
         if (this.state.opened) {
             this.updatePopupStyles();
+            if (this.props.disabled) {
+                this.toggleOpened();
+            }
         }
+        // eslint-disable-next-line max-len
+        const hasGroup = prevProps.options.some((option) => option.type === 'group' && !!option.content);
+
+        this.updateHasGroup(hasGroup);
     }
 
     render() {
@@ -1041,8 +1028,10 @@ export class Select extends React.Component<SelectProps, SelectState> {
         if (this.props.equalPopupWidth) {
             popupStyles.maxWidth = buttonWidth;
         }
-
-        this.setState({ popupStyles });
+        if (this.state.popupStyles.maxWidth !== popupStyles.maxWidth
+            || this.state.popupStyles.minWidth !== popupStyles.minWidth) {
+            this.setState({ popupStyles });
+        }
     };
 
     private setPopupTarget = () => {
@@ -1087,6 +1076,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
     private isAutoSelectRequired() {
         const { mode, options, renderPopupOnFocus } = this.props;
 
+        // eslint-disable-next-line max-len
         return renderPopupOnFocus && mode === 'radio' && options.length > 0 && !this.hasCheckedItems();
     }
 
@@ -1112,6 +1102,12 @@ export class Select extends React.Component<SelectProps, SelectState> {
 
         return firstOption;
     }
+
+    private updateHasGroup(hasGroup: boolean) {
+        if (this.state.hasGroup !== hasGroup) {
+            this.setState({ hasGroup });
+        }
+    }
 }
 
 class ThemedSelect extends Select {}

styleguide.config.js

@@ -1,6 +1,6 @@
 /* eslint strict: [0, "global"] */
 /* eslint import/no-extraneous-dependencies: 0 */
-
+/* eslint-disable */
 'use strict';
 
 const path = require('path');

webpack.base.js

@@ -1,6 +1,8 @@
 /* eslint import/no-extraneous-dependencies: [2, {"devDependencies": true}] */
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const path = require('path');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const webpack = require('webpack');
 
 const QUERY = {