apeman-react-dialog/lib/ap_confirm_dialog_style.jsx

apeman react package for dialog component.

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

'use strict'

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

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

Object.assign(ApConfirmDialogStyle, {
  propTypes: {
    style: types.object,
    buttonHeight: types.number,
    highlightColor: types.string
  },

  defaultProps: {
    style: {},
    buttonHeight: 32,
    highlightColor: ApStyle.DEFAULT_HIGHLIGHT_COLOR,
    errorColor: ApStyle.ERROR_COLOR
  },
  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: {}
    }
  }
})

export default ApConfirmDialogStyle