baseui
Version:
A React Component library implementing the Base design language
112 lines (111 loc) • 5.09 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MobileHeader = MobileHeader;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _overrides = require("../helpers/overrides");
var _button = require("../button");
var _styledComponents = require("./styled-components");
var _constants = require("./constants");
var _index = require("../styles/index");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); } /*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
const renderButtonContent = content => {
if (typeof content === 'string') {
return content;
}
const Icon = content;
return /*#__PURE__*/React.createElement(Icon, {
size: 32
});
};
const DefaultHeaderButton = ({
children,
type,
...restProps
}) => {
const [, theme] = (0, _index.useStyletron)();
const isFloating = type === _constants.TYPE.floating;
const hasTextContent = typeof children === 'string';
const shouldHaveTrailingMargin = isFloating || !hasTextContent;
const trailingMargin = theme.direction === 'rtl' ? {
marginLeft: theme.sizing.scale300
} : {
marginRight: theme.sizing.scale300
};
const style = {
...(!hasTextContent ? {
height: '48px',
width: '48px',
paddingTop: 0,
paddingBottom: 0,
paddingLeft: 0,
paddingRight: 0
} : {}),
...(shouldHaveTrailingMargin ? trailingMargin : {}),
...(isFloating ? {
backgroundColor: theme.colors.backgroundPrimary
} : {})
};
return /*#__PURE__*/React.createElement(_button.Button, _extends({
kind: _button.KIND.tertiary,
shape: _button.SHAPE.pill,
overrides: {
BaseButton: {
style
}
}
}, restProps), children);
};
function MobileHeader({
overrides = {},
title,
navButton,
actionButtons = [],
type = _constants.TYPE.fixed,
expanded = false
}) {
const [Root, rootProps] = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot);
const [Title, titleProps] = (0, _overrides.getOverrides)(overrides.Title, _styledComponents.StyledTitle);
const [NavContainer, navContainerProps] = (0, _overrides.getOverrides)(overrides.NavContainer, _styledComponents.StyledNavContainer);
const [HeaderButton, iconButtonProps] = (0, _overrides.getOverrides)(overrides.HeaderButton, DefaultHeaderButton);
const [ActionButtonsContainer, actionButtonsContainerProps] = (0, _overrides.getOverrides)(overrides.ActionButtonsContainer, _styledComponents.StyledActionButtonsContainer);
if (actionButtons.length > 2 && process.env.NODE_ENV !== "production") {
console.warn(`MobileHeader can only render two additional buttons. Received ${actionButtons.length}`);
}
return /*#__PURE__*/React.createElement(Root, _extends({}, rootProps, {
$type: type,
$expanded: expanded
}), /*#__PURE__*/React.createElement(NavContainer, _extends({
$type: type,
$hasTextContent: navButton && !Boolean(navButton.renderIcon)
}, navContainerProps), navButton && /*#__PURE__*/React.createElement(HeaderButton, _extends({
onClick: navButton.onClick,
type: type,
"aria-label": navButton.label
}, iconButtonProps), renderButtonContent(navButton.renderIcon || navButton.label))), type === _constants.TYPE.fixed && /*#__PURE__*/React.createElement(Title, _extends({
$type: type,
$expanded: expanded
}, titleProps), title), actionButtons.length > 0 && /*#__PURE__*/React.createElement(ActionButtonsContainer, actionButtonsContainerProps, actionButtons.map((button, idx) => {
const {
renderIcon,
onClick,
label
} = button;
return /*#__PURE__*/React.createElement(HeaderButton, _extends({
onClick: onClick,
"aria-label": label,
type: type
}, iconButtonProps, {
key: idx
}), renderButtonContent(renderIcon || label));
})));
}
var _default = exports.default = MobileHeader;