| 1 | {"version":3,"sources":["Card.tsx"],"names":["Card","elevation","cardElevation","onLongPress","onPress","mode","cardMode","children","style","theme","testID","accessible","rest","current","React","useRef","Animated","Value","animation","dark","roundness","handlePressIn","scale","timing","toValue","duration","useNativeDriver","start","handlePressOut","total","Children","count","siblings","map","child","isValidElement","type","displayName","borderColor","white","black","alpha","rgb","string","borderRadius","styles","outlined","undefined","innerContainer","index","cloneElement","Content","CardContent","Actions","CardActions","Cover","CardCover","Title","CardTitle","StyleSheet","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 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 const { current: elevation } = React.useRef<Animated.Value>(\n new Animated.Value(cardElevation)\n );\n const { animation, dark, mode, roundness } = theme;\n\n const handlePressIn = () => {\n const {\n dark,\n mode,\n animation: { scale },\n } = theme;\n Animated.timing(elevation, {\n toValue: 8,\n duration: 150 * scale,\n useNativeDriver: !dark || mode === 'exact',\n }).start();\n };\n\n const handlePressOut = () => {\n Animated.timing(elevation, {\n toValue: cardElevation,\n duration: 150 * animation.scale,\n useNativeDriver: !dark || mode === 'exact',\n }).start();\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(theme.dark ? white : black)\n .alpha(0.12)\n .rgb()\n .string();\n\n return (\n <Surface\n style={[\n { borderRadius: roundness, elevation, borderColor },\n cardMode === 'outlined' ? styles.outlined : {},\n style,\n ]}\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"]} |