apeman-react-photo/lib/ap_paper_photo_style.jsx

apeman react package for photo components.

/**
 * Style for ApPaperPhoto.
 * @class ApPaperPhotoStyle
 */

'use strict'

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

/** @lends ApPaperPhotoStyle */
const ApPaperPhotoStyle = React.createClass({
  propTypes: {
    style: types.object
  },
  getDefaultProps () {
    return {
      style: {}
    }
  },
  statics: {
    styleData (config) {
      let shadowSize = 15
      let shadowDense = 0.33

      return {
        all: {
          '.ap-paper-photo': {
            display: 'inline-block',
            boxShadow: '1px 1px 2px rgba(0,0,0,0.33)',
            border: '1px solid #E0E0E0',
            borderRadius: '2px',
            padding: '8px 8px 32px',
            position: 'relative',
            boxSizing: 'border-box',
            backgroundColor: 'white'
          },
          '.ap-paper-photo-shadow': {
            transform: 'rotate(-3deg)',
            background: `none repeat scroll 0 0 rgba(0, 0, 0, ${shadowDense})`,
            boxShadow: `0 ${shadowSize}px ${shadowSize}px rgba(0, 0, 0, ${shadowDense})`,
            position: 'absolute',
            top: 'auto',
            bottom: `${shadowSize}px`,
            width: '50%',
            height: `${shadowSize}px`,
            zIndex: '-1'
          },
          '.ap-paper-photo-shadow-right': {
            transform: 'rotate(3deg)',
            left: 'auto',
            right: `${shadowSize / 2}px`
          },
          '.ap-paper-photo .ap-image': {
            border: '1px solid #EEE',
            position: 'relative',
            zIndex: '1'
          },
          '.ap-paper-photo-text': {
            position: 'absolute',
            zIndex: '2'
          },
          '.ap-paper-photo.ap-photo-tappable': {
            cursor: 'pointer'
          },
          '.ap-paper-photo.ap-photo-tappable:hover': {},
          '.ap-paper-photo.ap-photo-tappable:hover .ap-paper-photo-shadow': {
            boxShadow: `0 ${shadowSize + 1}px ${shadowSize}px rgba(0, 0, 0, ${shadowDense})`
          },
          '.ap-paper-photo.ap-photo-tappable:active': {
            boxShadow: 'none'
          },
          '.ap-paper-photo.ap-photo-tappable:active .ap-paper-photo-shadow': {
            display: 'none'
          }
        }
      }
    }
  },
  render () {
    const s = this
    let { props } = s

    let { all, small, medium, large } = ApPaperPhotoStyle.styleData(props)

    return (
      <ApStyle data={ Object.assign(all, props.style) }
               smallMediaData={ small }
               mediumMediaData={ medium }
               largeMediaData={ large }
      >{ props.children }</ApStyle>
    )
  }
})

export default ApPaperPhotoStyle