wix-style-react
Version:
wix-style-react
247 lines (246 loc) • 8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Text = _interopRequireDefault(require("../Text"));
var _system = require("@wix/wix-ui-icons-common/system");
var _constnats = require("./constnats");
var _BreadcrumbsSt = require("./Breadcrumbs.st.css");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Breadcrumbs/Breadcrumbs.js";
/**
* a way to visualise current navigation path
*/
class Breadcrumbs extends _react.default.PureComponent {
constructor() {
super(...arguments);
this._getIsActive = item => this.props.activeId === item.id;
this._handleItemClick = item => () => !item.disabled && this.props.onClick(item);
this._getItemWrapperDataAttributes = _ref => {
var {
position,
item
} = _ref;
return {
'data-hook': "".concat(_constnats.DATA_HOOKS.ITEM_WRAPPER, "-").concat(position),
[_constnats.DATA_ATTRIBUTES.DATA_ACTIVE]: this._getIsActive(item),
[_constnats.DATA_ATTRIBUTES.DATA_POSITION_ID]: position
};
};
}
_createItem(_ref2) {
var {
item,
isActive,
onClick,
maxWidth,
id
} = _ref2;
var active = isActive;
var breadcrumbText = value => {
var {
theme,
size
} = this.props;
var isSmallSize = size === 'medium';
return /*#__PURE__*/_react.default.createElement(_Text.default, {
dataHook: _constnats.DATA_HOOKS.BREADCRUMBS_ITEM,
weight: isActive ? 'normal' : 'thin',
light: theme === _constnats.THEMES.onDarkBackground,
size: isSmallSize ? 'small' : 'medium',
ellipsis: true,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 9
}
}, value);
};
var defaultBreadcrumb = id => {
var {
disabled
} = item;
var {
className
} = this.props;
var button = true;
return /*#__PURE__*/_react.default.createElement("button", {
type: "button",
"data-hook": "".concat(_constnats.DATA_HOOKS.BREADCRUMB_CLICKABLE, "-").concat(id),
className: (0, _BreadcrumbsSt.st)(_BreadcrumbsSt.classes.item, {
button,
disabled,
active
}, className),
onClick: onClick,
children: breadcrumbText(item.value),
style: {
maxWidth
},
tabIndex: isActive || disabled ? -1 : 0,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 9
}
});
};
var linkBreadcrumb = id => {
var {
disabled
} = item;
var {
className
} = this.props;
var link = true;
return /*#__PURE__*/_react.default.createElement("a", {
href: item.link,
"data-hook": "".concat(_constnats.DATA_HOOKS.BREADCRUMB_CLICKABLE, "-").concat(id),
className: (0, _BreadcrumbsSt.st)(_BreadcrumbsSt.classes.item, {
link,
disabled,
active
}, className),
onClick: onClick,
children: breadcrumbText(item.value),
style: {
maxWidth
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 9
}
});
};
var customBreadcrumb = id => {
var {
className
} = this.props;
return /*#__PURE__*/_react.default.createElement("span", {
"data-hook": "".concat(_constnats.DATA_HOOKS.BREADCRUMB_CLICKABLE, "-").concat(id),
className: (0, _BreadcrumbsSt.st)(_BreadcrumbsSt.classes.item, {}, className),
onClick: onClick,
children: breadcrumbText(item.customElement),
style: {
maxWidth
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 9
}
});
};
if (isActive) {
return defaultBreadcrumb(id);
} else if (item.customElement) {
return customBreadcrumb(id);
} else if (item.link) {
return linkBreadcrumb(id);
} else {
return defaultBreadcrumb(id);
}
}
render() {
var {
items,
size,
itemMaxWidth,
theme,
className,
dataHook
} = this.props;
var fullWidth = items.length === 1;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
className: (0, _BreadcrumbsSt.st)(_BreadcrumbsSt.classes.root, {
size,
theme
}, className),
"data-size": size,
"data-theme": theme,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 151,
columnNumber: 7
}
}, items.map((item, i, allItems) => {
var active = this._getIsActive(item);
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
key: item.id,
className: (0, _BreadcrumbsSt.st)(_BreadcrumbsSt.classes.itemContainer, {
active
})
}, this._getItemWrapperDataAttributes({
position: i,
item
}), {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 160,
columnNumber: 13
}
}), this._createItem({
id: i,
item,
isActive: active,
onClick: this._handleItemClick(item),
maxWidth: fullWidth ? 'initial' : itemMaxWidth
}), allItems[i + 1] && /*#__PURE__*/_react.default.createElement(_system.BreadcrumbsChevronRight, {
className: _BreadcrumbsSt.classes.divider,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 17
}
}));
}));
}
}
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.default.arrayOf(_propTypes.default.shape({
id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
value: _propTypes.default.node.isRequired,
link: _propTypes.default.string,
customElement: _propTypes.default.any,
disabled: _propTypes.default.bool
})).isRequired,
/** Defines a function which is called when a user clicks on an item */
onClick: _propTypes.default.func,
/** Defines which breadcrumbs item is currently active */
activeId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Controls the component size */
size: _propTypes.default.oneOf(['medium', 'large']),
/** Sets the maximum width of each item value in px. Longer items get truncated with ellipsis. */
itemMaxWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
/** Controls the component appearance */
theme: _propTypes.default.oneOf(['onWhiteBackground', 'onGrayBackground', 'onDarkBackground']),
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: _propTypes.default.string
};
Breadcrumbs.defaultProps = {
size: 'medium',
theme: 'onGrayBackground',
itemMaxWidth: '240px',
onClick: () => {}
};
var _default = exports.default = Breadcrumbs;
//# sourceMappingURL=Breadcrumbs.js.map