@prosperitainova/dumbo-react-native/lib/commonjs/components/Notification/index.js

Dumbo for React Native Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Notification = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _colors = require("../../styles/colors");
var _helpers = require("../../helpers");
var _Text = require("../Text");
var _ = _interopRequireDefault(require("@carbon/icons/es/error--filled/20"));
var _2 = _interopRequireDefault(require("@carbon/icons/es/warning--filled/20"));
var _3 = _interopRequireDefault(require("@carbon/icons/es/checkmark--filled/20"));
var _4 = _interopRequireDefault(require("@carbon/icons/es/information--filled/20"));
var _5 = _interopRequireDefault(require("@carbon/icons/es/close/20"));
var _Button = require("../Button");
var _defaultText = require("../../constants/defaultText");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Types of notifications */

/** Props for Notification component */

/**
 * Notification component for showing the accept legal terms flow
 *
 * Notification component is "InlineNotification" by default and can be
 * used as "ToastNotification" by using multiLine flag and setting max width (follow Carbon web for Toast).
 *
 * Buttons (actionArea) in Notifications can require some funky color enforcing due to light theme use in non standard background colors. See the Example app for real world examples. Example usage:
 *
 * ```javascript
 *   <Button forceTheme={lowContrast ? 'light' : undefined} kind={lowContrast ? 'high-contrast' : 'high-contrast-inverse'} style={this.styles.button} onPress={this.actionCallback} text="Action" />
 * ```
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Notification.tsx | Example code}
 */
class Notification extends _react.default.Component {
  get styles() {
    const {
      multiLine,
      dropShadow
    } = this.props;
    return _reactNative.StyleSheet.create({
      wrapper: Object.assign({
        borderLeftWidth: 3,
        paddingLeft: 16,
        flexDirection: 'row'
      }, dropShadow ? _colors.shadowStyle : {}),
      icon: {
        paddingTop: 14,
        paddingBottom: 14,
        marginRight: 16
      },
      content: {
        paddingTop: 14,
        paddingBottom: 14,
        paddingRight: multiLine ? 0 : 16,
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap'
      },
      textWrapper: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap'
      },
      actionWrapper: {},
      close: {}
    });
  }
  get accentColor() {
    const {
      lowContrast,
      kind
    } = this.props;
    if (lowContrast) {
      switch (kind) {
        case 'error':
          return (0, _colors.getColor)('supportError');
        case 'warning':
          return (0, _colors.getColor)('supportWarning');
        case 'success':
          return (0, _colors.getColor)('supportSuccess');
        case 'info':
        default:
          return (0, _colors.getColor)('supportInfo');
      }
    } else {
      switch (kind) {
        case 'error':
          return (0, _colors.getColor)('supportErrorInverse');
        case 'warning':
          return (0, _colors.getColor)('supportWarningInverse');
        case 'success':
          return (0, _colors.getColor)('supportSuccessInverse');
        case 'info':
        default:
          return (0, _colors.getColor)('supportInfoInverse');
      }
    }
  }
  get textColor() {
    const {
      lowContrast
    } = this.props;

    // textPrimary is listed for the text color but dark mode does not work. Forcing light for all themes
    return lowContrast ? (0, _colors.getColor)('textPrimary', 'light') : (0, _colors.getColor)('textInverse');
  }
  get backgroundColor() {
    const {
      lowContrast,
      kind
    } = this.props;
    if (lowContrast) {
      switch (kind) {
        case 'error':
          return (0, _colors.getColor)('notificationBackgroundError');
        case 'warning':
          return (0, _colors.getColor)('notificationBackgroundWarning');
        case 'success':
          return (0, _colors.getColor)('notificationBackgroundSuccess');
        case 'info':
        default:
          return (0, _colors.getColor)('notificationBackgroundInfo');
      }
    } else {
      return (0, _colors.getColor)('backgroundInverse');
    }
  }
  get icon() {
    const {
      kind
    } = this.props;
    switch (kind) {
      case 'error':
        return (0, _helpers.createIcon)(_.default, 20, 20, this.accentColor);
      case 'warning':
        return (0, _helpers.createIcon)(_2.default, 20, 20, this.accentColor);
      case 'success':
        return (0, _helpers.createIcon)(_3.default, 20, 20, this.accentColor);
      case 'info':
      default:
        return (0, _helpers.createIcon)(_4.default, 20, 20, this.accentColor);
    }
  }
  get notificationContent() {
    const {
      title,
      subTitle,
      actionArea,
      multiLine
    } = this.props;
    const textStype = {
      color: this.textColor,
      marginRight: 16
    };
    const wrapper = (0, _helpers.styleReferenceBreaker)(this.styles.content);
    const textWrapper = (0, _helpers.styleReferenceBreaker)(this.styles.textWrapper);
    const hasAction = !!actionArea;
    if (multiLine) {
      wrapper.flexDirection = 'column';
      wrapper.flexWrap = 'nowrap';
      textWrapper.flexWrap = 'nowrap';
      textWrapper.flexDirection = 'column';
      if (hasAction) {
        textWrapper.marginBottom = 24;
      }
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: wrapper,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: textWrapper,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
          style: textStype,
          type: "heading-compact-01",
          text: title
        }), !!subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
          style: textStype,
          type: "body-compact-01",
          text: subTitle
        })]
      }), hasAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: this.styles.actionWrapper,
        children: actionArea
      })]
    });
  }
  get dismissArea() {
    const {
      onDismiss,
      onDismissText
    } = this.props;
    if (typeof onDismiss === 'function') {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: this.styles.close,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
          kind: "ghost",
          overrideColor: this.textColor,
          iconOnlyMode: true,
          onPress: onDismiss,
          text: onDismissText || _defaultText.defaultText.close,
          icon: _5.default
        })
      });
    }
    return null;
  }
  render() {
    const {
      componentProps,
      style
    } = this.props;
    const finalStyle = (0, _helpers.styleReferenceBreaker)(this.styles.wrapper);
    finalStyle.backgroundColor = this.backgroundColor;
    finalStyle.borderLeftColor = this.accentColor;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: (0, _helpers.styleReferenceBreaker)(finalStyle, style),
      accessibilityRole: "alert",
      ...(componentProps || {}),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: this.styles.icon,
        children: this.icon
      }), this.notificationContent, this.dismissArea]
    });
  }
}
exports.Notification = Notification;
//# sourceMappingURL=index.js.map