wix-style-react
Version:
wix-style-react
117 lines • 5.74 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Text from '../Text';
import { BreadcrumbsChevronRight } from '@wix/wix-ui-icons-common/system';
import { DATA_HOOKS, DATA_ATTRIBUTES, THEMES } from './constnats';
import { st, classes } from './Breadcrumbs.st.css';
/**
* a way to visualise current navigation path
*/
class Breadcrumbs extends React.PureComponent {
constructor() {
super(...arguments);
this._getIsActive = item => this.props.activeId === item.id;
this._handleItemClick = item => () => !item.disabled && this.props.onClick(item);
this._getItemWrapperDataAttributes = ({ position, item }) => {
return {
'data-hook': `${DATA_HOOKS.ITEM_WRAPPER}-${position}`,
[DATA_ATTRIBUTES.DATA_ACTIVE]: this._getIsActive(item),
[DATA_ATTRIBUTES.DATA_POSITION_ID]: position,
};
};
}
_createItem({ item, isActive, onClick, maxWidth, id }) {
const active = isActive;
const breadcrumbText = value => {
const { theme, size } = this.props;
const isSmallSize = size === 'medium';
return (React.createElement(Text, { dataHook: DATA_HOOKS.BREADCRUMBS_ITEM, weight: isActive ? 'normal' : 'thin', light: theme === THEMES.onDarkBackground, size: isSmallSize ? 'small' : 'medium', ellipsis: true }, value));
};
const defaultBreadcrumb = id => {
const { disabled } = item;
const { className } = this.props;
const button = true;
return (React.createElement("button", { type: "button", "data-hook": `${DATA_HOOKS.BREADCRUMB_CLICKABLE}-${id}`, className: st(classes.item, { button, disabled, active }, className), onClick: onClick, children: breadcrumbText(item.value), style: { maxWidth }, tabIndex: isActive || disabled ? -1 : 0 }));
};
const linkBreadcrumb = id => {
const { disabled } = item;
const { className } = this.props;
const link = true;
return (React.createElement("a", { href: item.link, "data-hook": `${DATA_HOOKS.BREADCRUMB_CLICKABLE}-${id}`, className: st(classes.item, { link, disabled, active }, className), onClick: onClick, children: breadcrumbText(item.value), style: { maxWidth } }));
};
const customBreadcrumb = id => {
const { className } = this.props;
return (React.createElement("span", { "data-hook": `${DATA_HOOKS.BREADCRUMB_CLICKABLE}-${id}`, className: st(classes.item, {}, className), onClick: onClick, children: breadcrumbText(item.customElement), style: { maxWidth } }));
};
if (isActive) {
return defaultBreadcrumb(id);
}
else if (item.customElement) {
return customBreadcrumb(id);
}
else if (item.link) {
return linkBreadcrumb(id);
}
else {
return defaultBreadcrumb(id);
}
}
render() {
const { items, size, itemMaxWidth, theme, className, dataHook } = this.props;
const fullWidth = items.length === 1;
return (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, { size, theme }, className), "data-size": size, "data-theme": theme }, items.map((item, i, allItems) => {
const active = this._getIsActive(item);
return (React.createElement("div", { key: item.id, className: st(classes.itemContainer, { active }), ...this._getItemWrapperDataAttributes({ position: i, item }) },
this._createItem({
id: i,
item,
isActive: active,
onClick: this._handleItemClick(item),
maxWidth: fullWidth ? 'initial' : itemMaxWidth,
}),
allItems[i + 1] && (React.createElement(BreadcrumbsChevronRight, { className: classes.divider }))));
})));
}
}
Breadcrumbs.displayName = 'Breadcrumbs';
Breadcrumbs.propTypes = {
/** Describes each breadcrumbs item:
* - `id` (required) - gives an item numeric identifier
* - `value` (required) - sets the item label to be shown on breadcrumbs
* - `link` - stores a link which user is directed to after clicking on an item
* - `customElement` - contains and renders a custom component or `<a>` link instead of an item value
* - `disabled` - disables an item
*/
items: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
.isRequired,
value: PropTypes.node.isRequired,
link: PropTypes.string,
customElement: PropTypes.any,
disabled: PropTypes.bool,
})).isRequired,
/** Defines a function which is called when a user clicks on an item */
onClick: PropTypes.func,
/** Defines which breadcrumbs item is currently active */
activeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Controls the component size */
size: PropTypes.oneOf(['medium', 'large']),
/** Sets the maximum width of each item value in px. Longer items get truncated with ellipsis. */
itemMaxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/** Controls the component appearance */
theme: PropTypes.oneOf([
'onWhiteBackground',
'onGrayBackground',
'onDarkBackground',
]),
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: PropTypes.string,
};
Breadcrumbs.defaultProps = {
size: 'medium',
theme: 'onGrayBackground',
itemMaxWidth: '240px',
onClick: () => { },
};
export default Breadcrumbs;
//# sourceMappingURL=Breadcrumbs.js.map