Skip to content

Commit

Permalink
chore: wrap List.Item in forwardRef
Browse files Browse the repository at this point in the history
  • Loading branch information
DimitarNestorov committed Dec 18, 2023
1 parent c190a95 commit 6784178
Showing 1 changed file with 26 additions and 20 deletions.
46 changes: 26 additions & 20 deletions src/components/List/ListItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import color from 'color';
import { Style, getLeftStyles, getRightStyles } from './utils';
import { useInternalTheme } from '../../core/theming';
import type { $RemoveChildren, EllipsizeProp, ThemeProp } from '../../types';
import { forwardRef } from '../../utils/forwardRef';
import TouchableRipple from '../TouchableRipple/TouchableRipple';
import Text from '../Typography/Text';

Expand Down Expand Up @@ -126,24 +127,27 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
*
* @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
*/
const ListItem = ({
left,
right,
title,
description,
onPress,
theme: themeOverrides,
style,
titleStyle,
titleNumberOfLines = 1,
descriptionNumberOfLines = 2,
titleEllipsizeMode,
descriptionEllipsizeMode,
descriptionStyle,
descriptionMaxFontSizeMultiplier,
titleMaxFontSizeMultiplier,
...rest
}: Props) => {
const ListItem = (
{
left,
right,
title,
description,
onPress,
theme: themeOverrides,
style,
titleStyle,
titleNumberOfLines = 1,
descriptionNumberOfLines = 2,
titleEllipsizeMode,
descriptionEllipsizeMode,
descriptionStyle,
descriptionMaxFontSizeMultiplier,
titleMaxFontSizeMultiplier,
...rest
}: Props,
ref: React.ForwardedRef<View>
) => {
const theme = useInternalTheme(themeOverrides);
const [alignToTop, setAlignToTop] = React.useState(false);

Expand Down Expand Up @@ -218,6 +222,7 @@ const ListItem = ({
return (
<TouchableRipple
{...rest}
ref={ref}
style={[theme.isV3 ? styles.containerV3 : styles.container, style]}
onPress={onPress}
theme={theme}
Expand Down Expand Up @@ -249,7 +254,8 @@ const ListItem = ({
);
};

ListItem.displayName = 'List.Item';
const Component = forwardRef(ListItem);
Component.displayName = 'List.Item';

const styles = StyleSheet.create({
container: {
Expand Down Expand Up @@ -288,4 +294,4 @@ const styles = StyleSheet.create({
},
});

export default ListItem;
export default Component;

0 comments on commit 6784178

Please sign in to comment.