apeman-react-dialog/lib/ap_confirm_dialog_style.jsx

/**
 * Style for ApConfirmDialog.
 * @class ApConfirmDialogStyle
 */

'use strict'

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

/** @lends ApConfirmDialogStyle */
const ApConfirmDialogStyle = React.createClass({
  propTypes: {
    style: types.object,
    buttonHeight: types.number,
    highlightColor: types.string
  },
  getDefaultProps () {
    return {
      style: {},
      buttonHeight: 32,
      highlightColor: ApStyle.DEFAULT_HIGHLIGHT_COLOR,
      errorColor: ApStyle.ERROR_COLOR
    }
  },
  statics: {
    styleData (config) {
      let {
        buttonHeight,
        highlightColor,
        errorColor
      } = config
      let checkboxHeight = 32
      return {
        all: {
          '.ap-confirm-dialog .ap-dialog-body': {
            paddingBottom: `${buttonHeight + 8}px`,
            textAlign: 'center'
          },
          '.ap-confirm-dialog .ap-dialog-close-button-icon': {},
          '.ap-confirm-dialog-control': {
            display: 'block',
            textAlign: 'center',
            position: 'relative',
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: `rgba(255,255,255,0.9)`,
            padding: `16px 0`
          },
          '.ap-confirm-dialog-button': {
            display: 'inline-block',
            width: `80%`,
            textAlign: 'center',
            border: `1px solid #EEE`,
            margin: `0 auto`,
            background: `${highlightColor}`,
            color: 'white',
            boxSizing: `border-box`,
            maxWidth: `320px`
          },
          '.ap-confirm-dialog-button-disabled, .ap-confirm-dialog-button-disabled:hover, .ap-confirm-dialog-button-disabled:active': {
            cursor: `default`,
            boxShadow: 'none',
            color: `#888`,
            borderColor: `#888`,
            backgroundColor: `#F0F0F0`
          },
          '.ap-confirm-dialog-checkbox': {
            margin: `8px auto`,
            lineHeight: `${checkboxHeight}px`,
            textAlign: 'left'
          },
          '.ap-confirm-dialog-checkbox i:before': {
            lineHeight: `${checkboxHeight}px`
          },
          '.ap-confirm-dialog-message': {
            fontSize: `smaller`,
            padding: `16px 0`
          },
          '.ap-confirm-dialog-err': {
            fontSize: `smaller`,
            textAlign: 'center',
            color: `${errorColor}`,
            fontStyle: `italic`
          }
        },
        small: {},
        medium: {},
        large: {}
      }
    }
  },
  render () {
    const s = this
    let { props } = s

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

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

export default ApConfirmDialogStyle