stream-chat-react-native-core/lib/module/components/MessageList/UnreadMessagesNotification.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.UnreadMessagesNotification = void 0;
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _ChannelContext = require("../../contexts/channelContext/ChannelContext");
var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
var _useStateStore2 = require("../../hooks/useStateStore");
var _theme = require("../../theme");
var _ui = require("../ui");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageList/UnreadMessagesNotification.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 channelUnreadStateSelector = state => ({
  unread_messages: state.channelUnreadState?.unread_messages
});
var UnreadMessagesNotification = props => {
  var onCloseHandler = props.onCloseHandler,
    onPressHandler = props.onPressHandler,
    unreadCount = props.unreadCount,
    channelUnreadStateStore = props.channelUnreadStateStore;
  var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
    t = _useTranslationContex.t;
  var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
    icons = _useComponentsContext.icons;
  var _useChannelContext = (0, _ChannelContext.useChannelContext)(),
    loadChannelAtFirstUnreadMessage = _useChannelContext.loadChannelAtFirstUnreadMessage,
    markRead = _useChannelContext.markRead,
    setChannelUnreadState = _useChannelContext.setChannelUnreadState,
    setTargetedMessage = _useChannelContext.setTargetedMessage;
  var _useStateStore = (0, _useStateStore2.useStateStore)(channelUnreadStateStore.state, channelUnreadStateSelector),
    unread_messages = _useStateStore.unread_messages;
  var count = unread_messages ?? unreadCount;
  var handleOnPress = function () {
    var _ref = (0, _asyncToGenerator2.default)(function* () {
      if (onPressHandler) {
        yield onPressHandler();
      } else {
        yield loadChannelAtFirstUnreadMessage({
          channelUnreadState: channelUnreadStateStore.channelUnreadState,
          setChannelUnreadState,
          setTargetedMessage
        });
      }
    });
    return function handleOnPress() {
      return _ref.apply(this, arguments);
    };
  }();
  var handleClose = function () {
    var _ref2 = (0, _asyncToGenerator2.default)(function* () {
      if (onCloseHandler) {
        yield onCloseHandler();
      } else {
        yield markRead();
      }
    });
    return function handleClose() {
      return _ref2.apply(this, arguments);
    };
  }();
  var styles = useStyles();
  return (0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: styles.container,
    children: [(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.leftButtonContainer,
      children: (0, _jsxRuntime.jsx)(_ui.Button, {
        variant: "secondary",
        type: "ghost",
        LeadingIcon: icons.ArrowUp,
        label: count ? t('{{count}} unread', {
          count
        }) : t('Unread Messages'),
        onPress: handleOnPress,
        size: "md"
      })
    }), (0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.rightButtonContainer,
      children: (0, _jsxRuntime.jsx)(_ui.Button, {
        accessibilityLabelKey: "a11y/Dismiss unread messages",
        variant: "secondary",
        type: "ghost",
        iconOnly: true,
        LeadingIcon: icons.NewClose,
        onPress: handleClose,
        size: "md"
      })
    })]
  });
};
exports.UnreadMessagesNotification = UnreadMessagesNotification;
var useStyles = () => {
  var _useTheme = (0, _ThemeContext.useTheme)(),
    _useTheme$theme = _useTheme.theme,
    _useTheme$theme$messa = _useTheme$theme.messageList.unreadMessagesNotification,
    container = _useTheme$theme$messa.container,
    leftButtonContainer = _useTheme$theme$messa.leftButtonContainer,
    rightButtonContainer = _useTheme$theme$messa.rightButtonContainer,
    semantics = _useTheme$theme.semantics;
  return (0, _react.useMemo)(() => _reactNative.StyleSheet.create({
    container: {
      borderRadius: _theme.primitives.radiusMax,
      borderWidth: 1,
      borderColor: semantics.borderCoreDefault,
      backgroundColor: semantics.backgroundCoreApp,
      flexDirection: 'row',
      alignItems: 'center',
      ..._theme.primitives.lightElevation4,
      ...container
    },
    leftButtonContainer: {
      flexShrink: 0,
      borderRightWidth: 1,
      borderRightColor: semantics.borderCoreDefault,
      ...leftButtonContainer
    },
    rightButtonContainer: {
      flexShrink: 0,
      ...rightButtonContainer
    }
  }), [semantics, container, leftButtonContainer, rightButtonContainer]);
};
//# sourceMappingURL=UnreadMessagesNotification.js.map