feat: Migrate Tabs to be a ref forwarder

react-bootstrap · Jul 28, 2019 · f16d29b · f16d29b
1 parent 7fa9489
commit f16d29b
Showing 1 changed file with 46 additions and 46 deletions.
diff --git a/src/Tabs.js b/src/Tabs.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import requiredForA11y from 'prop-types-extra/lib/isRequiredForA11y';
-import { uncontrollable } from 'uncontrollable';
+import { useUncontrolled } from 'uncontrollable';
 
 import Nav from './Nav';
 import NavLink from './NavLink';
@@ -93,8 +93,8 @@ function getDefaultActiveKey(children) {
   return defaultActiveKey;
 }
 
-class Tabs extends React.Component {
-  renderTab(child) {
+const Tabs = React.forwardRef((props, ref) => {
+  const renderTab = child => {
     const { title, eventKey, disabled, tabClassName } = child.props;
     if (title == null) {
       return null;
@@ -110,51 +110,51 @@ class Tabs extends React.Component {
         {title}
       </NavItem>
     );
-  }
-
-  render() {
-    const {
-      id,
-      onSelect,
-      transition,
-      mountOnEnter,
-      unmountOnExit,
-      children,
-      activeKey = getDefaultActiveKey(children),
-      ...props
-    } = this.props;
+  };
+
+  const {
+    id,
+    onSelect,
+    transition,
+    mountOnEnter,
+    unmountOnExit,
+    children,
+    activeKey = getDefaultActiveKey(children),
+    ...controlledProps
+  } = useUncontrolled(props, {
+    activeKey: 'onSelect',
+  });
 
-    return (
-      <TabContainer
-        id={id}
-        activeKey={activeKey}
-        onSelect={onSelect}
-        transition={transition}
-        mountOnEnter={mountOnEnter}
-        unmountOnExit={unmountOnExit}
-      >
-        <Nav {...props} role="tablist" as="nav">
-          {map(children, this.renderTab)}
-        </Nav>
-
-        <TabContent>
-          {map(children, child => {
-            const childProps = { ...child.props };
-            delete childProps.title;
-            delete childProps.disabled;
-            delete childProps.tabClassName;
-
-            return <TabPane {...childProps} />;
-          })}
-        </TabContent>
-      </TabContainer>
-    );
-  }
-}
+  return (
+    <TabContainer
+      ref={ref}
+      id={id}
+      activeKey={activeKey}
+      onSelect={onSelect}
+      transition={transition}
+      mountOnEnter={mountOnEnter}
+      unmountOnExit={unmountOnExit}
+    >
+      <Nav {...controlledProps} role="tablist" as="nav">
+        {map(children, renderTab)}
+      </Nav>
+
+      <TabContent>
+        {map(children, child => {
+          const childProps = { ...child.props };
+
+          delete childProps.title;
+          delete childProps.disabled;
+          delete childProps.tabClassName;
+
+          return <TabPane {...childProps} />;
+        })}
+      </TabContent>
+    </TabContainer>
+  );
+});
 
 Tabs.propTypes = propTypes;
 Tabs.defaultProps = defaultProps;
 
-export default uncontrollable(Tabs, {
-  activeKey: 'onSelect',
-});
+export default Tabs;