stream-chat-react-native-core/lib/module/components/Notifications/NotificationList.js

The official React Native and Expo components for Stream Chat, a service for building chat applications

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.NotificationList = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
var _useNotificationListController = require("./hooks/useNotificationListController");
var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
var _theme = require("../../theme");
var _transitions = require("../../utils/animations/transitions");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Notifications/NotificationList.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var isEnterFrom = value => value === 'bottom' || value === 'left' || value === 'right' || value === 'top';
var getNotificationEnterFrom = (notification, fallbackEnterFrom) => {
  var metadataEnterFrom = notification.metadata?.entryDirection;
  if (isEnterFrom(metadataEnterFrom)) return metadataEnterFrom;
  var originEnterFrom = notification.origin.context?.entryDirection;
  if (isEnterFrom(originEnterFrom)) return originEnterFrom;
  return fallbackEnterFrom;
};
var getStringValue = value => typeof value === 'string' ? value : undefined;
var getNotificationPresentationKey = notification => notification.type ?? getStringValue(notification.metadata?.dedupeKey) ?? getStringValue(notification.origin.context?.dedupeKey) ?? [notification.origin.emitter, notification.severity, notification.message].filter(Boolean).join(':');
var NotificationList = ({
  bottomOffset,
  enterFrom = 'bottom',
  filter,
  hostId,
  panel,
  topOffset,
  verticalAlignment = 'bottom'
}) => {
  var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
    NotificationComponent = _useComponentsContext.Notification;
  var styles = useStyles({
    bottomOffset,
    topOffset,
    verticalAlignment
  });
  var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
    t = _useTranslationContex.t;
  var _useNotificationListC = (0, _useNotificationListController.useNotificationListController)({
      filter,
      hostId,
      panel
    }),
    dismissNotification = _useNotificationListC.dismissNotification,
    notification = _useNotificationListC.notification;
  if (!notification) return null;
  var notificationEnterFrom = getNotificationEnterFrom(notification, enterFrom);
  var notificationPresentationKey = getNotificationPresentationKey(notification);
  return (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
    accessibilityLabel: t('a11y/Notifications'),
    pointerEvents: "box-none",
    layout: _transitions.transitions.layout200,
    style: styles.container,
    testID: "notification-list",
    children: (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
      entering: _transitions.transitions.boundedZoomIn200[notificationEnterFrom],
      exiting: _transitions.transitions.boundedZoomOut200[notificationEnterFrom],
      style: styles.notificationWrapper,
      testID: "notification-list-item",
      children: (0, _jsxRuntime.jsx)(NotificationComponent, {
        entryDirection: notificationEnterFrom,
        notification: notification,
        onDismiss: dismissNotification,
        showClose: !notification.duration
      })
    }, notificationPresentationKey)
  });
};
exports.NotificationList = NotificationList;
var useStyles = ({
  bottomOffset,
  topOffset,
  verticalAlignment
}) => {
  var _useTheme = (0, _ThemeContext.useTheme)(),
    notificationListContainer = _useTheme.theme.notificationList.container;
  return (0, _react.useMemo)(() => {
    var containerAlignmentStyle = verticalAlignment === 'bottom' ? {
      bottom: _theme.primitives.spacingMd
    } : {
      top: _theme.primitives.spacingMd
    };
    var containerOffsetStyle = verticalAlignment === 'bottom' && typeof bottomOffset === 'number' ? {
      bottom: _theme.primitives.spacingMd + bottomOffset
    } : verticalAlignment === 'top' && typeof topOffset === 'number' ? {
      top: _theme.primitives.spacingMd + topOffset
    } : undefined;
    return _reactNative.StyleSheet.create({
      container: {
        alignItems: 'center',
        left: _theme.primitives.spacingMd,
        maxHeight: '100%',
        position: 'absolute',
        right: _theme.primitives.spacingMd,
        zIndex: 20,
        ...containerAlignmentStyle,
        ...notificationListContainer,
        ...containerOffsetStyle
      },
      notificationWrapper: {
        alignSelf: 'center',
        maxWidth: '100%'
      }
    });
  }, [bottomOffset, notificationListContainer, topOffset, verticalAlignment]);
};
//# sourceMappingURL=NotificationList.js.map