| 1 | {"version":3,"sources":["Surface.tsx"],"names":["React","Animated","StyleSheet","shadow","withTheme","overlay","Surface","style","theme","rest","elevation","flatten","dark","isDarkTheme","mode","colors","backgroundColor","surface"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,QAAT,EAAmBC,UAAnB,QAAiE,cAAjE;AACA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,OAAOC,OAAP,MAAoB,mBAApB;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,OAAO,GAAG,QAAsC;AAAA,MAArC;AAAEC,IAAAA,KAAF;AAASC,IAAAA,KAAT;AAAgB,OAAGC;AAAnB,GAAqC;AACpD,QAAM;AAAEC,IAAAA,SAAS,GAAG;AAAd,MAAqBR,UAAU,CAACS,OAAX,CAAmBJ,KAAnB,KAA6B,EAAxD;AACA,QAAM;AAAEK,IAAAA,IAAI,EAAEC,WAAR;AAAqBC,IAAAA,IAArB;AAA2BC,IAAAA;AAA3B,MAAsCP,KAA5C;AACA,sBACE,oBAAC,QAAD,CAAU,IAAV,eACMC,IADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEO,MAAAA,eAAe,EACbH,WAAW,IAAIC,IAAI,KAAK,UAAxB,GACIT,OAAO,CAACK,SAAD,EAAYK,MAAM,CAACE,OAAnB,CADX,GAEIF,MAAM,CAACE;AAJf,KADK,EAOLP,SAAS,GAAGP,MAAM,CAACO,SAAD,CAAT,GAAuB,IAP3B,EAQLH,KARK;AAFT,KADF;AAeD,CAlBD;;AAoBA,eAAeH,SAAS,CAACE,OAAD,CAAxB","sourcesContent":["import * as React from 'react';\nimport { Animated, StyleSheet, View, StyleProp, ViewStyle } from 'react-native';\nimport shadow from '../styles/shadow';\nimport { withTheme } from '../core/theming';\nimport overlay from '../styles/overlay';\n\ntype Props = React.ComponentPropsWithRef<typeof View> & {\n /**\n * Content of the `Surface`.\n */\n children: React.ReactNode;\n style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n};\n\n/**\n * Surface is a basic container that can give depth to an element with elevation shadow.\n * On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.\n * See [Dark Theme](https://callstack.github.io/react-native-paper/theming.html#dark-theme) for more information.\n * Overlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.\n *\n * <div class=\"screenshots\">\n * <img src=\"screenshots/surface-1.png\" />\n * <img src=\"screenshots/surface-2.png\" />\n * <img src=\"screenshots/surface-3.png\" />\n * </div>\n *\n * <div class=\"screenshots\">\n * <img src=\"screenshots/surface-dark-1.png\" />\n * <img src=\"screenshots/surface-dark-2.png\" />\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Surface, Text } from 'react-native-paper';\n * import { StyleSheet } from 'react-native';\n *\n * const MyComponent = () => (\n * <Surface style={styles.surface}>\n * <Text>Surface</Text>\n * </Surface>\n * );\n *\n * export default MyComponent;\n *\n * const styles = StyleSheet.create({\n * surface: {\n * padding: 8,\n * height: 80,\n * width: 80,\n * alignItems: 'center',\n * justifyContent: 'center',\n * elevation: 4,\n * },\n * });\n * ```\n */\nconst Surface = ({ style, theme, ...rest }: Props) => {\n const { elevation = 4 } = (StyleSheet.flatten(style) || {}) as ViewStyle;\n const { dark: isDarkTheme, mode, colors } = theme;\n return (\n <Animated.View\n {...rest}\n style={[\n {\n backgroundColor:\n isDarkTheme && mode === 'adaptive'\n ? overlay(elevation, colors.surface)\n : colors.surface,\n },\n elevation ? shadow(elevation) : null,\n style,\n ]}\n />\n );\n};\n\nexport default withTheme(Surface);\n"]} |