Material-UI-React-Dialog-弹窗

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

这篇文章继续之前的文章，介绍如何创建弹窗。

MaterialUI官方给出了Dialog各种实现案例，但都很繁琐。因为弹窗经常被使用，所以我们需要极其简单的实现。

弹窗思路

模态弹窗必须打断用户当前流程，用户必须做出选择或操作。同时显示的模态弹窗最多1个，不能重叠。

所以，弹窗不像是一个界面元素，而更像一个全局功能，任何按钮可以直接呼叫它，让它显示出来。

弹窗分为几类：

警告窗，用户只能点确定关闭
确认窗：用户可以点确定或者取消
选择窗：用户可以从弹出的列表中选择一个
输入窗：用户可以输入一个或多个文字信息
内容窗：弹窗内可以显示更加复杂的内容和操作

我们把用户操作分为两类：

窗口自身的打开和关闭
窗口内容的选择和输入

我们再分析打开和关闭的实现细节：

把弹窗放在App.js里面实现，然后global全局化它
窗口打开，需要一个全局函数显示窗口,比如global.showDialog()
窗口关闭，需要触发一个设定的函数，所以打开时候要带一个函数作为参数onClose(confirmOrCancel)
窗口确认或取消两个按钮的名称可能改变，比如“是的，我同意”和“不，请取消”,所以还要增加两个参数confirmLabel,cancelLabel
取消按钮还可以不显示，所以还要有一个参数useCancelButton
窗口关闭的时候我们要清理以上信息，还要清楚内容，避免干扰下一次弹窗

尽管内部的交互可能更加复杂，但实现很简单，因为我们可以在窗口打开时候增加一个children参数，把整个内容区填进去就可以。

编写MyDialog.js

我们创建Utitlies/MyDialog.js。

这里输出了一个标准元素，当它被App的render使用的时候，会创造两个全局的方法用来显示和隐藏窗口。

一个默认的状态defaultState用来初始化和清空窗口的全部设置，包含了我们上面提到的各种参数。实际上大部分默认值都写在了render()函数里面。

/*
被加载时候componentDidMount添加全局方法：
$showMyDialog(state)，state格式请参照下面defaultState对象
$showMyDialog()
*/
import React from 'react'
import h from 'react-hyperscript'
import PropTypes from 'prop-types'
import deepmerge from 'deepmerge'


import Button from 'material-ui/Button'
import Dialog, {
    DialogTitle,
    DialogContent,
    DialogActions,
} from 'material-ui/Dialog'

const defaultState = {
    open: false, //窗口是否显示
    title: '', //标题
    content: '', //文字内容，优先使用
    children: [], //替换整个内容区，其次使用
    onClose: (confirmOrCancle) => {}, //关闭时执行的函数
    confirmLabel: '', //确认按钮上的文字
    cancelLabel: '', //取消按钮上的文字
    useCancelButton: true, //是否显示取消按钮
}

class MyDialog extends React.Component {
    constructor(props) {
        super(props)
        this.state = defaultState
    }

    show(state) {
        this.setState(deepmerge(state, {
            open: true
        }))
    }

    hide() {
        this.setState(deepmerge(defaultState, {
            open: false
        }))
    }

    componentDidMount() {
        let that = this;
        global.$showMyDialog = (state) => {
            that.show(state)
        }
        global.$hideMyDialog = () => {
            that.hide()
        }
    }

    render() {
        return h(Dialog, {
            open: this.state.open || false,
        }, [
            h(DialogTitle, {
                style: {
                    minWidth: '200px',
                }
            }, this.state.title || '弹窗标题'),
            h(DialogContent, {}, this.state.children || [
                h(DialogContentText, this.state.content || '弹窗提示文字')
            ]),
            h(DialogActions, [
                h(Button, {
                    onClick: () => {
                        this.setState({
                            open: false
                        })
                        this.state.onClose && this.state.onClose(true)
                    }
                }, this.state.confirmLabel || '确认'),
                this.state.useCancelButton && h(Button, {
                    onClick: () => {
                        this.setState({
                            open: false
                        })
                        this.state.onClose && this.state.onClose(false)
                    }
                }, this.state.cancelLabel || '取消')
            ])

        ])
    }
}

export default MyDialog

使用||在字段未定义的使用默认值，使用&&避免if判断的啰嗦语法

使用MyDialog

比起官方案例，MyDialog并不简单，但这是一劳永逸的做法，我们看一下具体使用。

首先，我们要在顶级的App.js中加载import MyDialog from '../Utilities/MyDialog'。

然后在render()的最后使用它，这样$showMyDialog和$hideMyDialog就被添加到global全局了：

    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),
        ]))
    }

好了，现在就绪了，我们可以在任意页面中使用，比如在HomePage.js的render()中直接使用它（因为App.js最先已经把$showMyDialog和$hideMyDialog全局化了，所以不需要再加载MyDialog模块了）：

            h(Button, {
                onClick: () => {
                    global.$showMyDialog({
                        onClose: (ok) => {
                            console.log('MyDialog said:',ok)
                        },
                        children: [h(Button, {
                            onClick: () => {
                                global.$hideMyDialog()
                                console.log('Home Page said:',that.state.title)
                            }
                        }, 'close dialog')]
                    })
                }
            }, 'open dialog'),

这里我们在页面上创建了open dialog按钮。

点击按钮将打开一个弹窗。

而弹窗内我们没有使用简单的文字内容content字段，而是使用了children向弹窗内添加了一个按钮close dialog，点击它会通过自身的onClick事件关闭弹窗，同时输出HomePage的state.title，而不是MyDialog的state。

如果点击下面的确认或取消按钮，则会调用onClose方法输出true或flase，我们可以利用这个知道用户点击了哪个按钮。

致力于让一切变得简单

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

END

Material-UI-React-Dialog-弹窗