1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import * as React from 'react';
|
4 | import { isFragment } from 'react-is';
|
5 | import PropTypes from 'prop-types';
|
6 | import clsx from 'clsx';
|
7 | import withStyles from '../styles/withStyles';
|
8 | import Typography from '../Typography';
|
9 | import BreadcrumbCollapsed from './BreadcrumbCollapsed';
|
10 | export const styles = {
|
11 |
|
12 | root: {},
|
13 |
|
14 |
|
15 | ol: {
|
16 | display: 'flex',
|
17 | flexWrap: 'wrap',
|
18 | alignItems: 'center',
|
19 | padding: 0,
|
20 | margin: 0,
|
21 | listStyle: 'none'
|
22 | },
|
23 |
|
24 |
|
25 | li: {},
|
26 |
|
27 |
|
28 | separator: {
|
29 | display: 'flex',
|
30 | userSelect: 'none',
|
31 | marginLeft: 8,
|
32 | marginRight: 8
|
33 | }
|
34 | };
|
35 |
|
36 | function insertSeparators(items, className, separator) {
|
37 | return items.reduce((acc, current, index) => {
|
38 | if (index < items.length - 1) {
|
39 | acc = acc.concat(current, React.createElement("li", {
|
40 | "aria-hidden": true,
|
41 | key: `separator-${index}`,
|
42 | className: className
|
43 | }, separator));
|
44 | } else {
|
45 | acc.push(current);
|
46 | }
|
47 |
|
48 | return acc;
|
49 | }, []);
|
50 | }
|
51 |
|
52 | const Breadcrumbs = React.forwardRef(function Breadcrumbs(props, ref) {
|
53 | const {
|
54 | children,
|
55 | classes,
|
56 | className,
|
57 | component: Component = 'nav',
|
58 | expandText = 'Show path',
|
59 | itemsAfterCollapse = 1,
|
60 | itemsBeforeCollapse = 1,
|
61 | maxItems = 8,
|
62 | separator = '/'
|
63 | } = props,
|
64 | other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "component", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"]);
|
65 |
|
66 | const [expanded, setExpanded] = React.useState(false);
|
67 |
|
68 | const renderItemsBeforeAndAfter = allItems => {
|
69 | const handleClickExpand = event => {
|
70 | setExpanded(true);
|
71 |
|
72 |
|
73 | const focusable = event.currentTarget.parentNode.querySelector('a[href],button,[tabindex]');
|
74 |
|
75 | if (focusable) {
|
76 | focusable.focus();
|
77 | }
|
78 | };
|
79 |
|
80 |
|
81 |
|
82 | if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
|
83 | if (process.env.NODE_ENV !== 'production') {
|
84 | console.error(['Material-UI: You have provided an invalid combination of props to the Breadcrumbs.', `itemsAfterCollapse={${itemsAfterCollapse}} + itemsBeforeCollapse={${itemsBeforeCollapse}} >= maxItems={${maxItems}}`].join('\n'));
|
85 | }
|
86 |
|
87 | return allItems;
|
88 | }
|
89 |
|
90 | return [...allItems.slice(0, itemsBeforeCollapse), React.createElement(BreadcrumbCollapsed, {
|
91 | "aria-label": expandText,
|
92 | key: "ellipsis",
|
93 | onClick: handleClickExpand
|
94 | }), ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
|
95 | };
|
96 |
|
97 | const allItems = React.Children.toArray(children).filter(child => {
|
98 | if (process.env.NODE_ENV !== 'production') {
|
99 | if (isFragment(child)) {
|
100 | console.error(["Material-UI: The Breadcrumbs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
101 | }
|
102 | }
|
103 |
|
104 | return React.isValidElement(child);
|
105 | }).map((child, index) => React.createElement("li", {
|
106 | className: classes.li,
|
107 | key: `child-${index}`
|
108 | }, child));
|
109 | return React.createElement(Typography, _extends({
|
110 | ref: ref,
|
111 | component: Component,
|
112 | color: "textSecondary",
|
113 | className: clsx(classes.root, className)
|
114 | }, other), React.createElement("ol", {
|
115 | className: classes.ol
|
116 | }, insertSeparators(expanded || maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems), classes.separator, separator)));
|
117 | });
|
118 | process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes = {
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 | |
125 |
|
126 |
|
127 | children: PropTypes.node,
|
128 |
|
129 | |
130 |
|
131 |
|
132 |
|
133 | classes: PropTypes.object,
|
134 |
|
135 | |
136 |
|
137 |
|
138 | className: PropTypes.string,
|
139 |
|
140 | |
141 |
|
142 |
|
143 |
|
144 | component: PropTypes
|
145 |
|
146 | .elementType,
|
147 |
|
148 | |
149 |
|
150 |
|
151 |
|
152 |
|
153 | expandText: PropTypes.string,
|
154 |
|
155 | |
156 |
|
157 |
|
158 | itemsAfterCollapse: PropTypes.number,
|
159 |
|
160 | |
161 |
|
162 |
|
163 | itemsBeforeCollapse: PropTypes.number,
|
164 |
|
165 | |
166 |
|
167 |
|
168 |
|
169 |
|
170 | maxItems: PropTypes.number,
|
171 |
|
172 | |
173 |
|
174 |
|
175 | separator: PropTypes.node
|
176 | } : void 0;
|
177 | export default withStyles(styles, {
|
178 | name: 'MuiBreadcrumbs'
|
179 | })(Breadcrumbs); |
\ | No newline at end of file |