All files / components/Breadcrumb 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
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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* 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;