@wix/design-system
Version:
@wix/design-system
255 lines (254 loc) • 8.51 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 _constants = require("./constants");
var _BreadcrumbsSt = require("./Breadcrumbs.st.css.js");
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/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(_constants.DATA_HOOKS.ITEM_WRAPPER, "-").concat(position),
[_constants.DATA_ATTRIBUTES.DATA_ACTIVE]: this._getIsActive(item),
[_constants.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 skin = this.props.skin || theme;
return /*#__PURE__*/_react.default.createElement(_Text.default, {
dataHook: _constants.DATA_HOOKS.BREADCRUMBS_ITEM,
weight: isActive ? 'normal' : 'thin',
light: skin === _constants.SKINS.onDarkBackground,
size: _constants.TEXT_SIZES[size],
ellipsis: true,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 71,
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(_constants.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: 88,
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(_constants.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: 105,
columnNumber: 9
}
});
};
var customBreadcrumb = id => {
var {
className
} = this.props;
return /*#__PURE__*/_react.default.createElement("span", {
"data-hook": "".concat(_constants.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: 119,
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;
var skin = this.props.skin || theme;
if (theme) {
(0, _deprecationLog.default)('<Breadcrumbs/> - prop "theme" is deprecated and will be removed in next major release, please use "skin" property instead.');
}
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
className: (0, _BreadcrumbsSt.st)(_BreadcrumbsSt.classes.root, {
size,
skin
}, className),
"data-size": size,
"data-skin": skin,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 165,
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: 174,
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: 187,
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(['small', '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 */
skin: _propTypes.default.oneOf(['onWhiteBackground', 'onGrayBackground', 'onDarkBackground']),
/** @deprecated use `skin` instead */
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',
// TODO: add default value for skin once theme is removed
itemMaxWidth: '240px',
onClick: () => {}
};
var _default = exports.default = Breadcrumbs;
//# sourceMappingURL=Breadcrumbs.js.map