| 1 | {"version":3,"sources":["MenuItem.tsx"],"names":["MenuItem","icon","title","disabled","onPress","style","contentStyle","testID","titleStyle","accessibilityLabel","theme","disabledColor","dark","white","black","alpha","rgb","string","titleColor","colors","text","iconColor","styles","container","row","item","content","widthWithIcon","color","displayName","minWidth","maxWidth","iconWidth","StyleSheet","create","paddingHorizontal","height","justifyContent","flexDirection","width","fontSize","marginHorizontal"],"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';\nimport Icon, { IconSource } from '../Icon';\nimport TouchableRipple from '../TouchableRipple/TouchableRipple';\nimport Text from '../Typography/Text';\nimport { black, white } from '../../styles/colors';\nimport { useTheme } from '../../core/theming';\n\ntype Props = {\n /**\n * Title text for the `MenuItem`.\n */\n title: React.ReactNode;\n /**\n * Icon to display for the `MenuItem`.\n */\n icon?: IconSource;\n /**\n * Whether the 'item' is disabled. A disabled 'item' is greyed out and `onPress` is not called on touch.\n */\n disabled?: boolean;\n /**\n * Function to execute on press.\n */\n onPress?: () => void;\n /**\n * @optional\n */\n style?: StyleProp<ViewStyle>;\n contentStyle?: StyleProp<ViewStyle>;\n titleStyle?: StyleProp<TextStyle>;\n /**\n * TestID used for testing purposes\n */\n testID?: string;\n /**\n * Accessibility label for the Touchable. This is read by the screen reader when the user taps the component.\n */\n accessibilityLabel?: string;\n};\n\n/**\n * A component to show a single list item inside a Menu.\n *\n * <div class=\"screenshots\">\n * <figure>\n * <img class=\"medium\" src=\"screenshots/menu-item.png\" />\n * </figure>\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { View } from 'react-native';\n * import { Menu } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * <View style={{ flex: 1 }}>\n * <Menu.Item icon=\"redo\" onPress={() => {}} title=\"Redo\" />\n * <Menu.Item icon=\"undo\" onPress={() => {}} title=\"Undo\" />\n * <Menu.Item icon=\"content-cut\" onPress={() => {}} title=\"Cut\" disabled />\n * <Menu.Item icon=\"content-copy\" onPress={() => {}} title=\"Copy\" disabled />\n * <Menu.Item icon=\"content-paste\" onPress={() => {}} title=\"Paste\" />\n * </View>\n * );\n *\n * export default MyComponent;\n * ```\n */\nfunction MenuItem({\n icon,\n title,\n disabled,\n onPress,\n style,\n contentStyle,\n testID,\n titleStyle,\n accessibilityLabel,\n}: Props) {\n const theme = useTheme();\n\n const disabledColor = color(theme.dark ? white : black)\n .alpha(0.32)\n .rgb()\n .string();\n\n const titleColor = disabled\n ? disabledColor\n : color(theme.colors.text).alpha(0.87).rgb().string();\n\n const iconColor = disabled\n ? disabledColor\n : color(theme.colors.text).alpha(0.54).rgb().string();\n\n return (\n <TouchableRipple\n style={[styles.container, style]}\n onPress={onPress}\n disabled={disabled}\n testID={testID}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"menuitem\"\n accessibilityState={{ disabled }}\n >\n <View style={styles.row}>\n {icon ? (\n <View style={[styles.item, styles.icon]} pointerEvents=\"box-none\">\n <Icon source={icon} size={24} color={iconColor} />\n </View>\n ) : null}\n <View\n style={[\n styles.item,\n styles.content,\n icon ? styles.widthWithIcon : null,\n contentStyle,\n ]}\n pointerEvents=\"none\"\n >\n <Text\n selectable={false}\n numberOfLines={1}\n style={[styles.title, { color: titleColor }, titleStyle]}\n >\n {title}\n </Text>\n </View>\n </View>\n </TouchableRipple>\n );\n}\n\nMenuItem.displayName = 'Menu.Item';\n\nconst minWidth = 112;\nconst maxWidth = 280;\nconst iconWidth = 40;\n\nconst styles = StyleSheet.create({\n container: {\n paddingHorizontal: 8,\n minWidth,\n maxWidth,\n height: 48,\n justifyContent: 'center',\n },\n row: {\n flexDirection: 'row',\n },\n icon: {\n width: iconWidth,\n },\n title: {\n fontSize: 16,\n },\n item: {\n marginHorizontal: 8,\n },\n content: {\n justifyContent: 'center',\n minWidth: minWidth - 16,\n maxWidth: maxWidth - 16,\n },\n widthWithIcon: {\n maxWidth: maxWidth - (iconWidth + 48),\n },\n});\n\nexport default MenuItem;\n\n// @component-docs ignore-next-line\nexport { MenuItem };\n"]} |