Merge pull request #38 from streamich/list-table

List table

Author: streamich

Diff for: README.md

@@ -94,6 +94,7 @@ const MyComponent = mock();
      - [`<OutsideClick>`](./docs/en/OutsideClick.md)
      - [`<Ripple>`](./docs/en/Ripple.md) and [`withRipple()`](./docs/en/Ripple.md#withripple) &mdash; [**example**](https://codesandbox.io/s/983q7jr80o)
      - [`<Img>`](./docs/en/Img.md)
+     - [`<ListTable>`](./docs/en/ListTable.md)
      - [`<WidthQuery>`](./docs/en/WidthQuery.md), [`<View>`](./docs/en/View.md), [`<WindowWidthQuery>`](./docs/en/WindowWidthQuery.md), and [`<InlineWidthQuery>`](./docs/en/InlineWidthQuery.md)
      - [`<Audio>`](./docs/en/Audio.md) and [`<Video>`](./docs/en/Video.md)
      - [`<Speak>`](./docs/en/Speak.md), [`<Vibrate>`](./docs/en/Vibrate.md), [`<Alert>`](./docs/en/Alert.md)

Diff for: docs/en/ListTable.md

@@ -0,0 +1,27 @@
+# `<ListTable>`
+
+Wraps `children` into a table with specified column number.
+
+## Usage
+
+Below renders 2x3 table.
+
+```jsx
+import {ListTable} from 'libreact/lib/ListTable';
+
+<ListTable cols={2}>
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+  <div>6</div>
+</ListTable>
+```
+
+
+## Props
+
+- `cols` &mdash; optional, number or columns table should have, defaults to `3`.
+- `renderRow` &mdash; optional, function that receives an array of `<td>` cells as React
+  elements and should return a `<tr>` React element, defaults to `cells => h('tr', null, ...cells)`.

Diff for: docs/en/README.md

@@ -60,6 +60,7 @@
      - [`<OutsideClick>`](./OutsideClick.md)
      - [`<Ripple>`](./Ripple.md) and [`withRipple()`](./Ripple.md#withripple) &mdash; [**example**](https://codesandbox.io/s/983q7jr80o)
      - [`<Img>`](./Img.md)
+     - [`<ListTable>`](./ListTable.md)
      - [`<WidthQuery>`](./WidthQuery.md), [`<View>`](./View.md), [`<WindowWidthQuery>`](./WindowWidthQuery.md), and [`<InlineWidthQuery>`](./InlineWidthQuery.md)
      - [`<Audio>`](./Audio.md) and [`<Video>`](./Video.md)
      - [`<Speak>`](./Speak.md), [`<Vibrate>`](./Vibrate.md), [`<Alert>`](./Alert.md), `<Prompt>`, `<Confirm>`

Diff for: docs/en/SUMMARY.md

@@ -68,6 +68,7 @@
   * [OutsideClick](OutsideClick.md)
   * [Ripple](Ripple.md)
   * [Img](Img.md)
+  * [ListTable](ListTable.md)
   * [Group](Group.md)
   * [InfiniteScroll](InfiniteScroll.md)
   * [WidthQuery](WidthQuery.md)

Diff for: src/ListTable/__story__/story.tsx

@@ -0,0 +1,115 @@
+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>
+  )
+  .add('Cells as text', () =>
+    <ListTable cols={2}>
+      {'1'}
+      {'2'}
+      {'3'}
+      {'4'}
+      {'5'}
+      {'6'}
+    </ListTable>
+  )

Diff for: 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 extends React.AllHTMLAttributes<any> {
+  cols?: number;
+  renderRow?: (cells: React.ReactElement<any>[]) => React.ReactElement<any>;
+}
+
+export const ListTable: React.SFC<Props> = ({cols, renderRow, children, ...rest}) => {
+  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', rest, h('tbody', null,
+    ...rows,
+  ));
+};
+
+ListTable.defaultProps = {
+  cols: 3,
+  renderRow: defaultRenderRow,
+};