@wix/design-system
Version:
@wix/design-system
249 lines (248 loc) • 10.2 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
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 _IconThemeContext = require("../WixDesignSystemIconThemeProvider/IconThemeContext");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Breadcrumbs/Breadcrumbs.jsx";
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/**
* a way to visualise current navigation path
*/
var Breadcrumbs = /*#__PURE__*/function (_React$PureComponent) {
function Breadcrumbs() {
var _this;
(0, _classCallCheck2["default"])(this, Breadcrumbs);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, Breadcrumbs, [].concat(args));
_this._getIsActive = function (item) {
return _this.props.activeId === item.id;
};
_this._handleItemClick = function (item) {
return function (event) {
return !item.disabled && _this.props.onClick(item, event);
};
};
_this._getItemWrapperDataAttributes = function (_ref) {
var position = _ref.position,
item = _ref.item;
return (0, _defineProperty2["default"])((0, _defineProperty2["default"])({
'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);
};
return _this;
}
(0, _inherits2["default"])(Breadcrumbs, _React$PureComponent);
return (0, _createClass2["default"])(Breadcrumbs, [{
key: "_createItem",
value: function _createItem(_ref3) {
var _this2 = this;
var item = _ref3.item,
isActive = _ref3.isActive,
onClick = _ref3.onClick,
maxWidth = _ref3.maxWidth,
id = _ref3.id;
var active = isActive;
var breadcrumbText = function breadcrumbText(value) {
var _this2$props = _this2.props,
theme = _this2$props.theme,
size = _this2$props.size;
var skin = _this2.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: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 9
}
}, value);
};
var defaultBreadcrumb = function defaultBreadcrumb(id) {
var disabled = item.disabled;
var className = _this2.props.className;
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: button,
disabled: disabled,
active: active
}, className),
onClick: onClick,
children: breadcrumbText(item.value),
style: {
maxWidth: maxWidth
},
tabIndex: isActive || disabled ? -1 : 0,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 9
}
});
};
var linkBreadcrumb = function linkBreadcrumb(id) {
var disabled = item.disabled;
var className = _this2.props.className;
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: link,
disabled: disabled,
active: active
}, className),
onClick: onClick,
children: breadcrumbText(item.value),
style: {
maxWidth: maxWidth
},
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 9
}
});
};
var customBreadcrumb = function customBreadcrumb(id) {
var className = _this2.props.className;
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: maxWidth
},
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 76,
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);
}
}
}, {
key: "render",
value: function render() {
var _this3 = this;
var _this$props = this.props,
items = _this$props.items,
size = _this$props.size,
itemMaxWidth = _this$props.itemMaxWidth,
theme = _this$props.theme,
className = _this$props.className,
dataHook = _this$props.dataHook;
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(_IconThemeContext.IconThemeContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 7
}
}, function (_ref4) {
var _ref4$icons = _ref4.icons,
icons = _ref4$icons === void 0 ? {} : _ref4$icons;
var _icons$Breadcrumbs = icons.Breadcrumbs,
breadcrumbsIcons = _icons$Breadcrumbs === void 0 ? {} : _icons$Breadcrumbs;
var _breadcrumbsIcons$Bre = breadcrumbsIcons.BreadcrumbsChevronRight,
ChevronRightIcon = _breadcrumbsIcons$Bre === void 0 ? _system.BreadcrumbsChevronRight : _breadcrumbsIcons$Bre;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
className: (0, _BreadcrumbsSt.st)(_BreadcrumbsSt.classes.root, {
size: size,
skin: skin
}, className),
"data-size": size,
"data-skin": skin,
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 13
}
}, items.map(function (item, i, allItems) {
var active = _this3._getIsActive(item);
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
key: item.id,
className: (0, _BreadcrumbsSt.st)(_BreadcrumbsSt.classes.itemContainer, {
active: active
})
}, _this3._getItemWrapperDataAttributes({
position: i,
item: item
}), {
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 19
}
}), _this3._createItem({
id: i,
item: item,
isActive: active,
onClick: _this3._handleItemClick(item),
maxWidth: fullWidth ? '100%' : itemMaxWidth
}), allItems[i + 1] && /*#__PURE__*/_react["default"].createElement(ChevronRightIcon, {
className: _BreadcrumbsSt.classes.divider,
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 23
}
}));
}));
});
}
}]);
}(_react["default"].PureComponent);
Breadcrumbs.displayName = 'Breadcrumbs';
Breadcrumbs.defaultProps = {
size: 'medium',
theme: 'onGrayBackground',
// TODO: add default value for skin once theme is removed
itemMaxWidth: '240px',
onClick: function onClick() {}
};
var _default = exports["default"] = Breadcrumbs;