Add factor for dimensions props and fixed undefined

xproglabs · Jan 5, 2021 · 448a8ce · 448a8ce
1 parent 3101873
commit 448a8ce
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 17 deletions.
diff --git a/styles/parsers/parseDimension.js b/styles/parsers/parseDimension.js
@@ -1,12 +1,12 @@
 const parseDimension = (theme, {height, width}) => {
   let object = [];
-  let factor = 8;
+  let factor = theme.factors.dimensions;
 
-  isNaN(height) ?
+  height !== undefined && isNaN(height) ?
     object.push(`height: ${height};`) :
     object.push(`height: ${factor * height}px;`);
 
-  isNaN(width) ?
+  width !== undefined && isNaN(width) ?
     object.push(`width: ${width};`) :
     object.push(`width: ${factor * width}px;`);
 

diff --git a/styles/parsers/parseMargin.js b/styles/parsers/parseMargin.js
@@ -1,8 +1,8 @@
 const parseMargin = (theme, {mx, my, mt, mr, mb, ml}) => {
   let object = [];
-  let factor = 8;
+  let factor = theme.factors.margin;
 
-  isNaN(mx) ?
+  mx !== undefined && isNaN(mx) ?
     object.push(`
       margin-left: ${mx}; 
       margin-right: ${mx};`
@@ -12,7 +12,7 @@ const parseMargin = (theme, {mx, my, mt, mr, mb, ml}) => {
       margin-right: ${factor * mx}px;
     `);
 
-  isNaN(my) ?
+  my !== undefined && isNaN(my) ?
     object.push(`
       margin-top: ${my}; 
       margin-bottom: ${my};`
@@ -22,31 +22,31 @@ const parseMargin = (theme, {mx, my, mt, mr, mb, ml}) => {
       margin-bottom: ${factor * my}px;
     `);
 
-  isNaN(mt) ?
+  mt !== undefined && isNaN(mt) ?
     object.push(`
       margin-top: ${mt};`
     ) :
     mt && object.push(`
       margin-top: ${factor * mt}px;
     `);
 
-  isNaN(mr) ?
+  mr !== undefined && isNaN(mr) ?
     object.push(`
       margin-right: ${mr};`
     ) :
     mr && object.push(`
       margin-right: ${factor * mr}px;
     `);
 
-  isNaN(mb) ?
+  mb !== undefined && isNaN(mb) ?
     object.push(`
       margin-bottom: ${mb};`
     ) :
     mb && object.push(`
       margin-bottom: ${factor * mb}px;
     `);
 
-  isNaN(ml) ?
+  ml !== undefined && isNaN(ml) ?
     object.push(`
       margin-left: ${ml};`
     ) :

diff --git a/styles/parsers/parsePadding.js b/styles/parsers/parsePadding.js
@@ -1,8 +1,8 @@
 const parsePadding = (theme, {px, py, pt, pr, pb, pl}) => {
   let object = [];
-  let factor = 8;
+  let factor = theme.factors.padding;
 
-  isNaN(px) ?
+  px !== undefined && isNaN(px) ?
     object.push(`
       padding-left: ${px}; 
       padding-right: ${px};
@@ -12,7 +12,7 @@ const parsePadding = (theme, {px, py, pt, pr, pb, pl}) => {
       padding-right: ${factor * px}px
     ;`);
 
-  isNaN(py) ?
+  py !== undefined && isNaN(py) ?
     object.push(`
       padding-top: ${py}; 
       padding-bottom: ${py};
@@ -22,31 +22,31 @@ const parsePadding = (theme, {px, py, pt, pr, pb, pl}) => {
       padding-bottom: ${factor * py}px
     ;`);
 
-  isNaN(pt) ?
+  pt !== undefined && isNaN(pt) ?
     object.push(`
       padding-top: ${pt};
     `) :
     pt && object.push(`
       padding-top: ${factor * pt}px
     ;`);
 
-  isNaN(pr) ?
+  pr !== undefined && isNaN(pr) ?
     object.push(`
       padding-right: ${pr};
     `) :
     pr && object.push(`
       padding-right: ${factor * pr}px
     ;`);
 
-  isNaN(pb) ?
+  pb !== undefined && isNaN(pb) ?
     object.push(`
       padding-bottom: ${pb};
     `) :
     pb && object.push(`
       padding-bottom: ${factor * pb}px
     ;`);
 
-  isNaN(pl) ?
+  pl !== undefined && isNaN(pl) ?
     object.push(`
       padding-left: ${pl};
     `) :

diff --git a/styles/theme.js b/styles/theme.js
@@ -50,6 +50,11 @@ export const theme = {
     primary: 'PT Sans',
     secondary: 'Nunito Sans'
   },
+  factors: {
+    dimensions: 10,
+    padding: 8,
+    margin: 8,
+  },
   parseAlign,
   parseBgColor,
   parseCustom,