stream-chat-react-native-core/lib/module/components/Message/MessageItemView/MessageStatus.js

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MessageStatus = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _useA11yLabel = require("../../../a11y/hooks/useA11yLabel");
var _ChannelContext = require("../../../contexts/channelContext/ChannelContext");
var _ComponentsContext = require("../../../contexts/componentsContext/ComponentsContext");
var _MessageContext = require("../../../contexts/messageContext/MessageContext");
var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
var _theme = require("../../../theme");
var _utils = require("../../../utils/utils");
var _HiddenA11yText = require("../../Accessibility/HiddenA11yText");
var _useShouldUseOverlayStyles = require("../hooks/useShouldUseOverlayStyles");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Message/MessageItemView/MessageStatus.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 MessageStatusWithContext = props => {
  var deliveredToCount = props.deliveredToCount,
    message = props.message,
    readBy = props.readBy;
  var styles = useStyles();
  var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
    icons = _useComponentsContext.icons;
  var _useTheme = (0, _ThemeContext.useTheme)(),
    _useTheme$theme$messa = _useTheme.theme.messageItemView.status,
    checkAllIcon = _useTheme$theme$messa.checkAllIcon,
    checkIcon = _useTheme$theme$messa.checkIcon,
    container = _useTheme$theme$messa.container,
    timeIcon = _useTheme$theme$messa.timeIcon;
  var hasReadByGreaterThanOne = typeof readBy === 'number' && readBy > 1;
  var read = hasReadByGreaterThanOne || readBy === true;
  var delivered = deliveredToCount > 1;
  var sending = message.status === _utils.MessageStatusTypes.SENDING;
  var sent = message.status === _utils.MessageStatusTypes.RECEIVED && !delivered && !read && message.type !== 'ephemeral';
  var accessibilityLabel = (0, _useA11yLabel.useA11yLabel)(read ? 'a11y/Read' : delivered ? 'a11y/Delivered' : sending ? 'a11y/Sending' : sent ? 'a11y/Sent' : '');
  if (message.status === _utils.MessageStatusTypes.FAILED || message.type === 'error') {
    return null;
  }
  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [(0, _jsxRuntime.jsx)(_HiddenA11yText.HiddenA11yText, {
      label: accessibilityLabel
    }), (0, _jsxRuntime.jsx)(_reactNative.View, {
      accessibilityElementsHidden: !!accessibilityLabel,
      importantForAccessibility: accessibilityLabel ? 'no-hide-descendants' : undefined,
      style: [styles.container, container],
      children: read ? (0, _jsxRuntime.jsx)(icons.CheckAll, {
        height: 16,
        stroke: styles.readCheck.color,
        width: 16,
        ...checkAllIcon
      }) : delivered ? (0, _jsxRuntime.jsx)(icons.CheckAll, {
        stroke: styles.deliveredCheck.color,
        height: 16,
        width: 16,
        ...checkAllIcon
      }) : sending ? (0, _jsxRuntime.jsx)(icons.Time, {
        stroke: styles.sendingCheck.color,
        height: 16,
        width: 16,
        ...timeIcon
      }) : sent ? (0, _jsxRuntime.jsx)(icons.Check, {
        stroke: styles.sentCheck.color,
        height: 16,
        width: 16,
        ...checkIcon
      }) : null
    })]
  });
};
var areEqual = (prevProps, nextProps) => {
  var prevDeliveredBy = prevProps.deliveredToCount,
    prevMessage = prevProps.message,
    prevReadBy = prevProps.readBy;
  var nextDeliveredBy = nextProps.deliveredToCount,
    nextMessage = nextProps.message,
    nextReadBy = nextProps.readBy;
  var deliveredByEqual = prevDeliveredBy === nextDeliveredBy;
  if (!deliveredByEqual) {
    return false;
  }
  var readByEqual = prevReadBy === nextReadBy;
  if (!readByEqual) {
    return false;
  }
  var messageEqual = prevMessage.status === nextMessage.status && prevMessage.type === nextMessage.type;
  if (!messageEqual) {
    return false;
  }
  return true;
};
var MemoizedMessageStatus = _react.default.memo(MessageStatusWithContext, areEqual);
var MessageStatus = props => {
  var _useChannelContext = (0, _ChannelContext.useChannelContext)(),
    channel = _useChannelContext.channel;
  var _useMessageContext = (0, _MessageContext.useMessageContext)(),
    deliveredToCount = _useMessageContext.deliveredToCount,
    message = _useMessageContext.message,
    readBy = _useMessageContext.readBy;
  var channelMembersCount = Object.keys(channel == null ? void 0 : channel.state.members).length;
  return (0, _jsxRuntime.jsx)(MemoizedMessageStatus, {
    channel,
    channelMembersCount,
    deliveredToCount,
    message,
    readBy,
    ...props
  });
};
exports.MessageStatus = MessageStatus;
MessageStatus.displayName = 'MessageStatus{messageItemView{status}}';
var useStyles = () => {
  var _useTheme2 = (0, _ThemeContext.useTheme)(),
    semantics = _useTheme2.theme.semantics;
  var shouldUseOverlayStyles = (0, _useShouldUseOverlayStyles.useShouldUseOverlayStyles)();
  return (0, _react.useMemo)(() => {
    return _reactNative.StyleSheet.create({
      readByCount: {
        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.accentPrimary,
        fontSize: _theme.primitives.typographyFontSizeXs,
        fontWeight: _theme.primitives.typographyFontWeightRegular,
        lineHeight: _theme.primitives.typographyLineHeightTight
      },
      container: {
        alignItems: 'center',
        flexDirection: 'row',
        gap: _theme.primitives.spacingXxs
      },
      readCheck: {
        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.accentPrimary
      },
      deliveredCheck: {
        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextTimestamp
      },
      sendingCheck: {
        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextTimestamp
      },
      sentCheck: {
        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextTimestamp
      }
    });
  }, [shouldUseOverlayStyles, semantics]);
};
//# sourceMappingURL=MessageStatus.js.map