apeman-react-dialog/lib/ap_confirm_dialog_style.jsx

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

'use strict'

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

/** @lends ApConfirmDialogStyle */
let ApConfirmDialogStyle = React.createClass({
    propTypes: {
        scoped: types.bool,
        style: types.object,
        buttonHeight: types.number,
        highlightColor: types.string
    },
    getDefaultProps () {
        return {
            scoped: false,
            style: {},
            buttonHeight: 32,
            highlightColor: ApStyle.DEFAULT_HIGHLIGHT_COLOR,
            errorColor: ApStyle.ERROR_COLOR
        }
    },
    render () {
        const s = this,
            {props} = s;

        let buttonHeight = props.buttonHeight,
            highlightColor = props.highlightColor,
            errorColor = props.errorColor,
            checkboxHeight = 32;

        let data = {
                '.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`
                }
            },
            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 = ApConfirmDialogStyle;