update layout logic

Author: osamu38

README.md

@@ -285,6 +285,7 @@ const CardNumberBlock = () => (
 );
 const Main = () => (
   <RLM
+    width="100%"
     verticalSpace={10}
     innerWidth={500}
     align="center"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-layout-manager",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Layout manager not to give margins to components",
   "homepage": "http://osamu38.github.io/react-layout-manager",
   "bugs": {

src/demo/App.js

@@ -208,6 +208,7 @@ const CardNumberBlock = () => (
 );
 const Main = () => (
   <RLM
+    width="100%"
     verticalSpace={10}
     innerWidth={500}
     align="center"

src/lib/components/LayoutManagerChild.jsx

@@ -10,19 +10,17 @@ import {
 } from '../helpers/setStyles';
 
 const LayoutManagerChild = styled.div`
-  width: 100%;
-  vertical-align: middle;
   &::after {
     display: block;
     clear: both;
     content: '';
   }
+  ${({ isVisible }) => setVisible(isVisible)}
   ${({ horizontalSpace }) => setRightMargin(horizontalSpace)}
   ${({ wrapVerticalSpace }) => setBottomMargin(wrapVerticalSpace)}
   ${({ verticalSpace }) => setVerticalSpace(verticalSpace)}
   ${({ childWidth }) => setWidth(childWidth)}
   ${({ verticalAlign }) => setVerticalAlign(verticalAlign)}
-  ${({ isVisible }) => setVisible(isVisible)}
   ${(props) => setResponsivePropertyToChild(props)}
 `;
 

src/lib/components/LayoutManagerChildInner.jsx

@@ -6,9 +6,8 @@ import {
 } from '../helpers/setStyles';
 
 const LayoutManagerChildInner = styled.div`
-  width: 100%;
-  ${({ innerWidth }) => setInnerWidth(innerWidth)}
   ${({ align }) => setAlign(align)}
+  ${({ innerWidth }) => setInnerWidth(innerWidth)}
   ${(props) => setResponsivePropertyToChildInner(props)}
 `;
 

src/lib/helpers/setStyles.js

@@ -54,6 +54,7 @@ export function setBottomNegativeMargin(wrapVerticalSpace) {
 export function setWidth(childWidth) {
   return childWidth && `
     max-width: ${childWidth + getUnit(childWidth)};
+    width: 100%;
   `;
 }
 export function setVerticalSpace(verticalSpace) {
@@ -62,20 +63,32 @@ export function setVerticalSpace(verticalSpace) {
   `;
 }
 export function setVerticalAlign(verticalAlign) {
-  return checkApplyProperyValid(verticalAlign) && `
+  return checkApplyProperyValid(verticalAlign) ? `
     vertical-align: ${verticalAlign + getUnit(verticalAlign)};
+  ` : `
+    vertical-align: middle;
   `;
 }
 export function setInnerWidth(innerWidth) {
   return checkApplyProperyValid(innerWidth) && `
     max-width: ${innerWidth + getUnit(innerWidth)};
+    width: 100%;
   `;
 }
 export function setAlign(align) {
-  return align && align === 'center' ? `
-    margin: 0 auto;
-  ` : `
+  if (!align) {
+    return `
+      width: 100%;
+    `;
+  } else if (align === 'center') {
+    return `
+      margin: 0 auto;
+      width: fit-content;
+    `;
+  }
+  return `
     float: ${align};
+    width: auto;
   `;
 }
 export function setResponsivePropertyToLayoutManager(props) {
@@ -117,12 +130,12 @@ export function setResponsivePropertyToChild(props) {
         );
 
         return css`
+          ${setVisible(childProperty.isVisible)}
           ${setRightMargin(childProperty.horizontalSpace)}
           ${setBottomMargin(childProperty.wrapVerticalSpace)}
           ${setVerticalSpace(childProperty.verticalSpace)}
           ${setWidth(childProperty.childWidth)}
           ${setVerticalAlign(childProperty.verticalAlign)}
-          ${setVisible(childProperty.isVisible)}
         `;
       })()}
     }
@@ -142,8 +155,8 @@ export function setResponsivePropertyToChildInner(props) {
         );
 
         return css`
-          ${setInnerWidth(childInnerProperty.innerWidth)}
           ${setAlign(childInnerProperty.align)}
+          ${setInnerWidth(childInnerProperty.innerWidth)}
         `;
       })()}
     }