UIStack

UIStack 目的是为了解决多层弹窗的问题，新的弹窗关闭时必须返回之前的弹窗，并且在新的弹窗弹出时之前的弹窗必须隐藏起来，这类似游戏的UI系统中我们建立的UI栈。UIStack 将提供一种在react使用的、可以灵活增量部署的、高效的弹窗栈。

使用

import React from 'react';
import 'antd/dist/antd.css';
import './App.css';
// 引用如下内容
import UIStack, { useUIStack } from './uistack';
import { Button, Modal } from 'antd';
import TestJSX from './TestJSX';

function TestModal({ index, visible }: { index?: number, visible?: boolean }) {
  // 在需要弹出ui的地方调用useUIStack钩子
  const stack = useUIStack()
  return <>
    <Modal
      visible={visible}
      maskClosable={false}
      onCancel={() => {
        // 在合适的地方将<Modal/> 栈顶组件弹出栈堆,并且直接释放.
        stack.pop()
        // 也可以直接关闭整个UI栈，这将弹出所有窗口，再次打开时不会再保留这些窗口以及它们的状态
        // stack.close()
      }}
      onOk={() => {
        // 也可以直接将Modal推入栈, 这种写法将visible下放至开发者自行处理,UIStack仅仅只是告诉你该隐藏了不会做多余的动作.
        stack.push(visible =>
          <Modal
            onCancel={() => {
              // 在这里UIStack做了刷新处理,它将永远指向栈顶,无论你从哪里调用它.
              stack.pop()
            }}
            visible={visible}
            maskClosable={false}
          >
            Can visible
          </Modal>
        )

        // 这里还有一种写法,可以直接将组件推入栈中,UIStack将负责他们的渲染处理.
        // 为了适配大多数的UI框架,UIStack将不会做portal处理.
        // 所以在隐藏窗口时,UIStack会将他们直接移出dom树.
        // 这会导致窗口的缓存信息丢失.
        // 这种写法一般用来支持简单页面.
        // 一般情况下,visible下放式的写法将足够支持大部分情况,除非你知道你在做什么,否则应该永远使用visible下放式的写法.
        stack.push(
          <Modal
            onCancel={() => {
              // 在这里我们做了刷新处理,它将永远指向栈顶,无论你从哪里调用它.
              stack.pop()
            }}
            visible
            maskClosable={false}
          >
            Can visible
          </Modal>
        )
      }}
    >
      modal{index ? index : 1}
    </Modal >
  </>
}


function Test1() {
  const stack = useUIStack()
  return <>
    <Button onClick={() => {
      // 在合适的地方将<Modal/> 组件推入栈堆
      stack.push(visible => <TestModal visible={visible} />)
    }}>
      test Modal
    </Button>
  </>
}

function App() {
  return (
    // 用一个栈组件将所需的组件包裹起来，ui界面将会刷新在内容最下方。类似如下内容：
    <UIStack>
      <Test1 />
    </UIStack>
    // 将会被渲染成类似这样的结构
    // <>
    //    <Test1 />
    //    <Modal/>
    // </>
  );
}

export default App;