feat: Updated all the class components to newer functional components

reactjs · Mar 1, 2022 · b2159c9 · b2159c9
1 parent a71cab0
commit b2159c9
Show file tree

Hide file tree

Showing 7 changed files with 396 additions and 391 deletions.
diff --git a/src/components/Tab.js b/src/components/Tab.js
@@ -1,96 +1,91 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { useEffect, useRef } from 'react';
 import cx from 'clsx';
 
 const DEFAULT_CLASS = 'react-tabs__tab';
+const DEFAULT_PROPS = {
+  className: DEFAULT_CLASS,
+  disabledClassName: `${DEFAULT_CLASS}--disabled`,
+  focus: false,
+  id: null,
+  panelId: null,
+  selected: false,
+  selectedClassName: `${DEFAULT_CLASS}--selected`,
+};
 
-export default class Tab extends Component {
-  static defaultProps = {
-    className: DEFAULT_CLASS,
-    disabledClassName: `${DEFAULT_CLASS}--disabled`,
-    focus: false,
-    id: null,
-    panelId: null,
-    selected: false,
-    selectedClassName: `${DEFAULT_CLASS}--selected`,
-  };
-
-  static propTypes = {
-    children: PropTypes.oneOfType([
-      PropTypes.array,
-      PropTypes.object,
-      PropTypes.string,
-    ]),
-    className: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.array,
-      PropTypes.object,
-    ]),
-    disabled: PropTypes.bool,
-    tabIndex: PropTypes.string,
-    disabledClassName: PropTypes.string,
-    focus: PropTypes.bool, // private
-    id: PropTypes.string, // private
-    panelId: PropTypes.string, // private
-    selected: PropTypes.bool, // private
-    selectedClassName: PropTypes.string,
-    tabRef: PropTypes.func, // private
-  };
-
-  componentDidMount() {
-    this.checkFocus();
-  }
+const propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.object,
+    PropTypes.string,
+  ]),
+  className: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.array,
+    PropTypes.object,
+  ]),
+  disabled: PropTypes.bool,
+  tabIndex: PropTypes.string,
+  disabledClassName: PropTypes.string,
+  focus: PropTypes.bool, // private
+  id: PropTypes.string, // private
+  panelId: PropTypes.string, // private
+  selected: PropTypes.bool, // private
+  selectedClassName: PropTypes.string,
+  tabRef: PropTypes.func,
+};
 
-  componentDidUpdate() {
-    this.checkFocus();
-  }
-
-  checkFocus() {
-    const { selected, focus } = this.props;
+const Tab = (props) => {
+  let nodeRef = useRef();
+  const checkFocus = () => {
+    const { selected, focus } = props;
     if (selected && focus) {
-      this.node.focus();
+      nodeRef.current.focus();
     }
-  }
-
-  render() {
-    const {
-      children,
-      className,
-      disabled,
-      disabledClassName,
-      focus, // unused
-      id,
-      panelId,
-      selected,
-      selectedClassName,
-      tabIndex,
-      tabRef,
-      ...attributes
-    } = this.props;
+  };
+  useEffect(() => {
+    checkFocus();
+  });
+  const {
+    children,
+    className,
+    disabled,
+    disabledClassName,
+    focus, // unused
+    id,
+    panelId,
+    selected,
+    selectedClassName,
+    tabIndex,
+    tabRef,
+    ...attributes
+  } = props;
 
-    return (
-      <li
-        {...attributes}
-        className={cx(className, {
-          [selectedClassName]: selected,
-          [disabledClassName]: disabled,
-        })}
-        ref={(node) => {
-          this.node = node;
-          if (tabRef) tabRef(node);
-        }}
-        role="tab"
-        id={id}
-        aria-selected={selected ? 'true' : 'false'}
-        aria-disabled={disabled ? 'true' : 'false'}
-        aria-controls={panelId}
-        tabIndex={tabIndex || (selected ? '0' : null)}
-        data-rttab
-      >
-        {children}
-      </li>
-    );
-  }
-}
+  return (
+    <li
+      {...attributes}
+      className={cx(className, {
+        [selectedClassName]: selected,
+        [disabledClassName]: disabled,
+      })}
+      ref={(node) => {
+        nodeRef.current = node;
+        if (tabRef) tabRef(node);
+      }}
+      role="tab"
+      id={id}
+      aria-selected={selected ? 'true' : 'false'}
+      aria-disabled={disabled ? 'true' : 'false'}
+      aria-controls={panelId}
+      tabIndex={tabIndex || (selected ? '0' : null)}
+      data-rttab
+    >
+      {children}
+    </li>
+  );
+};
+Tab.propTypes = propTypes;
 
 Tab.tabsRole = 'Tab';
