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