@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
86 lines • 3.98 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Breadcrumbs as MuiBreadcrumbs, Link, Typography, Chip, } from '@mui/material';
import { NavigateNext, ChevronRight, ArrowForwardIos, Home, } from '@mui/icons-material';
import { styled } from '@mui/material/styles';
const StyledBreadcrumbs = styled(MuiBreadcrumbs, {
shouldForwardProp: (prop) => prop !== 'variant',
})(({ theme, variant = 'default' }) => ({
'& .MuiBreadcrumbs-li': {
display: 'flex',
alignItems: 'center',
},
'& .MuiBreadcrumbs-separator': {
margin: theme.spacing(0, 1),
color: theme.palette.text.secondary,
},
...(variant === 'outlined' && {
padding: theme.spacing(1, 2),
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadius,
backgroundColor: theme.palette.background.paper,
}),
...(variant === 'contained' && {
padding: theme.spacing(1, 2),
backgroundColor: theme.palette.grey[100],
borderRadius: theme.shape.borderRadius,
...(theme.palette.mode === 'dark' && {
backgroundColor: theme.palette.grey[800],
}),
}),
}));
const BreadcrumbLink = styled(Link)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
gap: theme.spacing(0.5),
textDecoration: 'none',
color: theme.palette.text.secondary,
fontSize: theme.typography.body2.fontSize,
'&:hover': {
color: theme.palette.primary.main,
textDecoration: 'underline',
},
'&:focus': {
outline: `2px solid ${theme.palette.primary.main}`,
outlineOffset: 2,
borderRadius: 2,
},
}));
const BreadcrumbText = styled(Typography)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
gap: theme.spacing(0.5),
color: theme.palette.text.primary,
fontSize: theme.typography.body2.fontSize,
fontWeight: 500,
}));
const getSeparatorIcon = (separatorIcon) => {
if (React.isValidElement(separatorIcon)) {
return separatorIcon;
}
switch (separatorIcon) {
case 'chevron':
return _jsx(ChevronRight, { fontSize: "small" });
case 'arrow':
return _jsx(ArrowForwardIos, { fontSize: "small" });
case 'slash':
return '/';
default:
return _jsx(NavigateNext, { fontSize: "small" });
}
};
export const Breadcrumbs = ({ items, variant = 'default', separatorIcon = 'chevron', showHomeIcon = false, maxItems, chipVariant = false, size = 'medium', ...props }) => {
const separator = getSeparatorIcon(separatorIcon);
const renderBreadcrumbItem = (item, index, isLast) => {
const content = (_jsxs(_Fragment, { children: [showHomeIcon && index === 0 && _jsx(Home, { fontSize: "small" }), item.icon, item.label] }));
if (chipVariant) {
return (_jsx(Chip, { label: content, variant: isLast ? 'filled' : 'outlined', size: size === 'large' ? 'medium' : 'small', clickable: !isLast && !item.disabled && (!!item.href || !!item.onClick), onClick: !isLast && !item.disabled ? item.onClick : undefined, component: !isLast && item.href && !item.disabled ? 'a' : 'div', href: !isLast && item.href && !item.disabled ? item.href : undefined, disabled: item.disabled, color: isLast ? 'primary' : 'default' }, index));
}
if (isLast || item.disabled) {
return (_jsx(BreadcrumbText, { variant: "body2", children: content }, index));
}
return (_jsx(BreadcrumbLink, { href: item.href, onClick: item.onClick, underline: "none", ...(item.href ? {} : { component: 'button' }), children: content }, index));
};
return (_jsx(StyledBreadcrumbs, { variant: variant, separator: separator, maxItems: maxItems, ...props, children: items.map((item, index) => renderBreadcrumbItem(item, index, index === items.length - 1)) }));
};
//# sourceMappingURL=Breadcrumbs.js.map