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
    }
  },
  statics: {
    styleData (config) {

      let {
        normalColor,
        infoColor,
        warnColor,
        errorColor
      } = config
      return {
        all: {
          '.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'
          }
        }
      }
    }
  },
  render () {
    const s = this
    let { props } = s

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

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

export default ApToastStyle