Material-UI-React-Snackbars-提示

React+Electron桌面应用开发文章索引

这篇文章继续之前的文章。比起弹窗，底部弹出的小提示更加频繁，这次我们介绍如何创建小提示Snackbar。

MaterialUI官方给出了Snackbar实现案例，也很繁琐，小提示本质上也是全局性的，但与弹窗略有区别的是，小提示可以同时出现多个。

这次我们还是想办法把它统一化。

---

思路分析

snackbar的功能特征：

• 和弹窗一样，包含内容区（纯文字，或文字+按钮）和一个关闭按钮

• snackbar并不打断用户操作，大多时候会几秒后自动消失

• 所以可能有多个snackbar同时出现

• snackbar看上去也是全局性的功能，但实际应该是多个元素

• 在任意页面都可以创建snackbar

• snackbar都应该放在App的某个容器里面统一接管,添加或移除

• 我们需要一个快速创建snackbar的全局功能global.$addSnackbar(state)

---

编写代码

创建Utitlies/MySnackbar.js。

实现思路是：

• 创建一个snackbars局部变量，用来存放所有实例，这样就可以跨越执行实例.setState({open:false})方法关闭snackbar。（参考xset的实现思路）

• 实现全局化的global.$closeMySnackBar通过id关闭特定snackbar方法

• 创建一个MySnackbar类，constructor构建函数里面把每个实例通过id添加到snackbars，以后就能使用snackbars[id]来获取

• MySnackbar类中render()通过style实现了snackbar的堆叠效果，通过覆盖onClose关闭方法实现autoHideDuration倒计时结束自动关闭

• MySnackbars类是所有snackbar界面dom的容器，全局化了global.$addMySnackbar方法用来添加新的snackbar

• id这个参数专门用来配合snackbars变量管理和获取创建的MySnackbar实例

/*
被加载时候componentDidMount添加全局方法：
$addSnackbar(state,id)，state格式请参照官方API说明,必须通过id才能自定义关闭snackbar的按钮
$closeMySnackBar(id)，关闭特定的snackbar
*/
import React from 'react'
import h from 'react-hyperscript'
import deepmerge from 'deepmerge'

import Button from 'material-ui/Button'
import Snackbar from 'material-ui/Snackbar'

let snackbars = {} //全部snackbar实例列表，关闭snackbar时候使用

//输出关闭特定snackbar的全局方法
global.$closeMySnackBar = (id) => {
    if (snackbars[id]) {
        snackbars[id].setState({
            open: false
        })
    }
}

/*
自动接收snackbar管理的类
能够自动计时关闭
*/
class MySnackbar extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            open: true
        }
    }

    componentDidMount() {
        if (this.props.id) {
            snackbars[this.props.id] = this
        }
    }

    render() {
        let props = deepmerge(this.props, {
            open: this.state.open,
            style: {
                display: 'block',
                position: 'relative',
                height: 56,
            },
            onClose: (event, reason) => {
                this.props.onClose && this.props.onClose()
                if (reason !== 'clickaway') this.setState({
                    open: false
                })
            },
        })
        return h(Snackbar, props)
    }
}

//App中所有snackbar的容器管理
class MySnackbars extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            list: []
        }
    }

    add(state, id) {
        console.log('xx', id)
        let newOne = h(MySnackbar, deepmerge(state, {
            open: true,
            id: id //关闭snackbar时候使用
        }))
        this.state.list.push(newOne)
        this.setState({
            list: this.state.list
        })
    }

    componentDidMount() {
        let that = this;
        global.$addMySnackbar = (state, id) => {
            that.add(state, id)
        }
    }

    render() {
        //嵌套两层div把所有snackbar固定在底部中间
        return h('div', {
            style: {
                bottom: 8,
                position: 'fixed',
                textAlign: 'center',
                width: '100%'
            }
        }, [
            h('div', {
                style: {
                    display: 'inline-block',
                }
            }, this.state.list)
        ])
    }
}

export default MySnackbars

---

使用MySnackbars

首先我们还是在App.js中引入import MySnackbar from '../Utilities/MySnackbars',并在render()中创建放置snackbars的容器

    render() {
        let that = this
        const css = this.props.classes

        return h(MuiThemeProvider, {
            theme: Theme,
        }, h(Grid, {
            container: false,
            className: css.app,
        }, [
            h(Pages[this.state.currentPageName]),
            h(MyDialog),
            h(MySnackbar),
        ]))
    }

然后我们就可以在其他页面中使用了，比如：

            h(Button, {
                onClick: () => {
                    let id = Math.random()
                    global.$addMySnackbar({
                        anchorOrigin: {
                            vertical: 'bottom',
                            horizontal: 'center',
                        },
                        autoHideDuration: 3000,
                        onClose: () => {
                            console.log('Home Page said:', that.state.title)
                        },
                        message: 'Hello from MySnackbar!',
                        action: [
                            h(Button, {
                                key: 'any',//必须要有这个，值任意
                                color: 'secondary',
                                onClick: () => {
                                    global.$closeMySnackBar(id)
                                    console.log('Home Page said:', that.state.title)
                                }
                            }, '关闭')
                        ],
                    }, id)
                }
            }, 'add snackbar'),

这生成一个按钮

点击它弹出

多次点击弹出多个

点击紫色按钮可以关闭某个snackbar，或者超过3秒钟自动消失

---

致力于让一切变得简单

如果您发现文章错误，请不吝留言指正；
如果您觉得有用，请点喜欢；
如果您觉得很有用，欢迎转载~

---

END