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

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

/**
 * 
 * @api {} OperateToast 具有操作项的信息提示控件
 * 
 * @apiParams {Boolean} open 控制 OperateToast 显示与隐藏的状态变量
 * @apiParams {Function} onClose 关闭 OperateToast 的回调函数
 * @apiParams {leftBottom ｜ rightBottom} origin 信息提示控件所显示的位置
 * @apiParams {normal | success | error | info } theme 主题颜色
 * @apiParams {String} message 信息提示内容
 * @apiParams {Element} PrefixIcon 信息提示的前缀 Icon 图标
 * @apiParams {Array<Element> | Element} action 自定义操作项元素
 * @apiParams {String} className 样式类名
 * @apiParams {Object} style 行内样式
 * 
 * @apiSuccessExample {json} 使用案例:
    import JwToast from "joywok-material-components/lib/toast"
    const OperateToast = JwToast.OperateToast;

    1、需要手动关闭 Toast，左下方 / 右下方
    <OperateToast
        origin="leftBottom"
        message="分派成功"
        open={this.state.open2} 
        onClose={() => this.setState({ open2: false })} />

    2、具有自定义操作项的 Toast，左下方 / 右下方
    <JwToast.OperateToast
        message="“人物插画.png”已保存至 “插画”"
        theme="info"
        action={[
            <span style={{ color: '#3297FC', marginRight: 16 }}>撤销</span>
        ]}
        open={this.state.open3} 
        onClose={() => this.setState({ open3: false })} />
 */

import React from 'react';
import Snackbar from '@material-ui/core/Snackbar';
import SnackbarContent from '@material-ui/core/SnackbarContent';
import CloseIcon from '@material-ui/icons/Close';
import CheckCircleIcon from '@material-ui/icons/CheckCircle'; // 校验成功Icon
import ErrorIcon from '@material-ui/icons/Error';
import './style/index.css';

const msgEllipsisStyle = { display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: 5, overflow: 'hidden' };

// Toast 位置下属性的映射表
const originMap = {
    leftBottom: {
        anchorOrigin: { horizontal: 'left', vertical: 'bottom' },
        style: { left: 30, bottom: 30, width: 340 },
        autoHideDuration: null,
    },
    rightBottom: {
        anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
        style: { right: 30, bottom: 30, width: 340 },
        autoHideDuration: null,
    }
}

// 主题映射表
const themeMap = {
    normal: { // 默认主题，深黑色
        color: '#fff',
        background: '#333333',
        ThemeIcon:  CheckCircleIcon
    },
    success: {
        color: '#fff',
        background: '#43a047',
        ThemeIcon: CheckCircleIcon
    },
    error: {
        color: '#fff',
        background: '#DB4942',
        ThemeIcon: ErrorIcon
    },
    info: {
        color: '#494949',
        background: '#fff',
        ThemeIcon: null
    },
}

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

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

                <SnackbarContent 
                    style={{ minWidth: 'auto', width: '100%', ...themeStyle}}
                    message={
                        <div style={{ lineHeight: '22px', display: 'flex', alignItems: 'center' }}>
                            {ThemeIcon ? 
                                <ThemeIcon style={{ fontSize: 20, marginRight: 16 }} />
                                : null
                            }
                            
                            <div style={{ flex: 1 }}>
                                <span style={msgEllipsisStyle}>{message}</span>
                            </div>

                            <div style={{ cursor: 'pointer', marginLeft: 16 }}>
                                {action && action}
                                <CloseIcon style={{ verticalAlign: 'middle', fontSize: 20 }} onClick={this.props.onClose} />
                            </div>
                        </div>
                    }
                />
            </Snackbar>
        )
    }
}

export default OperateToast;