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 | 176x 176x 176x 176x 176x 176x 176x 176x 6x 6x 6x 6x 6x 3x 176x 176x 176x 176x | /* eslint-disable react/prop-types */
import _ from 'lodash';
import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import {
findTypes,
omitProps,
StandardProps,
} from '../../util/component-types';
const cx = lucidClassNames.bind('&-Breadcrumb');
const { any, node } = PropTypes;
interface IBreadcrumbItemProps extends StandardProps {}
const BreadcrumbItem = (_props: IBreadcrumbItemProps): null => null;
BreadcrumbItem.displayName = 'Breadcrumb.Item';
BreadcrumbItem.peek = {
description: `
Renders a \`li\`
`,
};
BreadcrumbItem.propName = 'Item';
BreadcrumbItem.propTypes = {
children: node,
};
interface IBreadcrumbProps
extends StandardProps,
React.DetailedHTMLProps<
React.HTMLAttributes<HTMLDivElement>,
HTMLDivElement
> {
Item?: string | (React.ReactNode & { props: IBreadcrumbItemProps });
}
export const Breadcrumb = (props: IBreadcrumbProps): React.ReactElement => {
const { className, ...passThroughs } = props;
const items = findTypes(props, Breadcrumb.Item);
const initialItems = _.initial(items);
const lastItem = _.last(items);
return (
<nav
{...omitProps(passThroughs, undefined, _.keys(Breadcrumb.propTypes))}
className={cx('&', className)}
>
{!_.isEmpty(items) ? (
<ul className={cx('&-List')}>
{_.map(
initialItems as React.ReactElement[],
({ props, key }): React.ReactNode => (
<li
{...props}
key={key}
className={cx('&-Item', props.className)}
>
{props.children}
<span className={cx('&-BreadcrumbSeparator')}>
<span />
<span />
</span>
</li>
)
)}
<li
{...(lastItem as React.ReactElement).props}
key={(lastItem as React.ReactElement).key}
className={cx(
'&-Item',
(lastItem as React.ReactElement).props.className
)}
/>
</ul>
) : null}
</nav>
);
};
Breadcrumb.displayName = 'Breadcrumb';
Breadcrumb.peek = {
description: `
Navigation component to show a user's place in a navigation hierarchy
and provide links to return to higher points in the hierarchy
`,
categories: ['navigation'],
};
Breadcrumb.propTypes = {
children: node`
All children should be \`Breadcrumb.Item\`s. Others are ignored.
`,
className: any`
Appended to the component-specific class names set on the root element.
Value is run through the \`classnames\` library.
`,
Item: node`
A child element that renders a \`li\`.
`,
};
Breadcrumb.Item = BreadcrumbItem;
export default Breadcrumb;
|