apeman-react-spinner/lib/ap_spinner_style.jsx

/**
 * Style for ApSpinner.
 * @class ApSpinnerStyle
 */

'use strict'

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

/** @lends ApSpinnerStyle */
const ApSpinnerStyle = React.createClass({
  propTypes: {
    type: types.string,
    style: types.object
  },
  getDefaultProps () {
    return {
      type: 'text/css',
      style: {}
    }
  },
  statics: {
    styleData (config) {
      return {
        all: {
          '.ap-spinner': {
            textAlign: 'center',
            display: 'none'
          },
          '.ap-spinner.ap-spinner-enabled': {
            display: 'inline-flex',
            justifyContent: 'center',
            alignItems: 'center',
            width: '100%',
            height: '100%'
          },
          '.ap-spinner-icon': {
            display: 'inline-block',
            margin: '0 4px',
            transition: 'opacity 100ms',
            opacity: 1
          },
          '.ap-spinner-cover': {
            position: 'absolute',
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            zIndex: 4,
            justifyContent: 'center',
            alignItems: 'center',
            background: ApStyle.COVER_BACKGROUND,
            color: ApStyle.COVER_COLOR
          }
        },
        small: {},
        medium: {},
        large: {}
      }
    }
  },
  render () {
    const s = this
    let { props } = s

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

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

export default ApSpinnerStyle