joywok-material-components/components/toast/index.js

<h1 align="center"> Joywok Material Components </h1>

/**
 * 
 * @api {}   JwToast 基础信息提示控件
 * 
 * @apiParams {centerTop ｜ centerBottom} origin 信息提示控件所显示的位置
 * @apiParams {success | error | info } theme 主题
 * @apiParams {String} message 信息提示内容
 * @apiParams {Element} PrefixIcon 信息提示的前缀 Icon 图标
 * @apiParams {Boolean} open 控制显示与隐藏的状态变量
 * @apiParams {Function} onClose 关闭 JwToast 的回调函数
 * @apiParams {String} className 样式类名
 * @apiParams {Object} style 行内样式
 * 
 * @apiSuccessExample {json} 使用案例:
    import JwToast from "joywok-material-components/lib/toast"

    普通 Toast，居中，中上方位置，3000ms 后自动消失
    <JwToast 
        message="收藏成功"
        PrefixIcon={Collections}
        open={this.state.open} 
        onClose={() => this.setState({ open: false })} />
 */

import React from 'react';
import Snackbar from '@material-ui/core/Snackbar';
import OperateToast from  './OperateToast';
import CheckCircleIcon from '@material-ui/icons/CheckCircle';
import InfoIcon from '@material-ui/icons/Error';
import ErrorIcon from '@material-ui/icons/HighlightOff';
import './style/index.css';

const contentStyle = { minWidth: 200, padding: '0px 10px', borderRadius: '3px', height: 50, background: '#333333', color: '#fff', lineHeight: '50px', textAlign: 'center' };
const iconStyle = { verticalAlign: 'middle', fontSize: 20, marginRight: 10, opacity: 0.8 };

// Toast 位置下属性的映射表
const originMap = {
    centerTop: {
        anchorOrigin: { horizontal: 'center', vertical: 'top' },
        style: { top: 200, minWidth: 220 },
        autoHideDuration: 3000,
    },
    centerBottom: {
        anchorOrigin: { horizontal: 'center', vertical: 'bottom' },
        style: { bottom: 200, minWidth: 220 },
        autoHideDuration: 3000,
    }
}

// 主题映射表
const themeMap = {
    success: {
        ThemeIcon: CheckCircleIcon
    },
    error: {
        ThemeIcon: ErrorIcon
    },
    info: {
        ThemeIcon: InfoIcon
    },
}

class JwToast extends React.PureComponent {
    render() {
        let { origin, theme, message, PrefixIcon, className, ...other } = this.props;
        let { style, ...defaultProps } = originMap[origin || 'centerTop'];
        PrefixIcon = (PrefixIcon || PrefixIcon === null) ? PrefixIcon : themeMap[theme || 'success'].ThemeIcon;
        style = Object.assign({}, style, this.props.style);
        className = className ? `jw-snackbar ${className}` : 'jw-snackbar';

        return (
            <Snackbar
                {...defaultProps}
                {...other}
                className={className}
                style={style}
                open={this.props.open}>

                <div style={contentStyle}>
                    {PrefixIcon && <PrefixIcon style={iconStyle} />}
                    <span style={{ opacity: 0.8, verticalAlign: 'middle' }}>{message}</span>
                </div>
            </Snackbar>
        )
    }
}

// 具有操作功能的 Toast
JwToast.OperateToast = OperateToast;

export default JwToast;