55 lines
1.1 KiB
TypeScript
55 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { StyleSheet, Text, View } from 'react-native';
|
|
|
|
import { useTheme } from '../../theme';
|
|
|
|
const style = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-start'
|
|
},
|
|
bullet: {
|
|
alignItems: 'flex-end',
|
|
marginRight: 5
|
|
},
|
|
contents: {
|
|
flex: 1
|
|
}
|
|
});
|
|
|
|
interface IListItem {
|
|
children: React.ReactElement | null;
|
|
bulletWidth: number;
|
|
level: number;
|
|
ordered: boolean;
|
|
continue: boolean;
|
|
index: number;
|
|
testID: string;
|
|
}
|
|
|
|
const ListItem = React.memo(({ children, level, bulletWidth, continue: _continue, ordered, index, testID }: IListItem) => {
|
|
const { colors } = useTheme();
|
|
|
|
let bullet;
|
|
if (_continue) {
|
|
bullet = '';
|
|
} else if (ordered) {
|
|
bullet = `${index}.`;
|
|
} else if (level % 2 === 0) {
|
|
bullet = '◦';
|
|
} else {
|
|
bullet = '•';
|
|
}
|
|
|
|
return (
|
|
<View style={style.container} testID={`${testID}-list`}>
|
|
<View style={[{ width: bulletWidth }, style.bullet]}>
|
|
<Text style={{ color: colors.bodyText }}>{bullet}</Text>
|
|
</View>
|
|
<View style={style.contents}>{children}</View>
|
|
</View>
|
|
);
|
|
});
|
|
|
|
export default ListItem;
|