/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import ListView from 'nuke-list-view';
import Cell from 'nuke-cell';

const styles = {
  listContainer: {
    flex: 1,
  },
  cellItem: {
    width: '750rem',
    height: '200rem',
    paddingTop: '20rem',
    flexDirection: 'row',
    borderBottomWidth: '1rem',
    borderBottomStyle: 'solid',
    borderBottomColor: '#cccccc',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#666666',
  },
};
class Demo extends Component {
  constructor() {
    super();
    this.state = {
      data: ['列表1', '列表2', '列表3', '列表4', '列表5', '列表6', '列表7'],
    };
  }
  render() {
    return (
      <ListView _autoWrapCell={false} showScrollbar={false} style={styles.listContainer}>
        {this.state.data.map((item, index) => (
          <Cell key={`cell_${index}`}>
            <View style={[styles.cellItem]}>
              <Text style={styles.text}>{item}</Text>
            </View>
          </Cell>
        ))}
      </ListView>
    );
  }
}

render(<Demo />);