react-modal-manager: 项目接入

安装相关依赖

# 项目
yarn add @jswork/react-modal-manager
# 开发依赖
yarn add @jswork/scan-modules

准备 providers/modal-manager

mkdir -p ./src/shared/providers

准备 modals 目录

mkdir -p ./src/shared/modals

参考代码 ./src/shared/providers/modal-manager.tsx

import { scanVite } from '@jswork/scan-modules';
import ReactModalManager from '@jswork/react-modal-manager';
import { PropsWithChildren } from 'react';

/* prettier-ignore */
const moduleModalFiles = import.meta.glob(['../modals/*.tsx', '../modals/**/index.tsx'], { eager: true });
const modulesModal = scanVite(moduleModalFiles, { modules: '/modals/' });

const Provider = (props: PropsWithChildren) => {
  return (
    <ReactModalManager modules={modulesModal} harmony>
      {props.children}
    </ReactModalManager>
  );
};

export default Provider;

另一个目录：modals/a-modal.tsx

/**
 * @Author: aric 1290657123@qq.com
 * @Date: 2025-04-09 13:54:37
 * @LastEditors: aric 1290657123@qq.com
 * @LastEditTime: 2025-04-09 14:01:34
 */
import { FC } from 'react';
import { Modal } from 'antd';

const Anonymous: FC = () => {
  const { visible, data } = nx.$modal.value('a-modal');

  return (
    <Modal title="a-modal" open={visible} onCancel={nx.$modal.dismissAll}>
      <h1 className="text-3xl">Hello World</h1>
      <p className="text-2xl">surprise!</p>
    </Modal>
  );
};

export default Anonymous;

打开 modal

<Button
  className="w-full"
  onClick={() => nx.$modal.present('a-modal')}>
  surprise
</Button>

示例结构

❯ tree -L 2 shared/modals shared/providers
shared/modals
└── a-modal.tsx
shared/providers
└── modal-manager.tsx