1 | function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2 |
|
3 | import * as React from 'react';
|
4 | import { Animated, StyleSheet } from 'react-native';
|
5 | import shadow from '../styles/shadow';
|
6 | import { withTheme } from '../core/theming';
|
7 | import overlay from '../styles/overlay';
|
8 |
|
9 | /**
|
10 | * Surface is a basic container that can give depth to an element with elevation shadow.
|
11 | * On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.
|
12 | * See [Dark Theme](https://callstack.github.io/react-native-paper/theming.html#dark-theme) for more information.
|
13 | * Overlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.
|
14 | *
|
15 | * <div class="screenshots">
|
16 | * <img src="screenshots/surface-1.png" />
|
17 | * <img src="screenshots/surface-2.png" />
|
18 | * <img src="screenshots/surface-3.png" />
|
19 | * </div>
|
20 | *
|
21 | * <div class="screenshots">
|
22 | * <img src="screenshots/surface-dark-1.png" />
|
23 | * <img src="screenshots/surface-dark-2.png" />
|
24 | * </div>
|
25 | *
|
26 | * ## Usage
|
27 | * ```js
|
28 | * import * as React from 'react';
|
29 | * import { Surface, Text } from 'react-native-paper';
|
30 | * import { StyleSheet } from 'react-native';
|
31 | *
|
32 | * const MyComponent = () => (
|
33 | * <Surface style={styles.surface}>
|
34 | * <Text>Surface</Text>
|
35 | * </Surface>
|
36 | * );
|
37 | *
|
38 | * export default MyComponent;
|
39 | *
|
40 | * const styles = StyleSheet.create({
|
41 | * surface: {
|
42 | * padding: 8,
|
43 | * height: 80,
|
44 | * width: 80,
|
45 | * alignItems: 'center',
|
46 | * justifyContent: 'center',
|
47 | * elevation: 4,
|
48 | * },
|
49 | * });
|
50 | * ```
|
51 | */
|
52 | const Surface = _ref => {
|
53 | let {
|
54 | style,
|
55 | theme,
|
56 | ...rest
|
57 | } = _ref;
|
58 | const {
|
59 | elevation = 4
|
60 | } = StyleSheet.flatten(style) || {};
|
61 | const {
|
62 | dark: isDarkTheme,
|
63 | mode,
|
64 | colors
|
65 | } = theme;
|
66 | return /*#__PURE__*/React.createElement(Animated.View, _extends({}, rest, {
|
67 | style: [{
|
68 | backgroundColor: isDarkTheme && mode === 'adaptive' ? overlay(elevation, colors.surface) : colors.surface
|
69 | }, elevation ? shadow(elevation) : null, style]
|
70 | }));
|
71 | };
|
72 |
|
73 | export default withTheme(Surface);
|
74 | //# sourceMappingURL=Surface.js.map |
\ | No newline at end of file |