apeman-react-toast/lib/ap_toast_style.jsx

apeman react package for toast components.

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

      let {
        normalColor,
        infoColor,
        warnColor,
        errorColor,
        transitionDuration
      } = 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'
          },
          '.ap-toast-transition-enter': {
            lineHeight: '0em'
          },
          '.ap-toast-transition-enter-active': {
            lineHeight: '1em',
            padding: '2px 0',
            transition: `padding ${transitionDuration}ms line-height ${transitionDuration}ms`
          },
          '.ap-toast-transition-leave': {
            lineHeight: '1em',
            padding: '2px 0'
          },
          '.ap-toast-transition-leave-active': {
            lineHeight: '0em',
            padding: '0',
            transition: `padding ${transitionDuration}ms line-height ${transitionDuration}ms`
          }
        }
      }
    }
  },
  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