Merge pull request #100 from 8base/tabl

feat(TableBody): add ability to pass data and render prop to table body

src/atoms/Table/TableBody.js

@@ -1,11 +1,14 @@
 // @flow
 import React from 'react';
 
+import { AsyncContent } from '../../molecules/AsyncContent';
 import { Grid } from '../Grid';
 import { createStyledTag, createTheme } from '../../utils';
 
 type TableBodyProps = {
   children?: React$Node,
+  loading?: boolean,
+  data?: any[],
 };
 
 const name = 'tableBody';
@@ -27,9 +30,23 @@ const TableBodyTag = createStyledTag(name, (props: *) => ({
 
 function TableBody({
   children,
+  data,
+  loading,
   ...rest
   }: TableBodyProps) {
-  return <TableBodyTag { ...rest } tagName={ Grid.Layout }>{ children }</TableBodyTag>;
+  return (
+    <TableBodyTag { ...rest } tagName={ Grid.Layout }>
+      <AsyncContent loading={ loading } stretch>
+        {
+          Array.isArray(data) && typeof children === 'function'
+            ?
+            React.Children.toArray(data.map(children))
+            :
+            children
+        }
+      </AsyncContent>
+    </TableBodyTag>
+  );
 }
 
 export { TableBody, theme };

src/molecules/AsyncContent/AsyncContent.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Loader } from '../../atoms/Loader';
+
+const AsyncContent = ({ loading, children, ...props }) => {
+  if (loading) {
+    return <Loader { ...props } />;
+  }
+
+  return children;
+};
+
+export { AsyncContent };

src/molecules/AsyncContent/index.js

@@ -0,0 +1 @@
+export { AsyncContent } from './AsyncContent';

src/molecules/molecules.js

@@ -3,3 +3,4 @@
 export { Rating } from './Rating';
 export { ButtonGroup } from './ButtonGroup';
 export { Menu } from './Menu';
+export { AsyncContent } from './AsyncContent';