| 1 | {"version":3,"sources":["Badge.tsx"],"names":["React","Animated","StyleSheet","useWindowDimensions","white","black","withTheme","getContrastingColor","defaultSize","Badge","children","size","style","theme","visible","rest","current","opacity","useRef","Value","fontScale","isFirstRendering","animation","scale","useEffect","timing","toValue","duration","useNativeDriver","start","backgroundColor","colors","notification","restStyle","flatten","textColor","borderRadius","color","fontSize","fonts","regular","lineHeight","height","minWidth","styles","container","create","alignSelf","textAlign","textAlignVertical","paddingHorizontal","overflow"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n Animated,\n StyleSheet,\n StyleProp,\n TextStyle,\n useWindowDimensions,\n} from 'react-native';\nimport { white, black } from '../styles/colors';\nimport { withTheme } from '../core/theming';\nimport getContrastingColor from '../utils/getContrastingColor';\n\nconst defaultSize = 20;\n\ntype Props = React.ComponentProps<typeof Animated.Text> & {\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 style?: StyleProp<TextStyle>;\n ref?: React.RefObject<typeof Animated.Text>;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n};\n\n/**\n * Badges are small status descriptors for UI elements.\n * A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.\n *\n * <div class=\"screenshots\">\n * <figure>\n * <img class=\"small\" src=\"screenshots/badge-1.png\" />\n * <figcaption>Badge with content</figcaption>\n * </figure>\n * <figure>\n * <img class=\"small\" src=\"screenshots/badge-2.png\" />\n * <figcaption>Badge without content</figcaption>\n * </figure>\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Badge } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * <Badge>3</Badge>\n * );\n *\n * export default MyComponent;\n * ```\n */\nconst Badge = ({\n children,\n size = defaultSize,\n style,\n theme,\n visible = true,\n ...rest\n}: Props) => {\n const { current: opacity } = React.useRef<Animated.Value>(\n new Animated.Value(visible ? 1 : 0)\n );\n const { fontScale } = useWindowDimensions();\n\n const isFirstRendering = React.useRef<boolean>(true);\n\n const {\n animation: { scale },\n } = theme;\n\n React.useEffect(() => {\n // Do not run animation on very first rendering\n if (isFirstRendering.current) {\n isFirstRendering.current = false;\n return;\n }\n\n Animated.timing(opacity, {\n toValue: visible ? 1 : 0,\n duration: 150 * scale,\n useNativeDriver: true,\n }).start();\n }, [visible, opacity, scale]);\n\n const { backgroundColor = theme.colors.notification, ...restStyle } =\n (StyleSheet.flatten(style) || {}) as TextStyle;\n\n const textColor = getContrastingColor(backgroundColor, white, black);\n\n const borderRadius = size / 2;\n\n return (\n <Animated.Text\n numberOfLines={1}\n style={[\n {\n opacity,\n backgroundColor,\n color: textColor,\n fontSize: size * 0.5,\n ...theme.fonts.regular,\n lineHeight: size / fontScale,\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\nexport default withTheme(Badge);\n\nconst styles = StyleSheet.create({\n container: {\n alignSelf: 'flex-end',\n textAlign: 'center',\n textAlignVertical: 'center',\n paddingHorizontal: 4,\n overflow: 'hidden',\n },\n});\n"]} |