New props and documentation

`show`, `inline`, and `itemProps` props added
sillvva · Jul 25, 2019 · 764bef3 · 764bef3
1 parent 62f7585
commit 764bef3
Show file tree

Hide file tree

Showing 8 changed files with 750 additions and 303 deletions.
diff --git a/README.md b/README.md
diff --git a/common.js b/common.js
@@ -5,7 +5,20 @@ export const breakpoints = {
     xl: "1199px"
 };
 
-export const px = n => (typeof n === "number" ? n + "px" : n && n.length > 0 ? n : null);
+export const px = value => {
+    if (value) {
+        if (value.xs || value.sm || value.md || value.lg || value.xl) {
+            const output = { ...value };
+            if (output.xs) output.xs = px(output.xs);
+            if (output.sm) output.sm = px(output.sm);
+            if (output.md) output.md = px(output.md);
+            if (output.lg) output.lg = px(output.lg);
+            if (output.xl) output.xl = px(output.xl);
+            return output;
+        }
+        return typeof value === "number" ? value + "px" : value && value.length > 0 ? value : null;
+    }
+};
 
 export const fr = n => (typeof n === "number" ? `repeat(${n}, 1fr)` : n);
 

diff --git a/example.css b/example.css
@@ -1,20 +1,19 @@
+body {
+    margin: 0;
+    font-family: sans-serif;
+}
+
 .navbar {
     background-color: rgb(219, 112, 147);
     color: white;
     padding: 0 15px;
 }
 
