apeman-react-dialog/lib/ap_dialog_style.jsx

/**
 * Style for ApDialog.
 * @class ApDialogStyle
 */

'use strict'

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

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

    style: types.object,
    headerHeight: types.number
  },
  getDefaultProps () {
    return {
      style: {},
      headerHeight: 44
    }
  },
  statics: {
    styleData (config) {
      let {
        headerHeight,
        backgroundColor
      } = config

      return {
        all: {
          '.ap-dialog': {
            display: 'none',
            backgroundColor: 'transparent',
            position: 'fixed',
            left: 0,
            right: 0,
            bottom: 0,
            top: 0,
            zIndex: 99
          },
          '.ap-dialog-back': {
            backgroundColor: 'rgba(0,0,0,0.1)',
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 0,
            top: 0,
            zIndex: 1
          },
          '.ap-dialog-back-inner': {
            width: '100%',
            height: '100%',
            boxSizing: 'border-box',
            display: 'block'
          },
          '.ap-dialog-present': {
            display: 'block'
          },
          '.ap-dialog-inner': {
            height: '100%',
            width: '100%',
            boxSizing: 'border-box',
            position: 'relative',
            padding: '36px 24px',
            zIndex: 4,
            justifyContent: 'center',
            flexDirection: 'column'
          },
          '.ap-dialog-content': {
            overflow: 'auto',
            zIndex: 8,
            margin: '0 auto',
            height: 'auto',
            backgroundColor: '#FFF',
            border: '1px solid #E0E0E0',
            borderRadius: '8px',
            minHeight: '240px',
            maxWidth: '640px',
            width: '100%',
            boxSizing: 'border-box',
            position: 'relative'
          },
          '.ap-dialog-title': {
            lineHeight: `${headerHeight}px`,
            margin: 0,
            padding: 0,
            fontWeight: 'normal'
          },
          '.ap-dialog-close-button': {
            position: 'absolute',
            top: 0,
            right: 0,
            padding: '0 16px',
            fontSize: '16px',
            lineHeight: `${headerHeight}px`,
            display: 'inline-block',
            cursor: 'pointer',
            zIndex: 44
          },
          '.ap-dialog-close-button:hover': {
            opacity: 0.9
          },
          '.ap-dialog-close-button:active': {
            opacity: 0.6
          },
          '.ap-dialog-close-button-icon': {
            lineHeight: `${headerHeight}px`
          },
          '.ap-dialog-header': {
            display: 'block',
            position: 'absolute',
            zIndex: 2,
            textAlign: 'center',
            top: 0,
            left: 0,
            right: 0,
            height: `${headerHeight}px`,
            lineHeight: `${headerHeight}px`,
            boxSizing: 'border-box',
            borderBottom: '1px solid #F5F5F5',
            backgroundColor: 'rgba(255,255,255,0.9)'
          },
          '.ap-dialog-body': {
            padding: `${headerHeight + 8}px 16px 8px`,
            boxSizing: 'border-box',
            maxHeight: '100%',
            height: 'auto',
            width: '100%',
            overflow: 'auto'
          },
          '.ap-dialog-fix': {
            overflow: 'hidden !important'
          },
          '.ap-dialog-spinner': {
            position: 'absolute',
            background: `${ApStyle.COVER_BACKGROUND}`,
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            zIndex: 99
          }
        },
        small: {},
        medium: {},
        large: {}
      }
    }
  },
  render () {
    const s = this
    let { props } = s

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

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

export default ApDialogStyle