baseui/toast/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Root = exports.InnerContainer = exports.CloseIconSvg = exports.Body = void 0;
exports.getPlacement = getPlacement;
var _styles = require("../styles");
var _styledComponents = require("../icon/styled-components");
var _constants = require("./constants");
/*
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 getBackgroundColor(kind, type, theme) {
  const isInline = type === _constants.TYPE.inline;
  return {
    [_constants.KIND.info]: isInline ? theme.colors.notificationInfoBackground : theme.colors.toastInfoBackground,
    [_constants.KIND.positive]: isInline ? theme.colors.notificationPositiveBackground : theme.colors.toastPositiveBackground,
    [_constants.KIND.warning]: isInline ? theme.colors.notificationWarningBackground : theme.colors.toastWarningBackground,
    [_constants.KIND.negative]: isInline ? theme.colors.notificationNegativeBackground : theme.colors.toastNegativeBackground
  }[kind];
}
function getFontColor(kind, type, theme) {
  const isInline = type === _constants.TYPE.inline;
  if (isInline) {
    return {
      [_constants.KIND.info]: theme.colors.notificationInfoText,
      [_constants.KIND.positive]: theme.colors.notificationPositiveText,
      [_constants.KIND.warning]: theme.colors.notificationWarningText,
      [_constants.KIND.negative]: theme.colors.notificationNegativeText
    }[kind];
  }
  return {
    [_constants.KIND.info]: theme.colors.toastInfoText,
    [_constants.KIND.positive]: theme.colors.toastPositiveText,
    [_constants.KIND.warning]: theme.colors.toastWarningText,
    [_constants.KIND.negative]: theme.colors.toastNegativeText
  }[kind];
}
function getPlacement(placement) {
  switch (placement) {
    case _constants.PLACEMENT.topLeft:
      return {
        top: 0,
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        flexDirection: 'column'
      };
    case _constants.PLACEMENT.top:
      return {
        top: 0,
        alignItems: 'center',
        justifyContent: 'flex-start',
        flexDirection: 'column'
      };
    case _constants.PLACEMENT.topRight:
      return {
        top: 0,
        alignItems: 'flex-end',
        justifyContent: 'flex-start',
        flexDirection: 'column'
      };
    case _constants.PLACEMENT.bottomRight:
      return {
        bottom: 0,
        alignItems: 'flex-end',
        justifyContent: 'flex-end',
        flexDirection: 'column-reverse'
      };
    case _constants.PLACEMENT.bottom:
      return {
        bottom: 0,
        alignItems: 'center',
        justifyContent: 'flex-end',
        flexDirection: 'column-reverse'
      };
    case _constants.PLACEMENT.bottomLeft:
      return {
        bottom: 0,
        alignItems: 'flex-start',
        justifyContent: 'flex-end',
        flexDirection: 'column-reverse'
      };
  }
}
const Root = exports.Root = (0, _styles.styled)('div', ({
  $placement,
  $theme
}) => {
  return {
    pointerEvents: 'none',
    position: 'fixed',
    right: 0,
    left: 0,
    display: 'flex',
    marginTop: $theme.sizing.scale300,
    marginBottom: $theme.sizing.scale300,
    marginLeft: $theme.sizing.scale600,
    marginRight: $theme.sizing.scale600,
    ...getPlacement($placement)
  };
});
Root.displayName = "Root";
Root.displayName = 'Root';
const InnerContainer = exports.InnerContainer = (0, _styles.styled)('div',
// eslint-disable-next-line no-empty-pattern
({}) => ({}));
InnerContainer.displayName = "InnerContainer";
InnerContainer.displayName = 'InnerContainer';
const Body = exports.Body = (0, _styles.styled)('div', ({
  $isVisible,
  $kind,
  $type,
  $theme
}) => {
  const isInline = $type === _constants.TYPE.inline;
  return {
    ...$theme.typography.font300,
    pointerEvents: 'auto',
    color: getFontColor($kind, $type, $theme),
    height: 'auto',
    width: '288px',
    paddingTop: $theme.sizing.scale600,
    paddingRight: $theme.sizing.scale600,
    paddingBottom: $theme.sizing.scale600,
    paddingLeft: $theme.sizing.scale600,
    marginTop: $theme.sizing.scale300,
    marginBottom: $theme.sizing.scale300,
    backgroundColor: getBackgroundColor($kind, $type, $theme) || $theme.colors.backgroundAccent,
    borderTopLeftRadius: $theme.borders.radius400,
    borderTopRightRadius: $theme.borders.radius400,
    borderBottomRightRadius: $theme.borders.radius400,
    borderBottomLeftRadius: $theme.borders.radius400,
    boxShadow: isInline ? 'none' : $theme.lighting.shadow600,
    opacity: $isVisible ? 1 : 0,
    transitionProperty: 'all',
    transitionDuration: $theme.animation.timing200,
    transitionTimingFunction: $theme.animation.easeInOutCurve,
    display: 'flex',
    justifyContent: 'space-between'
  };
});
Body.displayName = "Body";
Body.displayName = 'Body';
const CloseIconSvg = exports.CloseIconSvg = (0, _styles.styled)('svg', ({
  $theme,
  $size,
  $color,
  $isFocusVisible
}) => ({
  ...(0, _styledComponents.getSvgStyles)({
    $theme,
    $size,
    $color
  }),
  cursor: 'pointer',
  width: $size || '16px',
  flexShrink: 0,
  outline: $isFocusVisible ? `3px solid ${$theme.colors.borderAccent}` : 'none'
}));
CloseIconSvg.displayName = "CloseIconSvg";
CloseIconSvg.displayName = 'CloseIconSvg';