| 1 | {"version":3,"sources":["Card.tsx"],"names":["React","StyleSheet","Animated","TouchableWithoutFeedback","View","color","white","black","CardContent","CardActions","CardCover","CardTitle","Surface","withTheme","Card","elevation","cardElevation","onLongPress","onPress","mode","cardMode","children","style","theme","testID","accessible","rest","current","useRef","Value","elevationDarkAdaptive","animation","dark","roundness","prevDarkRef","useEffect","prevDark","isAdaptiveMode","animationDuration","scale","setValue","runElevationAnimation","pressType","isPressTypeIn","timing","toValue","duration","useNativeDriver","start","handlePressIn","handlePressOut","total","Children","count","siblings","map","child","isValidElement","type","displayName","borderColor","alpha","rgb","string","computedElevation","borderRadius","styles","outlined","undefined","innerContainer","index","cloneElement","Content","Actions","Cover","Title","create","flexGrow","flexShrink","borderWidth"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n StyleProp,\n StyleSheet,\n Animated,\n TouchableWithoutFeedback,\n View,\n ViewStyle,\n} from 'react-native';\nimport color from 'color';\nimport { white, black } from '../../styles/colors';\nimport CardContent from './CardContent';\nimport CardActions from './CardActions';\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport CardCover, { CardCover as _CardCover } from './CardCover';\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport CardTitle, { CardTitle as _CardTitle } from './CardTitle';\nimport Surface from '../Surface';\nimport { withTheme } from '../../core/theming';\n\ntype OutlinedCardProps = {\n mode: 'outlined';\n elevation?: never;\n};\n\ntype ElevatedCardProps = {\n mode?: 'elevated';\n elevation?: number;\n};\n\ntype HandlePressType = 'in' | 'out';\n\ntype Props = React.ComponentProps<typeof Surface> & {\n /**\n * Resting elevation of the card which controls the drop shadow.\n */\n elevation?: never | number;\n /**\n * Function to execute on long press.\n */\n onLongPress?: () => void;\n /**\n * Function to execute on press.\n */\n onPress?: () => void;\n /**\n * Mode of the Card.\n * - `elevated` - Card with elevation.\n * - `outlined` - Card with an outline.\n */\n mode?: 'elevated' | 'outlined';\n /**\n * Content of the `Card`.\n */\n children: React.ReactNode;\n style?: StyleProp<ViewStyle>;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n /**\n * Pass down testID from card props to touchable\n */\n testID?: string;\n /**\n * Pass down accessible from card props to touchable\n */\n accessible?: boolean;\n};\n\n/**\n * A card is a sheet of material that serves as an entry point to more detailed information.\n *\n * <div class=\"screenshots\">\n * <img class=\"medium\" src=\"screenshots/card-1.png\" />\n * <img class=\"medium\" src=\"screenshots/card-2.png\" />\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';\n *\n * const LeftContent = props => <Avatar.Icon {...props} icon=\"folder\" />\n *\n * const MyComponent = () => (\n * <Card>\n * <Card.Title title=\"Card Title\" subtitle=\"Card Subtitle\" left={LeftContent} />\n * <Card.Content>\n * <Title>Card title</Title>\n * <Paragraph>Card content</Paragraph>\n * </Card.Content>\n * <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />\n * <Card.Actions>\n * <Button>Cancel</Button>\n * <Button>Ok</Button>\n * </Card.Actions>\n * </Card>\n * );\n *\n * export default MyComponent;\n * ```\n */\nconst Card = ({\n elevation: cardElevation = 1,\n onLongPress,\n onPress,\n mode: cardMode = 'elevated',\n children,\n style,\n theme,\n testID,\n accessible,\n ...rest\n}: (OutlinedCardProps | ElevatedCardProps) & Props) => {\n // Default animated value\n const { current: elevation } = React.useRef<Animated.Value>(\n new Animated.Value(cardElevation)\n );\n // Dark adaptive animated value, used in case of toggling the theme,\n // it prevents animating the background with native drivers inside Surface\n const { current: elevationDarkAdaptive } = React.useRef<Animated.Value>(\n new Animated.Value(cardElevation)\n );\n const { animation, dark, mode, roundness } = theme;\n\n const prevDarkRef = React.useRef<boolean>(dark);\n React.useEffect(() => {\n prevDarkRef.current = dark;\n });\n\n const prevDark = prevDarkRef.current;\n const isAdaptiveMode = mode === 'adaptive';\n const animationDuration = 150 * animation.scale;\n\n React.useEffect(() => {\n /**\n * Resets animations values if updating to dark adaptive mode,\n * otherwise, any card that is in the middle of animation while\n * toggling the theme will stay at that animated value until\n * the next press-in\n */\n if (dark && isAdaptiveMode && !prevDark) {\n elevation.setValue(cardElevation);\n elevationDarkAdaptive.setValue(cardElevation);\n }\n }, [\n prevDark,\n dark,\n isAdaptiveMode,\n cardElevation,\n elevation,\n elevationDarkAdaptive,\n ]);\n\n const runElevationAnimation = (pressType: HandlePressType) => {\n const isPressTypeIn = pressType === 'in';\n if (dark && isAdaptiveMode) {\n Animated.timing(elevationDarkAdaptive, {\n toValue: isPressTypeIn ? 8 : cardElevation,\n duration: animationDuration,\n useNativeDriver: false,\n }).start();\n } else {\n Animated.timing(elevation, {\n toValue: isPressTypeIn ? 8 : cardElevation,\n duration: animationDuration,\n useNativeDriver: true,\n }).start();\n }\n };\n\n const handlePressIn = () => {\n runElevationAnimation('in');\n };\n\n const handlePressOut = () => {\n runElevationAnimation('out');\n };\n\n const total = React.Children.count(children);\n const siblings = React.Children.map(children, (child) =>\n React.isValidElement(child) && child.type\n ? (child.type as any).displayName\n : null\n );\n const borderColor = color(dark ? white : black)\n .alpha(0.12)\n .rgb()\n .string();\n const computedElevation =\n dark && isAdaptiveMode ? elevationDarkAdaptive : elevation;\n\n return (\n <Surface\n style={[\n { borderRadius: roundness, elevation: computedElevation, borderColor },\n cardMode === 'outlined' ? styles.outlined : {},\n style,\n ]}\n theme={theme}\n {...rest}\n >\n <TouchableWithoutFeedback\n delayPressIn={0}\n disabled={!(onPress || onLongPress)}\n onLongPress={onLongPress}\n onPress={onPress}\n onPressIn={onPress || onLongPress ? handlePressIn : undefined}\n onPressOut={onPress || onLongPress ? handlePressOut : undefined}\n testID={testID}\n accessible={accessible}\n >\n <View style={styles.innerContainer}>\n {React.Children.map(children, (child, index) =>\n React.isValidElement(child)\n ? React.cloneElement(child, {\n index,\n total,\n siblings,\n })\n : child\n )}\n </View>\n </TouchableWithoutFeedback>\n </Surface>\n );\n};\n\n// @component ./CardContent.tsx\nCard.Content = CardContent;\n// @component ./CardActions.tsx\nCard.Actions = CardActions;\n// @component ./CardCover.tsx\nCard.Cover = CardCover;\n// @component ./CardTitle.tsx\nCard.Title = CardTitle;\n\nconst styles = StyleSheet.create({\n innerContainer: {\n flexGrow: 1,\n flexShrink: 1,\n },\n outlined: {\n elevation: 0,\n borderWidth: 1,\n },\n});\n\nexport default withTheme(Card);\n"]} |