Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 1x 7x 7x 1x 1x 7x 9x 1x 1x | import {Children, cloneElement} from 'react'
import PropTypes from 'prop-types'
import useControlledState from '@s-ui/react-hooks/lib/useControlledState'
import MoleculeTab from './components/MoleculeTab.js'
import MoleculeTabs from './components/MoleculeTabs.js'
import {TYPES, VARIANTS} from './config.js'
const MoleculeTabsWithStateActive = ({
children,
activeTabIndex: activeTabIndexProp,
defaultActiveTabIndex: defaultActiveTabIndexProp = 1,
onChange,
...props
}) => {
const [activeTab, setActiveTab] = useControlledState(activeTabIndexProp, defaultActiveTabIndexProp)
const handleChange = (e, {numTab: tabIndex}) => {
setActiveTab(tabIndex)
typeof onChange === 'function' && onChange(e, {numTab: tabIndex})
}
return (
<MoleculeTabs {...props} onChange={handleChange}>
{Children.toArray(children)
.filter(Boolean)
.map((child, index) => cloneElement(child, {active: activeTab === index + 1}))}
</MoleculeTabs>
)
}
MoleculeTabsWithStateActive.displayName = 'MoleculeTabsWithStateActive'
MoleculeTabsWithStateActive.propTypes = {
/** defines the active tab */
activeTabIndex: PropTypes.number,
/** defines the initial active tab */
defaultActiveTabIndex: PropTypes.number,
/** children of the component */
children: PropTypes.element,
/** onChange callback */
onChange: PropTypes.func
}
export {
MoleculeTab,
MoleculeTabs,
MoleculeTabsWithStateActive,
TYPES as moleculeTabsTypes,
VARIANTS as moleculeTabsVariants
}
export default MoleculeTabsWithStateActive
|