-.navbar nav ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.navbar nav ul li {
+.navbar nav a {
     padding: 0 15px;
 }
 
 .navbar a {
     text-decoration: none;
     color: white;
-}
+}
diff --git a/example.jsx b/example.jsx
@@ -3,28 +3,28 @@ import { Flex, Grid } from "./index";
 import './example.css';
 
 function App() {
-    const menuHeight = 60;
+    const navbarHeight = 60;
 
     return (
         <div className="App">
-            <Flex height={menuHeight} alignItems="center" className="navbar">
+            <Flex height={navbarHeight} alignItems="center" className="navbar">
                 <Flex.Item width={100}>Logo</Flex.Item>
                 <Flex.Item as="nav" flex={{ min: "auto", grow: 1 }}>
                     <Flex as="ul" alignItems="center">
                         <Flex.Item as="li">
-                            <Flex as="a" href="/services" alignItems="center" height={menuHeight}>
+                            <Flex as="a" href="/services" alignItems="center" height={navbarHeight}>
                                 Services
                             </Flex>
                         </Flex.Item>
                         <Flex.Item as="li">
-                        <Flex as="a" href="/pricing" alignItems="center" height={menuHeight}>
+                        <Flex as="a" href="/pricing" alignItems="center" height={navbarHeight}>
                                 Services
                             </Flex>
                         </Flex.Item>
                     </Flex>
                 </Flex.Item>
                 <Flex.Item>
-                    <Flex as="a" href="/account" alignItems="center" height={menuHeight}>
+                    <Flex as="a" href="/account" alignItems="center" height={navbarHeight}>
                         Account
                     </Flex>
                 </Flex.Item>

diff --git a/flex.js b/flex.js
@@ -2,97 +2,6 @@ import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 import { breakpointWrapper, px } from "./common";
-export const FlexContainer = styled.div`
-    display: flex;
-    ${({ dir }) => breakpointWrapper('flex-dir', dir)}
-    ${({ wrap }) => breakpointWrapper('flex-wrap', wrap)}
-    ${({ align }) => breakpointWrapper('align-content', align)}
-    ${({ justify }) => breakpointWrapper('justify-content', justify)}
-    ${({ alignItems }) => breakpointWrapper('align-items', alignItems)}
-    ${({ width }) => breakpointWrapper('width', px(width))}
-    ${({ height }) => breakpointWrapper('height', px(height))}
-`;
-const ptFlexDir = PropTypes.oneOf(["row", "row-reverse", "column", "column-reverse"]);
-const ptFlexWrap = PropTypes.oneOf(["nowrap", "wrap", "wrap-reverse"]);
-const ptAlign = PropTypes.oneOf(["stretch", "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "inherit", "initial", "unset"]);
-const ptJustify = PropTypes.oneOf(["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "inherit", "initial", "unset"]);
-const ptAlignItems = PropTypes.oneOf(["stretch", "flex-start", "flex-end", "center", "baseline", "inherit", "initial", "unset"]);
-const ptFlexWidth = PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string
-]);
-FlexContainer.propTypes = {
-    dir: PropTypes.oneOfType([
-        ptFlexDir,
-        PropTypes.shape({
-            xs: ptFlexDir,
-            sm: ptFlexDir,
-            md: ptFlexDir,
-            lg: ptFlexDir,
-            xl: ptFlexDir
-        })
-    ]),
-    wrap: PropTypes.oneOfType([
-        ptFlexWrap,
-        PropTypes.shape({
-            xs: ptFlexWrap,
-            sm: ptFlexWrap,
-            md: ptFlexWrap,
-            lg: ptFlexWrap,
-            xl: ptFlexWrap
-        })
-    ]),
-    align: PropTypes.oneOfType([
-        ptAlign,
-        PropTypes.shape({
-            xs: ptAlign,
-            sm: ptAlign,
-            md: ptAlign,
-            lg: ptAlign,
-            xl: ptAlign
-        })
-    ]),
-    justify: PropTypes.oneOfType([
-        ptJustify,
-        PropTypes.shape({
-            xs: ptJustify,
-            sm: ptJustify,
-            md: ptJustify,
-            lg: ptJustify,
-            xl: ptJustify
-        })
-    ]),
-    alignItems: PropTypes.oneOfType([
-        ptAlignItems,
-        PropTypes.shape({
-            xs: ptAlignItems,
-            sm: ptAlignItems,
-            md: ptAlignItems,
-            lg: ptAlignItems,
-            xl: ptAlignItems
-        })
-    ]),
-    width: PropTypes.oneOfType([
-        ptFlexWidth,
-        PropTypes.shape({
-            xs: ptFlexWidth,
-            sm: ptFlexWidth,
-            md: ptFlexWidth,
-            lg: ptFlexWidth,
-            xl: ptFlexWidth
-        })
-    ]),
-    height: PropTypes.oneOfType([
-        ptFlexWidth,
-        PropTypes.shape({
-            xs: ptFlexWidth,
-            sm: ptFlexWidth,
-            md: ptFlexWidth,
-            lg: ptFlexWidth,
-            xl: ptFlexWidth
-        })
-    ])
-};
 const flexBuilder = (flex) => {
     if (flex) {
         if (typeof flex === 'string' || typeof flex === 'number') {
@@ -112,16 +21,15 @@ const flexBuilder = (flex) => {
     }
     return null;
 }
-export const FlexItem = styled.div`
-    ${({ order }) => breakpointWrapper('order', order)}
-    ${({ flex }) => breakpointWrapper('flex', flex, flexBuilder)}
-    ${({ grow }) => breakpointWrapper('flex-grow', grow)}
-    ${({ shrink }) => breakpointWrapper('flex-shrink', shrink)}
-    ${({ basis }) => breakpointWrapper('flex-basis', px(basis))}
-    ${({ align }) => breakpointWrapper('align-self', align)}
-    ${({ width }) => breakpointWrapper('width', px(width))}
-    ${({ height }) => breakpointWrapper('height', px(height))}
-`;
+const ptFlexDir = PropTypes.oneOf(["row", "row-reverse", "column", "column-reverse"]);
+const ptFlexWrap = PropTypes.oneOf(["nowrap", "wrap", "wrap-reverse"]);
+const ptAlign = PropTypes.oneOf(["stretch", "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "inherit", "initial", "unset"]);
+const ptJustify = PropTypes.oneOf(["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "inherit", "initial", "unset"]);
+const ptAlignItems = PropTypes.oneOf(["stretch", "flex-start", "flex-end", "center", "baseline", "inherit", "initial", "unset"]);
+const ptFlexWidth = PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string
+]);
 const ptFIFlex = PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
@@ -146,7 +54,7 @@ const ptFIFlex = PropTypes.oneOfType([
         ]).isRequired
     })
 ]);
-FlexItem.propTypes = {
+const flexItemPropTypes = {
     order: PropTypes.oneOfType([
         PropTypes.number,
         PropTypes.shape({
@@ -226,13 +134,158 @@ FlexItem.propTypes = {
             lg: ptFlexWidth,
             xl: ptFlexWidth
         })
-    ])
+    ]),
+    show: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.shape({
+            xs: PropTypes.bool,
+            sm: PropTypes.bool,
+            md: PropTypes.bool,
+            lg: PropTypes.bool,
+            xl: PropTypes.bool
+        })
+    ]),
+    itemProps: PropTypes.object
 };
+const flexPropTypes = {
+    inline: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.shape({
+            xs: PropTypes.bool,
+            sm: PropTypes.bool,
+            md: PropTypes.bool,
+            lg: PropTypes.bool,
+            xl: PropTypes.bool
+        })
+    ]),
+    dir: PropTypes.oneOfType([
+        ptFlexDir,
+        PropTypes.shape({
+            xs: ptFlexDir,
+            sm: ptFlexDir,
+            md: ptFlexDir,
+            lg: ptFlexDir,
+            xl: ptFlexDir
+        })
+    ]),
+    wrap: PropTypes.oneOfType([
+        ptFlexWrap,
+        PropTypes.shape({
+            xs: ptFlexWrap,
+            sm: ptFlexWrap,
+            md: ptFlexWrap,
+            lg: ptFlexWrap,
+            xl: ptFlexWrap
+        })
+    ]),
+    align: PropTypes.oneOfType([
+        ptAlign,
+        PropTypes.shape({
+            xs: ptAlign,
+            sm: ptAlign,
+            md: ptAlign,
+            lg: ptAlign,
+            xl: ptAlign
+        })
+    ]),
+    justify: PropTypes.oneOfType([
+        ptJustify,
+        PropTypes.shape({
+            xs: ptJustify,
+            sm: ptJustify,
+            md: ptJustify,
+            lg: ptJustify,
+            xl: ptJustify
+        })
+    ]),
+    alignItems: PropTypes.oneOfType([
+        ptAlignItems,
+        PropTypes.shape({
+            xs: ptAlignItems,
+            sm: ptAlignItems,
+            md: ptAlignItems,
+            lg: ptAlignItems,
+            xl: ptAlignItems
+        })
+    ]),
+    width: PropTypes.oneOfType([
+        ptFlexWidth,
+        PropTypes.shape({
+            xs: ptFlexWidth,
+            sm: ptFlexWidth,
+            md: ptFlexWidth,
+            lg: ptFlexWidth,
+            xl: ptFlexWidth
+        })
+    ]),
+    height: PropTypes.oneOfType([
+        ptFlexWidth,
+        PropTypes.shape({
+            xs: ptFlexWidth,
+            sm: ptFlexWidth,
+            md: ptFlexWidth,
+            lg: ptFlexWidth,
+            xl: ptFlexWidth
+        })
+    ]),
+    show: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.shape({
+            xs: PropTypes.bool,
+            sm: PropTypes.bool,
+            md: PropTypes.bool,
+            lg: PropTypes.bool,
+            xl: PropTypes.bool
+        })
+    ]),
+    itemProps: PropTypes.object
+};
+const FlexContainer = styled.div`
+    ${({ inline }) => breakpointWrapper('display', inline ? 'inline-flex' : 'flex')}
+    ${({ dir }) => breakpointWrapper('flex-dir', dir)}
+    ${({ wrap }) => breakpointWrapper('flex-wrap', wrap)}
+    ${({ align }) => breakpointWrapper('align-content', align)}
+    ${({ justify }) => breakpointWrapper('justify-content', justify)}
+    ${({ alignItems }) => breakpointWrapper('align-items', alignItems)}
+    ${({ width }) => breakpointWrapper('width', px(width))}
+    ${({ height }) => breakpointWrapper('height', px(height)) + breakpointWrapper('line-height', px(height))}
+    ${({ show, inline }) => breakpointWrapper('display', show != null && (show ? inline ? 'inline-flex' : 'flex' : 'none'))}
+`;
+FlexContainer.propTypes = flexPropTypes;
+const FlexItemContainer = styled.div`
+    ${({ order }) => breakpointWrapper('order', order)}
+    ${({ flex }) => breakpointWrapper('flex', flex, flexBuilder)}
+    ${({ grow }) => breakpointWrapper('flex-grow', grow)}
+    ${({ shrink }) => breakpointWrapper('flex-shrink', shrink)}
+    ${({ basis }) => breakpointWrapper('flex-basis', px(basis))}
+    ${({ align }) => breakpointWrapper('align-self', align)}
+    ${({ width }) => breakpointWrapper('width', px(width))}
+    ${({ height }) => breakpointWrapper('height', px(height)) + breakpointWrapper('line-height', px(height))}
+    ${({ show }) => breakpointWrapper('display', show != null && (show ? 'block' : 'none'))}
+`;
+FlexItemContainer.propTypes = flexItemPropTypes;
+class FlexItem extends React.Component {
+    render() {
+        return (
+            <FlexItemContainer {...this.props}>
+                {React.Children.map(this.props.children, child => {
+                    return child.type ? React.cloneElement(child, this.props.itemProps) : child;
+                })}
+            </FlexItemContainer>
+        );
+    }
+}
 export class Flex extends React.Component {
     static get Item() {
         return FlexItem;
     }
     render() {
-        return <FlexContainer {...this.props}>{this.props.children}</FlexContainer>;
+        return (
+            <FlexContainer {...this.props}>
+                {React.Children.map(this.props.children, child => {
+                    return child.type ? React.cloneElement(child, this.props.itemProps) : child;
+                })}
+            </FlexContainer>
+        );
     }
 }