fix: move fade functionality from CTabs to CTabContent

Author: woothu

src/CTabContent.js

@@ -2,28 +2,37 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 //component - CoreUI / CTabContent
+export const Context = React.createContext()
 
 const CTabContent = props => {
 
   const {
     className,
     //
     innerRef,
+    fade,
     ...attributes
   } = props;
 
   // render
   const classes = classNames('tab-content',className)
 
   return (
-    <div className={classes} {...attributes} ref={innerRef}/>
+    <Context.Provider value={fade}>
+      <div className={classes} {...attributes} ref={innerRef}/>
+    </Context.Provider>
   )
 }
 
 CTabContent.propTypes = {
   className: PropTypes.string,
   //
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
-};
+  fade: PropTypes.bool
+}
+
+CTabContent.defaultProps = {
+  fade: true
+}
 
 export default CTabContent

src/CTabPane.js

@@ -4,14 +4,14 @@ import classNames from 'classnames'
 import CFade from './CFade'
 
 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 getState = r => r.current.dataset.tab || getIndex(r.current)
 
 const CTabPane = props => {
-
   const {
     className,
     //
@@ -21,6 +21,7 @@ const CTabPane = props => {
   } = props
 
   const context = useContext(Context)
+  const fade = useContext(FadeContext)
   const act = (context || {}).active
   const ref = createRef()
   innerRef && innerRef(ref)
@@ -40,7 +41,7 @@ const CTabPane = props => {
   return (
     <CFade
       in={isActive}
-      baseClass={context && context.fade ? 'fade' : ''}
+      baseClass={fade ? 'fade' : ''}
       className={classes} 
       {...attributes} 
       innerRef={ref}
@@ -52,7 +53,7 @@ CTabPane.propTypes = {
   className: PropTypes.string,
   //
   innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.object]),
-  active: PropTypes.bool
-};
+  active: PropTypes.bool,
+}
 
 export default CTabPane

src/CTabs.js

@@ -8,8 +8,7 @@ const CTabs = props => {
   const {
     children,
     activeTab,
-    onActiveTabChange,
-    fade
+    onActiveTabChange
   } = props
 
   const [active, setActive] = useState()
@@ -22,7 +21,7 @@ const CTabs = props => {
 
   return (
     <React.Fragment>
-      <Context.Provider value={{active, setActiveTab, fade}}>
+      <Context.Provider value={{active, setActiveTab}}>
         {children}
       </Context.Provider>
     </React.Fragment>
@@ -33,12 +32,10 @@ CTabs.propTypes = {
   children: PropTypes.node,
   activeTab: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   onActiveTabChange: PropTypes.func,
-  fade: PropTypes.bool
-};
+}
 
 CTabs.defaultProps = {
-  activeTab: 0,
-  fade: true
-};
+  activeTab: 0
+}
 
 export default CTabs