react-native-paper
Version:
Material design for React Native
247 lines (245 loc) • 9.23 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _theming = require("../core/theming");
var _overlay = _interopRequireWildcard(require("../styles/overlay"));
var _shadow = _interopRequireDefault(require("../styles/shadow"));
var _forwardRef = require("../utils/forwardRef");
var _splitStyles = require("../utils/splitStyles");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const MD2Surface = (0, _forwardRef.forwardRef)(({
style,
theme: overrideTheme,
...rest
}, ref) => {
const {
elevation = 4
} = _reactNative.StyleSheet.flatten(style) || {};
const {
dark: isDarkTheme,
mode,
colors
} = (0, _theming.useInternalTheme)(overrideTheme);
return /*#__PURE__*/React.createElement(_reactNative.Animated.View, _extends({
ref: ref
}, rest, {
style: [{
backgroundColor: isDarkTheme && mode === 'adaptive' ? (0, _overlay.default)(elevation, colors === null || colors === void 0 ? void 0 : colors.surface) : colors === null || colors === void 0 ? void 0 : colors.surface
}, elevation ? (0, _shadow.default)(elevation) : null, style]
}));
});
const outerLayerStyleProperties = ['position', 'alignSelf', 'top', 'right', 'bottom', 'left', 'start', 'end', 'flex', 'flexShrink', 'flexGrow', 'width', 'height', 'transform', 'opacity'];
const shadowColor = '#000';
const iOSShadowOutputRanges = [{
shadowOpacity: 0.15,
height: [0, 1, 2, 4, 6, 8],
shadowRadius: [0, 3, 6, 8, 10, 12]
}, {
shadowOpacity: 0.3,
height: [0, 1, 1, 1, 2, 4],
shadowRadius: [0, 1, 2, 3, 3, 4]
}];
const inputRange = [0, 1, 2, 3, 4, 5];
function getStyleForShadowLayer(elevation, layer) {
if ((0, _overlay.isAnimatedValue)(elevation)) {
return {
shadowColor,
shadowOpacity: elevation.interpolate({
inputRange: [0, 1],
outputRange: [0, iOSShadowOutputRanges[layer].shadowOpacity],
extrapolate: 'clamp'
}),
shadowOffset: {
width: 0,
height: elevation.interpolate({
inputRange,
outputRange: iOSShadowOutputRanges[layer].height
})
},
shadowRadius: elevation.interpolate({
inputRange,
outputRange: iOSShadowOutputRanges[layer].shadowRadius
})
};
}
return {
shadowColor,
shadowOpacity: elevation ? iOSShadowOutputRanges[layer].shadowOpacity : 0,
shadowOffset: {
width: 0,
height: iOSShadowOutputRanges[layer].height[elevation]
},
shadowRadius: iOSShadowOutputRanges[layer].shadowRadius[elevation]
};
}
const SurfaceIOS = (0, _forwardRef.forwardRef)(({
elevation,
style,
backgroundColor,
testID,
children,
mode = 'elevated',
...props
}, ref) => {
const [outerLayerViewStyles, innerLayerViewStyles] = React.useMemo(() => {
const flattenedStyles = _reactNative.StyleSheet.flatten(style) || {};
const [filteredStyles, outerLayerStyles, borderRadiusStyles] = (0, _splitStyles.splitStyles)(flattenedStyles, style => outerLayerStyleProperties.includes(style) || style.startsWith('margin'), style => style.startsWith('border') && style.endsWith('Radius'));
if (process.env.NODE_ENV !== 'production' && filteredStyles.overflow === 'hidden' && elevation !== 0) {
console.warn('When setting overflow to hidden on Surface the shadow will not be displayed correctly. Wrap the content of your component in a separate View with the overflow style.');
}
const bgColor = flattenedStyles.backgroundColor || backgroundColor;
const isElevated = mode === 'elevated';
const outerLayerViewStyles = {
...(isElevated && getStyleForShadowLayer(elevation, 0)),
...outerLayerStyles,
...borderRadiusStyles,
backgroundColor: bgColor
};
const innerLayerViewStyles = {
...(isElevated && getStyleForShadowLayer(elevation, 1)),
...filteredStyles,
...borderRadiusStyles,
flex: flattenedStyles.height || flattenedStyles.flex ? 1 : undefined,
backgroundColor: bgColor
};
return [outerLayerViewStyles, innerLayerViewStyles];
}, [style, elevation, backgroundColor, mode]);
return /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
ref: ref,
style: outerLayerViewStyles,
testID: `${testID}-outer-layer`
}, /*#__PURE__*/React.createElement(_reactNative.Animated.View, _extends({}, props, {
style: innerLayerViewStyles,
testID: testID
}), children));
});
/**
* Surface is a basic container that can give depth to an element with elevation shadow.
* On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.
* See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
* Overlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { Surface, Text } from 'react-native-paper';
* import { StyleSheet } from 'react-native';
*
* const MyComponent = () => (
* <Surface style={styles.surface} elevation={4}>
* <Text>Surface</Text>
* </Surface>
* );
*
* export default MyComponent;
*
* const styles = StyleSheet.create({
* surface: {
* padding: 8,
* height: 80,
* width: 80,
* alignItems: 'center',
* justifyContent: 'center',
* },
* });
* ```
*/
const Surface = (0, _forwardRef.forwardRef)(({
elevation = 1,
children,
theme: overridenTheme,
style,
testID = 'surface',
mode = 'elevated',
...props
}, ref) => {
const theme = (0, _theming.useInternalTheme)(overridenTheme);
if (!theme.isV3) return /*#__PURE__*/React.createElement(MD2Surface, _extends({}, props, {
theme: theme,
style: style,
ref: ref
}), children);
const {
colors
} = theme;
const inputRange = [0, 1, 2, 3, 4, 5];
const backgroundColor = (_colors$elevation2 => {
if ((0, _overlay.isAnimatedValue)(elevation)) {
return elevation.interpolate({
inputRange,
outputRange: inputRange.map(elevation => {
var _colors$elevation;
return (_colors$elevation = colors.elevation) === null || _colors$elevation === void 0 ? void 0 : _colors$elevation[`level${elevation}`];
})
});
}
return (_colors$elevation2 = colors.elevation) === null || _colors$elevation2 === void 0 ? void 0 : _colors$elevation2[`level${elevation}`];
})();
const isElevated = mode === 'elevated';
if (_reactNative.Platform.OS === 'web') {
const {
pointerEvents = 'auto'
} = props;
return /*#__PURE__*/React.createElement(_reactNative.Animated.View, _extends({}, props, {
pointerEvents: pointerEvents,
ref: ref,
testID: testID,
style: [{
backgroundColor
}, elevation && isElevated ? (0, _shadow.default)(elevation, theme.isV3) : null, style]
}), children);
}
if (_reactNative.Platform.OS === 'android') {
const elevationLevel = [0, 3, 6, 9, 12, 15];
const getElevationAndroid = () => {
if ((0, _overlay.isAnimatedValue)(elevation)) {
return elevation.interpolate({
inputRange,
outputRange: elevationLevel
});
}
return elevationLevel[elevation];
};
const {
margin,
padding,
transform,
borderRadius
} = _reactNative.StyleSheet.flatten(style) || {};
const outerLayerStyles = {
margin,
padding,
transform,
borderRadius
};
const sharedStyle = [{
backgroundColor
}, style];
return /*#__PURE__*/React.createElement(_reactNative.Animated.View, _extends({}, props, {
testID: testID,
ref: ref,
style: [{
backgroundColor,
transform
}, outerLayerStyles, sharedStyle, isElevated && {
elevation: getElevationAndroid()
}]
}), children);
}
return /*#__PURE__*/React.createElement(SurfaceIOS, _extends({}, props, {
ref: ref,
elevation: elevation,
backgroundColor: backgroundColor,
style: style,
testID: testID,
mode: mode
}), children);
});
var _default = exports.default = Surface;
//# sourceMappingURL=Surface.js.map