{"ast":null,"code":"var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var React=_interopRequireWildcard(require(\"react\"));var _Animated=_interopRequireDefault(require(\"react-native-web/dist/exports/Animated\"));var _StyleSheet=_interopRequireDefault(require(\"react-native-web/dist/exports/StyleSheet\"));var _shadow=_interopRequireDefault(require(\"../styles/shadow\"));var _theming=require(\"../core/theming\");var _overlay=_interopRequireDefault(require(\"../styles/overlay\"));var _jsxFileName=\"/Users/satya/Workspace/Callstack/react-native-paper/src/components/Surface.tsx\";var Surface=function(_React$Component){(0,_inherits2.default)(Surface,_React$Component);function Surface(){(0,_classCallCheck2.default)(this,Surface);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Surface).apply(this,arguments));}(0,_createClass2.default)(Surface,[{key:\"render\",value:function render(){var _this$props=this.props,style=_this$props.style,theme=_this$props.theme,rest=(0,_objectWithoutProperties2.default)(_this$props,[\"style\",\"theme\"]);var flattenedStyles=_StyleSheet.default.flatten(style)||{};var _flattenedStyles$elev=flattenedStyles.elevation,elevation=_flattenedStyles$elev===void 0?4:_flattenedStyles$elev;var isDarkTheme=theme.dark,mode=theme.mode,colors=theme.colors;return React.createElement(_Animated.default.View,(0,_extends2.default)({},rest,{style:[{backgroundColor:isDarkTheme&&mode==='adaptive'?(0,_overlay.default)(elevation,colors.surface):colors.surface},elevation&&(0,_shadow.default)(elevation),style],__source:{fileName:_jsxFileName,lineNumber:70}}));}}]);return Surface;}(React.Component);var _default=(0,_theming.withTheme)(Surface);exports.default=_default;","map":{"version":3,"sources":["Surface.tsx"],"names":["Surface","React","Component","style","theme","rest","flattenedStyles","StyleSheet","elevation","isDarkTheme","mode","colors","backgroundColor","overlay","shadow","withTheme"],"mappings":"k5BAAA,oD,oLAEA,gEACA,wCAEA,kE,kGAyDMA,GAAAA,CAAAA,O,oUACK,CAAA,GAAA,CAAA,WAAA,CAC2B,KAD3B,KAAA,CACCG,KADD,CAAA,WAAA,CAAA,KAAA,CACQC,KADR,CAAA,WAAA,CAAA,KAAA,CACkBC,IADlB,CAAA,sCAAA,WAAA,CAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA,CAEP,GAAMC,CAAAA,eAAe,CAAGC,oBAAAA,OAAAA,CAAAA,KAAAA,GAAxB,EAAA,CAFO,GAAA,CAAA,qBAAA,CAG8BD,eAH9B,CAAA,SAAA,CAGCE,SAHD,CAAA,qBAAA,GAAA,IAAA,EAAA,CAAA,CAAA,CAAA,qBAAA,CAAA,GAIOC,CAAAA,WAJP,CAIqCL,KAJrC,CAAA,IAAA,CAIoBM,IAJpB,CAIqCN,KAJrC,CAAA,IAAA,CAI0BO,MAJ1B,CAIqCP,KAJrC,CAAA,MAAA,CAKP,MACE,CAAA,KAAA,CAAA,aAAA,CAAA,kBAAA,IAAA,CAAA,sBAAA,EAAA,CAAA,IAAA,CAAA,CAEE,KAAK,CAAE,CACL,CACEQ,eAAe,CACbH,WAAW,EAAIC,IAAI,GAAnBD,UAAAA,CACII,qBAAO,SAAPA,CAAmBF,MAAM,CAD7BF,OACII,CADJJ,CAEIE,MAAM,CALT,OACL,CADK,CAOLH,SAAS,EAAIM,oBAPR,SAOQA,CAPR,CAFT,KAES,CAFT,CAAA,QAAA,CAAA,CAAA,QAAA,CAAA,YAAA,CAAA,UAAA,CADF,EACE,CAAA,CAAA,CAAA,CADF,C,sBANkBb,KAAK,CAACC,S,CAAtBF,C,aAuBSe,uBAAf,OAAeA,C","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 { Theme } from '../types';\nimport overlay from '../styles/overlay';\n\ntype Props = React.ComponentProps<typeof View> & {\n  /**\n   * Content of the `Surface`.\n   */\n  children: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n  /**\n   * @optional\n   */\n  theme: 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 informations.\n * Overlay and/or 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 */\nclass Surface extends React.Component<Props> {\n  render() {\n    const { style, theme, ...rest } = this.props;\n    const flattenedStyles = StyleSheet.flatten(style) || {};\n    const { elevation = 4 }: ViewStyle = flattenedStyles;\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),\n          style,\n        ]}\n      />\n    );\n  }\n}\nexport default withTheme(Surface);\n"]},"metadata":{},"sourceType":"script"}