@wordpress/components
Version:
UI components for WordPress.
106 lines (100 loc) • 2.91 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NavigationItem = NavigationItem;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _icons = require("@wordpress/icons");
var _i18n = require("@wordpress/i18n");
var _button = _interopRequireDefault(require("../../button"));
var _context = require("../context");
var _navigationStyles = require("../styles/navigation-styles");
var _baseContent = _interopRequireDefault(require("./base-content"));
var _base = _interopRequireDefault(require("./base"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const noop = () => {};
/**
* @deprecated Use `Navigator` instead.
*/
function NavigationItem(props) {
const {
badge,
children,
className,
href,
item,
navigateToMenu,
onClick = noop,
title,
icon,
hideIfTargetMenuEmpty,
isText,
...restProps
} = props;
const {
activeItem,
setActiveMenu,
navigationTree: {
isMenuEmpty
}
} = (0, _context.useNavigationContext)();
// If hideIfTargetMenuEmpty prop is true
// And the menu we are supposed to navigate to
// Is marked as empty, then we skip rendering the item.
if (hideIfTargetMenuEmpty && navigateToMenu && isMenuEmpty(navigateToMenu)) {
return null;
}
const isActive = item && activeItem === item;
const classes = (0, _clsx.default)(className, {
'is-active': isActive
});
const onItemClick = event => {
if (navigateToMenu) {
setActiveMenu(navigateToMenu);
}
onClick(event);
};
const navigationIcon = (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight;
const baseProps = children ? props : {
...props,
onClick: undefined
};
const itemProps = isText ? restProps : {
as: _button.default,
__next40pxDefaultSize: 'as' in restProps ? restProps.as === undefined : true,
href,
onClick: onItemClick,
'aria-current': isActive ? 'page' : undefined,
...restProps
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.default, {
...baseProps,
className: classes,
children: children || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_navigationStyles.ItemUI, {
...itemProps,
children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationStyles.ItemIconUI, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: icon
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseContent.default, {
title: title,
badge: badge
}), navigateToMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: navigationIcon
})]
})
});
}
var _default = exports.default = NavigationItem;
//# sourceMappingURL=index.js.map