+Tab.defaultProps = DEFAULT_PROPS;
+export default Tab;
diff --git a/src/components/TabList.js b/src/components/TabList.js
@@ -1,30 +1,29 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React from 'react';
 import cx from 'clsx';
 
-export default class TabList extends Component {
-  static defaultProps = {
-    className: 'react-tabs__tab-list',
-  };
+const defaultProps = {
+  className: 'react-tabs__tab-list',
+};
+const propTypes = {
+  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  className: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.array,
+    PropTypes.object,
+  ]),
+};
+const TabList = (props) => {
+  const { children, className, ...attributes } = props;
 
-  static propTypes = {
-    children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    className: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.array,
-      PropTypes.object,
-    ]),
-  };
-
-  render() {
-    const { children, className, ...attributes } = this.props;
-
-    return (
-      <ul {...attributes} className={cx(className)} role="tablist">
-        {children}
-      </ul>
-    );
-  }
-}
+  return (
+    <ul {...attributes} className={cx(className)} role="tablist">
+      {children}
+    </ul>
+  );
+};
 
 TabList.tabsRole = 'TabList';
+TabList.propTypes = propTypes;
+TabList.defaultProps = defaultProps;
+export default TabList;
diff --git a/src/components/TabPanel.js b/src/components/TabPanel.js
@@ -1,56 +1,54 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React from 'react';
 import cx from 'clsx';
 
 const DEFAULT_CLASS = 'react-tabs__tab-panel';
+const defaultProps = {
+  className: DEFAULT_CLASS,
+  forceRender: false,
+  selectedClassName: `${DEFAULT_CLASS}--selected`,
+};
+const propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.array,
+    PropTypes.object,
+  ]),
+  forceRender: PropTypes.bool,
+  id: PropTypes.string, // private
+  selected: PropTypes.bool, // private
+  selectedClassName: PropTypes.string,
+  tabId: PropTypes.string, // private
+};
+const TabPanel = (props) => {
+  const {
+    children,
+    className,
+    forceRender,
+    id,
+    selected,
+    selectedClassName,
+    tabId,
+    ...attributes
+  } = props;
 
-export default class TabPanel extends Component {
-  static defaultProps = {
-    className: DEFAULT_CLASS,
-    forceRender: false,
-    selectedClassName: `${DEFAULT_CLASS}--selected`,
-  };
-
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.array,
-      PropTypes.object,
-    ]),
-    forceRender: PropTypes.bool,
-    id: PropTypes.string, // private
-    selected: PropTypes.bool, // private
-    selectedClassName: PropTypes.string,
-    tabId: PropTypes.string, // private
-  };
-
-  render() {
-    const {
-      children,
-      className,
-      forceRender,
-      id,
-      selected,
-      selectedClassName,
-      tabId,
-      ...attributes
-    } = this.props;
-
-    return (
-      <div
-        {...attributes}
-        className={cx(className, {
-          [selectedClassName]: selected,
-        })}
-        role="tabpanel"
-        id={id}
-        aria-labelledby={tabId}
-      >
-        {forceRender || selected ? children : null}
-      </div>
-    );
-  }
-}
+  return (
+    <div
+      {...attributes}
+      className={cx(className, {
+        [selectedClassName]: selected,
+      })}
+      role="tabpanel"
+      id={id}
+      aria-labelledby={tabId}
+    >
+      {forceRender || selected ? children : null}
+    </div>
+  );
+};
 
 TabPanel.tabsRole = 'TabPanel';
+TabPanel.propTypes = propTypes;
+TabPanel.defaultProps = defaultProps;
+export default TabPanel;