# react-floatlayer

**Repository Path**: library_file_dependency/react-floatlayer

## Basic Information

- **Project Name**: react-floatlayer
- **Description**: 基于发布订阅模式的浮动层管理
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2019-12-21
- **Last Updated**: 2021-06-30

## Categories & Tags

**Categories**: react-extensions

**Tags**: None

## README

## react-floatlayer
* 基于异步
* 支持递归和调用
* 基于发布订阅模式
* promise形式的api
* 完全基于flux架构，可搭配redux、mobx等数据管理库使用

> **设计理念**

该装饰器设计之初目的是为了抽离业务弹出层组件的编写逻辑。一般情况下开发者都希望业务弹出层能像`window.alert` 这样的方式调用，并且返回一个promise对象用于流程控制。之所以这样做，是为了规范化弹窗组件的定义方式，为弹窗组件提供统一的API。

> **withFloatLayer装饰器使用方法**

该装饰器需要传入一个JSON对象，JSON的键名将作为调用的方法，键的值是要渲染的弹出层

```react
import React from "react";
import {message} from "antd";
import withFloatLayer from "@yushicheng/react-floatlayer";
import TestDialog from "@/TestDialog";

@withFloatLayer({
    //callTestDialog就是唤醒弹出层的方法
    callTestDialog:TestDialog
})
class TestPage extends React.Component {
    render(){
      	return (
    	<button onClick={this.handleClick}>{"唤醒弹窗"}</button>
    )};
   	handleClick=async ()=>{
        try{
            // open方法会唤醒弹窗
            await this.porps.$floatLayer.callTestDialog.open();
            // 等待open方法后使用close方法关闭并销毁弹窗
            this.porps.$floatLayer.callTestDialog.close()
        }catch(error){
            // 捕获弹窗中reject方法抛出的异常
            message.error(error.message)
        }
    };
}

export default TestPage;
```

> **我该如何定义弹出层？**

接着上面的例子，刚刚我简化了TestDialog的定义过程，现在看看我们应该怎么定义这个弹窗组件;

**$promise的API介绍**

| 名称    | 描述                           |
| ------- | ------------------------------ |
| resolve | 控制异步流程成功的钩子函数     |
| reject  | 控制异步流程失败的钩子函数     |
| close   | 特殊封装，用于在内部关闭弹出层 |

```react
import React from "react";
import {Modal} from "antd";

/*
	这个组件不需要任何的装饰器,定义方法类似于react-router中<Route/>组件中的子组件
	一旦这个组件放在了withFloatLayer装饰器中,在这个组件的props上就会多出一个$promise对象
	用于控制异步流程
*/

export default class TestDialog extends React.Component {
    render(){
        return (
    	<Modal 
            visible={true}
            title="测试弹窗" 
            onOk={this.handleResolve} 
            onCancel={this.handleCancel}
        >
        	<div>{"展示的内容"}</div>	
        </Modal>
    )};
    handleResolve=()=>{
        //使用props上的promise接口
        this.props.$promise.resolve();
    };
	handleCancel=()=>{
      	this.props.$promise.close();  
    };
}

```