apeman-react-toast/lib/ap_toast_style.jsx

/**
 * Style for ApToast.
 * @class ApToastStyle
 */

'use strict'

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

/** @lends ApToastStyle */
const ApToastStyle = React.createClass({
  propTypes: {
    style: types.object,
    normalColor: types.string,
    infoColor: types.string,
    warnColor: types.string,
    errorColor: types.string
  },
  getDefaultProps () {
    return {
      style: {},
      normalColor: ApStyle.NORMAL_COLOR,
      infoColor: ApStyle.INFO_COLOR,
      warnColor: ApStyle.WARN_COLOR,
      errorColor: ApStyle.ERROR_COLOR
    }
  },
  render () {
    const s = this,
      { props } = s

    let {
      normalColor,
      infoColor,
      warnColor,
      errorColor
    } = props

    let data = {
      '.ap-toast-group': {
        position: `fixed`,
        height: 0,
        top: `initial`,
        overflow: `visible`,
        left: 0,
        bottom: 24,
        right: 0,
        textAlign: 'center',
        padding: 0,
        zIndex: 49,
        display: 'flex',
        flexDirection: `column`,
        justifyContent: `flex-end`
      },
      '.ap-toast': {
        display: 'block',
        margin: `0 auto`
      },
      '.ap-toast-inner': {
        margin: `4px auto`,
        maxWidth: `420px`,
        display: 'inline-block',
        textAlign: 'left',
        padding: `4px`,
        boxShadow: `2px 2px 4px rgba(0,0,0,0.33)`,
        backgroundColor: `rgba(255, 255, 255, 0.95)`,
        color: `${normalColor}`,
        border: `4px solid ${normalColor}`,
        fontSize: `14px`,
        width: `240px`,
        borderRadius: `2px`
      },
      '.ap-toast-item': {
        display: 'block',
        padding: `2px 0`
      },
      '.ap-toast-item:active': {
        opacity: 0.8
      },
      '.ap-info-toast .ap-toast-inner': {
        color: `${infoColor}`,
        borderColor: `${infoColor}`
      },
      '.ap-warn-toast .ap-toast-inner': {
        color: `${warnColor}`,
        borderColor: `${warnColor}`
      },
      '.ap-error-toast .ap-toast-inner': {
        color: `${errorColor}`,
        borderColor: `${errorColor}`
      },
      '.ap-toast-item-icon': {
        display: 'inline-block',
        pointerEvents: 'none'
      },
      '.ap-toast-text': {
        display: 'inline-block',
        pointerEvents: 'none',
        margin: `0 2px`,
        cursor: `default`
      }
    }
    let smallMediaData = {}
    let mediumMediaData = {}
    let largeMediaData = {}
    return (
      <ApStyle data={ Object.assign(data, props.style) }
               smallMediaData={ smallMediaData }
               mediumMediaData={ mediumMediaData }
               largeMediaData={ largeMediaData }
      >{ props.children }</ApStyle>
    )
  }
})

export default ApToastStyle