baseui/system-banner/system-banner.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SystemBanner = SystemBanner;
var React = _interopRequireWildcard(require("react"));
var _banner = require("../banner");
var _styledComponents = require("./styled-components");
var _overrides = require("../helpers/overrides");
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.
*/
function SystemBanner(props) {
  const {
    artworkIcon,
    primaryAction,
    secondaryAction,
    overrides = {},
    ...restProps
  } = props;
  const {
    Root,
    LeadingContent,
    TrailingIconButton,
    MessageContent,
    ...restOverrides
  } = overrides;
  const hasSinglePrimaryAction = primaryAction?.onClick && !secondaryAction;
  const hasTwoActions = primaryAction?.onClick && secondaryAction?.onClick;
  const hasTrailingIcon = hasSinglePrimaryAction && primaryAction.icon;
  const systemBannerRootOverrides = {
    component: _styledComponents.StyledRoot,
    props: hasSinglePrimaryAction ? {
      $isButton: true,
      $as: 'button',
      onClick: primaryAction.onClick,
      'aria-label': primaryAction.label
    } : {}
  };
  const systemBannerLeadingContentOverrides = {
    component: _styledComponents.StyledLeadingContent
  };
  const styledTrailingIconButtonOverrides = {
    component: _styledComponents.StyledTrailingIconButton,
    props: {
      $as: 'div'
    }
  };
  const systemBannerMessageContentOverrides = {
    component: _styledComponents.StyledMessageContent,
    props: {
      $as: 'button',
      onClick: primaryAction?.onClick,
      'aria-label': primaryAction?.label
    }
  };
  const systemBannerOverrides = {
    Root: (0, _overrides.mergeOverride)(systemBannerRootOverrides, Root || {}),
    LeadingContent: (0, _overrides.mergeOverride)(systemBannerLeadingContentOverrides, LeadingContent || {}),
    TrailingIconButton: hasTrailingIcon ? (0, _overrides.mergeOverride)(styledTrailingIconButtonOverrides, TrailingIconButton || {}) : {},
    MessageContent: hasTwoActions ? (0, _overrides.mergeOverride)(systemBannerMessageContentOverrides, MessageContent || {}) : {},
    ...restOverrides
  };
  return /*#__PURE__*/React.createElement(_banner.Banner
  // @ts-expect-error todo(ts-migration) TS2322 Type '{ icon?: ArtworkIcon | undefined; onClick: ((a: SyntheticEvent<HTMLButtonElement, Event>) => unknown) | null; label: string; } | { ...; } | null' is not assignable to type 'ActionContent | undef...
  , _extends({
    action: secondaryAction ? {
      onClick: null,
      ...secondaryAction
    } : hasTrailingIcon ? {
      icon: primaryAction.icon,
      onClick: null,
      label: null
    } : null,
    hierarchy: _banner.HIERARCHY.high,
    overrides: systemBannerOverrides
  }, artworkIcon ? {
    artwork: {
      icon: artworkIcon,
      type: _banner.ARTWORK_TYPE.icon
    }
  } : {}, restProps));
}