@100mslive/react-native-room-kit/lib/module/components/Chat/MessageOptionsView.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

import * as React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { useAllowBlockingPeerFromChat, useAllowPinningMessage, useBlockPeerActions, useHMSInstance, useHMSMessagePinningActions, useHMSRoomStyle, useHMSRoomStyleSheet, useIsMessagePinned, useIsPeerBlocked, useModalType } from '../../hooks-util';
import { BottomSheet } from '../BottomSheet';
import { NoEntryIcon, PersonIcon, PinIcon } from '../../Icons';
import { addNotification, setSelectedMessageForAction } from '../../redux/actions';
import { ModalTypes } from '../../utils/types';
import { NotificationTypes } from '../../types';
const _MessageOptionsView = ({
  onDismiss
}) => {
  const dispatch = useDispatch();
  const hmsInstance = useHMSInstance();
  const localPeerPermissions = useSelector(state => {
    var _state$hmsStates$loca;
    return (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 || (_state$hmsStates$loca = _state$hmsStates$loca.role) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.permissions;
  });
  const localPeerId = useSelector(state => {
    var _state$hmsStates$loca2;
    return (_state$hmsStates$loca2 = state.hmsStates.localPeer) === null || _state$hmsStates$loca2 === void 0 ? void 0 : _state$hmsStates$loca2.peerID;
  });
  const selectedMessageForAction = useSelector(state => state.app.selectedMessageForAction);
  const allowPinningMessage = useAllowPinningMessage();
  const isPinned = useIsMessagePinned(selectedMessageForAction);
  const {
    pinMessage,
    unpinMessage
  } = useHMSMessagePinningActions();
  const allowPeerBlocking = useAllowBlockingPeerFromChat();
  const isPeerBlocked = useIsPeerBlocked((selectedMessageForAction === null || selectedMessageForAction === void 0 ? void 0 : selectedMessageForAction.sender) ?? null);
  const {
    blockPeer,
    unblockPeer
  } = useBlockPeerActions();
  const {
    handleModalVisibleType
  } = useModalType();
  const hmsRoomStyle = useHMSRoomStyleSheet(theme => ({
    blockLabel: {
      color: theme.palette.alert_error_default
    },
    blockIcon: {
      tintColor: theme.palette.alert_error_default
    }
  }));
  const closeMessageOptionsBottomSheet = () => {
    if (onDismiss) {
      onDismiss();
    } else {
      dispatch(setSelectedMessageForAction(null));
    }
  };
  const showError = error => {
    if (!onDismiss) {
      handleModalVisibleType(ModalTypes.DEFAULT);
    }
    dispatch(addNotification({
      id: Math.random().toString(16).slice(2),
      type: NotificationTypes.ERROR,
      title: error.message
    }));
  };
  const handleMessagePin = async () => {
    try {
      if (selectedMessageForAction) {
        if (isPinned) {
          await unpinMessage(selectedMessageForAction);
        } else {
          await pinMessage(selectedMessageForAction);
        }
      }
      closeMessageOptionsBottomSheet();
    } catch (error) {
      closeMessageOptionsBottomSheet();
      showError(error);
    }
  };
  const handleBlockPeerFromChat = async () => {
    try {
      if (selectedMessageForAction !== null && selectedMessageForAction !== void 0 && selectedMessageForAction.sender) {
        if (isPeerBlocked) {
          await unblockPeer(selectedMessageForAction.sender);
        } else {
          await blockPeer(selectedMessageForAction.sender);
        }
      }
      closeMessageOptionsBottomSheet();
    } catch (error) {
      closeMessageOptionsBottomSheet();
      showError(error);
    }
  };
  const handleRemoveParticipant = async () => {
    if (selectedMessageForAction !== null && selectedMessageForAction !== void 0 && selectedMessageForAction.sender) {
      await hmsInstance.removePeer(selectedMessageForAction.sender, 'Removed from chat');
    }
    closeMessageOptionsBottomSheet();
  };
  const hidePinItem = !(selectedMessageForAction && allowPinningMessage);
  const hideBlockItem = !(selectedMessageForAction && selectedMessageForAction.sender && allowPeerBlocking && selectedMessageForAction.sender.peerID !== localPeerId);
  const hideRemoveItem = !(localPeerPermissions !== null && localPeerPermissions !== void 0 && localPeerPermissions.removeOthers && selectedMessageForAction !== null && selectedMessageForAction !== void 0 && selectedMessageForAction.sender && !selectedMessageForAction.sender.isLocal);
  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(BottomSheet.Header, {
    heading: "Message Options",
    dismissModal: closeMessageOptionsBottomSheet
  }), /*#__PURE__*/React.createElement(BottomSheet.Divider, {
    style: styles.headerDivider
  }), hidePinItem ? null : /*#__PURE__*/React.createElement(MessageOptionsItem, {
    label: isPinned ? 'Unpin' : 'Pin',
    icon: /*#__PURE__*/React.createElement(PinIcon, {
      type: isPinned ? 'unpin' : 'pin',
      style: styles.icon
    }),
    onPress: handleMessagePin
  }), hideBlockItem ? null : /*#__PURE__*/React.createElement(MessageOptionsItem, {
    label: isPeerBlocked ? 'Unblock from Chat' : 'Block from Chat',
    labelStyle: hmsRoomStyle.blockLabel,
    icon: /*#__PURE__*/React.createElement(NoEntryIcon, {
      style: [styles.icon, hmsRoomStyle.blockIcon]
    }),
    onPress: handleBlockPeerFromChat
  }), hideRemoveItem ? null : /*#__PURE__*/React.createElement(MessageOptionsItem, {
    label: "Remove Participant",
    labelStyle: hmsRoomStyle.blockLabel,
    icon: /*#__PURE__*/React.createElement(PersonIcon, {
      type: "left",
      style: [styles.icon, hmsRoomStyle.blockIcon]
    }),
    onPress: handleRemoveParticipant
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.bottomSpacer
  }));
};
const MessageOptionsItem = ({
  label,
  onPress,
  icon = null,
  style,
  labelStyle
}) => {
  const textStyle = useHMSRoomStyle((theme, typography) => ({
    color: theme.palette.on_surface_high,
    fontFamily: `${typography.font_family}-SemiBold`
  }));
  return /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: [styles.container, style],
    onPress: onPress
  }, icon, /*#__PURE__*/React.createElement(Text, {
    style: [styles.text, textStyle, labelStyle]
  }, label));
};
const styles = StyleSheet.create({
  // Item styles
  container: {
    paddingHorizontal: 20,
    paddingVertical: 16,
    flexDirection: 'row',
    alignItems: 'center'
  },
  text: {
    fontSize: 14,
    lineHeight: 20,
    letterSpacing: 0.1,
    marginLeft: 8
  },
  // Container styles
  headerDivider: {
    marginVertical: 12
  },
  icon: {
    width: 20,
    height: 20
  },
  bottomSpacer: {
    width: '100%',
    height: 32
  }
});
export const MessageOptionsView = /*#__PURE__*/React.memo(_MessageOptionsView);
//# sourceMappingURL=MessageOptionsView.js.map