box-ui-elements-mlh
Version:
123 lines (111 loc) • 6.9 kB
JavaScript
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import * as React from 'react';
import classNames from 'classnames';
import styled from 'styled-components';
import Tooltip from '../../components/tooltip';
import { useIsContentOverflowed } from '../../utils/dom';
import CollapsibleSidebarContext from './CollapsibleSidebarContext';
var StyledMenuItem = styled.div.withConfig({
displayName: "CollapsibleSidebarMenuItem__StyledMenuItem",
componentId: "wqsbw7-0"
})(["position:relative;&:hover a{background-color:", ";}&:hover a.is-currentPage{background-color:", ";}body.is-move-dragging & a:hover{background-color:", ";.bdl-CollapsibleSidebar-menuItemIcon{opacity:0.7;}}.bdl-CollapsibleSidebar-menuItemActionContainer{position:absolute;top:12px;right:8px;padding:0;opacity:0;&:hover,&:focus-within{opacity:1;}}"], function (_ref) {
var theme = _ref.theme;
return theme.primary.backgroundHover;
}, function (_ref2) {
var theme = _ref2.theme;
return theme.primary.backgroundActive;
}, function (_ref3) {
var theme = _ref3.theme;
return theme.primary.background;
});
var StyledIconWrapper = styled.span.withConfig({
displayName: "CollapsibleSidebarMenuItem__StyledIconWrapper",
componentId: "wqsbw7-1"
})(["line-height:0;opacity:0.7;& path,& .fill-color{fill:", ";}a:active &,a:hover &,a:focus &,a.is-currentPage &{opacity:1;}"], function (_ref4) {
var theme = _ref4.theme;
return theme.primary.foreground;
});
var StyledMenuItemLabel = styled.span.withConfig({
displayName: "CollapsibleSidebarMenuItem__StyledMenuItemLabel",
componentId: "wqsbw7-2"
})(["flex-grow:1;overflow:hidden;color:", ";text-overflow:ellipsis;opacity:0.85;&.overflow-action{margin-right:12px;}a:active &,a:hover &,a:focus &,a.is-currentPage &{opacity:1;}"], function (_ref5) {
var theme = _ref5.theme;
return theme.primary.foreground;
}); // {...rest} props will go here, such as `as` prop to adjust the component name.
// In most cases the consumer will want the tag to use a `Link` instead of `a`.
var StyledLink = styled.a.withConfig({
displayName: "CollapsibleSidebarMenuItem__StyledLink",
componentId: "wqsbw7-3"
})(["display:flex;align-items:center;height:", "px;padding:0 ", "px;overflow-x:hidden;color:", ";font-weight:bold;white-space:nowrap;border:1px solid transparent;border-radius:", "px;transition:background-color 0.15s cubic-bezier(0.215,0.61,0.355,1);&:hover,&:active,&:focus,&.is-currentPage{.bdl-CollapsibleSidebar-menuItemIcon,.bdl-CollapsibleSidebar-menuItemLabel{opacity:1;}}&:focus{border-color:", ";outline:none;}&:focus:active{border-color:transparent;}&.is-currentPage{background-color:", ";}&.is-currentPage:active{border-color:", ";}.bdl-CollapsibleSidebar-menuItemIcon + .bdl-CollapsibleSidebar-menuItemLabel{margin-left:16px;}&.show-overflowAction + .bdl-CollapsibleSidebar-menuItemActionContainer,&:focus + .bdl-CollapsibleSidebar-menuItemActionContainer,&:hover + .bdl-CollapsibleSidebar-menuItemActionContainer{opacity:1;}"], function (_ref6) {
var theme = _ref6.theme;
return theme.base.gridUnitPx * 10;
}, function (_ref7) {
var theme = _ref7.theme;
return theme.base.gridUnitPx * 3;
}, function (_ref8) {
var theme = _ref8.theme;
return theme.primary.foreground;
}, function (_ref9) {
var theme = _ref9.theme;
return theme.base.gridUnitPx * 2;
}, function (_ref10) {
var theme = _ref10.theme;
return theme.primary.foreground;
}, function (_ref11) {
var theme = _ref11.theme;
return theme.primary.backgroundActive;
}, function (_ref12) {
var theme = _ref12.theme;
return theme.primary.foreground;
});
function CollapsibleSidebarMenuItem(props) {
var className = props.className,
content = props.content,
icon = props.icon,
linkClassName = props.linkClassName,
overflowAction = props.overflowAction,
showOverflowAction = props.showOverflowAction,
text = props.text,
rest = _objectWithoutProperties(props, ["className", "content", "icon", "linkClassName", "overflowAction", "showOverflowAction", "text"]);
var textRef = React.useRef(null);
var isTextOverflowed = useIsContentOverflowed(textRef);
var _React$useContext = React.useContext(CollapsibleSidebarContext),
isScrolling = _React$useContext.isScrolling;
var isShowOverflowActionOnHover = showOverflowAction === 'hover';
var menuItemClassName = classNames('bdl-CollapsibleSidebar-menuItem', className);
var menuItemLinkClassName = classNames('bdl-CollapsibleSidebar-menuItemLink', linkClassName, {
'show-overflowAction': !isShowOverflowActionOnHover
});
var menuItemLabelClassName = classNames('bdl-CollapsibleSidebar-menuItemLabel', {
'overflow-action': overflowAction
});
var renderMenuItem = function renderMenuItem() {
return /*#__PURE__*/React.createElement(StyledMenuItem, {
className: menuItemClassName
}, /*#__PURE__*/React.createElement(StyledLink, _extends({
className: menuItemLinkClassName
}, rest), icon && /*#__PURE__*/React.createElement(StyledIconWrapper, {
className: "bdl-CollapsibleSidebar-menuItemIcon"
}, icon), text && /*#__PURE__*/React.createElement(StyledMenuItemLabel, {
ref: textRef,
className: menuItemLabelClassName
}, text), content), overflowAction && /*#__PURE__*/React.createElement("span", {
className: "bdl-CollapsibleSidebar-menuItemActionContainer"
}, overflowAction));
};
if (isScrolling) {
return renderMenuItem();
}
return /*#__PURE__*/React.createElement(Tooltip, {
className: classNames('bdl-CollapsibleSidebar-menuItemToolTip'),
isDisabled: !isTextOverflowed,
isShown: isScrolling ? false : undefined,
isTabbable: false,
position: "middle-right",
text: text
}, renderMenuItem());
}
export default CollapsibleSidebarMenuItem;
//# sourceMappingURL=CollapsibleSidebarMenuItem.js.map