metadata-based-explorer1
Version:
Box UI Elements
75 lines (73 loc) • 3.19 kB
JavaScript
/**
*
* @file Preview sidebar nav component
* @author Box
*/
import * as React from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
import IconMagicWand from '../../icons/general/IconMagicWand';
import IconMetadataThick from '../../icons/general/IconMetadataThick';
import IconDocInfo from '../../icons/general/IconDocInfo';
import IconChatRound from '../../icons/general/IconChatRound';
import messages from '../common/messages';
import { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';
import SidebarNavButton from './SidebarNavButton';
import SidebarToggle from './SidebarToggle';
import AdditionalTabs from './additional-tabs';
import { SIDEBAR_VIEW_SKILLS, SIDEBAR_VIEW_ACTIVITY, SIDEBAR_VIEW_DETAILS, SIDEBAR_VIEW_METADATA } from '../../constants';
import './SidebarNav.scss';
var SidebarNav = function SidebarNav(_ref) {
var additionalTabs = _ref.additionalTabs,
fileId = _ref.fileId,
hasActivity = _ref.hasActivity,
hasAdditionalTabs = _ref.hasAdditionalTabs,
hasDetails = _ref.hasDetails,
hasMetadata = _ref.hasMetadata,
hasSkills = _ref.hasSkills,
intl = _ref.intl,
isOpen = _ref.isOpen,
onNavigate = _ref.onNavigate;
return React.createElement("div", {
className: "bcs-SidebarNav",
"aria-label": intl.formatMessage(messages.sidebarNavLabel),
role: "tablist"
}, React.createElement("div", {
className: "bcs-SidebarNav-tabs"
}, React.createElement("div", {
className: "bcs-SidebarNav-main"
}, hasActivity && React.createElement(SidebarNavButton, {
"data-resin-target": SIDEBAR_NAV_TARGETS.ACTIVITY,
isOpen: isOpen,
sidebarView: SIDEBAR_VIEW_ACTIVITY,
onNavigate: onNavigate,
tooltip: React.createElement(FormattedMessage, messages.sidebarActivityTitle)
}, React.createElement(IconChatRound, null)), hasDetails && React.createElement(SidebarNavButton, {
"data-resin-target": SIDEBAR_NAV_TARGETS.DETAILS,
isOpen: isOpen,
sidebarView: SIDEBAR_VIEW_DETAILS,
onNavigate: onNavigate,
tooltip: React.createElement(FormattedMessage, messages.sidebarDetailsTitle)
}, React.createElement(IconDocInfo, null)), hasSkills && React.createElement(SidebarNavButton, {
"data-resin-target": SIDEBAR_NAV_TARGETS.SKILLS,
isOpen: isOpen,
sidebarView: SIDEBAR_VIEW_SKILLS,
onNavigate: onNavigate,
tooltip: React.createElement(FormattedMessage, messages.sidebarSkillsTitle)
}, React.createElement(IconMagicWand, null)), hasMetadata && React.createElement(SidebarNavButton, {
"data-resin-target": SIDEBAR_NAV_TARGETS.METADATA,
isOpen: isOpen,
sidebarView: SIDEBAR_VIEW_METADATA,
onNavigate: onNavigate,
tooltip: React.createElement(FormattedMessage, messages.sidebarMetadataTitle)
}, React.createElement(IconMetadataThick, null))), hasAdditionalTabs && React.createElement("div", {
className: "bcs-SidebarNav-overflow"
}, React.createElement(AdditionalTabs, {
key: fileId,
tabs: additionalTabs
}))), React.createElement("div", {
className: "bcs-SidebarNav-footer"
}, React.createElement(SidebarToggle, {
isOpen: isOpen
})));
};
export default injectIntl(SidebarNav);