forked from mui/material-ui
/
Breadcrumbs.js
160 lines (148 loc) · 4.3 KB
/
Breadcrumbs.js
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
import React from 'react';
import warning from 'warning';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import Typography from '../Typography';
import BreadcrumbCollapsed from './BreadcrumbCollapsed';
import BreadcrumbSeparator from './BreadcrumbSeparator';
const styles = {
/* Styles applied to the root element. */
root: {},
/* Styles applied to the ol element. */
ol: {
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
padding: 0, // Reset
margin: 0, // Reset
},
/* Styles applied to the li element. */
li: {
listStyle: 'none',
},
/* Styles applied to the separator element. */
separator: {},
};
function insertSeparators(items, className, separator) {
return items.reduce((acc, current, index) => {
if (index < items.length - 1) {
acc = acc.concat(
current,
<BreadcrumbSeparator
// eslint-disable-next-line react/no-array-index-key
key={`separator-${index}`}
className={className}
>
{separator}
</BreadcrumbSeparator>,
);
} else {
acc.push(current);
}
return acc;
}, []);
}
const Breadcrumbs = React.forwardRef(function Breadcrumbs(props, ref) {
const {
children,
classes,
className,
component: Component = 'nav',
itemsAfterCollapse = 1,
itemsBeforeCollapse = 1,
maxItems = 8,
separator = '/',
...other
} = props;
const [expanded, setExpanded] = React.useState(false);
const renderItemsBeforeAndAfter = allItems => {
const handleClickExpand = () => {
setExpanded(true);
};
// This defends against someone passing weird input, to ensure that if all
// items would be shown anyway, we just show all items without the EllipsisItem
if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
warning(
false,
[
'Material-UI: you have provided an invalid combination of properties to the Breadcrumbs.',
`itemsAfterCollapse={${itemsAfterCollapse}} +itemsBeforeCollapse={${itemsBeforeCollapse}} >= maxItems={${maxItems}}`,
].join('\n'),
);
return allItems;
}
return [
...allItems.slice(0, itemsBeforeCollapse),
<BreadcrumbCollapsed key="ellipsis" onClick={handleClickExpand} />,
...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length),
];
};
const allItems = React.Children.toArray(children)
.filter(child => React.isValidElement(child))
.map((child, index) => (
// eslint-disable-next-line react/no-array-index-key
<li className={classes.li} key={`child-${index}`}>
{child}
</li>
));
return (
<Typography
ref={ref}
component={Component}
color="textSecondary"
className={clsx(classes.root, className)}
{...other}
>
<ol className={classes.ol}>
{insertSeparators(
expanded || (maxItems && allItems.length <= maxItems)
? allItems
: renderItemsBeforeAndAfter(allItems),
classes.separator,
separator,
)}
</ol>
</Typography>
);
});
Breadcrumbs.propTypes = {
/**
* The breadcrumb children.
*/
children: PropTypes.node.isRequired,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
* By default, it maps the variant to a good default headline component.
*/
component: PropTypes.elementType,
/**
* If max items is exceeded, the number of items to show after the ellipsis.
*/
itemsAfterCollapse: PropTypes.number,
/**
* If max items is exceeded, the number of items to show before the ellipsis.
*/
itemsBeforeCollapse: PropTypes.number,
/**
* Specifies the maximum number of breadcrumbs to display. When there are more
* than the maximum number, only the first and last will be shown, with an
* ellipsis in between.
*/
maxItems: PropTypes.number,
/**
* Custom separator node.
*/
separator: PropTypes.node,
};
export default withStyles(styles, { name: 'MuiBreadcrumbs' })(Breadcrumbs);