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 | 1x 1x 1x 1x 1x 1x 1x 1x 6x 6x 6x 6x 6x 3x 1x 1x 1x 1x | /* eslint-disable react/prop-types */
import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { findTypes, StandardProps } from '../../util/component-types';
const cx = lucidClassNames.bind('&-Breadcrumb');
const { any, node } = PropTypes;
export 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,
};
export 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 {...(passThroughs as any)} 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', 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: `A navigation component to show a user's place in a navigation hierarchy and provide links to return to higher points in that hierarchy.`,
categories: ['navigation'],
};
Breadcrumb.propTypes = {
/**
All children should be \`Breadcrumb.Item\`s. Others are ignored.
*/
children: node,
/**
Appended to the component-specific class names set on the root element.
Value is run through the \`classnames\` library.
*/
className: any,
/**
A child element that renders a \`li\`.
*/
Item: node,
};
Breadcrumb.Item = BreadcrumbItem;
export default Breadcrumb;
|