@audira/carbon-react-native/lib/module/components/notification/base/Base.js

Build React Native apps with component and shared patterns using Carbon

"use strict";

import { forwardRef, useContext } from 'react';
import { StyleSheet, View } from 'react-native';
import { Color, Spacing } from '@audira/carbon-react-native-elements';
import IconClose from '@carbon/icons/svg/32/close.svg';
import { GlobalConfigContext } from "../../../_internal/contexts/index.js";
import { CommonStyleSheet, FlexStyleSheet } from "../../../_internal/style-sheets/index.js";
import { CarbonStyleSheet } from "../../../carbon-style-sheet/index.js";
import { ThemeContext } from "../../../contexts/index.js";
import { BaseColor as ButtonBaseColor } from "../../button/base-color/index.js";
import { Text } from "../../text/index.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export const Base = /*#__PURE__*/forwardRef(function Base({
  title,
  body,
  inline,
  Icon,
  iconProps,
  iconContainerStyle,
  iconClose,
  onPressIconClose,
  iconCloseProps,
  iconCloseButtonProps,
  nodes,
  titleStyle,
  leftBarStyle,
  leftContainerStyle,
  contentContainerStyle,
  style,
  dir,
  ...props
}, ref) {
  const globalConfigContext = useContext(GlobalConfigContext),
    themeContext = useContext(ThemeContext);
  return /*#__PURE__*/_jsxs(View, {
    ...props,
    dir: dir ?? globalConfigContext.rtl ? 'rtl' : undefined,
    style: [FlexStyleSheet.flex_row, globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined, style],
    ref: ref,
    children: [/*#__PURE__*/_jsx(View, {
      style: [baseStyle.leftBar, leftBarStyle]
    }), /*#__PURE__*/_jsxs(View, {
      style: [FlexStyleSheet.flex_auto, FlexStyleSheet.flex_row, !inline ? baseStyle.leftContainerNonInline : FlexStyleSheet.items_center, leftContainerStyle],
      children: [!!Icon && /*#__PURE__*/_jsx(View, {
        style: [baseStyle.iconContainer, iconContainerStyle],
        children: /*#__PURE__*/_jsx(Icon, {
          ...iconProps,
          width: 20,
          height: 20
        })
      }), nodes?.beforeContentContainer, (!!title || !!body) && /*#__PURE__*/_jsxs(View, {
        style: [FlexStyleSheet.flex_auto, contentContainerStyle],
        children: [!inline ? /*#__PURE__*/_jsxs(_Fragment, {
          children: [!!title && /*#__PURE__*/_jsx(Text, {
            type: "heading_compact_01",
            style: titleStyle,
            children: title
          }), body]
        }) : /*#__PURE__*/_jsx(Text, {
          type: "heading_compact_01",
          style: [baseStyle.inlineTextWrapper, titleStyle],
          children: !globalConfigContext.rtl ? /*#__PURE__*/_jsxs(_Fragment, {
            children: [title, title && body ? ' ' : '', body]
          }) : /*#__PURE__*/_jsxs(_Fragment, {
            children: [body, title && body ? ' ' : '', title]
          })
        }), nodes?.beforeContentContainerEnd]
      }), nodes?.afterContentContainer]
    }), nodes?.beforeButtonClose, !!iconClose && /*#__PURE__*/_jsx(ButtonBaseColor, {
      ...iconCloseButtonProps,
      text: "",
      android_rippleEffectColor: mapAndroidRippleEffectColor[themeContext.colorScheme],
      size: "large_expressive",
      Icon: IconClose,
      iconProps: iconCloseProps,
      onPress: onPressIconClose,
      colorStateStyle: {
        background: {
          default: backgroundStyleSheet.default,
          focused: backgroundStyleSheet.focused,
          hovered: backgroundStyleSheet.hovered,
          pressed: backgroundStyleSheet.pressed,
          disabled: backgroundStyleSheet.disabled
        },
        text: {
          default: baseStyle.text,
          focused: baseStyle.text,
          hovered: baseStyle.text,
          pressed: baseStyle.text,
          disabled: baseStyle.text
        },
        /**
         * Means nothing since we used `iconNode` prop
         */
        icon: {
          default: 'transparent',
          focused: 'transparent',
          hovered: 'transparent',
          pressed: 'transparent',
          disabled: 'transparent'
        }
      },
      style: [FlexStyleSheet.justify_center, baseStyle.buttonIconClose, iconCloseButtonProps?.style]
    })]
  });
});
const baseStyle = StyleSheet.create({
    leftBar: {
      position: 'absolute',
      top: -1,
      bottom: -1,
      width: 3
    },
    iconContainer: {
      marginStart: Spacing.spacing_05,
      marginEnd: Spacing.spacing_05
    },
    leftContainerNonInline: {
      marginTop: Spacing.spacing_05,
      marginBottom: Spacing.spacing_05
    },
    inlineTextWrapper: {
      marginTop: Spacing.spacing_04,
      marginBottom: Spacing.spacing_04
    },
    buttonIconClose: {
      width: 48,
      height: 48,
      minWidth: 48,
      minHeight: 48,
      paddingTop: 0,
      paddingRight: 0,
      paddingBottom: 0,
      paddingLeft: 0
    },
    text: {
      color: 'transparent'
    }
  }),
  backgroundStyleSheet = CarbonStyleSheet.create({
    default: {
      backgroundColor: 'transparent'
    },
    focused: {
      borderWidth: 1,
      borderColor: CarbonStyleSheet.color.focus
    },
    hovered: {
      backgroundColor: CarbonStyleSheet.color.background_hover
    },
    pressed: {
      backgroundColor: CarbonStyleSheet.color.background_active
    },
    disabled: {
      backgroundColor: 'transparent'
    }
  }),
  mapAndroidRippleEffectColor = {
    gray_10: Color.Token.gray_10.background_active,
    gray_100: Color.Token.gray_100.background_active
  };
//# sourceMappingURL=Base.js.map