react-native-safe-area-context - npm Package Compare versions

Comparing version 4.10.1 to 4.10.2

lib/commonjs/SafeAreaView.web.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.SafeAreaView = void 0;
+exports.JsSafeAreaView = void 0;
 var React = _interopRequireWildcard(require("react"));
@@ -14,18 +14,20 @@ var _reactNative = require("react-native");
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-// prettier-ignore
-const TOP = 0b1000,
-  RIGHT = 0b0100,
-  BOTTOM = 0b0010,
-  LEFT = 0b0001,
-  ALL = 0b1111;
-
-/* eslint-disable no-bitwise */
-
-const edgeBitmaskMap = {
-  top: TOP,
-  right: RIGHT,
-  bottom: BOTTOM,
-  left: LEFT
+const defaultEdges = {
+  top: 'additive',
+  left: 'additive',
+  bottom: 'additive',
+  right: 'additive'
 };
-const SafeAreaView = exports.SafeAreaView = /*#__PURE__*/React.forwardRef(({
+function getEdgeValue(inset, current, mode) {
+  switch (mode) {
+    case 'off':
+      return current;
+    case 'maximum':
+      return Math.max(current, inset);
+    case 'additive':
+    default:
+      return current + inset;
+  }
+}
+const JsSafeAreaView = exports.JsSafeAreaView = /*#__PURE__*/React.forwardRef(({
   style = {},
@@ -37,8 +39,14 @@ mode,
   const insets = (0, _SafeAreaContext.useSafeAreaInsets)();
-  const edgeBitmask = edges != null ? Array.isArray(edges) ? edges.reduce((acc, edge) => acc | edgeBitmaskMap[edge], 0) : Object.keys(edges).reduce((acc, edge) => acc | edgeBitmaskMap[edge], 0) : ALL;
+  const edgesRecord = React.useMemo(() => {
+    if (edges == null) {
+      return defaultEdges;
+    }
+    return Array.isArray(edges) ? edges.reduce((acc, edge) => {
+      acc[edge] = 'additive';
+      return acc;
+    }, {}) :
+    // ts has trouble with refining readonly arrays.
+    edges;
+  }, [edges]);
   const appliedStyle = React.useMemo(() => {
-    const insetTop = edgeBitmask & TOP ? insets.top : 0;
-    const insetRight = edgeBitmask & RIGHT ? insets.right : 0;
-    const insetBottom = edgeBitmask & BOTTOM ? insets.bottom : 0;
-    const insetLeft = edgeBitmask & LEFT ? insets.left : 0;
     const flatStyle = _reactNative.StyleSheet.flatten(style);
@@ -56,6 +64,6 @@ if (mode === 'margin') {
       const marginStyle = {
-        marginTop: marginTop + insetTop,
-        marginRight: marginRight + insetRight,
-        marginBottom: marginBottom + insetBottom,
-        marginLeft: marginLeft + insetLeft
+        marginTop: getEdgeValue(insets.top, marginTop, edgesRecord.top),
+        marginRight: getEdgeValue(insets.right, marginRight, edgesRecord.right),
+        marginBottom: getEdgeValue(insets.bottom, marginBottom, edgesRecord.bottom),
+        marginLeft: getEdgeValue(insets.left, marginLeft, edgesRecord.left)
       };
@@ -74,10 +82,10 @@ return [style, marginStyle];
       const paddingStyle = {
-        paddingTop: paddingTop + insetTop,
-        paddingRight: paddingRight + insetRight,
-        paddingBottom: paddingBottom + insetBottom,
-        paddingLeft: paddingLeft + insetLeft
+        paddingTop: getEdgeValue(insets.top, paddingTop, edgesRecord.top),
+        paddingRight: getEdgeValue(insets.right, paddingRight, edgesRecord.right),
+        paddingBottom: getEdgeValue(insets.bottom, paddingBottom, edgesRecord.bottom),
+        paddingLeft: getEdgeValue(insets.left, paddingLeft, edgesRecord.left)
       };
       return [style, paddingStyle];
     }
-  }, [style, insets, mode, edgeBitmask]);
+  }, [edgesRecord.bottom, edgesRecord.left, edgesRecord.right, edgesRecord.top, insets.bottom, insets.left, insets.right, insets.top, mode, style]);
   return /*#__PURE__*/React.createElement(_reactNative.View, _extends({
@@ -84,0 +92,0 @@ style: appliedStyle

lib/module/SafeAreaView.web.js

 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from './SafeAreaContext';
-// prettier-ignore
-const TOP = 0b1000,
-  RIGHT = 0b0100,
-  BOTTOM = 0b0010,
-  LEFT = 0b0001,
-  ALL = 0b1111;
-
-/* eslint-disable no-bitwise */
-
-const edgeBitmaskMap = {
-  top: TOP,
-  right: RIGHT,
-  bottom: BOTTOM,
-  left: LEFT
+const defaultEdges = {
+  top: 'additive',
+  left: 'additive',
+  bottom: 'additive',
+  right: 'additive'
 };
-export const SafeAreaView = /*#__PURE__*/React.forwardRef(({
+function getEdgeValue(inset, current, mode) {
+  switch (mode) {
+    case 'off':
+      return current;
+    case 'maximum':
+      return Math.max(current, inset);
+    case 'additive':
+    default:
+      return current + inset;
+  }
+}
+export const JsSafeAreaView = /*#__PURE__*/React.forwardRef(({
   style = {},
@@ -27,8 +29,14 @@ mode,
   const insets = useSafeAreaInsets();
-  const edgeBitmask = edges != null ? Array.isArray(edges) ? edges.reduce((acc, edge) => acc | edgeBitmaskMap[edge], 0) : Object.keys(edges).reduce((acc, edge) => acc | edgeBitmaskMap[edge], 0) : ALL;
+  const edgesRecord = React.useMemo(() => {
+    if (edges == null) {
+      return defaultEdges;
+    }
+    return Array.isArray(edges) ? edges.reduce((acc, edge) => {
+      acc[edge] = 'additive';
+      return acc;
+    }, {}) :
+    // ts has trouble with refining readonly arrays.
+    edges;
+  }, [edges]);
   const appliedStyle = React.useMemo(() => {
-    const insetTop = edgeBitmask & TOP ? insets.top : 0;
-    const insetRight = edgeBitmask & RIGHT ? insets.right : 0;
-    const insetBottom = edgeBitmask & BOTTOM ? insets.bottom : 0;
-    const insetLeft = edgeBitmask & LEFT ? insets.left : 0;
     const flatStyle = StyleSheet.flatten(style);
@@ -46,6 +54,6 @@ if (mode === 'margin') {
       const marginStyle = {
-        marginTop: marginTop + insetTop,
-        marginRight: marginRight + insetRight,
-        marginBottom: marginBottom + insetBottom,
-        marginLeft: marginLeft + insetLeft
+        marginTop: getEdgeValue(insets.top, marginTop, edgesRecord.top),
+        marginRight: getEdgeValue(insets.right, marginRight, edgesRecord.right),
+        marginBottom: getEdgeValue(insets.bottom, marginBottom, edgesRecord.bottom),
+        marginLeft: getEdgeValue(insets.left, marginLeft, edgesRecord.left)
       };
@@ -64,10 +72,10 @@ return [style, marginStyle];
       const paddingStyle = {
-        paddingTop: paddingTop + insetTop,
-        paddingRight: paddingRight + insetRight,
-        paddingBottom: paddingBottom + insetBottom,
-        paddingLeft: paddingLeft + insetLeft
+        paddingTop: getEdgeValue(insets.top, paddingTop, edgesRecord.top),
+        paddingRight: getEdgeValue(insets.right, paddingRight, edgesRecord.right),
+        paddingBottom: getEdgeValue(insets.bottom, paddingBottom, edgesRecord.bottom),
+        paddingLeft: getEdgeValue(insets.left, paddingLeft, edgesRecord.left)
       };
       return [style, paddingStyle];
     }
-  }, [style, insets, mode, edgeBitmask]);
+  }, [edgesRecord.bottom, edgesRecord.left, edgesRecord.right, edgesRecord.top, insets.bottom, insets.left, insets.right, insets.top, mode, style]);
   return /*#__PURE__*/React.createElement(View, _extends({
@@ -74,0 +82,0 @@ style: appliedStyle

lib/typescript/src/SafeAreaView.web.d.ts

 import * as React from 'react';
-import type { NativeSafeAreaViewProps } from './SafeArea.types';
-export declare const SafeAreaView: React.ForwardRefExoticComponent<NativeSafeAreaViewProps & React.RefAttributes<React.Component<import("./specs/NativeSafeAreaView").NativeProps, {}, any> & Readonly<import("react-native").NativeMethods>>>;
+import { NativeSafeAreaViewProps } from './SafeArea.types';
+export declare const JsSafeAreaView: React.ForwardRefExoticComponent<NativeSafeAreaViewProps & React.RefAttributes<React.Component<import("./specs/NativeSafeAreaView").NativeProps, {}, any> & Readonly<import("react-native").NativeMethods>>>;
 //# sourceMappingURL=SafeAreaView.web.d.ts.map

package.json

 {
   "name": "react-native-safe-area-context",
-  "version": "4.10.1",
+  "version": "4.10.2",
   "description": "A flexible way to handle safe area, also works on Android and web.",
@@ -5,0 +5,0 @@ "main": "lib/commonjs/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

238091

increased by0.8%

Lines of code

1840

increased by2.74%

No dependency changes