1 line
12 KiB
Plaintext
1 line
12 KiB
Plaintext
{"version":3,"sources":["BottomTabItem.tsx"],"names":["BottomTabBarItem","focused","route","label","icon","badge","badgeStyle","to","button","children","style","onPress","accessibilityRole","rest","Platform","OS","styles","e","metaKey","altKey","ctrlKey","shiftKey","preventDefault","accessibilityLabel","testID","onLongPress","horizontal","activeTintColor","customActiveTintColor","inactiveTintColor","customInactiveTintColor","activeBackgroundColor","inactiveBackgroundColor","showLabel","allowFontScaling","labelStyle","iconStyle","colors","undefined","primary","text","mix","card","hex","renderLabel","color","labelBeside","labelBeneath","position","renderIcon","activeOpacity","inactiveOpacity","scene","backgroundColor","accessibilityState","selected","accessibilityStates","tab","tabLandscape","tabPortrait","StyleSheet","create","flex","alignItems","justifyContent","flexDirection","textAlign","fontSize","marginLeft","marginTop","display"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n View,\n Text,\n TouchableWithoutFeedback,\n StyleSheet,\n Platform,\n StyleProp,\n ViewStyle,\n TextStyle,\n GestureResponderEvent,\n} from 'react-native';\nimport { Link, Route, useTheme } from '@react-navigation/native';\nimport Color from 'color';\n\nimport TabBarIcon from './TabBarIcon';\nimport type { BottomTabBarButtonProps, LabelPosition } from '../types';\n\ntype Props = {\n /**\n * Whether the tab is focused.\n */\n focused: boolean;\n /**\n * The route object which should be specified by the tab.\n */\n route: Route<string>;\n /**\n * The label text of the tab.\n */\n label:\n | string\n | ((props: {\n focused: boolean;\n color: string;\n position: LabelPosition;\n }) => React.ReactNode);\n /**\n * Icon to display for the tab.\n */\n icon?: (props: {\n focused: boolean;\n size: number;\n color: string;\n }) => React.ReactNode;\n /**\n * Text to show in a badge on the tab icon.\n */\n badge?: number | string;\n /**\n * Custom style for the badge.\n */\n badgeStyle?: StyleProp<TextStyle>;\n /**\n * URL to use for the link to the tab.\n */\n to?: string;\n /**\n * The button for the tab. Uses a `TouchableWithoutFeedback` by default.\n */\n button?: (props: BottomTabBarButtonProps) => React.ReactNode;\n /**\n * The accessibility label for the tab.\n */\n accessibilityLabel?: string;\n /**\n * An unique ID for testing for the tab.\n */\n testID?: string;\n /**\n * Function to execute on press in React Native.\n * On the web, this will use onClick.\n */\n onPress: (\n e: React.MouseEvent<HTMLElement, MouseEvent> | GestureResponderEvent\n ) => void;\n /**\n * Function to execute on long press.\n */\n onLongPress: (e: GestureResponderEvent) => void;\n /**\n * Whether the label should be aligned with the icon horizontally.\n */\n horizontal: boolean;\n /**\n * Color for the icon and label when the item is active.\n */\n activeTintColor?: string;\n /**\n * Color for the icon and label when the item is inactive.\n */\n inactiveTintColor?: string;\n /**\n * Background color for item when its active.\n */\n activeBackgroundColor?: string;\n /**\n * Background color for item when its inactive.\n */\n inactiveBackgroundColor?: string;\n /**\n * Whether to show the label text for the tab.\n */\n showLabel?: boolean;\n /**\n * Whether to allow scaling the font for the label for accessibility purposes.\n */\n allowFontScaling?: boolean;\n /**\n * Style object for the label element.\n */\n labelStyle?: StyleProp<TextStyle>;\n /**\n * Style object for the icon element.\n */\n iconStyle?: StyleProp<ViewStyle>;\n /**\n * Style object for the wrapper element.\n */\n style?: StyleProp<ViewStyle>;\n};\n\nexport default function BottomTabBarItem({\n focused,\n route,\n label,\n icon,\n badge,\n badgeStyle,\n to,\n button = ({\n children,\n style,\n onPress,\n to,\n accessibilityRole,\n ...rest\n }: BottomTabBarButtonProps) => {\n if (Platform.OS === 'web' && to) {\n // React Native Web doesn't forward `onClick` if we use `TouchableWithoutFeedback`.\n // We need to use `onClick` to be able to prevent default browser handling of links.\n return (\n <Link\n {...rest}\n to={to}\n style={[styles.button, style]}\n onPress={(e: any) => {\n if (\n !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys\n (e.button == null || e.button === 0) // ignore everything but left clicks\n ) {\n e.preventDefault();\n onPress?.(e);\n }\n }}\n >\n {children}\n </Link>\n );\n } else {\n return (\n <TouchableWithoutFeedback\n {...rest}\n accessibilityRole={accessibilityRole}\n onPress={onPress}\n >\n <View style={style}>{children}</View>\n </TouchableWithoutFeedback>\n );\n }\n },\n accessibilityLabel,\n testID,\n onPress,\n onLongPress,\n horizontal,\n activeTintColor: customActiveTintColor,\n inactiveTintColor: customInactiveTintColor,\n activeBackgroundColor = 'transparent',\n inactiveBackgroundColor = 'transparent',\n showLabel = true,\n allowFontScaling,\n labelStyle,\n iconStyle,\n style,\n}: Props) {\n const { colors } = useTheme();\n\n const activeTintColor =\n customActiveTintColor === undefined\n ? colors.primary\n : customActiveTintColor;\n\n const inactiveTintColor =\n customInactiveTintColor === undefined\n ? Color(colors.text).mix(Color(colors.card), 0.5).hex()\n : customInactiveTintColor;\n\n const renderLabel = ({ focused }: { focused: boolean }) => {\n if (showLabel === false) {\n return null;\n }\n\n const color = focused ? activeTintColor : inactiveTintColor;\n\n if (typeof label === 'string') {\n return (\n <Text\n numberOfLines={1}\n style={[\n styles.label,\n { color },\n horizontal ? styles.labelBeside : styles.labelBeneath,\n labelStyle,\n ]}\n allowFontScaling={allowFontScaling}\n >\n {label}\n </Text>\n );\n }\n\n return label({\n focused,\n color,\n position: horizontal ? 'beside-icon' : 'below-icon',\n });\n };\n\n const renderIcon = ({ focused }: { focused: boolean }) => {\n if (icon === undefined) {\n return null;\n }\n\n const activeOpacity = focused ? 1 : 0;\n const inactiveOpacity = focused ? 0 : 1;\n\n return (\n <TabBarIcon\n route={route}\n horizontal={horizontal}\n badge={badge}\n badgeStyle={badgeStyle}\n activeOpacity={activeOpacity}\n inactiveOpacity={inactiveOpacity}\n activeTintColor={activeTintColor}\n inactiveTintColor={inactiveTintColor}\n renderIcon={icon}\n style={iconStyle}\n />\n );\n };\n\n const scene = { route, focused };\n\n const backgroundColor = focused\n ? activeBackgroundColor\n : inactiveBackgroundColor;\n\n return button({\n to,\n onPress,\n onLongPress,\n testID,\n accessibilityLabel,\n accessibilityRole: 'button',\n accessibilityState: { selected: focused },\n // @ts-expect-error: keep for compatibility with older React Native versions\n accessibilityStates: focused ? ['selected'] : [],\n style: [\n styles.tab,\n { backgroundColor },\n horizontal ? styles.tabLandscape : styles.tabPortrait,\n style,\n ],\n children: (\n <React.Fragment>\n {renderIcon(scene)}\n {renderLabel(scene)}\n </React.Fragment>\n ),\n }) as React.ReactElement;\n}\n\nconst styles = StyleSheet.create({\n tab: {\n flex: 1,\n alignItems: 'center',\n },\n tabPortrait: {\n justifyContent: 'flex-end',\n flexDirection: 'column',\n },\n tabLandscape: {\n justifyContent: 'center',\n flexDirection: 'row',\n },\n label: {\n textAlign: 'center',\n backgroundColor: 'transparent',\n },\n labelBeneath: {\n fontSize: 10,\n },\n labelBeside: {\n fontSize: 13,\n marginLeft: 20,\n marginTop: 3,\n },\n button: {\n display: 'flex',\n },\n});\n"]} |