@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
103 lines (100 loc) • 5.08 kB
JavaScript
/* custom-logo.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CustomLogo = void 0;
require("./custom-logo.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@compiled/react");
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _anchor = require("@atlaskit/primitives/compiled/anchor");
var _hasCustomThemeContext = require("../themed/has-custom-theme-context");
var _logoRenderer = require("./logo-renderer");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var anchorStyles = {
root: "_2rko12b0 _1e0c1txw _4cvr1h6o _4t3izwfg",
customLogoBorderRadius: "_2rko1mok",
newMargin: "_ahbq1b66",
newInteractionStates: "_irr31dpa _1di69yc7",
newInteractionStatesCustomTheming: "_irr31rps _1di6yhlj"
};
var sharedIconOrLogoContainerStyles = {
root: "_1reo15vq _18m915vq _18zr1b66 _bna71tcg _rtys1kw7 _1jpx1f51"
};
var iconContainerStyles = {
root: "_1e0c1txw _p12f1tcg _vchh1ntv",
container: "_1e0coqrb _dm2517mw",
viewport: "_10y4glyw"
};
var 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.
*/
var CustomLogo = exports.CustomLogo = function CustomLogo(_ref) {
var href = _ref.href,
logo = _ref.logo,
icon = _ref.icon,
onClick = _ref.onClick,
label = _ref.label;
var ref = (0, _react.useRef)(null);
(0, _react.useEffect)(function () {
var _img$parentElement, _img$parentElement2;
if (process.env.NODE_ENV === 'production') {
return;
}
if (!ref.current) {
return;
}
var img = ref.current.querySelector('img');
if (!img) {
return;
}
/**
* We want custom logo components to render the image as the immediate child
*/
var 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
*/
var 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.');
}
}, []);
var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
return /*#__PURE__*/_react.default.createElement(_anchor.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: (0, _react2.cx)(anchorStyles.root, anchorStyles.customLogoBorderRadius, anchorStyles.newMargin, hasCustomTheme ? anchorStyles.newInteractionStatesCustomTheming : anchorStyles.newInteractionStates),
onClick: onClick
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _runtime.ax)([sharedIconOrLogoContainerStyles.root, iconContainerStyles.root, (0, _fg.fg)('platform-dst-chat-panel-layout') ? iconContainerStyles.container : iconContainerStyles.viewport])
}, /*#__PURE__*/_react.default.createElement(_logoRenderer.LogoRenderer, {
logoOrIcon: icon
})), /*#__PURE__*/_react.default.createElement("div", {
className: (0, _runtime.ax)([sharedIconOrLogoContainerStyles.root, logoContainerStyles.root, (0, _fg.fg)('platform-dst-chat-panel-layout') ? logoContainerStyles.container : logoContainerStyles.viewport])
}, /*#__PURE__*/_react.default.createElement(_logoRenderer.LogoRenderer, {
logoOrIcon: logo
})));
};