@orfeas126/box-ui-elements
Version:
Box UI Elements
114 lines (113 loc) • 4.88 kB
JavaScript
/**
*
* @file Preview sidebar nav component
* @author Box
*/
import * as React from 'react';
import { injectIntl } from 'react-intl';
import { BoxAiLogo } from '@box/blueprint-web-assets/icons/Logo';
import { Size5 } from '@box/blueprint-web-assets/tokens/tokens';
import AdditionalTabs from './additional-tabs';
import DocGenIcon from '../../icon/fill/DocGenIcon';
import IconChatRound from '../../icons/general/IconChatRound';
import IconDocInfo from '../../icons/general/IconDocInfo';
import IconMagicWand from '../../icons/general/IconMagicWand';
import IconMetadataThick from '../../icons/general/IconMetadataThick';
import SidebarNavButton from './SidebarNavButton';
import SidebarNavSign from './SidebarNavSign';
import SidebarNavTablist from './SidebarNavTablist';
import SidebarToggle from './SidebarToggle';
import messages from '../common/messages';
import { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';
import { SIDEBAR_VIEW_ACTIVITY, SIDEBAR_VIEW_BOXAI, SIDEBAR_VIEW_DETAILS, SIDEBAR_VIEW_DOCGEN, SIDEBAR_VIEW_METADATA, SIDEBAR_VIEW_SKILLS } from '../../constants';
import { useFeatureConfig } from '../common/feature-checking';
import './SidebarNav.scss';
const SidebarNav = ({
additionalTabs,
elementId,
fileId,
hasActivity,
hasAdditionalTabs,
hasBoxAI,
hasDetails,
hasMetadata,
hasSkills,
hasDocGen = false,
intl,
isOpen,
onNavigate,
onPanelChange
}) => {
const {
enabled: hasBoxSign
} = useFeatureConfig('boxSign');
return /*#__PURE__*/React.createElement("div", {
className: "bcs-SidebarNav",
"aria-label": intl.formatMessage(messages.sidebarNavLabel)
}, /*#__PURE__*/React.createElement("div", {
className: "bcs-SidebarNav-tabs"
}, /*#__PURE__*/React.createElement(SidebarNavTablist, {
elementId: elementId,
isOpen: isOpen,
onNavigate: onNavigate
}, hasBoxAI && /*#__PURE__*/React.createElement(SidebarNavButton, {
"data-resin-target": SIDEBAR_NAV_TARGETS.BOXAI,
"data-target-id": "SidebarNavButton-boxAI",
"data-testid": "sidebarboxai",
onClick: onPanelChange,
sidebarView: SIDEBAR_VIEW_BOXAI,
tooltip: intl.formatMessage(messages.sidebarBoxAITitle)
}, /*#__PURE__*/React.createElement(BoxAiLogo, {
height: Size5,
width: Size5
})), hasActivity && /*#__PURE__*/React.createElement(SidebarNavButton, {
"data-resin-target": SIDEBAR_NAV_TARGETS.ACTIVITY,
"data-target-id": "SidebarNavButton-activity",
"data-testid": "sidebaractivity",
onClick: onPanelChange,
sidebarView: SIDEBAR_VIEW_ACTIVITY,
tooltip: intl.formatMessage(messages.sidebarActivityTitle)
}, /*#__PURE__*/React.createElement(IconChatRound, null)), hasDetails && /*#__PURE__*/React.createElement(SidebarNavButton, {
"data-resin-target": SIDEBAR_NAV_TARGETS.DETAILS,
"data-target-id": "SidebarNavButton-details",
"data-testid": "sidebardetails",
onClick: onPanelChange,
sidebarView: SIDEBAR_VIEW_DETAILS,
tooltip: intl.formatMessage(messages.sidebarDetailsTitle)
}, /*#__PURE__*/React.createElement(IconDocInfo, null)), hasSkills && /*#__PURE__*/React.createElement(SidebarNavButton, {
"data-resin-target": SIDEBAR_NAV_TARGETS.SKILLS,
"data-target-id": "SidebarNavButton-skills",
"data-testid": "sidebarskills",
onClick: onPanelChange,
sidebarView: SIDEBAR_VIEW_SKILLS,
tooltip: intl.formatMessage(messages.sidebarSkillsTitle)
}, /*#__PURE__*/React.createElement(IconMagicWand, null)), hasMetadata && /*#__PURE__*/React.createElement(SidebarNavButton, {
"data-resin-target": SIDEBAR_NAV_TARGETS.METADATA,
"data-target-id": "SidebarNavButton-metadata",
"data-testid": "sidebarmetadata",
onClick: onPanelChange,
sidebarView: SIDEBAR_VIEW_METADATA,
tooltip: intl.formatMessage(messages.sidebarMetadataTitle)
}, /*#__PURE__*/React.createElement(IconMetadataThick, null)), hasDocGen && /*#__PURE__*/React.createElement(SidebarNavButton, {
"data-resin-target": SIDEBAR_NAV_TARGETS.DOCGEN,
"data-target-id": "SidebarNavButton-docGen",
onClick: onPanelChange,
sidebarView: SIDEBAR_VIEW_DOCGEN,
tooltip: intl.formatMessage(messages.sidebarDocGenTooltip)
}, /*#__PURE__*/React.createElement(DocGenIcon, {
className: "bcs-SidebarNav-icon"
}))), hasBoxSign && /*#__PURE__*/React.createElement("div", {
className: "bcs-SidebarNav-secondary"
}, /*#__PURE__*/React.createElement(SidebarNavSign, null)), hasAdditionalTabs && /*#__PURE__*/React.createElement("div", {
className: "bcs-SidebarNav-overflow"
}, /*#__PURE__*/React.createElement(AdditionalTabs, {
key: fileId,
tabs: additionalTabs
}))), /*#__PURE__*/React.createElement("div", {
className: "bcs-SidebarNav-footer"
}, /*#__PURE__*/React.createElement(SidebarToggle, {
isOpen: isOpen
})));
};
export default injectIntl(SidebarNav);
//# sourceMappingURL=SidebarNav.js.map