Merge pull request #8 from smakosh/fix/handle-all-cases

fix(Flex): handle rough edges

Author: smakosh

example/example.ts

@@ -1,131 +1,131 @@
 export default [
   {
-    "columns": 1
+    columns: 1,
   },
   {
-    "columns": 1
+    columns: 1,
   },
   {
-    "columns": 1
+    columns: 1,
   },
   {
-    "columns": 1
+    columns: 1,
   },
   {
-    "columns": 1
+    columns: 1,
   },
   {
-    "columns": 1
+    columns: 1,
   },
   {
-    "columns": 1
+    columns: 1,
   },
   {
-    "columns": 1
+    columns: 1,
   },
   {
-    "columns": 1
+    columns: 1,
   },
   {
-    "columns": 1
+    columns: 1,
   },
   {
-    "columns": 1
+    columns: 1,
   },
   {
-    "columns": 1
+    columns: 1,
   },
   {
-    "columns": 2
+    columns: 2,
   },
   {
-    "columns": 2
+    columns: 2,
   },
   {
-    "columns": 2
+    columns: 2,
   },
   {
-    "columns": 2
+    columns: 2,
   },
   {
-    "columns": 2
+    columns: 2,
   },
   {
-    "columns": 2
+    columns: 2,
   },
   {
-    "columns": 3
+    columns: 3,
   },
   {
-    "columns": 3
+    columns: 3,
   },
   {
-    "columns": 3
+    columns: 3,
   },
   {
-    "columns": 3
+    columns: 3,
   },
   {
-    "columns": 4
+    columns: 4,
   },
   {
-    "columns": 4
+    columns: 4,
   },
   {
-    "columns": 4
+    columns: 4,
   },
   {
-    "columns": 5
+    columns: 5,
   },
   {
-    "columns": 7
+    columns: 7,
   },
   {
-    "columns": 6
+    columns: 6,
   },
   {
-    "columns": 6
+    columns: 6,
   },
   {
-    "columns": 4
+    columns: 4,
   },
   {
-    "columns": 8
+    columns: 8,
   },
   {
-    "columns": 3
+    columns: 3,
   },
   {
-    "columns": 9
+    columns: 9,
   },
   {
-    "columns": 2
+    columns: 2,
   },
   {
-    "columns": 10
+    columns: 10,
   },
   {
-    "columns": 1
+    columns: 1,
   },
   {
-    "columns": 11
+    columns: 11,
   },
   {
-    "columns": 12
+    columns: 12,
   },
   {
-    "columns": 4
+    columns: 4,
   },
   {
-    "columns": 4
+    columns: 4,
   },
   {
-    "columns": 4
+    columns: 4,
   },
   {
-    "columns": 4
+    columns: 4,
   },
   {
-    "columns": 4
-  }
-]
+    columns: 4,
+  },
+];

example/index.tsx

@@ -1,42 +1,43 @@
 import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Flex, Item } from '../.'
-import myList from './example'
+import { Flex, Item } from '../.';
+import myList from './example';
 
 const App = () => (
   <div
-  style={{
-    maxWidth: 960,
-    margin: "0 auto"
-  }}
->
-  <h1>Example</h1>
-  <Flex col={4}>
-    {myList.map(({ columns }, i: number) => (
-      <Item
-        key={i}
-        col={columns}
-        colTablet={6}
-        colMobile={12}
-        gap={1}
-        marginBottom={30}
-        stretch
-      >
-        <div
-          style={{
-            textAlign: "center",
-            width: "100%",
-            border: "1px solid #eee",
-            background: "#eee"
-          }}
+    style={{
+      maxWidth: 960,
+      margin: '0 auto',
+    }}
+  >
+    <h1>Example</h1>
+    <Flex col={4} total={myList.length}>
+      {myList.map(({ columns }, i: number) => (
+        <Item
+          key={i}
+          col={columns}
+          colTablet={6}
+          colMobile={12}
+          gap={1}
+          marginBottom={30}
+          stretch
         >
-          <h1>{columns}</h1>
-        </div>
-      </Item>
-    ))}
-  </Flex>
-</div>
-)
+          <div
+            style={{
+              textAlign: 'center',
+              width: '100%',
+              border: '1px solid #eee',
+              background: '#eee',
+            }}
+          >
+            <h1>{columns}</h1>
+          </div>
+        </Item>
+      ))}
+    </Flex>
+    <h2>Hello</h2>
+  </div>
+);
 
 ReactDOM.render(<App />, document.getElementById('root'));

package.json

@@ -41,11 +41,11 @@
   "size-limit": [
     {
       "path": "dist/react-flex-ready.cjs.production.min.js",
-      "limit": "10 KB"
+      "limit": "16 KB"
     },
     {
       "path": "dist/react-flex-ready.esm.js",
-      "limit": "10 KB"
+      "limit": "16 KB"
     }
   ],
   "devDependencies": {

src/Flex.ts src/Flex.tsxsrc/Flex.ts renamed to src/Flex.tsx

@@ -1,7 +1,9 @@
+import * as React from 'react';
 import styled from 'styled-components';
 import { FlexProps } from './interfaces';
+import Item from './Item';
 
-const Flex = styled.div<FlexProps>`
+const StyledFlex = styled.div<Omit<FlexProps, 'total'>>`
   display: flex;
   justify-content: ${({ justifyContent }) => justifyContent || 'space-between'};
   flex-wrap: wrap;
@@ -29,4 +31,34 @@ const Flex = styled.div<FlexProps>`
   }
 `;
 
+const Flex: React.FC<FlexProps> = ({
+  children,
+  col,
+  colTablet,
+  colMobile,
+  gap,
+  gabTablet,
+  gapMobile,
+  align,
+  justifyContent,
+  className,
+  style,
+}) => (
+  <StyledFlex
+    col={col}
+    colTablet={colTablet}
+    colMobile={colMobile}
+    gap={gap}
+    gabTablet={gabTablet}
+    gapMobile={gapMobile}
+    align={align}
+    justifyContent={justifyContent}
+    className={className}
+    style={style}
+  >
+    {children}
+    <Item col={col} colTablet={colTablet} colMobile={colMobile} />
+  </StyledFlex>
+);
+
 export default Flex;

src/interfaces.ts

@@ -14,7 +14,7 @@ export interface ItemProps extends HTMLAttributes<HTMLDivElement> {
   style?: object;
 }
 
-export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
+export interface FlexProps {
   gap?: number;
   gabTablet?: number;
   gapMobile?: number;
@@ -23,7 +23,6 @@ export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
   col?: number;
   colTablet?: number;
   colMobile?: number;
-  as?: string | Component;
   className?: string;
   style?: object;
 }