fix: refactor defaultProps to disable warning from react (#518)

Co-authored-by: Daniel Tschinder <[email protected]>

src/components/Tab.js

@@ -47,7 +47,10 @@ const Tab = (props) => {
     tabIndex,
     tabRef,
     ...attributes
-  } = props;
+  } = {
+    ...defaultProps,
+    ...props,
+  };
 
   useEffect(() => {
     if (selected && focus) {
@@ -78,8 +81,8 @@ const Tab = (props) => {
     </li>
   );
 };
-Tab.propTypes = propTypes;
 
+Tab.propTypes = propTypes;
 Tab.tabsRole = 'Tab';
-Tab.defaultProps = defaultProps;
+
 export default Tab;

src/components/TabList.js

@@ -14,7 +14,10 @@ const propTypes = {
   ]),
 };
 const TabList = (props) => {
-  const { children, className, ...attributes } = props;
+  const { children, className, ...attributes } = {
+    ...defaultProps,
+    ...props,
+  };
 
   return (
     <ul {...attributes} className={cx(className)} role="tablist">
@@ -25,5 +28,5 @@ const TabList = (props) => {
 
 TabList.tabsRole = 'TabList';
 TabList.propTypes = propTypes;
-TabList.defaultProps = defaultProps;
+
 export default TabList;

src/components/TabPanel.js

@@ -29,7 +29,10 @@ const TabPanel = (props) => {
     selected,
     selectedClassName,
     ...attributes
-  } = props;
+  } = {
+    ...defaultProps,
+    ...props,
+  };
 
   return (
     <div
@@ -48,5 +51,5 @@ const TabPanel = (props) => {
 
 TabPanel.tabsRole = 'TabPanel';
 TabPanel.propTypes = propTypes;
-TabPanel.defaultProps = defaultProps;
+
 export default TabPanel;

src/components/Tabs.js

@@ -68,11 +68,20 @@ For more information about controlled and uncontrolled mode of react-tabs see ht
  *          It is initialized from the prop defaultFocus, and after the first render it is reset back to false. Later it can become true again when using keys to navigate the tabs.
  */
 const Tabs = (props) => {
-  const { children, defaultFocus, defaultIndex, focusTabOnClick, onSelect } =
-    props;
+  const {
+    children,
+    defaultFocus,
+    defaultIndex,
+    focusTabOnClick,
+    onSelect,
+    ...attributes
+  } = {
+    ...defaultProps,
+    ...props,
+  };
 
   const [focus, setFocus] = useState(defaultFocus);
-  const [mode] = useState(getModeFromProps(props));
+  const [mode] = useState(getModeFromProps(attributes));
   const [selectedIndex, setSelectedIndex] = useState(
     mode === MODE_UNCONTROLLED ? defaultIndex || 0 : null,
   );
@@ -93,7 +102,7 @@ const Tabs = (props) => {
     }, [tabsCount]);
   }
 
-  checkForIllegalModeChange(props, mode);
+  checkForIllegalModeChange(attributes, mode);
 
   const handleSelected = (index, last, event) => {
     // Call change event handler
@@ -113,7 +122,7 @@ const Tabs = (props) => {
     }
   };
 
-  let subProps = { ...props };
+  let subProps = { ...props, ...attributes };
 
   subProps.focus = focus;
   subProps.onSelect = handleSelected;
@@ -128,7 +137,6 @@ const Tabs = (props) => {
 };
 
 Tabs.propTypes = propTypes;
-Tabs.defaultProps = defaultProps;
 Tabs.tabsRole = 'Tabs';
 
 export default Tabs;

src/components/UncontrolledTabs.js

@@ -383,7 +383,10 @@ const UncontrolledTabs = (props) => {
     disableUpDownKeys, // unused
     disableLeftRightKeys, // unused
     ...attributes
-  } = props;
+  } = {
+    ...defaultProps,
+    ...props,
+  };
   return (
     <div
       {...attributes}
@@ -400,6 +403,7 @@ const UncontrolledTabs = (props) => {
     </div>
   );
 };
-UncontrolledTabs.defaultProps = defaultProps;
+
 UncontrolledTabs.propTypes = propTypes;
+
 export default UncontrolledTabs;