lucid-ui
Version:
A UI component library from AppNexus.
55 lines (54 loc) • 2.23 kB
JavaScript
/* 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, } from '../../util/component-types';
const cx = lucidClassNames.bind('&-Breadcrumb');
const { any, node } = PropTypes;
const BreadcrumbItem = (_props) => null;
BreadcrumbItem.displayName = 'Breadcrumb.Item';
BreadcrumbItem.peek = {
description: `
Renders a \`li\`
`,
};
BreadcrumbItem.propName = 'Item';
BreadcrumbItem.propTypes = {
children: node,
};
export const Breadcrumb = (props) => {
const { className, ...passThroughs } = props;
const items = findTypes(props, Breadcrumb.Item);
const initialItems = _.initial(items);
const lastItem = _.last(items);
return (React.createElement("nav", Object.assign({}, omitProps(passThroughs, undefined, _.keys(Breadcrumb.propTypes)), { className: cx('&', className) }), !_.isEmpty(items) ? (React.createElement("ul", { className: cx('&-List') },
_.map(initialItems, ({ props, key }) => (React.createElement("li", Object.assign({}, props, { key: key, className: cx('&-Item', props.className) }),
props.children,
React.createElement("span", { className: cx('&-BreadcrumbSeparator') },
React.createElement("span", null),
React.createElement("span", null))))),
React.createElement("li", Object.assign({}, lastItem.props, { key: lastItem.key, className: cx('&-Item', lastItem.props.className) })))) : null));
};
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;