| 1 | {"version":3,"sources":["ListItem.tsx"],"names":["color","React","StyleSheet","View","TouchableRipple","Text","withTheme","ListItem","left","right","title","description","onPress","theme","style","titleStyle","titleNumberOfLines","descriptionNumberOfLines","titleEllipsizeMode","descriptionEllipsizeMode","descriptionStyle","rest","renderDescription","descriptionColor","selectable","ellipsizeMode","fontSize","styles","renderTitle","titleColor","colors","text","alpha","rgb","string","container","row","iconMarginLeft","marginVerticalNone","item","content","iconMarginRight","displayName","create","padding","flexDirection","marginVertical","marginLeft","marginRight","paddingLeft","flex","justifyContent"],"mappings":"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","sourcesContent":["import color from 'color';\nimport * as React from 'react';\nimport {\n StyleProp,\n StyleSheet,\n TextStyle,\n View,\n ViewStyle,\n} from 'react-native';\n\nimport TouchableRipple from '../TouchableRipple/TouchableRipple';\nimport Text from '../Typography/Text';\nimport { withTheme } from '../../core/theming';\nimport type { $RemoveChildren, EllipsizeProp } from '../../types';\n\ntype Title =\n | React.ReactNode\n | ((props: {\n selectable: boolean;\n ellipsizeMode: EllipsizeProp | undefined;\n color: string;\n fontSize: number;\n }) => React.ReactNode);\n\ntype Description =\n | React.ReactNode\n | ((props: {\n selectable: boolean;\n ellipsizeMode: EllipsizeProp | undefined;\n color: string;\n fontSize: number;\n }) => React.ReactNode);\n\ntype Props = $RemoveChildren<typeof TouchableRipple> & {\n /**\n * Title text for the list item.\n */\n title: Title;\n /**\n * Description text for the list item or callback which returns a React element to display the description.\n */\n description?: Description;\n /**\n * Callback which returns a React element to display on the left side.\n */\n left?: (props: {\n color: string;\n style: {\n marginLeft: number;\n marginRight: number;\n marginVertical?: number;\n };\n }) => React.ReactNode;\n /**\n * Callback which returns a React element to display on the right side.\n */\n right?: (props: {\n color: string;\n style?: {\n marginRight: number;\n marginVertical?: number;\n };\n }) => React.ReactNode;\n /**\n * Function to execute on press.\n */\n onPress?: () => void;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n /**\n * Style that is passed to the wrapping TouchableRipple element.\n */\n style?: StyleProp<ViewStyle>;\n /**\n * Style that is passed to Title element.\n */\n titleStyle?: StyleProp<TextStyle>;\n /**\n * Style that is passed to Description element.\n */\n descriptionStyle?: StyleProp<TextStyle>;\n /**\n * Truncate Title text such that the total number of lines does not\n * exceed this number.\n */\n titleNumberOfLines?: number;\n /**\n * Truncate Description text such that the total number of lines does not\n * exceed this number.\n */\n descriptionNumberOfLines?: number;\n /**\n * Ellipsize Mode for the Title. One of `'head'`, `'middle'`, `'tail'`, `'clip'`.\n *\n * See [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode)\n */\n titleEllipsizeMode?: EllipsizeProp;\n /**\n * Ellipsize Mode for the Description. One of `'head'`, `'middle'`, `'tail'`, `'clip'`.\n *\n * See [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode)\n */\n descriptionEllipsizeMode?: EllipsizeProp;\n};\n\n/**\n * A component to show tiles inside a List.\n *\n * <div class=\"screenshots\">\n * <img class=\"medium\" src=\"screenshots/list-item-1.png\" />\n * <img class=\"medium\" src=\"screenshots/list-item-2.png\" />\n * <img class=\"medium\" src=\"screenshots/list-item-3.png\" />\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { List } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * <List.Item\n * title=\"First Item\"\n * description=\"Item description\"\n * left={props => <List.Icon {...props} icon=\"folder\" />}\n * />\n * );\n *\n * export default MyComponent;\n * ```\n *\n * @extends TouchableRipple props https://callstack.github.io/react-native-paper/touchable-ripple.html\n */\nconst ListItem = ({\n left,\n right,\n title,\n description,\n onPress,\n theme,\n style,\n titleStyle,\n titleNumberOfLines = 1,\n descriptionNumberOfLines = 2,\n titleEllipsizeMode,\n descriptionEllipsizeMode,\n descriptionStyle,\n ...rest\n}: Props) => {\n const renderDescription = (\n descriptionColor: string,\n description?: Description | null\n ) => {\n return typeof description === 'function' ? (\n description({\n selectable: false,\n ellipsizeMode: descriptionEllipsizeMode,\n color: descriptionColor,\n fontSize: styles.description.fontSize,\n })\n ) : (\n <Text\n selectable={false}\n numberOfLines={descriptionNumberOfLines}\n ellipsizeMode={descriptionEllipsizeMode}\n style={[\n styles.description,\n { color: descriptionColor },\n descriptionStyle,\n ]}\n >\n {description}\n </Text>\n );\n };\n\n const renderTitle = () => {\n const titleColor = color(theme.colors.text).alpha(0.87).rgb().string();\n\n return typeof title === 'function' ? (\n title({\n selectable: false,\n ellipsizeMode: titleEllipsizeMode,\n color: titleColor,\n fontSize: styles.title.fontSize,\n })\n ) : (\n <Text\n selectable={false}\n ellipsizeMode={titleEllipsizeMode}\n numberOfLines={titleNumberOfLines}\n style={[styles.title, { color: titleColor }, titleStyle]}\n >\n {title}\n </Text>\n );\n };\n\n const descriptionColor = color(theme.colors.text).alpha(0.54).rgb().string();\n\n return (\n <TouchableRipple\n {...rest}\n style={[styles.container, style]}\n onPress={onPress}\n >\n <View style={styles.row}>\n {left\n ? left({\n color: descriptionColor,\n style: description\n ? styles.iconMarginLeft\n : {\n ...styles.iconMarginLeft,\n ...styles.marginVerticalNone,\n },\n })\n : null}\n <View style={[styles.item, styles.content]}>\n {renderTitle()}\n\n {description\n ? renderDescription(descriptionColor, description)\n : null}\n </View>\n {right\n ? right({\n color: descriptionColor,\n style: description\n ? styles.iconMarginRight\n : {\n ...styles.iconMarginRight,\n ...styles.marginVerticalNone,\n },\n })\n : null}\n </View>\n </TouchableRipple>\n );\n};\n\nListItem.displayName = 'List.Item';\n\nconst styles = StyleSheet.create({\n container: {\n padding: 8,\n },\n row: {\n flexDirection: 'row',\n },\n title: {\n fontSize: 16,\n },\n description: {\n fontSize: 14,\n },\n marginVerticalNone: { marginVertical: 0 },\n iconMarginLeft: { marginLeft: 0, marginRight: 16 },\n iconMarginRight: { marginRight: 0 },\n item: {\n marginVertical: 6,\n paddingLeft: 8,\n },\n content: {\n flex: 1,\n justifyContent: 'center',\n },\n});\n\nexport default withTheme(ListItem);\n"]} |