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;

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

/*
	Этот компонент не требует какого-либо декоратора. Определение метода похоже на дочерние компоненты в компоненте <Route> в react-router.
	Как только этот компонент помещается в декоратор withFloatLayer, объект $promise добавляется к его props для управления асинхронным процессом.
*/

export default class TestDialog extends React.Component {
    render(){
        return (
    	<Modal 
            visible={true}
            title="Тестирование всплывающего окна" 
            onOk={this.handleResolve} 
            onCancel={this.handleCancel}
        >
        	<div>{"Отображаемый контент"}</div>	
        </Modal>
    )};
    handleResolve=()=>{
        // Использует интерфейс promise в props
        this.props.$promise.resolve();
    };
	handleCancel=()=>{
      	this.props.$promise.close();  
    };
}