apeman-react-toast/lib/ap_toast_style.jsx

apeman react package for toast components.

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

"use strict";

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

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

        let normalColor = props.normalColor,
            infoColor = props.infoColor,
            warnColor = props.warnColor,
            errorColor = props.errorColor;

        let data = {
                '.ap-toast-group': {
                    position: `fixed`,
                    height: `1px`,
                    top: `initial`,
                    left: 0,
                    bottom: 24,
                    right: 0,
                    textAlign: `center`,
                    padding: `4px 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`
                }
            },
            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 = ApToastStyle;