/
Breadcrumb.tsx
76 lines (66 loc) · 1.83 KB
/
Breadcrumb.tsx
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
import classNames from 'classnames';
import * as React from 'react';
import PropTypes from 'prop-types';
import { useBootstrapPrefix } from './ThemeProvider';
import BreadcrumbItem from './BreadcrumbItem';
import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
export interface BreadcrumbProps
extends BsPrefixProps,
React.HTMLAttributes<HTMLElement> {
label?: string;
listProps?: React.OlHTMLAttributes<HTMLOListElement>;
}
const propTypes = {
/**
* @default 'breadcrumb'
*/
bsPrefix: PropTypes.string,
/**
* ARIA label for the nav element
* https://www.w3.org/TR/wai-aria-practices/#breadcrumb
*/
label: PropTypes.string,
/**
* Additional props passed as-is to the underlying `<ol>` element
*/
listProps: PropTypes.object,
as: PropTypes.elementType,
};
const Breadcrumb: BsPrefixRefForwardingComponent<'nav', BreadcrumbProps> =
React.forwardRef<HTMLElement, BreadcrumbProps>(
(
{
bsPrefix,
className,
listProps = {},
children,
label = 'breadcrumb',
// Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
as: Component = 'nav',
...props
},
ref,
) => {
const prefix = useBootstrapPrefix(bsPrefix, 'breadcrumb');
return (
<Component
aria-label={label}
className={className}
ref={ref}
{...props}
>
<ol
{...listProps}
className={classNames(prefix, listProps?.className)}
>
{children}
</ol>
</Component>
);
},
);
Breadcrumb.displayName = 'Breadcrumb';
Breadcrumb.propTypes = propTypes;
export default Object.assign(Breadcrumb, {
Item: BreadcrumbItem,
});