-
Notifications
You must be signed in to change notification settings - Fork 357
/
PageBreadcrumb.tsx
78 lines (74 loc) · 2.87 KB
/
PageBreadcrumb.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
77
78
import * as React from 'react';
import { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/Page/page';
import { formatBreakpointMods, Mods } from '../../helpers/util';
import { PageContext } from './PageContext';
import { PageMainBody } from './PageMainBody';
export interface PageBreadcrumbProps extends React.HTMLProps<HTMLElement> {
/** Additional classes to apply to the PageBreadcrumb */
className?: string;
/** Content rendered inside of the PageBreadcrumb */
children?: React.ReactNode;
/** Limits the width of the breadcrumb */
isWidthLimited?: boolean;
/** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints */
stickyOnBreakpoint?: {
default?: 'top' | 'bottom';
sm?: 'top' | 'bottom';
md?: 'top' | 'bottom';
lg?: 'top' | 'bottom';
xl?: 'top' | 'bottom';
'2xl'?: 'top' | 'bottom';
};
/** Flag indicating if PageBreadcrumb should have a shadow at the top */
hasShadowTop?: boolean;
/** Flag indicating if PageBreadcrumb should have a shadow at the bottom */
hasShadowBottom?: boolean;
/** Flag indicating if the PageBreadcrumb has a scrolling overflow */
hasOverflowScroll?: boolean;
/** @beta Flag indicating whether children passed to the component should be wrapped by a PageMainBody.
* Set this to false in order to pass multiple, custom PageMainBody's as children.
*/
hasMainBodyWrapper?: boolean;
/** Adds an accessible name to the breadcrumb section. Required when the hasOverflowScroll prop is set to true. */
'aria-label'?: string;
}
export const PageBreadcrumb = ({
className = '',
children,
isWidthLimited,
stickyOnBreakpoint,
hasShadowTop = false,
hasShadowBottom = false,
hasOverflowScroll = false,
'aria-label': ariaLabel,
hasMainBodyWrapper = true,
...props
}: PageBreadcrumbProps) => {
const { height, getVerticalBreakpoint } = React.useContext(PageContext);
React.useEffect(() => {
if (hasOverflowScroll && !ariaLabel) {
/* eslint-disable no-console */
console.warn('PageBreadcrumb: An accessible aria-label is required when hasOverflowScroll is set to true.');
}
}, [hasOverflowScroll, ariaLabel]);
return (
<section
className={css(
styles.pageMainBreadcrumb,
formatBreakpointMods(stickyOnBreakpoint as Mods, styles, 'sticky-', getVerticalBreakpoint(height), true),
isWidthLimited && styles.modifiers.limitWidth,
hasShadowTop && styles.modifiers.shadowTop,
hasShadowBottom && styles.modifiers.shadowBottom,
hasOverflowScroll && styles.modifiers.overflowScroll,
className
)}
{...(hasOverflowScroll && { tabIndex: 0 })}
aria-label={ariaLabel}
{...props}
>
{hasMainBodyWrapper ? <PageMainBody>{children}</PageMainBody> : children}
</section>
);
};
PageBreadcrumb.displayName = 'PageBreadcrumb';