/** @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';
import Header from 'nuke-header';

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}>
        <Header style={styles.header}>
          <View style={styles.dataHeaderItem}><Text style={styles.headerText}>表头</Text></View>
        </Header>
        {
          this.state.data.map((item, index) => (
            <Cell key={`cell_${index}`}>
              <View style={[styles.cellItem]}>
                <Text style={styles.text}>{item}</Text>
              </View>
            </Cell>
          ))
        }
      </ListView>
    );
  }
}
const styles = {
  listContainer: {
    flex: 1,
  },
  header: {
    width: '750rem',
    backgroundColor: '#ff6600',
    height: '100rem',
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerText: {
    color: '#ffffff',
  },
  cellItem: {
    width: '750rem',
    height: '300rem',
    paddingTop: '20rem',
    flexDirection: 'row',
    borderBottomWidth: '1rem',
    borderBottomStyle: 'solid',
    borderBottomColor: '#cccccc',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#666666',
  },
};
render(<Demo />);