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 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | 1x 3x 3x 3x 3x 3x 6x 1x 1x | import PropTypes from 'prop-types'
import useControlledState from '@s-ui/react-hooks/lib/useControlledState/index.js'
import ChevronRight from '@s-ui/react-icons/lib/Chevronright'
import {BASE_CLASS, breadcrumbClassName, isFunction} from './settings.js'
const BreadcrumbBasic = ({
items,
icon,
linkFactory: Link = ({to, href, className, children}) => (
<a href={to || href} className={className}>
{children}
</a>
),
isScrollable = false,
isExpanded,
defaultIsExpanded = false,
onExpand,
onCollapse,
onClick
}) => {
const [isExpandedState, setIsExpandedState] = useControlledState(isExpanded, defaultIsExpanded)
const handleClick = event => {
setIsExpandedState(!isExpandedState)
isFunction(onClick) && onClick(event, {value: !isExpandedState})
if (isExpandedState) {
isFunction(onCollapse) && onCollapse(event, {value: false})
} else {
isFunction(onExpand) && onExpand(event, {value: true})
}
}
const IconAngle = icon || ChevronRight
const numItems = items.length - 1
return (
<nav aria-label="breadcrumb" role="navigation">
<div
className={breadcrumbClassName({
isExpanded: isExpandedState,
isScrollable
})}
>
<button onClick={handleClick} className={`${BASE_CLASS}-btn`}>
...
</button>
<ul className={`${BASE_CLASS}-list`}>
{items.map(({url, label}, index) => (
<li className={`${BASE_CLASS}-listItem`} key={index}>
{index !== 0 && index <= numItems && <IconAngle svgClass={`${BASE_CLASS}-icon`} />}
{url ? (
<Link to={url} href={url} className={`${BASE_CLASS}-link`}>
{label}
</Link>
) : (
label
)}
</li>
))}
</ul>
</div>
</nav>
)
}
BreadcrumbBasic.displayName = 'BreadcrumbBasic'
BreadcrumbBasic.propTypes = {
/**
* List of link objects
*/
items: PropTypes.arrayOf(
PropTypes.shape({
/**
* link text
*/
label: PropTypes.string.isRequired,
/**
* URL for the link
*/
url: PropTypes.string
})
).isRequired,
/**
* Comments custom icon (React component).
*/
icon: PropTypes.func,
/**
* Function for creating links so it allows to customize it
*/
linkFactory: PropTypes.func,
/**
* Boolean that allows us to show the items with a horizontal scroll
*/
isScrollable: PropTypes.bool,
/**
* The controlled value of the expanded l&f of the component
*/
isExpanded: PropTypes.bool,
/**
* The initial value of the expanded l&f of the component
*/
defaultIsExpanded: PropTypes.bool,
/** expand handler **/
onExpand: PropTypes.func,
/** collapse handler **/
onCollapse: PropTypes.func,
/** click handler (expand or collapse) **/
onClick: PropTypes.func
}
export default BreadcrumbBasic
|