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

Comparing version 0.4.0 to 0.4.1

lib/withSafeArea.js

@@ -7,2 +7,16 @@ // @flow
 
+type Direction =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'topLeft'
+  | 'topRight'
+  | 'bottomLeft'
+  | 'bottomRight'
+  | 'vertical'
+  | 'horizontal'
+  | 'all'
+;
+
 type Props = any;
@@ -16,6 +30,33 @@ type State = {
   applyTo: 'margin' | 'padding' | 'absolutePosition' | 'contentInset' = 'margin',
-  direction: 'horizontal' | 'vertical' | 'both' = 'both'
+  direction: Direction = 'all'
 ): React.ComponentType<any> {
-  const isHorizontal = direction === 'horizontal' || direction === 'both'
-  const isVertical = direction === 'vertical' || direction === 'both'
+  const applysToTop = (
+    direction === 'top' ||
+    direction === 'topLeft' ||
+    direction === 'topRight' ||
+    direction === 'vertical' ||
+    direction === 'all'
+  )
+  const applysToBottom = (
+    direction === 'bottom' ||
+    direction === 'bottomLeft' ||
+    direction === 'bottomRight' ||
+    direction === 'vertical' ||
+    direction === 'all'
+  )
+  const applysToLeft = (
+    direction === 'left' ||
+    direction === 'topLeft' ||
+    direction === 'bottomLeft' ||
+    direction === 'horizontal' ||
+    direction === 'all'
+  )
+  const applysToRight = (
+    direction === 'right' ||
+    direction === 'topRight' ||
+    direction === 'bottomRight' ||
+    direction === 'horizontal' ||
+    direction === 'all'
+  )
+
   return class extends React.Component<Props, State> {
@@ -58,12 +99,20 @@ state = { safeAreaInsets: { top: 0, bottom: 0, left: 0, right: 0 } }
 
-        if (isHorizontal) {
-          injected.contentInset.left = (contentInset.left || 0) + left
-          injected.contentInset.right = (contentInset.right || 0) + right
+        if (applysToTop || applysToBottom) {
+          if (applysToTop) {
+            injected.contentInset.top = (contentInset.top || 0) + top
+          }
+          if (applysToBottom) {
+            injected.contentInset.bottom = (contentInset.bottom || 0) + bottom
+          }
+          injected.contentOffset.y = (contentOffset.y || 0) - top
+        }
+        if (applysToLeft || applysToRight) {
+          if (applysToLeft) {
+            injected.contentInset.left = (contentInset.left || 0) + left
+          }
+          if (applysToRight) {
+            injected.contentInset.right = (contentInset.right || 0) + right
+          }
           injected.contentOffset.x = (contentOffset.x || 0) - left
         }
-        if (isVertical) {
-          injected.contentInset.top = (contentInset.top || 0) + top
-          injected.contentInset.bottom = (contentInset.bottom || 0) + bottom
-          injected.contentOffset.y = (contentOffset.y || 0) - top
-        }
 
@@ -77,46 +126,48 @@ return injected
       if (applyTo === 'margin') {
-        const marginLeft = style.marginLeft || style.marginHorizontal || style.margin
-        const marginRight = style.marginRight || style.marginHorizontal || style.margin
-        const marginTop = style.marginTop || style.marginVertical || style.margin
-        const marginBottom = style.marginBottom || style.marginVertical || style.margin
-
-        if (isHorizontal) {
-          injected.style.marginLeft = (marginLeft || 0) + left
-          injected.style.marginRight = (marginRight || 0) + right
+        if (applysToTop) {
+          const marginTop = style.marginTop || style.marginVertical || style.margin || 0
+          injected.style.marginTop = marginTop + top
         }
-        if (isVertical) {
-          injected.style.marginTop = (marginTop || 0) + top
-          injected.style.marginBottom = (marginBottom || 0) + bottom
+        if (applysToBottom) {
+          const marginBottom = style.marginBottom || style.marginVertical || style.margin || 0
+          injected.style.marginBottom = marginBottom + bottom
         }
+        if (applysToLeft) {
+          const marginLeft = style.marginLeft || style.marginHorizontal || style.margin || 0
+          injected.style.marginLeft = marginLeft + left
+        }
+        if (applysToRight) {
+          const marginRight = style.marginRight || style.marginHorizontal || style.margin || 0
+          injected.style.marginRight = marginRight + right
+        }
       } else if (applyTo === 'padding') {
-        const paddingLeft = style.paddingLeft || style.paddingHorizontal || style.padding
-        const paddingRight = style.paddingRight || style.paddingHorizontal || style.padding
-        const paddingTop = style.paddingTop || style.paddingVertical || style.padding
-        const paddingBottom = style.paddingBottom || style.paddingVertical || style.padding
-
-        if (isHorizontal) {
-          injected.style.paddingLeft = (paddingLeft || 0) + left
-          injected.style.paddingRight = (paddingRight || 0) + right
+        if (applysToTop) {
+          const paddingTop = style.paddingTop || style.paddingVertical || style.padding || 0
+          injected.style.paddingTop = paddingTop + top
         }
-        if (isVertical) {
-          injected.style.paddingTop = (paddingTop || 0) + top
-          injected.style.paddingBottom = (paddingBottom || 0) + bottom
+        if (applysToBottom) {
+          const paddingBottom = style.paddingBottom || style.paddingVertical || style.padding || 0
+          injected.style.paddingBottom = paddingBottom + bottom
         }
+        if (applysToLeft) {
+          const paddingLeft = style.paddingLeft || style.paddingHorizontal || style.padding || 0
+          injected.style.paddingLeft = paddingLeft + left
+        }
+        if (applysToRight) {
+          const paddingRight = style.paddingRight || style.paddingHorizontal || style.padding || 0
+          injected.style.paddingRight = paddingRight + right
+        }
       } else if (applyTo === 'absolutePosition') {
-        if (isHorizontal) {
-          if (style.left !== undefined) {
-            injected.style.left = style.left + left
-          }
-          if (style.right !== undefined) {
-            injected.style.right = style.right + right
-          }
+        if (applysToTop) {
+          injected.style.top = style.top + top
         }
-        if (isVertical) {
-          if (style.top !== undefined) {
-            injected.style.top = style.top + top
-          }
-          if (style.bottom !== undefined) {
-            injected.style.bottom = style.bottom + bottom
-          }
+        if (applysToBottom) {
+          injected.style.bottom = style.bottom + bottom
         }
+        if (applysToLeft) {
+          injected.style.left = style.left + left
+        }
+        if (applysToRight) {
+          injected.style.right = style.right + right
+        }
       }
@@ -123,0 +174,0 @@

package.json

 {
   "name": "react-native-safe-area",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "React Native module to get Safe Area Insets for iOS 11 or later",
@@ -5,0 +5,0 @@ "main": "lib/index",

README.md

@@ -56,5 +56,9 @@ # react-native-safe-area
 - `direction` : *string* - (Optional) Specify direction to apply safe area insets.
-    - `horizontal` - Apply to left and right.
-    - `vertical` - Apply to top and bottom.
-    - `both` - `horizontal` + `vertical`. (Default)
+    - `top` - Apply to top.
+    - `bottom` - Apply to bottom.
+    - `left` - Apply to left.
+    - `right` - Apply to right.
+    - `horizontal` - `left` + `right`.
+    - `vertical` - `top` + `bottom`.
+    - `all` - `horizontal` + `vertical`. (Default)
 
@@ -61,0 +65,0 @@ ##### Simple view example

No alert changes

Improved metrics

Total package byte prevSize

58303

1.86%

Lines of code

253

25.25%

Number of lines in readme file

160

2.56%

No dependency changes