apeman-react-image/lib/ap_image_style.jsx

apeman react package for image component.

/**
 * Style for ApImage.
 * @class ApImageStyle
 */

'use strict'

import React, {PropTypes as types} from 'react'
import {ApStyle} from 'apeman-react-style'

/** @lends ApImageStyle */
const ApImageStyle = React.createClass({
  propTypes: {

    style: types.object,
    backgroundColor: types.string
  },
  getDefaultProps () {
    return {

      style: {},
      backgroundColor: '#DDD',
      spinColor: 'rgba(255,255,255,0.5)'
    }
  },
  render () {
    const s = this
    let { props } = s

    let { backgroundColor, spinColor } = props

    let transitionDuration = 100

    let data = {
      '.ap-image': {
        backgroundColor: `${backgroundColor}`,
        overflow: 'hidden',
        textAlign: 'center',
        display: 'inline-block',
        position: 'relative'
      },
      '.ap-image img': {
        opacity: 0,
        transition: `width ${transitionDuration}ms, opacity ${transitionDuration}ms`
      },
      '.ap-image-ready img': {
        opacity: 1
      },
      '.ap-image-content': {
        position: 'absolute',
        display: 'inline-block'
      },
      '.ap-image-spinner': {
        position: 'absolute',
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        textAlign: 'center',
        display: 'inline-flex',
        zIndex: 8,
        backgroundColor: 'rgba(0,0,0,0.1)',
        color: `${spinColor}`,
        justifyContent: 'center',
        alignItems: 'center'
      },
      '.ap-image-notfound': {
        display: 'block',
        textAlign: 'center',
        color: 'rgba(0,0,0,0.1)',
        fontFamily: 'monospace'
      }
    }
    let smallMediaData = {}
    let mediumMediaData = {}
    let largeMediaData = {}
    return (
      <ApStyle
        data={ Object.assign(data, props.style) }
        smallMediaData={ smallMediaData }
        mediumMediaData={ mediumMediaData }
        largeMediaData={ largeMediaData }
      >{ props.children }</ApStyle>
    )
  }
})

export default ApImageStyle