weex-nuke/lib/node_modules/nuke-layout/src/mods/multi-row.jsx

基于 Rax 、Weex 的高性能组件体系 ~~

/** @jsx createElement */

'use strict';

import { createElement, PropTypes, Component, render } from 'rax';
import View from 'nuke-view';
import Grid from './grid';
import Col from './col';

class MultiRow extends Component {
  render() {
    const {
      style = {},
      renderCell = {},
      renderRow = {},
      dataSource = [],
      ...others
    } = this.props;
    return (
      <View style={style} {...others}>
        {this.getContent()}
      </View>
    );
  }
  renderEmpty() {
    return (
      <View />
    );
  }
  getContent() {
    const {
      dataSource,
      colStyle,
      gridStyle,
      rows,
      cells,
      renderCell,
      renderRow,
    } = this.props;
    const count = cells || rows;
    const renderFunc = renderCell || renderRow;
    const grids = [];
    let gridDataArr = [];
    if (count > 1) {
      for (let i = 0; i < dataSource.length; i++) {
        const index = Math.floor(i / count);
        if (i % count == 0) {
          gridDataArr = [];
        }
        gridDataArr.push(
          <Col style={colStyle}>{renderFunc(dataSource[i], i)}</Col>
        );
        if (i > 0) {
          if (i < dataSource.length - 1 && (i + 1) % count === 0) {
            grids.push(<Grid style={gridStyle}>{gridDataArr}</Grid>);
          }
          if (i == dataSource.length - 1) {
            const extraItemForMultiRow = count - dataSource.length % count;
            if (extraItemForMultiRow > 0 && extraItemForMultiRow < count) {
              for (let index = 0; index < extraItemForMultiRow; index++) {
                gridDataArr.push(
                  <Col style={colStyle}>{this.renderEmpty()}</Col>
                );
              }
            }
            grids.push(<Grid style={gridStyle}>{gridDataArr}</Grid>);
          }
        }
      }
    } else {
      dataSource.map((item, index) => {
        grids.push(renderFunc(item, index));
      });
    }
    return grids;
  }
}
MultiRow.propTypes = {
  /**
   * 每行列数 rows of each line
   */
  rows: PropTypes.number,
  /**
   * 渲染每个单元格的方法 render function
   */
  renderRow: PropTypes.func,
  /**
   * 数据源 dataSource
   */
  dataSource: PropTypes.array,
  colStyle: PropTypes.any,
  gridStyle: PropTypes.any,
};
MultiRow.defaultProps = {
  colStyle: {},
  gridStyle: {},
  dataSource: [],
  renderRow: () => { },
  rows: 1,
};

export default MultiRow;