@orfeas126/box-ui-elements
Version:
Box UI Elements
68 lines (67 loc) • 1.9 kB
JavaScript
/**
*
* @file Preview sidebar nav button component
* @author Box
*/
import * as React from 'react';
import { Route } from 'react-router-dom';
import noop from 'lodash/noop';
import NavButton from '../common/nav-button';
import Tooltip from '../../components/tooltip/Tooltip';
import './SidebarNavButton.scss';
const SidebarNavButton = /*#__PURE__*/React.forwardRef((props, ref) => {
const {
'data-resin-target': dataResinTarget,
'data-testid': dataTestId,
children,
elementId = '',
isOpen,
onClick = noop,
sidebarView,
tooltip
} = props;
const sidebarPath = `/${sidebarView}`;
const handleNavButtonClick = () => {
onClick(sidebarView);
};
return /*#__PURE__*/React.createElement(Route, {
path: sidebarPath
}, ({
match
}) => {
const isMatch = !!match;
const isActive = () => isMatch && !!isOpen;
const isActiveValue = isActive();
const isExactMatch = isMatch && match.isExact;
const id = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`;
return /*#__PURE__*/React.createElement(Tooltip, {
position: "middle-left",
text: tooltip,
isTabbable: false
}, /*#__PURE__*/React.createElement(NavButton, {
activeClassName: "bcs-is-selected",
"aria-selected": isActiveValue,
"aria-controls": `${id}-content`,
"aria-label": tooltip,
className: "bcs-NavButton",
"data-resin-target": dataResinTarget,
"data-testid": dataTestId,
getDOMRef: ref,
id: id,
isActive: isActive,
onClick: handleNavButtonClick,
replace: isExactMatch,
role: "tab",
tabIndex: isActiveValue ? '0' : '-1',
to: {
pathname: sidebarPath,
state: {
open: true
}
},
type: "button"
}, children));
});
});
export default SidebarNavButton;
//# sourceMappingURL=SidebarNavButton.js.map