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

Build React Native apps with component and shared patterns using Carbon

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Base = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _carbonReactNativeElements = require("@audira/carbon-react-native-elements");
var _close = _interopRequireDefault(require("@carbon/icons/svg/32/close.svg"));
var _index = require("../../../_internal/contexts/index.js");
var _index2 = require("../../../_internal/style-sheets/index.js");
var _index3 = require("../../../carbon-style-sheet/index.js");
var _index4 = require("../../../contexts/index.js");
var _index5 = require("../../button/base-color/index.js");
var _index6 = require("../../text/index.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const Base = exports.Base = /*#__PURE__*/(0, _react.forwardRef)(function Base({
  title,
  body,
  inline,
  Icon,
  iconProps,
  iconContainerStyle,
  iconClose,
  onPressIconClose,
  iconCloseProps,
  iconCloseButtonProps,
  nodes,
  titleStyle,
  leftBarStyle,
  leftContainerStyle,
  contentContainerStyle,
  style,
  dir,
  ...props
}, ref) {
  const globalConfigContext = (0, _react.useContext)(_index.GlobalConfigContext),
    themeContext = (0, _react.useContext)(_index4.ThemeContext);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    ...props,
    dir: dir ?? globalConfigContext.rtl ? 'rtl' : undefined,
    style: [_index2.FlexStyleSheet.flex_row, globalConfigContext.rtl ? _index2.CommonStyleSheet.rtl : undefined, style],
    ref: ref,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [baseStyle.leftBar, leftBarStyle]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: [_index2.FlexStyleSheet.flex_auto, _index2.FlexStyleSheet.flex_row, !inline ? baseStyle.leftContainerNonInline : _index2.FlexStyleSheet.items_center, leftContainerStyle],
      children: [!!Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: [baseStyle.iconContainer, iconContainerStyle],
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
          ...iconProps,
          width: 20,
          height: 20
        })
      }), nodes?.beforeContentContainer, (!!title || !!body) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: [_index2.FlexStyleSheet.flex_auto, contentContainerStyle],
        children: [!inline ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
          children: [!!title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.Text, {
            type: "heading_compact_01",
            style: titleStyle,
            children: title
          }), body]
        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.Text, {
          type: "heading_compact_01",
          style: [baseStyle.inlineTextWrapper, titleStyle],
          children: !globalConfigContext.rtl ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
            children: [title, title && body ? ' ' : '', body]
          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
            children: [body, title && body ? ' ' : '', title]
          })
        }), nodes?.beforeContentContainerEnd]
      }), nodes?.afterContentContainer]
    }), nodes?.beforeButtonClose, !!iconClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.BaseColor, {
      ...iconCloseButtonProps,
      text: "",
      android_rippleEffectColor: mapAndroidRippleEffectColor[themeContext.colorScheme],
      size: "large_expressive",
      Icon: _close.default,
      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: [_index2.FlexStyleSheet.justify_center, baseStyle.buttonIconClose, iconCloseButtonProps?.style]
    })]
  });
});
const baseStyle = _reactNative.StyleSheet.create({
    leftBar: {
      position: 'absolute',
      top: -1,
      bottom: -1,
      width: 3
    },
    iconContainer: {
      marginStart: _carbonReactNativeElements.Spacing.spacing_05,
      marginEnd: _carbonReactNativeElements.Spacing.spacing_05
    },
    leftContainerNonInline: {
      marginTop: _carbonReactNativeElements.Spacing.spacing_05,
      marginBottom: _carbonReactNativeElements.Spacing.spacing_05
    },
    inlineTextWrapper: {
      marginTop: _carbonReactNativeElements.Spacing.spacing_04,
      marginBottom: _carbonReactNativeElements.Spacing.spacing_04
    },
    buttonIconClose: {
      width: 48,
      height: 48,
      minWidth: 48,
      minHeight: 48,
      paddingTop: 0,
      paddingRight: 0,
      paddingBottom: 0,
      paddingLeft: 0
    },
    text: {
      color: 'transparent'
    }
  }),
  backgroundStyleSheet = _index3.CarbonStyleSheet.create({
    default: {
      backgroundColor: 'transparent'
    },
    focused: {
      borderWidth: 1,
      borderColor: _index3.CarbonStyleSheet.color.focus
    },
    hovered: {
      backgroundColor: _index3.CarbonStyleSheet.color.background_hover
    },
    pressed: {
      backgroundColor: _index3.CarbonStyleSheet.color.background_active
    },
    disabled: {
      backgroundColor: 'transparent'
    }
  }),
  mapAndroidRippleEffectColor = {
    gray_10: _carbonReactNativeElements.Color.Token.gray_10.background_active,
    gray_100: _carbonReactNativeElements.Color.Token.gray_100.background_active
  };
//# sourceMappingURL=Base.js.map