qpp-style 9.10.2 → 9.11.0

package/components/Tabs/index.js

@@ -1,56 +1,55 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import MuiTabs from '@material-ui/core/Tabs';
-
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import MuiTabs from '@material-ui/core/Tabs'
 import TabPanel from './TabPanel'
 import LinkTab from './Tab'
 
 const isTabPanel = (child) => child?.type === TabPanel
 
 const getPanelChildren = (children) => {
-  return React.Children.toArray(children).filter(isTabPanel);
+  return React.Children.toArray(children).filter(isTabPanel)
 };
 
 const Tabs = ({ children, onChange, selected, defaultSelectedId, ariaLabel }) => {
-  const [tabList, setTabList] = useState([]);
-  const [value, setValue] = useState(defaultSelectedId || selected);
+  const [value, setValue] = useState(defaultSelectedId || selected)
+  
+  useEffect(() => {
+    if (selected) {
+      setValue(selected)
+    }
+  }, [selected])
+
+  if (!children) return null
 
   const handleChange = (event, newValue) => {
     if (onChange) {
-      onChange(tabList[newValue]?.id, event);
+      onChange(tabList[newValue]?.id, event)
     }
     if (setValue) {
-      setValue(tabList[newValue]?.id);
+      setValue(tabList[newValue]?.id)
     }
-  };
+  }
 
   const renderChildren = () => {
     return React.Children.map(children, (child, index) => {
       if (isTabPanel(child)) {
         return React.cloneElement(child, { index, value: tabIndex })
       }
-      return child;
-    });
-  };
+      return child
+    })
+  }  
 
-  useEffect(() => {
-    const panels = getPanelChildren(children);
-    const tabs = panels.map(
-      (panel) => {
-        const { id, tab, tabHref, disabled } = panel?.props || {};
-        return { tab, tabHref, disabled, id };
-      },
-    );
-    setTabList(tabs);
-  }, []);
+  const panels = getPanelChildren(children)
+  
+  const tabList = panels.map(
+    (panel) => {
+      const { id, tab, tabHref, disabled } = panel?.props || {}
+      return { tab, tabHref, disabled, id }
+    },
+  )
 
-  useEffect(() => {
-    if (selected) {
-      setValue(selected);
-    }
-  }, [selected]);
-
-  const foundIndex = tabList.findIndex(({ id }) => id === value);
+  const foundIndex = tabList.findIndex(({ id }) => id === value)
+  
   const tabIndex = foundIndex >= 0 ? foundIndex : 0
 
   return (
@@ -71,16 +70,19 @@ const Tabs = ({ children, onChange, selected, defaultSelectedId, ariaLabel }) =>
       </div>
       {renderChildren()}
     </>
-  );
-};
+  )
+}
 
 Tabs.propTypes = {
   ariaLabel: PropTypes.string,
   selected: PropTypes.string,
   defaultSelectedId: PropTypes.string,
   onChange: PropTypes.func,
-  children: PropTypes.node,
-};
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.array,
+  ])
+}
 
 Tabs.defaultProps = {
   ariaLabel: 'qpp tabs',
@@ -88,6 +90,6 @@ Tabs.defaultProps = {
   defaultSelectedId: null,
   onChange: null,
   children: null,
-};
+}
 
-export default Tabs;
+export default Tabs