box-ui-elements
Version:
Box UI Elements
241 lines (239 loc) • 10.5 kB
JavaScript
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
*
* @file Preview sidebar nav component
* @author Box
*/
import * as React from 'react';
import { injectIntl } from 'react-intl';
import classNames from 'classnames';
import noop from 'lodash/noop';
import { BoxAiLogo, BoxAiLogo24 } from '@box/blueprint-web-assets/icons/Logo';
import { Comment as CommentIcon, InformationCircle as InformationCircleIcon, Metadata as MetadataIcon, MagicWand as MagicWandIcon, DocGen as BPDocGenIcon } from '@box/blueprint-web-assets/icons/Medium';
import { Comment as CommentIconFilled, InformationCircle as InformationCircleIconFilled, Metadata as MetadataIconFilled, MagicWand as MagicWandIconFilled } from '@box/blueprint-web-assets/icons/MediumFilled';
import { Size6, Size5, IconIconBlue } from '@box/blueprint-web-assets/tokens/tokens';
import { usePromptFocus } from '@box/box-ai-content-answers';
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 SIDEBAR_TAB_ICON_PROPS = {
height: Size5,
width: Size5
};
// Icon wrapper components that receive isActive prop from SidebarNavButton
const ActivityIconWrapper = ({
isActive,
isPreviewModernizationEnabled
}) => {
if (!isPreviewModernizationEnabled) {
return /*#__PURE__*/React.createElement(IconChatRound, {
className: "bcs-SidebarNav-icon"
});
}
return isActive ? /*#__PURE__*/React.createElement(CommentIconFilled, _extends({}, SIDEBAR_TAB_ICON_PROPS, {
color: IconIconBlue
})) : /*#__PURE__*/React.createElement(CommentIcon, SIDEBAR_TAB_ICON_PROPS);
};
const DetailsIconWrapper = ({
isActive,
isPreviewModernizationEnabled
}) => {
if (!isPreviewModernizationEnabled) {
return /*#__PURE__*/React.createElement(IconDocInfo, {
className: "bcs-SidebarNav-icon"
});
}
return isActive ? /*#__PURE__*/React.createElement(InformationCircleIconFilled, _extends({}, SIDEBAR_TAB_ICON_PROPS, {
color: IconIconBlue
})) : /*#__PURE__*/React.createElement(InformationCircleIcon, SIDEBAR_TAB_ICON_PROPS);
};
const MetadataIconWrapper = ({
isActive,
isPreviewModernizationEnabled
}) => {
if (!isPreviewModernizationEnabled) {
return /*#__PURE__*/React.createElement(IconMetadataThick, {
className: "bcs-SidebarNav-icon"
});
}
return isActive ? /*#__PURE__*/React.createElement(MetadataIconFilled, _extends({}, SIDEBAR_TAB_ICON_PROPS, {
color: IconIconBlue
})) : /*#__PURE__*/React.createElement(MetadataIcon, SIDEBAR_TAB_ICON_PROPS);
};
const SkillsIconWrapper = ({
isActive,
isPreviewModernizationEnabled
}) => {
if (!isPreviewModernizationEnabled) {
return /*#__PURE__*/React.createElement(IconMagicWand, {
className: "bcs-SidebarNav-icon"
});
}
return isActive ? /*#__PURE__*/React.createElement(MagicWandIconFilled, _extends({}, SIDEBAR_TAB_ICON_PROPS, {
color: IconIconBlue
})) : /*#__PURE__*/React.createElement(MagicWandIcon, SIDEBAR_TAB_ICON_PROPS);
};
const DocGenIconWrapper = ({
isActive,
isPreviewModernizationEnabled
}) => {
if (!isPreviewModernizationEnabled) {
return /*#__PURE__*/React.createElement(DocGenIcon, {
className: "bcs-SidebarNav-icon"
});
}
return isActive ? /*#__PURE__*/React.createElement(BPDocGenIcon, _extends({}, SIDEBAR_TAB_ICON_PROPS, {
color: IconIconBlue
})) : /*#__PURE__*/React.createElement(BPDocGenIcon, SIDEBAR_TAB_ICON_PROPS);
};
const SidebarNav = ({
additionalTabs,
elementId,
fileId,
hasActivity,
hasAdditionalTabs,
hasBoxAI,
hasDetails,
hasMetadata,
hasSkills,
hasDocGen = false,
internalSidebarNavigation,
internalSidebarNavigationHandler,
intl,
isOpen,
onNavigate,
onPanelChange = noop,
routerDisabled,
signSidebarProps
}) => {
const {
enabled: hasBoxSign
} = signSidebarProps || {};
const {
disabledTooltip: boxAIDisabledTooltip,
showOnlyNavButton: showOnlyBoxAINavButton
} = useFeatureConfig('boxai.sidebar');
const {
enabled: isPreviewModernizationEnabled
} = useFeatureConfig('previewModernization');
const {
focusPrompt
} = usePromptFocus('.be.bcs');
const handleSidebarNavButtonClick = sidebarview => {
onPanelChange(sidebarview, false);
// If the Box AI sidebar is enabled, focus the Box AI sidebar prompt
if (sidebarview === SIDEBAR_VIEW_BOXAI) {
focusPrompt();
}
};
return /*#__PURE__*/React.createElement("div", {
className: classNames('bcs-SidebarNav', {
'bcs-SidebarNav--modernized': isPreviewModernizationEnabled
}),
"aria-label": intl.formatMessage(messages.sidebarNavLabel)
}, /*#__PURE__*/React.createElement("div", {
className: "bcs-SidebarNav-tabs"
}, /*#__PURE__*/React.createElement(SidebarNavTablist, {
elementId: elementId,
internalSidebarNavigation: internalSidebarNavigation,
internalSidebarNavigationHandler: internalSidebarNavigationHandler,
isOpen: isOpen,
onNavigate: onNavigate,
routerDisabled: routerDisabled
}, hasBoxAI && /*#__PURE__*/React.createElement(SidebarNavButton, {
isPreviewModernizationEnabled: isPreviewModernizationEnabled,
"data-resin-target": SIDEBAR_NAV_TARGETS.BOXAI,
"data-target-id": "SidebarNavButton-boxAI",
"data-testid": "sidebarboxai",
isDisabled: showOnlyBoxAINavButton,
onClick: handleSidebarNavButtonClick,
sidebarView: SIDEBAR_VIEW_BOXAI,
tooltip: showOnlyBoxAINavButton ? boxAIDisabledTooltip : intl.formatMessage(messages.sidebarBoxAITitle)
}, isPreviewModernizationEnabled ? /*#__PURE__*/React.createElement(BoxAiLogo24, SIDEBAR_TAB_ICON_PROPS) : /*#__PURE__*/React.createElement(BoxAiLogo, {
height: Size6,
width: Size6
})), hasActivity && /*#__PURE__*/React.createElement(SidebarNavButton, {
isPreviewModernizationEnabled: isPreviewModernizationEnabled,
"data-resin-target": SIDEBAR_NAV_TARGETS.ACTIVITY,
"data-target-id": "SidebarNavButton-activity",
"data-testid": "sidebaractivity",
onClick: handleSidebarNavButtonClick,
sidebarView: SIDEBAR_VIEW_ACTIVITY,
tooltip: intl.formatMessage(messages.sidebarActivityTitle)
}, /*#__PURE__*/React.createElement(ActivityIconWrapper, {
isPreviewModernizationEnabled: isPreviewModernizationEnabled
})), hasDetails && /*#__PURE__*/React.createElement(SidebarNavButton, {
isPreviewModernizationEnabled: isPreviewModernizationEnabled,
"data-resin-target": SIDEBAR_NAV_TARGETS.DETAILS,
"data-target-id": "SidebarNavButton-details",
"data-testid": "sidebardetails",
onClick: handleSidebarNavButtonClick,
sidebarView: SIDEBAR_VIEW_DETAILS,
tooltip: intl.formatMessage(messages.sidebarDetailsTitle)
}, /*#__PURE__*/React.createElement(DetailsIconWrapper, {
isPreviewModernizationEnabled: isPreviewModernizationEnabled
})), hasSkills && /*#__PURE__*/React.createElement(SidebarNavButton, {
isPreviewModernizationEnabled: isPreviewModernizationEnabled,
"data-resin-target": SIDEBAR_NAV_TARGETS.SKILLS,
"data-target-id": "SidebarNavButton-skills",
"data-testid": "sidebarskills",
onClick: handleSidebarNavButtonClick,
sidebarView: SIDEBAR_VIEW_SKILLS,
tooltip: intl.formatMessage(messages.sidebarSkillsTitle)
}, /*#__PURE__*/React.createElement(SkillsIconWrapper, {
isPreviewModernizationEnabled: isPreviewModernizationEnabled
})), hasMetadata && /*#__PURE__*/React.createElement(SidebarNavButton, {
isPreviewModernizationEnabled: isPreviewModernizationEnabled,
"data-resin-target": SIDEBAR_NAV_TARGETS.METADATA,
"data-target-id": "SidebarNavButton-metadata",
"data-testid": "sidebarmetadata",
onClick: handleSidebarNavButtonClick,
sidebarView: SIDEBAR_VIEW_METADATA,
tooltip: intl.formatMessage(messages.sidebarMetadataTitle)
}, /*#__PURE__*/React.createElement(MetadataIconWrapper, {
isPreviewModernizationEnabled: isPreviewModernizationEnabled
})), hasDocGen && /*#__PURE__*/React.createElement(SidebarNavButton, {
elementId: "",
isPreviewModernizationEnabled: isPreviewModernizationEnabled,
"data-resin-target": SIDEBAR_NAV_TARGETS.DOCGEN,
"data-target-id": "SidebarNavButton-docGen",
"data-testid": "sidebardocgen",
onClick: handleSidebarNavButtonClick,
sidebarView: SIDEBAR_VIEW_DOCGEN,
tooltip: intl.formatMessage(messages.sidebarDocGenTooltip)
}, /*#__PURE__*/React.createElement(DocGenIconWrapper, {
isPreviewModernizationEnabled: isPreviewModernizationEnabled
}))), hasBoxSign && /*#__PURE__*/React.createElement("div", {
className: "bcs-SidebarNav-secondary"
}, /*#__PURE__*/React.createElement(SidebarNavSign, signSidebarProps)), hasAdditionalTabs && /*#__PURE__*/React.createElement("div", {
className: classNames('bcs-SidebarNav-overflow', {
'bcs-SidebarNav-overflow--modernized': isPreviewModernizationEnabled
}),
"data-testid": "additional-tabs-overflow"
}, /*#__PURE__*/React.createElement(AdditionalTabs, {
isPreviewModernizationEnabled: isPreviewModernizationEnabled,
key: fileId,
tabs: additionalTabs
}))), /*#__PURE__*/React.createElement("div", {
className: "bcs-SidebarNav-footer"
}, /*#__PURE__*/React.createElement(SidebarToggle, {
internalSidebarNavigation: internalSidebarNavigation,
internalSidebarNavigationHandler: internalSidebarNavigationHandler,
isOpen: isOpen,
routerDisabled: routerDisabled
})));
};
export default injectIntl(SidebarNav);
//# sourceMappingURL=SidebarNav.js.map