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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | 1x 9x 9x 1x 9x 9x 9x 9x 1x | import {forwardRef, useEffect, useRef} from 'react'
import cx from 'classnames'
import PropTypes from 'prop-types'
import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs'
import {CLASS_TAB, CLASS_TAB_ACTIVE, CLASS_TAB_COUNT, CLASS_TAB_DISABLED, CLASS_TAB_ICON} from './config.js'
const MoleculeTab = forwardRef(
(
{
active,
autoScrollIntoView = true,
count,
disabled,
icon,
id = 'molecule-tab-content',
isIntersecting,
label,
numTab,
onChange
},
forwardedRef
) => {
const innerRef = useRef()
const handleChange = ev => {
!disabled && onChange(ev, {numTab})
}
useEffect(() => {
Iif (autoScrollIntoView && active && isIntersecting) {
innerRef.current.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'start'
})
}
}, [autoScrollIntoView, active, isIntersecting, innerRef])
const className = cx(CLASS_TAB, {
[CLASS_TAB_ACTIVE]: active,
[CLASS_TAB_DISABLED]: disabled
})
return (
<li
className={className}
onClick={handleChange}
ref={useMergeRefs(innerRef, forwardedRef)}
role="tab"
aria-selected={active}
aria-controls={`${id}-${numTab}`}
>
{icon && <span className={CLASS_TAB_ICON}>{icon}</span>}
{!isNaN(count) && <span className={CLASS_TAB_COUNT}>{count}</span>}
<span>{label}</span>
</li>
)
}
)
MoleculeTab.propTypes = {
/** Enable scroll into view funcionality */
autoScrollIntoView: PropTypes.bool,
/** Handler on Change Tabs */
onChange: PropTypes.func,
/** icon (React component) */
icon: PropTypes.node,
/** id used to make tabs unique per page */
id: PropTypes.string,
/** count to display */
count: PropTypes.string,
/** text to display */
label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/** Tab number */
numTab: PropTypes.number,
/** is active */
active: PropTypes.bool,
/** is disabled */
disabled: PropTypes.bool,
/** determines if the container element is intersecting in the view **/
isIntersecting: PropTypes.bool
}
export default MoleculeTab
|