@100mslive/react-native-room-kit/lib/module/components/Chat/ChatFilterItem.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 { CheckIcon } from '../../Icons';
import { useHMSRoomStyle } from '../../hooks-util';
import { setChatFilterSheetVisible } from '../../redux/actions';
const _ChatFilterItem = ({
  item,
  disabled,
  active,
  icon,
  onDismiss
}) => {
  const dispatch = useDispatch();
  const titleStyles = useHMSRoomStyle((theme, typography) => ({
    color: theme.palette.on_surface_high,
    fontFamily: `${typography.font_family}-SemiBold`
  }));
  const handleFilterSelect = () => {
    dispatch({
      type: 'SET_SENDTO',
      sendTo: item
    });
    if (onDismiss) {
      onDismiss();
    } else {
      dispatch(setChatFilterSheetVisible(false));
    }
  };
  return /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: styles.container,
    onPress: handleFilterSelect,
    disabled: disabled
  }, icon ? /*#__PURE__*/React.createElement(View, {
    style: styles.leftIcon
  }, icon) : null, /*#__PURE__*/React.createElement(Text, {
    style: [styles.title, titleStyles]
  }, item.name), active ? /*#__PURE__*/React.createElement(CheckIcon, {
    style: styles.rightIcon
  }) : null);
};
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 32,
    paddingVertical: 16
  },
  title: {
    flex: 1,
    fontSize: 14,
    lineHeight: 20,
    letterSpacing: 0.1,
    textTransform: 'capitalize'
  },
  rightIcon: {
    marginLeft: 8
  },
  leftIcon: {
    marginRight: 8
  }
});
export const ChatFilterItem = /*#__PURE__*/React.memo(_ChatFilterItem);
//# sourceMappingURL=ChatFilterItem.js.map