@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
96 lines (94 loc) • 3.96 kB
JavaScript
/* custom-logo.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./custom-logo.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useEffect, useRef } from 'react';
import { cx } from '@compiled/react';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { Anchor } from '@atlaskit/primitives/compiled/anchor';
import { useHasCustomTheme } from '../themed/has-custom-theme-context';
import { LogoRenderer } from './logo-renderer';
const anchorStyles = {
root: "_2rko12b0 _1e0c1txw _4cvr1h6o _4t3izwfg",
customLogoBorderRadius: "_2rko1mok",
newMargin: "_ahbq1b66",
newInteractionStates: "_irr31dpa _1di69yc7",
newInteractionStatesCustomTheming: "_irr31rps _1di6yhlj"
};
const sharedIconOrLogoContainerStyles = {
root: "_1reo15vq _18m915vq _18zr1b66 _bna71tcg _rtys1kw7 _1jpx1f51"
};
const iconContainerStyles = {
root: "_1e0c1txw _p12f1tcg _vchh1ntv",
container: "_1e0coqrb _dm2517mw",
viewport: "_10y4glyw"
};
const logoContainerStyles = {
root: "_1e0cglyw _p12fnklw _vchh1ntv",
container: "_1e0c1u4u _dm251vcx",
viewport: "_10y41txw"
};
/**
* __Custom logo__
*
* Custom logo for the top navigation.
*
* To provide a responsive experience, it requires both a logo and an icon component.
* The logo component will be used for large viewports, and the icon component will be used for small viewports.
*/
export const CustomLogo = ({
href,
logo,
icon,
onClick,
label
}) => {
const ref = useRef(null);
useEffect(() => {
var _img$parentElement, _img$parentElement2;
if (process.env.NODE_ENV === 'production') {
return;
}
if (!ref.current) {
return;
}
const img = ref.current.querySelector('img');
if (!img) {
return;
}
/**
* We want custom logo components to render the image as the immediate child
*/
const hasExpectedStructure = ((_img$parentElement = img.parentElement) === null || _img$parentElement === void 0 ? void 0 : _img$parentElement.parentElement) === ref.current;
/**
* We want custom logo components to render only one image
*/
const isOnlyChild = ((_img$parentElement2 = img.parentElement) === null || _img$parentElement2 === void 0 ? void 0 : _img$parentElement2.childElementCount) === 1;
if (!hasExpectedStructure || !isOnlyChild) {
// eslint-disable-next-line no-console
console.error('Custom logos should render only a single image tag with no wrappers.');
}
if (img.getAttribute('width') !== null || img.getAttribute('height') !== null || img.style.width !== '' || img.style.height !== '') {
// eslint-disable-next-line no-console
console.error('Do not set explicit dimensions on custom logo images. The container will resize the image to fit.');
}
}, []);
const hasCustomTheme = useHasCustomTheme();
return /*#__PURE__*/React.createElement(Anchor, {
ref: ref,
"aria-label": label,
href: href
// @ts-expect-error - non-standard values for `borderRadius` and the custom theming interaction states
// eslint-disable-next-line @compiled/no-suppress-xcss
,
xcss: cx(anchorStyles.root, anchorStyles.customLogoBorderRadius, anchorStyles.newMargin, hasCustomTheme ? anchorStyles.newInteractionStatesCustomTheming : anchorStyles.newInteractionStates),
onClick: onClick
}, /*#__PURE__*/React.createElement("div", {
className: ax([sharedIconOrLogoContainerStyles.root, iconContainerStyles.root, fg('platform-dst-chat-panel-layout') ? iconContainerStyles.container : iconContainerStyles.viewport])
}, /*#__PURE__*/React.createElement(LogoRenderer, {
logoOrIcon: icon
})), /*#__PURE__*/React.createElement("div", {
className: ax([sharedIconOrLogoContainerStyles.root, logoContainerStyles.root, fg('platform-dst-chat-panel-layout') ? logoContainerStyles.container : logoContainerStyles.viewport])
}, /*#__PURE__*/React.createElement(LogoRenderer, {
logoOrIcon: logo
})));
};