apeman-react-image

'use strict'
 
import React, {PropTypes as types} from 'react'
import {ApSpinnerStyle} from 'apeman-react-spinner'
import ApImage from '../../lib/ap_image'
import ApImageStyle from '../../lib/ap_image_style'
 
const images = (function () {
  let images = []
  for (let i = 0; i < 200; i++) {
    images.push(`http://dummyimage.com/300.png/${i % 9}33/FFF?i=${i}`)
  }
  return images
})()
 
const IMAGE_URL = 'https://raw.githubusercontent.com/apeman-asset-labo/apeman-asset-images/master/dist/dummy/01.jpg'
const Demo = React.createClass({
  render () {
    let width = 204
    let height = 204
    let style = { margin: '16px' }
    return (
      <div className='screenshot-target'>
        <ApSpinnerStyle />
        <ApImageStyle />
        <ApImage src={ IMAGE_URL }
                 width={ width }
                 height={ height }
                 scale="fit"
                 style={ style }
        />
        <ApImage src={ IMAGE_URL }
                 width={ width }
                 height={ height }
                 scale="fill"
                 style={ style }
        />
        <ApImage src={ IMAGE_URL }
                 width={ width }
                 height={ height }
                 scale="none"
                 style={ style }
        />
        <ApImage src="./images/__not_found__"
                 width={ width }
                 height={ height }
                 scale="none"
                 style={ style }
        />
        <br/>
        <ApImage src={ IMAGE_URL }
                 style={ style }
        />
        <div style={ {
        display: 'block',
        overflowX: 'scroll',
        height: '140px',
        width: '100%',
        whiteSpace: 'nowrap'
        }}>
          {
            images.map((url, i) => (
              <ApImage src={ url } key={ i }
                       width={ 140 }
                       height={ 140 }
                       scale="fit"
              />
            ))
          }
        </div>
      </div>
    )
  }
})
 
export default Demo