added new example and scale option

AllGistsEqual · Jan 26, 2020 · 3caf43b · 3caf43b
1 parent a5414ba
commit 3caf43b
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 39 deletions.
diff --git a/src/components/Box/index.jsx b/src/components/Box/index.jsx
@@ -13,6 +13,7 @@ const Box = ({ children, setup }) => {
         margin,
         backgroundColor = '#fff',
         backgroundOffset = {},
+        scale = 1,
         N = { id: 'N' },
         S = { id: 'S' },
         E = { id: 'E' },
@@ -42,68 +43,68 @@ const Box = ({ children, setup }) => {
         background: {
             backgroundColor: backgroundColor || undefined,
             position: 'absolute',
-            top: backgroundOffset.top ?? N.height ?? 0,
-            right: backgroundOffset.right ?? E.width ?? 0,
-            bottom: backgroundOffset.bottom ?? S.height ?? 0,
-            left: backgroundOffset.left ?? W.width ?? 0,
+            top: (backgroundOffset.top ?? N.height ?? 0) * scale,
+            right: (backgroundOffset.right ?? E.width ?? 0) * scale,
+            bottom: (backgroundOffset.bottom ?? S.height ?? 0) * scale,
+            left: (backgroundOffset.left ?? W.width ?? 0) * scale,
         },
         posN: {
             ...base.pos,
-            height: N.height ?? 20,
+            height: (N.height ?? 20) * scale,
             alignSelf: 'center',
-            left: N.left ?? NW.width ?? 0,
-            right: N.right ?? NE.width ?? 0,
-            top: N.top ?? 0,
+            left: (N.left ?? NW.width ?? 0) * scale,
+            right: (N.right ?? NE.width ?? 0) * scale,
+            top: (N.top ?? 0) * scale,
         },
         posS: {
             ...base.pos,
-            height: S.height ?? 20,
+            height: (S.height ?? 20) * scale,
             alignSelf: 'center',
-            left: S.left ?? SW.width ?? 0,
-            right: S.right ?? SE.width ?? 0,
-            bottom: S.bottom ?? 0,
+            left: (S.left ?? SW.width ?? 0) * scale,
+            right: (S.right ?? SE.width ?? 0) * scale,
+            bottom: (S.bottom ?? 0) * scale,
         },
         posE: {
             ...base.pos,
-            width: E.width ?? 20,
-            top: NE.height ?? 0,
-            bottom: SE.height ?? 0,
-            right: E.right ?? 0,
+            width: (E.width ?? 20) * scale,
+            top: (NE.height ?? 0) * scale,
+            bottom: (SE.height ?? 0) * scale,
+            right: (E.right ?? 0) * scale,
         },
         posW: {
             ...base.pos,
-            width: W.width ?? 20,
-            top: NW.height ?? 0,
-            bottom: SW.height ?? 0,
-            left: W.left ?? 0,
+            width: (W.width ?? 20) * scale,
+            top: (NW.height ?? 0) * scale,
+            bottom: (SW.height ?? 0) * scale,
+            left: (W.left ?? 0) * scale,
         },
         posNE: {
             ...base.pos,
-            width: NE.width ?? 40,
-            height: NE.height ?? 40,
-            top: NE.top ?? 0,
-            right: NE.right ?? 0,
+            width: (NE.width ?? 40) * scale,
+            height: (NE.height ?? 40) * scale,
+            top: (NE.top ?? 0) * scale,
+            right: (NE.right ?? 0) * scale,
         },
         posSE: {
             ...base.pos,
-            width: SE.width ?? 40,
-            height: SE.height ?? 40,
-            bottom: SE.bottom ?? 0,
-            right: SE.right ?? 0,
+            width: (SE.width ?? 40) * scale,
+            height: (SE.height ?? 40) * scale,
+            bottom: (SE.bottom ?? 0) * scale,
+            right: (SE.right ?? 0) * scale,
         },
         posSW: {
             ...base.pos,
-            width: SW.width ?? 40,
-            height: SW.height ?? 40,
-            bottom: SW.bottom ?? 0,
-            left: SW.left ?? 0,
+            width: (SW.width ?? 40) * scale,
+            height: (SW.height ?? 40) * scale,
+            bottom: (SW.bottom ?? 0) * scale,
+            left: (SW.left ?? 0) * scale,
         },
         posNW: {
             ...base.pos,
-            width: NW.width ?? 40,
-            height: NW.height ?? 40,
-            top: NW.top ?? 0,
-            left: NW.left ?? 0,
+            width: (NW.width ?? 40) * scale,
+            height: (NW.height ?? 40) * scale,
+            top: (NW.top ?? 0) * scale,
+            left: (NW.left ?? 0) * scale,
         },
     })
 

diff --git a/src/scenes/ScenePlayground.jsx b/src/scenes/ScenePlayground.jsx
@@ -2,19 +2,21 @@ import React from 'react'
 import { Text } from 'react-native'
 import DemoPage from '../components/DemoPage'
 import Box from '../components/Box'
-import demoFrame from '../../assets/demo/demoFrameFubar'
+import demoFrameFubar from '../../assets/demo/demoFrameFubar'
+import demoFrameComic from '../../assets/demo/demoFrameComic'
 
 const setupSimple = {
-    ...demoFrame,
+    ...demoFrameFubar,
     width: 320,
     height: 320,
     margin: 20,
 }
 const setupOffset = {
-    ...demoFrame,
+    ...demoFrameComic,
     width: 280,
     height: 160,
     margin: 0,
+    scale: 0.2,
     backgroundColor: '#ddd',
 }