fix: CTabPane: fix 'active' prop, refactor component

Author: woothu

src/tabs/CTabPane.js

@@ -1,4 +1,9 @@
-import React, { useState, useContext, useRef, useEffect } from 'react'
+import React, {
+  useState,
+  useContext,
+  useRef,
+  useEffect
+} from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import CFade from '../fade/CFade'
@@ -9,7 +14,7 @@ import { Context } from './CTabs.js'
 import { Context as FadeContext } from './CTabContent.js'
 
 //component - CoreUI / CTabPane
-const getIndex = (el) => Array.from(el.parentNode.children).indexOf(el)
+const getIndex = el => Array.from(el.parentNode.children).indexOf(el)
 
 const getState = r => r.current.dataset.tab || getIndex(r.current)
 
@@ -22,17 +27,22 @@ const CTabPane = props => {
     ...attributes
   } = props
 
-  const context = useContext(Context)
+  const { active: activeTab, setActiveTab } = useContext(Context) || {} 
   const fade = useContext(FadeContext)
-  const act = (context || {}).active
   const ref = typeof innerRef === 'object' ? innerRef : useRef()
   typeof innerRef === 'function' && innerRef(ref)
-  
-  const [isActive, setIsActive] = useState(active)
+
+  const [isActive, setIsActive] = useState()
+
+  useEffect(() => {
+    setIsActive(activeTab === getState(ref))
+  }, [activeTab])
 
   useEffect(() => {
-    setIsActive(active !== undefined ? active : act === getState(ref))
-  }, [act, active])
+    if (active !== undefined) {
+      setActiveTab ? setActiveTab(active && getState(ref)) : setIsActive(active)
+    }
+  }, [active])
 
   //render
   const classes = classNames(
@@ -56,9 +66,8 @@ const CTabPane = props => {
 
 CTabPane.propTypes = {
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
-  //
   innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  active: PropTypes.bool,
+  active: PropTypes.bool
 }
 
 export default CTabPane

src/tabs/CTabs.js

@@ -11,10 +11,12 @@ const CTabs = props => {
     onActiveTabChange
   } = props
 
-  const [active, setActive] = useState()
-  useEffect(() => setActive(activeTab), [activeTab])
+  const [active, setActive] = useState(0)
+  useEffect(() => {
+    activeTab !== undefined && setActive(activeTab)
+  }, [activeTab])
 
-  const setActiveTab = (tab) => {
+  const setActiveTab = tab => {
     onActiveTabChange && onActiveTabChange(tab)
     setActive(tab)
   }
@@ -34,8 +36,4 @@ CTabs.propTypes = {
   onActiveTabChange: PropTypes.func,
 }
 
-CTabs.defaultProps = {
-  activeTab: 0
-}
-
 export default CTabs