wix-style-react
Version:
236 lines (206 loc) • 8.57 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
import React from 'react';
import PropTypes from 'prop-types';
import Text from '../Text';
import BreadcrumbsChevronRight from 'wix-ui-icons-common/system/BreadcrumbsChevronRight';
import { DATA_HOOKS, DATA_ATTRIBUTES, THEMES } from './constnats';
import { st, classes } from './Breadcrumbs.st.css';
/**
* a way to visualise current navigation path
*/
var Breadcrumbs = /*#__PURE__*/function (_React$PureComponent) {
_inherits(Breadcrumbs, _React$PureComponent);
var _super = _createSuper(Breadcrumbs);
function Breadcrumbs() {
var _this;
_classCallCheck(this, Breadcrumbs);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "_getIsActive", function (item) {
return _this.props.activeId === item.id;
});
_defineProperty(_assertThisInitialized(_this), "_handleItemClick", function (item) {
return function () {
return !item.disabled && _this.props.onClick(item);
};
});
_defineProperty(_assertThisInitialized(_this), "_getItemWrapperDataAttributes", function (_ref) {
var _ref2;
var position = _ref.position,
item = _ref.item;
return _ref2 = {
'data-hook': "".concat(DATA_HOOKS.ITEM_WRAPPER, "-").concat(position)
}, _defineProperty(_ref2, DATA_ATTRIBUTES.DATA_ACTIVE, _this._getIsActive(item)), _defineProperty(_ref2, DATA_ATTRIBUTES.DATA_POSITION_ID, position), _ref2;
});
return _this;
}
_createClass(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 isSmallSize = size === 'medium';
return /*#__PURE__*/React.createElement(Text, {
dataHook: DATA_HOOKS.BREADCRUMBS_ITEM,
weight: isActive ? 'normal' : 'thin',
light: theme === THEMES.onDarkBackground,
size: isSmallSize ? 'small' : 'medium',
ellipsis: true
}, value);
};
var defaultBreadcrumb = function defaultBreadcrumb(id) {
var disabled = item.disabled;
var className = _this2.props.className;
var button = true;
return /*#__PURE__*/React.createElement("button", {
type: "button",
"data-hook": "".concat(DATA_HOOKS.BREADCRUMB_CLICKABLE, "-").concat(id),
className: st(classes.item, {
button: button,
disabled: disabled,
active: active
}, className),
onClick: onClick,
children: breadcrumbText(item.value),
style: {
maxWidth: maxWidth
}
});
};
var linkBreadcrumb = function linkBreadcrumb(id) {
var disabled = item.disabled;
var className = _this2.props.className;
var link = true;
return /*#__PURE__*/React.createElement("a", {
href: item.link,
"data-hook": "".concat(DATA_HOOKS.BREADCRUMB_CLICKABLE, "-").concat(id),
className: st(classes.item, {
link: link,
disabled: disabled,
active: active
}, className),
onClick: onClick,
children: breadcrumbText(item.value),
style: {
maxWidth: maxWidth
}
});
};
var customBreadcrumb = function customBreadcrumb(id) {
var className = _this2.props.className;
return /*#__PURE__*/React.createElement("span", {
"data-hook": "".concat(DATA_HOOKS.BREADCRUMB_CLICKABLE, "-").concat(id),
className: st(classes.item, {}, className),
onClick: onClick,
children: breadcrumbText(item.customElement),
style: {
maxWidth: maxWidth
}
});
};
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;
return /*#__PURE__*/React.createElement("div", {
"data-hook": dataHook,
className: st(classes.root, {
size: size,
theme: theme
}, className),
"data-size": size,
"data-theme": theme
}, items.map(function (item, i, allItems) {
var active = _this3._getIsActive(item);
return /*#__PURE__*/React.createElement("div", _extends({
key: item.id,
className: st(classes.itemContainer, {
active: active
})
}, _this3._getItemWrapperDataAttributes({
position: i,
item: item
})), _this3._createItem({
id: i,
item: item,
isActive: active,
onClick: _this3._handleItemClick(item),
maxWidth: fullWidth ? 'initial' : itemMaxWidth
}), allItems[i + 1] && /*#__PURE__*/React.createElement(BreadcrumbsChevronRight, {
className: classes.divider
}));
}));
}
}]);
return Breadcrumbs;
}(React.PureComponent);
_defineProperty(Breadcrumbs, "displayName", 'Breadcrumbs');
_defineProperty(Breadcrumbs, "propTypes", {
/**
* * __id__ - Specifies the item id
* * __link__ - Optional link to be called on click
* * __value__ - Value to be shown on breadcrumb
* * __disabled__ - if this value is disabled
* * __customElement__ - A custom item which will be rendered
*/
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,
onClick: PropTypes.func,
activeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
size: PropTypes.oneOf(['medium', 'large']),
/** The maximum width of Breadcrumb item */
itemMaxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
theme: PropTypes.oneOf(['onWhiteBackground', 'onGrayBackground', 'onDarkBackground']),
/** Applied as data-hook HTML attribute that can be used to create driver in testing */
dataHook: PropTypes.string
});
_defineProperty(Breadcrumbs, "defaultProps", {
size: 'medium',
theme: 'onGrayBackground',
itemMaxWidth: '240px',
onClick: function onClick() {}
});
export default Breadcrumbs;