apeman-react-list/doc/demo/demo.component.jsx

apeman react package for list component.

'use strict'

import React, {PropTypes as types} from 'react'

import ApList from '../../lib/ap_list'
import ApListStyle from '../../lib/ap_list_style'
import ApListBody from '../../lib/ap_list_body'
import ApListHeader from '../../lib/ap_list_header'
import ApListFooter from '../../lib/ap_list_footer'
import ApListItem from '../../lib/ap_list_item'
import ApListItemIcon from '../../lib/ap_list_item_icon'
import ApListItemText from '../../lib/ap_list_item_text'
import ApListItemArrowIcon from '../../lib/ap_list_item_arrow_icon'
import ApListMoreButton from '../../lib/ap_list_more_button'
import ApListBar from '../../lib/ap_list_bar'
import ApListBarMessage from '../../lib/ap_list_bar_message'
import {ApSpinnerStyle} from 'apeman-react-spinner'
import {ApForm, ApFormStyle} from 'apeman-react-form'
import {ApSearch, ApSearchStyle} from 'apeman-react-search'

const Demo = React.createClass({
  getInitialState () {
    return {
      spinning: false
    }
  },
  render () {
    const s = this,
      { state } = s
    return (
      <div>
        <div>
          <ApListStyle highlightColor='#b35600'/>
          <ApSpinnerStyle highlightColor='#b35600' />
          <ApFormStyle highlightColor='#b35600' />
          <ApSearchStyle highlightColor='#b35600' />
          <ApSearch highlightColor='#b35600' />
          <h3>Disclosure List</h3>
          <ApList>
            <ApListItem onTap={ (e) => { s.handleTap(e, 'disclosure 01') } }
                        data={ {id: 1} }
                        disclosure={ true }>
              <ApListItemText>Item 01</ApListItemText>
            </ApListItem>
            <ApListItem onTap={ (e) => { s.handleTap(e, 'disclosure 02') } }
                        data={ {id:2} }
                        disclosure={ true }>
              <ApListItemText>
                <b>Item 02</b>
              </ApListItemText>
            </ApListItem>
            <ApListItem onTap={ (e) => { s.handleTap(e, 'disclosure 03') } }
                        data={ { id: 3 } }
                        disclosure={ true }
                        title='Item 03'
                        subTitle='Sub item 03'
            />
          </ApList>
        </div>
        <div>
          <h3>Image List</h3>
        </div>
        <ApList spinning={ state.spinning }>
          <ApListItem imgSrc='./images/04.jpg'>
            <ApListItemText>Item 03</ApListItemText>
          </ApListItem>
          <ApListItem imgSrc='./images/05.jpg'>
            <ApListItemText>
              <b>Item 04</b>
            </ApListItemText>
          </ApListItem>
          <ApListItem imgSrc='./images/05.jpg'
                      title='Item 05'
                      subTitle='Item 06'/>
        </ApList>
        <div>
          <h3>Paging List</h3>
        </div>
        <ApList>
          <ApListBar>
            <ApListBarMessage>This is list bar</ApListBarMessage>
            <ApForm>
              <ApSearch righted={ true }/>
            </ApForm>
          </ApListBar>
          <ApListHeader>
            This is the header
          </ApListHeader>
          <ApListBody>
            <ApListItem onTap={ (e) => { s.handleTap(e, 'page list') } }
                        disclosure={ true }
                        title='Item 01'/>
          </ApListBody>
          <ApListFooter spinning={state.spinning}>
            <ApListMoreButton enabled={ true }
                              onTap={ (e) => { s.handleTap(e, 'paging list') } }/>
          </ApListFooter>
        </ApList>

        <div>
          <h3>Empty List</h3>
        </div>
        <ApList minHeight={64}
                empty={ true }
                alt='Oops! No data available.'>
          <ApListBar>
            <ApListBarMessage>This is list bar</ApListBarMessage>
            <ApForm>
              <ApSearch righted={ true }/>
            </ApForm>
          </ApListBar>
        </ApList>
      </div>
    )
  },

  handleTap (ev, name) {
    console.log('Tapped: ', name, ev.data)
    const s = this
    s.setState({ spinning: true })
    setTimeout(() => {
      s.setState({ spinning: false })
    }, 1200)
  }
})

export default Demo