# Shuttle

梭子组件，类似 Pagination 分页组件。区别在于，Shuttle 采用前端数据分页。

## 案例演示

### 基本使用

---demo
```js
import { Shuttle } from 'amos-framework';

const gridConf = {
  row: 2,
  col: 3
};

/**
 * 组装数据
 * @param {Array} [dataSource=[]]
 * @param {Number} [colNum=gridConf.col] 列数
 * @param {Number} [row=gridConf.row] 行数
 * @returns {Object}
 */
function assembleData(dataSource = [], colNum = gridConf.col, row = gridConf.row){
  const len = dataSource.length;
  // 补全数据  (row * col) * n
  const onePageTotal = colNum * row;
  const odd = len % onePageTotal;
  if (odd !== 0){
    const diffLen = onePageTotal - odd;
    for (let temp = 0; temp < diffLen; temp++) {
      dataSource.push(`empty-${temp}`);
    }
  }

  const result = [];
  for (let i = 0; i < dataSource.length; i += colNum) {
    result.push(dataSource.slice(i, i + colNum));
  }

  // 执行分页 ( result 中每 row 条数据，为 1 页 )
  const pagingData = {};
  for (let j = 0; j < result.length; j += row) {
    pagingData[`page${j}`] = result.slice(j, j + row);
  }

  return {
    totalData: result,
    pagingData
  };
}

const styles = {
  item: {
    display: 'inline-block',
    margin: '1em',
    border: '1px solid #eee',
    padding: '1em',
    width: '10em'
  }
};

const genMapper = (dataSource) => {
  if (dataSource && dataSource.length > 0){
    const { pagingData } = assembleData(dataSource, gridConf.col, gridConf.row);
    return (Object.keys(pagingData) || []).map(key => {
      return {
        key,
        content: renderGrid(pagingData[key], key)
      };
    });
  }
  return null;
}

const renderShelf = (item, key) => {
  return (
    <div key={key} className="list-row">
      <ul className="list-row-content">
        {
          item.map(d => (
            <li key={d} className="item-wrapper" style={styles.item}>
              内容：{d}
            </li>
          ))
        }
      </ul>
    </div>
  );
}

/**
 * 生成每页 3 * 3 格子 ( 3 列 2 行)
 */
const renderGrid = (datas = [], key) => {
  return (
    <div className="platform-list-content">
      {datas.map((nd, index) => renderShelf(nd, `${key}-${index}`))}
    </div>
  );
}

const datas = ['cat', 'tom', 'app', 'any', 'red', 'black', 'hi', 'say', 'run', 'old', 'single'];

ReactDOM.render((
  <div style={{ width: '40em', height: "15em", display: 'inline-block' }}>
    <Shuttle
      dataSource={genMapper(datas)}
    />
  </div>
), _react_runner_);
```
---demoend

## props