apeman-react-dialog/lib/ap_dialog_style.jsx

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

'use strict'

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

/** @lends ApDialogStyle */
const ApDialogStyle = React.createClass({
  propTypes: {
    scoped: types.bool,
    style: types.object,
    headerHeight: types.number
  },
  getDefaultProps () {
    return {
      scoped: false,
      style: {},
      headerHeight: 44
    }
  },
  render () {
    const s = this,
      {props} = s;

    let headerHeight = props.headerHeight;

    let data = {
        '.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
        }
      },
      smallMediaData = {},
      mediumMediaData = {},
      largeMediaData = {}
    return (
      <ApStyle scoped={ props.scoped }
               data={ Object.assign(data, props.style) }
               smallMediaData={ smallMediaData }
               mediumMediaData={ mediumMediaData }
               largeMediaData={ largeMediaData }
      >{ props.children }</ApStyle>
    )
  }
})

module.exports = ApDialogStyle;