@100mslive/react-native-room-kit/lib/module/components/HMSNotification.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 { useDispatch } from 'react-redux';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { useHMSRoomStyleSheet, useIsHLSViewer } from '../hooks-util';
import { CCIcon, ChatIcon, CloseIcon } from '../Icons';
import { UnmountAfterDelay } from './UnmountAfterDelay';
import { removeNotification } from '../redux/actions';
export const HMSNotification = ({
  id,
  text,
  description = null,
  icon,
  style,
  textStyle,
  cta,
  textTestID,
  onDismiss,
  dismissDelay = 5000,
  autoDismiss = true,
  dismissable = false
}) => {
  const dispatch = useDispatch();
  const isHLSViewer = useIsHLSViewer();
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    container: {
      backgroundColor: isHLSViewer ? theme.palette.surface_default : theme.palette.surface_dim
    },
    text: {
      color: theme.palette.on_surface_high,
      fontFamily: `${typography.font_family}-SemiBold`
    },
    description: {
      color: theme.palette.on_surface_medium,
      fontFamily: `${typography.font_family}-Regular`
    }
  }), [isHLSViewer]);
  const dismissNotification = onDismiss || (autoDismiss || dismissable ? () => {
    dispatch(removeNotification(id));
  } : null);
  const tapGesture = Gesture.Tap();
  const notification = /*#__PURE__*/React.createElement(View, {
    style: [styles.container, hmsRoomStyles.container, style]
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.leftWrapper
  }, icon ? /*#__PURE__*/React.createElement(View, {
    style: styles.icon
  }, typeof icon === 'string' ? getIcon(icon) : icon) : null, /*#__PURE__*/React.createElement(View, {
    style: {
      flexShrink: 1
    }
  }, typeof text === 'string' ? /*#__PURE__*/React.createElement(Text, {
    testID: textTestID,
    style: [styles.text, hmsRoomStyles.text, textStyle]
  }, text) : text, typeof description === 'string' ? /*#__PURE__*/React.createElement(Text, {
    style: [styles.description, hmsRoomStyles.description]
  }, description) : description)), /*#__PURE__*/React.createElement(View, {
    style: styles.rightWrapper
  }, cta, dismissNotification ? /*#__PURE__*/React.createElement(GestureDetector, {
    gesture: tapGesture
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: dismissNotification
  }, /*#__PURE__*/React.createElement(CloseIcon, null))) : null));
  if (dismissNotification && autoDismiss) {
    return /*#__PURE__*/React.createElement(UnmountAfterDelay, {
      visible: true,
      onUnmount: dismissNotification,
      delay: dismissDelay
    }, notification);
  }
  return notification;
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    elevation: 2,
    borderRadius: 8,
    flexDirection: 'row',
    padding: 8,
    paddingLeft: 16,
    marginHorizontal: 8,
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  leftWrapper: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },
  rightWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 16
  },
  icon: {
    marginRight: 8
  },
  text: {
    flexShrink: 1,
    fontSize: 14,
    lineHeight: 20,
    letterSpacing: 0.1
  },
  description: {
    flexShrink: 1,
    fontSize: 12,
    lineHeight: 16
  }
});
function getIcon(icon) {
  switch (icon) {
    case 'chat-off':
    case 'chat-on':
      return /*#__PURE__*/React.createElement(ChatIcon, {
        type: icon === 'chat-on' ? 'on' : 'off'
      });
    case 'cc':
      return /*#__PURE__*/React.createElement(CCIcon, {
        style: {
          width: 20,
          height: 20
        }
      });
    default:
      return null;
  }
}
//# sourceMappingURL=HMSNotification.js.map