Permalink
Browse files

Fix build errors and add missing files

  • Loading branch information...
Nemanja Stojanovic
Nemanja Stojanovic committed Jan 2, 2018
1 parent 93d29f7 commit 537d96c79baf6a9e75fc019a4055bbbe248cf3a4
Showing with 45 additions and 25 deletions.
  1. +8 −0 .babelrc.js
  2. +9 −0 .flowconfig
  3. +21 −21 examples/src/index.js
  4. +4 −1 package.json
  5. +3 −3 src/index.js
View
@@ -0,0 +1,8 @@
const modules =
process.env.BABEL_ENV === "cjs" || process.env.NODE_ENV === "test"
? "commonjs"
: false;
module.exports = {
presets: ["react", ["es2015", { modules, loose: true }], "flow"]
};
View
@@ -0,0 +1,9 @@
[ignore]
[include]
[libs]
[lints]
[options]
View
@@ -13,7 +13,7 @@ const Block = styled.div`
display: flex;
align-items: center;
justify-content: center;
background: ${props => colors[props.fr ? props.fr - 1 : props.index || 0]};
background: ${props => colors[props.size ? props.size - 1 : props.index || 0]};
padding: 5px;
`;
@@ -51,41 +51,41 @@ render(
<Center>
<SyntaxHighlighter language="javascript" style={dark}>
{`<GridRows minSize="20px">
<Block>1 fr</Block>
<Block fr={2}>2 frs</Block>
<Block fr={3}>3 frs</Block>
<Block fr={4}>4 frs</Block>
<Block fr={5}>5 frs</Block>
<Block>1</Block>
<Block size={2}>2</Block>
<Block size={3}>3</Block>
<Block size={4}>4</Block>
<Block size={5}>5</Block>
</GridRows>`}
</SyntaxHighlighter>
</Center>
<GridRows minSize="20px">
<Block>1 fr</Block>
<Block fr={2}>2 frs</Block>
<Block fr={3}>3 frs</Block>
<Block fr={4}>4 frs</Block>
<Block fr={5}>5 frs</Block>
<Block>1</Block>
<Block size={2}>2</Block>
<Block size={3}>3</Block>
<Block size={4}>4</Block>
<Block size={5}>5</Block>
</GridRows>
</Example>
<Example>
<Title>GridColumns</Title>
<Center>
<SyntaxHighlighter language="javascript" style={dark}>
{`<GridColumns minSize="50px">
<Block>1 fr</Block>
<Block fr={2}>2 frs</Block>
<Block fr={3}>3 frs</Block>
<Block fr={4}>4 frs</Block>
<Block fr={5}>5 frs</Block>
<Block>1</Block>
<Block size={2}>2</Block>
<Block size={3}>3</Block>
<Block size={4}>4</Block>
<Block size={5}>5</Block>
</GridColumns>`}
</SyntaxHighlighter>
</Center>
<GridColumns minSize="50px">
<Block>1 fr</Block>
<Block fr={2}>2 frs</Block>
<Block fr={3}>3 frs</Block>
<Block fr={4}>4 frs</Block>
<Block fr={5}>5 frs</Block>
<Block>1</Block>
<Block size={2}>2</Block>
<Block size={3}>3</Block>
<Block size={4}>4</Block>
<Block size={5}>5</Block>
</GridColumns>
</Example>
<Example>
View
@@ -35,7 +35,10 @@
"column",
"row"
],
"files": ["es", "dist"],
"files": [
"es",
"dist"
],
"license": "MIT",
"dependencies": {
"react": "^16.2.0",
View
@@ -13,15 +13,15 @@ type GridAreaProps = {
type GridProps = {
children: Node,
fr?: number,
size?: string,
minSize?: string,
};
const dimension = (props: GridProps) =>
Children.toArray(props.children).reduce(
(cssString, child) =>
child && typeof child.props.fr === 'number'
? `${cssString} ${child.props.fr}fr`
child && typeof child.props.size === 'string'
? `${cssString} ${child.props.size}`
: `${cssString} minmax(${props.minSize || '1em'}, 1fr)`,
''
);

0 comments on commit 537d96c

Please sign in to comment.