import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import SwipeableListItem from './SwipeableListItemNew';
import {GLYPHS} from '../Glyphs';
import {useTheme} from '../../theme/ThemeContext';
import PlayyText from '../PlayyText/PlayyText';
/**
* NEW DECLARATIVE API EXAMPLES
* Demonstrates the modular, composable structure
*/
/**
* Full declarative example with all new components
*/
export const FullDeclarativeExample = () => {
const {colors} = useTheme();
return (
console.log('Item pressed')}
onLongPress={() => console.log('Long pressed')}>
{/* Declarative swipe actions */}
console.log('Mark as read')}>
{GLYPHS['checkmark-message-fill'].char}
Read
console.log('Pin')}>
{GLYPHS['pin-fill'].char}
Pin
console.log('Mute')}>
{GLYPHS['bell-slash-fill'].char}
Mute
console.log('Archive')}>
{GLYPHS['archive-fill'].char}
Archive
{/* Main content */}
Emily
This is a fully declarative example with composable components
{GLYPHS['pin-fill'].char}
@
5
);
};
/**
* Simple declarative swipe actions
*/
export const SimpleDeclarativeSwipe = () => {
const {colors} = useTheme();
return (
console.log('Pressed')}>
console.log('Action 1')}>
✓
console.log('Delete')}>
🗑
John Doe
Simple example
);
};
/**
* Custom styled swipe actions with wide buttons
*/
export const WideSwipeActions = () => {
const {colors} = useTheme();
return (
console.log('Pressed')}>
console.log('Wide action')}>
✓
Complete
);
};
/**
* Custom content with inline styles
*/
export const CustomContentExample = () => {
const {colors} = useTheme();
return (
console.log('Pressed')}>
Custom Styled Title
This subtitle has custom styling and can wrap to 3 lines with italic font
);
};
/**
* Custom icons in metadata
*/
export const CustomMetadataIcons = () => {
const {colors} = useTheme();
return (
console.log('Pressed')}>
{/* Custom icon components */}
⭐
99+
);
};
/**
* Multiple swipe actions per side
*/
export const MultipleSwipeActions = () => {
const {colors} = useTheme();
return (
console.log('Pressed')}>
console.log('Action 1')}>
1️⃣
console.log('Action 2')}>
2️⃣
console.log('Action 3')}>
3️⃣
console.log('Action A')}>
🅰️
console.log('Action B')}>
🅱️
Multiple Actions
Swipe left or right
);
};
/**
* Mixing declarative and legacy APIs (backward compatible)
*/
export const MixedAPIExample = () => {
const {colors} = useTheme();
return (
console.log('Pressed')}>
{/* Can still use legacy SwipeActions if needed */}
console.log('Toggle read')}
onArchive={() => console.log('Archive')}
/>
{/* But use new composable content */}
Mixed API
Using legacy SwipeActions with new Content components
);
};
const styles = StyleSheet.create({
actionContent: {
alignItems: 'center',
justifyContent: 'center',
gap: 5,
},
mentionBadge: {
width: 16,
height: 15,
justifyContent: 'center',
alignItems: 'center',
},
unreadBadge: {
paddingHorizontal: 6,
height: 18,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
},
});