All files / Breadcrumb Breadcrumb.tsx

94.73% Statements 18/19
100% Branches 2/2
66.66% Functions 2/3
100% Lines 18/18

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;