1 line
5.2 KiB
Plaintext
1 line
5.2 KiB
Plaintext
{"version":3,"sources":["Badge.tsx"],"names":["React","Animated","StyleSheet","color","useTheme","Badge","visible","size","children","style","rest","opacity","useState","Value","rendered","setRendered","theme","useEffect","timing","toValue","duration","useNativeDriver","start","finished","backgroundColor","colors","notification","restStyle","flatten","textColor","isLight","borderRadius","fontSize","Math","floor","transform","scale","interpolate","inputRange","outputRange","lineHeight","height","minWidth","styles","container","create","alignSelf","textAlign","paddingHorizontal","overflow"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Animated, StyleSheet, StyleProp, TextStyle } from 'react-native';\nimport color from 'color';\nimport { useTheme } from '@react-navigation/native';\n\ntype Props = {\n /**\n * Whether the badge is visible\n */\n visible: boolean;\n /**\n * Content of the `Badge`.\n */\n children?: string | number;\n /**\n * Size of the `Badge`.\n */\n size?: number;\n /**\n * Style object for the tab bar container.\n */\n style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;\n};\n\nexport default function Badge({\n visible = true,\n size = 18,\n children,\n style,\n ...rest\n}: Props) {\n const [opacity] = React.useState(() => new Animated.Value(visible ? 1 : 0));\n const [rendered, setRendered] = React.useState(visible ? true : false);\n\n const theme = useTheme();\n\n React.useEffect(() => {\n if (!rendered) {\n return;\n }\n\n Animated.timing(opacity, {\n toValue: visible ? 1 : 0,\n duration: 150,\n useNativeDriver: true,\n }).start(({ finished }) => {\n if (finished && !visible) {\n setRendered(false);\n }\n });\n }, [opacity, rendered, visible]);\n\n if (visible && !rendered) {\n setRendered(true);\n }\n\n if (!visible && !rendered) {\n return null;\n }\n\n // @ts-expect-error: backgroundColor definitely exists\n const { backgroundColor = theme.colors.notification, ...restStyle } =\n StyleSheet.flatten(style) || {};\n const textColor = color(backgroundColor).isLight() ? 'black' : 'white';\n\n const borderRadius = size / 2;\n const fontSize = Math.floor((size * 3) / 4);\n\n return (\n <Animated.Text\n numberOfLines={1}\n style={[\n {\n opacity,\n transform: [\n {\n scale: opacity.interpolate({\n inputRange: [0, 1],\n outputRange: [0.5, 1],\n }),\n },\n ],\n backgroundColor,\n color: textColor,\n fontSize,\n lineHeight: size - 1,\n height: size,\n minWidth: size,\n borderRadius,\n },\n styles.container,\n restStyle,\n ]}\n {...rest}\n >\n {children}\n </Animated.Text>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n alignSelf: 'flex-end',\n textAlign: 'center',\n paddingHorizontal: 4,\n overflow: 'hidden',\n },\n});\n"]} |