@atlaskit/page-layout
Version:
A collection of components which let you compose an application's page layout.
82 lines (78 loc) • 3.96 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _constants = require("../../common/constants");
var _utils = require("../../common/utils");
var _controllers = require("../../controllers");
var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var topNavigationStyles = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
height: _constants.TOP_NAVIGATION_HEIGHT,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
gridArea: _constants.TOP_NAVIGATION
});
var fixedStyles = (0, _react2.css)({
position: 'fixed',
zIndex: 2,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
insetBlockStart: _constants.BANNER_HEIGHT,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
insetInlineEnd: _constants.RIGHT_PANEL_WIDTH,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
insetInlineStart: _constants.LEFT_PANEL_WIDTH
});
/**
* __Top navigation__
*
* Provides a slot for top navigation within the PageLayout.
*
* - [Examples](https://atlassian.design/components/page-layout/examples)
* - [Code](https://atlassian.design/components/page-layout/code)
*/
var TopNavigation = function TopNavigation(props) {
var children = props.children,
_props$height = props.height,
height = _props$height === void 0 ? _constants.DEFAULT_TOP_NAVIGATION_HEIGHT : _props$height,
_props$isFixed = props.isFixed,
isFixed = _props$isFixed === void 0 ? true : _props$isFixed,
shouldPersistHeight = props.shouldPersistHeight,
testId = props.testId,
id = props.id,
skipLinkTitle = props.skipLinkTitle;
var topNavigationHeight = (0, _utils.resolveDimension)(_constants.VAR_TOP_NAVIGATION_HEIGHT, height, shouldPersistHeight);
(0, _react.useEffect)(function () {
(0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_TOP_NAVIGATION_HEIGHT, topNavigationHeight));
return function () {
(0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_TOP_NAVIGATION_HEIGHT, 0));
};
}, [topNavigationHeight]);
(0, _controllers.useSkipLink)(id, skipLinkTitle);
return (0, _react2.jsx)(_slotFocusRing.default, null, function (_ref) {
var className = _ref.className;
return (0, _react2.jsx)("div", (0, _extends2.default)({
css: [topNavigationStyles, isFixed && fixedStyles]
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: className,
"data-testid": testId,
id: id
}, (0, _utils.getPageLayoutSlotSelector)('top-navigation')), (0, _react2.jsx)(_slotDimensions.default, {
variableName: _constants.VAR_TOP_NAVIGATION_HEIGHT,
value: topNavigationHeight
}), children);
});
};
var _default = exports.default = TopNavigation;