apeman-react-dialog/lib/ap_yesno_dialog_style.jsx

/**
 * Style for ApYesnoDialog.
 * @constructor ApYesnoDialogStyle
 */

'use strict'

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

/** @lends ApYesnoDialogStyle */
let ApYesnoDialogStyle = React.createClass({
  propTypes: {
    scoped: types.bool,
    style: types.object,
    buttonHeight: types.number,
    highlightColor: types.string
  },
  getDefaultProps () {
    return {
      scoped: false,
      style: {},
      buttonHeight: 40,
      highlightColor: '#38E'
    }
  },
  render () {
    const s = this
    let { props } = s

    let buttonHeight = props.buttonHeight
    let highlightColor = props.highlightColor

    let data = {
      '.ap-yesno-dialog .ap-dialog-body': {
        paddingBottom: `${buttonHeight + 8}px`
      },
      '.ap-yesno-dialog .ap-dialog-close-button-icon': {
        display: 'none'
      },
      '.ap-yesno-dialog-control': {
        display: 'flex',
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(255,255,255,0.9)'
      },
      '.ap-yesno-dialog-button': {
        display: 'block',
        flex: 1,
        width: '50%',
        textAlign: 'center',
        border: '1px solid #EEE',
        margin: '0 -1px',
        color: `${highlightColor}`
      },
      '.ap-yesno-dialog-button-text': {
        display: 'inline-block',
        width: '100%',
        boxSizing: 'border-box',
        lineHeight: `${buttonHeight}px`
      },
      '.ap-yesno-dialog-button:hover': {
        cursor: 'pointer',
        opacity: 0.9
      },
      '.ap-yesno-dialog-button:active': {
        opacity: 0.6
      }
    }
    let smallMediaData = {}
    let mediumMediaData = {}
    let largeMediaData = {}
    return (
      <ApStyle scoped={ props.scoped }
               data={ Object.assign(data, props.style) }
               smallMediaData={ smallMediaData }
               mediumMediaData={ mediumMediaData }
               largeMediaData={ largeMediaData }
      >{ props.children }</ApStyle>
    )
  }
})

module.exports = ApYesnoDialogStyle