baseui
Version:
A React Component library implementing the Base design language
218 lines (212 loc) • 8.92 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Banner = Banner;
var React = _interopRequireWildcard(require("react"));
var _index = require("../button/index");
var _overrides = require("../helpers/overrides");
var _index2 = require("../styles/index");
var _constants = require("./constants");
var _styledComponents = require("./styled-components");
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.
*/
// @ts-ignore
function low(theme, kind) {
switch (kind) {
case _constants.KIND.negative:
return {
actionBackgroundColor: theme.colors.bannerActionLowNegative,
backgroundColor: theme.colors.backgroundNegativeLight,
color: theme.colors.contentPrimary
};
case _constants.KIND.positive:
return {
actionBackgroundColor: theme.colors.bannerActionLowPositive,
backgroundColor: theme.colors.backgroundPositiveLight,
color: theme.colors.contentPrimary
};
case _constants.KIND.warning:
return {
actionBackgroundColor: theme.colors.bannerActionLowWarning,
backgroundColor: theme.colors.backgroundWarningLight,
color: theme.colors.contentPrimary
};
case _constants.KIND.info:
default:
return {
actionBackgroundColor: theme.colors.bannerActionLowInfo,
backgroundColor: theme.colors.backgroundAccentLight,
color: theme.colors.contentPrimary
};
}
}
// @ts-ignore
function high(theme, kind) {
switch (kind) {
case _constants.KIND.negative:
return {
actionBackgroundColor: theme.colors.bannerActionHighNegative,
backgroundColor: theme.colors.backgroundNegative,
color: theme.colors.contentOnColor
};
case _constants.KIND.positive:
return {
actionBackgroundColor: theme.colors.bannerActionHighPositive,
backgroundColor: theme.colors.backgroundPositive,
color: theme.colors.contentOnColor
};
case _constants.KIND.warning:
return {
actionBackgroundColor: theme.colors.bannerActionHighWarning,
backgroundColor: theme.colors.backgroundWarning,
color: theme.colors.contentPrimary
};
case _constants.KIND.info:
default:
return {
actionBackgroundColor: theme.colors.bannerActionHighInfo,
backgroundColor: theme.colors.backgroundAccent,
color: theme.colors.contentOnColor
};
}
}
// @ts-ignore
function Leading({
artwork
}) {
const [, theme] = (0, _index2.useStyletron)();
if (!artwork) {
return null;
}
const size = artwork.type === _constants.ARTWORK_TYPE.badge ? theme.sizing.scale1000 : theme.sizing.scale800;
return artwork.icon({
size
});
}
// @ts-ignore
function Below({
action,
backgroundColor,
color
}) {
if (!action || action.position !== _constants.ACTION_POSITION.below) {
return null;
}
if (process.env.NODE_ENV !== "production") {
if (action.icon) {
console.error('Banner ACTION_POSITION.below must not have an icon.');
return null;
}
}
if (action.label) {
return /*#__PURE__*/React.createElement(_index.Button, {
colors: {
backgroundColor,
color
},
onClick: action.onClick,
size: _index.SIZE.compact,
shape: _index.SHAPE.pill
}, action.label);
}
return null;
}
// @ts-ignore
function Trailing({
action,
backgroundColor,
color,
overrides,
nested
}) {
const [, theme] = (0, _index2.useStyletron)();
if (!action || action.position && action.position !== _constants.ACTION_POSITION.trailing) {
return null;
}
const [TrailingIconButton, trailingIconButtonProps] = (0, _overrides.getOverrides)(overrides.TrailingIconButton, _styledComponents.StyledTrailingIconButton);
if (action.icon) {
return /*#__PURE__*/React.createElement(TrailingIconButton, _extends({
"aria-label": action.label,
onClick: action.onClick,
$nested: nested
}, trailingIconButtonProps), action.icon({
size: theme.sizing.scale650
}));
}
const [TrailingButtonContainer, trailingButtonContainerProps] = (0, _overrides.getOverrides)(overrides.TrailingButtonContainer, _styledComponents.StyledTrailingButtonContainer);
const trailingButtonOverrides = overrides?.TrailingButton;
const trailingButtonBackgroundColor = trailingButtonOverrides?.style?.backgroundColor ? trailingButtonOverrides.style.backgroundColor : backgroundColor;
if (action.label) {
return /*#__PURE__*/React.createElement(TrailingButtonContainer, trailingButtonContainerProps, /*#__PURE__*/React.createElement(_index.Button, {
colors: {
backgroundColor: trailingButtonBackgroundColor,
color
},
onClick: action.onClick,
size: _index.SIZE.compact,
shape: _index.SHAPE.pill,
overrides: {
BaseButton: {
style: {
whiteSpace: 'nowrap'
}
}
}
}, action.label));
}
return null;
}
function Banner({
action,
artwork,
children,
hierarchy = _constants.HIERARCHY.low,
kind = _constants.KIND.info,
overrides = {},
nested = false,
title
}) {
const [, theme] = (0, _index2.useStyletron)();
const styles = hierarchy === _constants.HIERARCHY.high ? high(theme, kind) : low(theme, kind);
const actionPosition = action && action.position ? action.position : _constants.ACTION_POSITION.trailing;
const [Root, rootProps] = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot);
const [LeadingContent, leadingContentProps] = (0, _overrides.getOverrides)(overrides.LeadingContent, _styledComponents.StyledLeadingContent);
const [MessageContent, messageContentProps] = (0, _overrides.getOverrides)(overrides.MessageContent, _styledComponents.StyledMessageContent);
const [TrailingContent, trailingContentProps] = (0, _overrides.getOverrides)(overrides.TrailingContent, _styledComponents.StyledTrailingContent);
const [BelowContent, belowContentProps] = (0, _overrides.getOverrides)(overrides.BelowContent, _styledComponents.StyledBelowContent);
const [Title, titleProps] = (0, _overrides.getOverrides)(overrides.Title, _styledComponents.StyledTitle);
const [Message, messageProps] = (0, _overrides.getOverrides)(overrides.Message, _styledComponents.StyledMessage);
const ariaLabel = rootProps.hasOwnProperty('aria-label') ? rootProps['aria-label'] : 'this is an announcement banner';
return /*#__PURE__*/React.createElement(Root, _extends({
$backgroundColor: styles.backgroundColor,
$color: styles.color,
$nested: nested
}, rootProps, {
role: "complementary",
"aria-label": ariaLabel
}), /*#__PURE__*/React.createElement(LeadingContent, _extends({
$includesArtwork: Boolean(artwork)
}, leadingContentProps), /*#__PURE__*/React.createElement(Leading, {
artwork: artwork
})), /*#__PURE__*/React.createElement(MessageContent, _extends({
$actionPosition: actionPosition
}, messageContentProps), Boolean(title) && /*#__PURE__*/React.createElement(Title, titleProps, title), Boolean(children) && /*#__PURE__*/React.createElement(Message, messageProps, children)), /*#__PURE__*/React.createElement(TrailingContent, trailingContentProps, /*#__PURE__*/React.createElement(Trailing, {
action: action,
backgroundColor: styles.actionBackgroundColor,
color: styles.color,
overrides: overrides,
nested: nested
})), /*#__PURE__*/React.createElement(BelowContent, _extends({
$actionPosition: actionPosition
}, belowContentProps), /*#__PURE__*/React.createElement(Below, {
action: action,
backgroundColor: styles.actionBackgroundColor,
color: styles.color
})));
}