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; |