| 1 | {"version":3,"sources":["DrawerItem.tsx"],"names":["color","React","View","StyleSheet","Text","Icon","TouchableRipple","withTheme","DrawerItem","icon","label","active","theme","style","onPress","accessibilityLabel","right","rest","colors","roundness","backgroundColor","primary","alpha","rgb","string","contentColor","text","font","fonts","medium","labelMargin","styles","container","borderRadius","selected","wrapper","content","marginLeft","displayName","create","marginHorizontal","marginVertical","flexDirection","alignItems","padding","flex","marginRight"],"mappings":"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","sourcesContent":["import color from 'color';\nimport * as React from 'react';\nimport { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';\nimport Text from '../Typography/Text';\nimport Icon, { IconSource } from '../Icon';\nimport TouchableRipple from '../TouchableRipple/TouchableRipple';\nimport { withTheme } from '../../core/theming';\n\ntype Props = React.ComponentPropsWithRef<typeof View> & {\n /**\n * The label text of the item.\n */\n label: string;\n /**\n * Icon to display for the `DrawerItem`.\n */\n icon?: IconSource;\n /**\n * Whether to highlight the drawer item as active.\n */\n active?: boolean;\n /**\n * Function to execute on press.\n */\n onPress?: () => void;\n /**\n * Accessibility label for the button. This is read by the screen reader when the user taps the button.\n */\n accessibilityLabel?: string;\n /**\n * Callback which returns a React element to display on the right side. For instance a Badge.\n */\n right?: (props: { color: string }) => React.ReactNode;\n style?: StyleProp<ViewStyle>;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n};\n\n/**\n * A component used to show an action item with an icon and a label in a navigation drawer.\n *\n * <div class=\"screenshots\">\n * <figure>\n * <img class=\"medium\" src=\"screenshots/drawer-item.png\" />\n * </figure>\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Drawer } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * <Drawer.Item\n * style={{ backgroundColor: '#64ffda' }}\n * icon=\"star\"\n * label=\"First Item\"\n * />\n * );\n *\n * export default MyComponent;\n * ```\n */\nconst DrawerItem = ({\n icon,\n label,\n active,\n theme,\n style,\n onPress,\n accessibilityLabel,\n right,\n ...rest\n}: Props) => {\n const { colors, roundness } = theme;\n const backgroundColor = active\n ? color(colors.primary).alpha(0.12).rgb().string()\n : 'transparent';\n const contentColor = active\n ? colors.primary\n : color(colors.text).alpha(0.68).rgb().string();\n const font = theme.fonts.medium;\n const labelMargin = icon ? 32 : 0;\n\n return (\n <View {...rest}>\n <TouchableRipple\n borderless\n delayPressIn={0}\n onPress={onPress}\n style={[\n styles.container,\n { backgroundColor, borderRadius: roundness },\n style,\n ]}\n // @ts-expect-error We keep old a11y props for backwards compat with old RN versions\n accessibilityTraits={active ? ['button', 'selected'] : 'button'}\n accessibilityComponentType=\"button\"\n accessibilityRole=\"button\"\n accessibilityState={{ selected: active }}\n accessibilityLabel={accessibilityLabel}\n >\n <View style={styles.wrapper}>\n <View style={styles.content}>\n {icon ? (\n <Icon source={icon} size={24} color={contentColor} />\n ) : null}\n <Text\n selectable={false}\n numberOfLines={1}\n style={[\n styles.label,\n {\n color: contentColor,\n ...font,\n marginLeft: labelMargin,\n },\n ]}\n >\n {label}\n </Text>\n </View>\n {right?.({ color: contentColor })}\n </View>\n </TouchableRipple>\n </View>\n );\n};\n\nDrawerItem.displayName = 'Drawer.Item';\n\nconst styles = StyleSheet.create({\n container: {\n marginHorizontal: 10,\n marginVertical: 4,\n },\n wrapper: {\n flexDirection: 'row',\n alignItems: 'center',\n padding: 8,\n },\n content: {\n flex: 1,\n flexDirection: 'row',\n alignItems: 'center',\n },\n label: {\n marginRight: 32,\n },\n});\n\nexport default withTheme(DrawerItem);\n"]} |