import React from 'react';
import SwipeableListItem from './SwipeableListItem';
import {GLYPHS} from '../Glyphs';
import {View} from 'react-native';
import {Text} from 'react-native-svg';
/**
* Basic chat list item with avatar, name, message, and timestamp
*/
export const BasicChatItem = () => (
console.log('Item pressed')}>
);
/**
* Chat item with unread count and swipe actions
*/
export const UnreadChatItem = () => (
console.log('Item pressed')}
backgroundColor="#F0F8FF">
console.log('Toggle read')}
onTogglePin={() => console.log('Toggle pin')}
onMute={() => console.log('Mute')}
onArchive={() => console.log('Archive')}
/>
);
/**
* Chat item with pinned indicator
*/
export const PinnedChatItem = () => (
console.log('Item pressed')}>
console.log('Toggle read')}
onTogglePin={() => console.log('Toggle pin')}
/>
);
/**
* Chat item with mention badge
*/
export const MentionedChatItem = () => (
console.log('Item pressed')}
backgroundColor="#F0F8FF">
);
/**
* Chat item showing typing indicator
*/
export const TypingChatItem = () => (
console.log('Item pressed')}>
);
/**
* Chat item with deleted message
*/
export const DeletedMessageItem = () => (
console.log('Item pressed')}>
);
/**
* Chat item with message icon (delivered/read status)
*/
export const MessageWithIconItem = () => (
console.log('Item pressed')}>
);
/**
* Chat item in selection mode
*/
export const SelectionModeItem = () => {
const [selected, setSelected] = React.useState(false);
return (
console.log('Item pressed')}>
);
};
/**
* Custom layout with children
*/
export const CustomLayoutItem = () => (
console.log('Item pressed')}>
{/* Custom content layout */}
Custom Name
Custom message layout with more control
{/* Custom metadata layout */}
Custom
);
/**
* Full-featured chat item with all options
*/
export const FullFeaturedChatItem = () => (
console.log('Item pressed')}
onLongPress={() => console.log('Long pressed')}
backgroundColor="#F0F8FF">
console.log('Toggle read')}
onTogglePin={() => console.log('Toggle pin')}
onMute={() => console.log('Mute')}
onArchive={() => console.log('Archive')}
onMore={() => console.log('More')}
leftActionColors={{read: '#007AFF', pin: '#8E8E93'}}
rightActionColors={{mute: '#FF3B30', archive: '#FF9500', more: '#8E8E93'}}
/>
);