apeman-react-dialog/lib/ap_dialog_style.jsx

apeman react package for dialog component.

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

'use strict'

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

/** @lends ApDialogStyle */
class ApDialogStyle extends Component {
  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>
    )
  }
}

Object.assign(ApDialogStyle, {
  propTypes: {
    style: types.object,
    headerHeight: types.number
  },

  defaultProps: {
    style: {},
    headerHeight: 44
  },
  styleData (config) {
    let { CONTENT_WIDTH } = ApStyle
    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.33)',
          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 #DDD',
          borderRadius: '8px',
          minHeight: '240px',
          maxWidth: CONTENT_WIDTH,
          width: '100%',
          boxSizing: 'border-box',
          position: 'relative',
          boxShadow: '2px 2px 2px rgba(0,0,0,0.3)'
        },
        '.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: {}
    }
  }

})

export default ApDialogStyle