feat: 🎸 add <ListTable> component

Author: streamich

src/ListTable/__story__/story.tsx

@@ -0,0 +1,105 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {ListTable} from '..';
+import ShowDocs from '../../ShowDocs'
+
+storiesOf('UI/ListTable', module)
+  // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/ListTable.md')}))
+  .add('Default', () =>
+    <ListTable>
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+      <div>4</div>
+    </ListTable>
+  )
+  .add('Empty list', () =>
+    <ListTable>
+    </ListTable>
+  )
+  .add('Full two rows', () =>
+    <ListTable>
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+      <div>4</div>
+      <div>5</div>
+      <div>6</div>
+    </ListTable>
+  )
+  .add('1 column', () =>
+    <ListTable cols={1}>
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+      <div>4</div>
+      <div>5</div>
+      <div>6</div>
+    </ListTable>
+  )
+  .add('2 columns', () =>
+    <ListTable cols={2}>
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+      <div>4</div>
+      <div>5</div>
+      <div>6</div>
+    </ListTable>
+  )
+  .add('3 columns', () =>
+    <ListTable cols={3}>
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+      <div>4</div>
+      <div>5</div>
+      <div>6</div>
+    </ListTable>
+  )
+  .add('5 columns', () =>
+    <ListTable cols={5}>
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+      <div>4</div>
+      <div>5</div>
+      <div>6</div>
+    </ListTable>
+  )
+  .add('6 columns', () =>
+    <ListTable cols={6}>
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+      <div>4</div>
+      <div>5</div>
+      <div>6</div>
+    </ListTable>
+  )
+  .add('7 columns', () =>
+    <ListTable cols={7}>
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+      <div>4</div>
+      <div>5</div>
+      <div>6</div>
+    </ListTable>
+  )
+  .add('User renderRow', () =>
+    <ListTable cols={3} renderRow={(cells) => {
+      return (
+        <tr style={{outline: '1px solid tomato'}}>
+          {cells}
+        </tr>
+      );
+    }}>
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+      <div>4</div>
+      <div>5</div>
+      <div>6</div>
+    </ListTable>
+  )

src/ListTable/index.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+const h = React.createElement;
+
+const defaultRenderRow = cells => h('tr', null, cells);
+
+export interface Props {
+  cols?: number;
+  renderRow?: (cells: React.ReactElement<any>[]) => React.ReactElement<any>;
+}
+
+export const ListTable: React.SFC<Props> = ({cols, renderRow, children}) => {
+  const list = React.Children.toArray(children);
+  const rows: React.ReactElement<any>[] = [];
+  const length = list.length;
+  const rowLength = Math.ceil(length / cols);
+
+  let i = 0;
+  for (let m = 0; m < rowLength; m++) {
+    const cells: React.ReactElement<any>[] = [];
+    for (let n = 0; n < cols; n++) {
+      cells.push(h('td', null, i < length ? list[i] : null));
+      i++;
+    }
+    rows.push(renderRow(cells));
+  }
+
+  return h('table', null, h('tbody', null,
+    rows,
+  ));
+};
+
+ListTable.defaultProps = {
+  cols: 3,
+  renderRow: defaultRenderRow,
+};