59 lines
1.2 KiB
TypeScript
59 lines
1.2 KiB
TypeScript
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
import { chevronRightSmall, Icon } from '@wordpress/icons';
|
||
|
|
import { Fragment } from '@wordpress/element';
|
||
|
|
import { Link } from '@woocommerce/components';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Internal dependencies
|
||
|
|
*/
|
||
|
|
import './product-breadcrumbs.scss';
|
||
|
|
|
||
|
|
type Breadcrumb = {
|
||
|
|
href?: string;
|
||
|
|
title: string | JSX.Element;
|
||
|
|
type?: 'wp-admin' | 'wc-admin';
|
||
|
|
};
|
||
|
|
|
||
|
|
export const ProductBreadcrumbs = ( {
|
||
|
|
breadcrumbs,
|
||
|
|
}: {
|
||
|
|
breadcrumbs: Breadcrumb[];
|
||
|
|
} ) => {
|
||
|
|
const visibleBreadcrumbs =
|
||
|
|
breadcrumbs.length > 3
|
||
|
|
? [
|
||
|
|
breadcrumbs[ 0 ],
|
||
|
|
{
|
||
|
|
title: <>…</>,
|
||
|
|
},
|
||
|
|
breadcrumbs[ breadcrumbs.length - 1 ],
|
||
|
|
]
|
||
|
|
: breadcrumbs;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<span className="woocommerce-product-breadcrumbs">
|
||
|
|
{ visibleBreadcrumbs.map( ( breadcrumb ) => {
|
||
|
|
const { href, title, type } = breadcrumb;
|
||
|
|
return (
|
||
|
|
<Fragment key={ href }>
|
||
|
|
<span className="woocommerce-product-breadcrumbs__item">
|
||
|
|
{ href ? (
|
||
|
|
<Link href={ href } type={ type || 'wp-admin' }>
|
||
|
|
{ title }
|
||
|
|
</Link>
|
||
|
|
) : (
|
||
|
|
title
|
||
|
|
) }
|
||
|
|
</span>
|
||
|
|
<span className="woocommerce-product-breadcrumbs__separator">
|
||
|
|
<Icon icon={ chevronRightSmall } />
|
||
|
|
</span>
|
||
|
|
</Fragment>
|
||
|
|
);
|
||
|
|
} ) }
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
};
|