npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-promisify-modal

v1.0.1

Published

可能是最完善的基于promise的对话框管理

Downloads

5

Readme

React-Promisify-Modal

命令式打开对话框, 并用 promise 返回结果


开始使用

安装

npm install -S react-promisify-modal
or
yarn add react-promisify-modal

使用

openModal(({show, onOk, onCancel}) => (
  <Modal
    title="对话框"
    visible={show}
    onOk={() => onOk('finally')}
    onCancel={onCancel}
  >
      ...
  </Modal>))

.then(result => {
  // 使用 result
  ...
})

Demo

Demo


特性

  • openModal直接打开对话框
  • openModal返回一个promise, 在then方法里可以用到对话框的返回值
  • 支持打开多重对话框
  • Modal安装在当前组件树里, 共享context
  • 使用typescript开发(暂时没有办法约定返回值类型, 后面会想办法补上)
  • 无依赖, 含类型注释共 143 行

限制:

  • 暂时只支持模态对话框, 非模态对话框可能关闭顺序有问题
  • 由于用到了hooks, 因此只支持 react 16.8.0 以上版本

思考

某复杂前端项目, 需要连续打开三层对话框, 每层对话框都要使用父容器的状态
可想而知, 无论如何优化, 父容器都非常臃肿, 而且操作非常不顺畅
后来采用渲染对话框到document.body, 脱离当前渲染树的黑客式做法, 转换成promise写法, 操作非常连贯
美中不足的是: 这样对话框无法用到context 另外有几个项目也做到了将 modal 转换为 promise, 但有的不支持多modal, 有的局限太大, 都不满足需求 所以有了本项目


原理

TODO


使用教程

1. 安装

npm install --save react-promisify-modal

2. 基础设置

需要在根组件上配置ModalProvider:

App.ts

import { ModalProvider } from 'react-promisify-modal';

const App = () => (
  <ModalProvider>
    <Page />
  </ModalProvider>
);

Page.ts

import React, {useContext}from 'react';
import {ModalContext, openModal} from 'react-promisify-modal';

const openModalCallback = () => {
  ...
  这里是打开对话框的语句, 见 第3步
  ...
}

return <Button onClick={openModalCallback}>打开对话框</Button>

3. 写 openModalCallback 方法

最简单的写法:

const openModalCallback = () => {
  // 第四步: 直接用 openModal 打开对话框, 并通过then获取返回值
  openModal(({ show, onOk, onCancel }) => {
    return (
      <Modal
        title="Basic Modal"
        visible={show}
        // 第五步: 通过onOk回传结果
        // onOk 可以用在 按钮 或 其它ui元素 中, 比如: <button onClick={()=>onOk(42)}
        // onOk 当然也可以用在异步方法里 , 比如 : save({}).then(result => onOk(result))
        // 它仅是一个方法
        onOk={() => onOk('finally')}
        onCancel={onCancel}
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    );
  })
    // 第六步: 对话框关闭后, 可以通过then接收到 第五步 的内容
    .then(result => console.log(result)); // <== 打印 'finally'

进阶写法: 注意openModal的参数, 其实是一个FunctionalComponent, 其签名为:

type PromisifyModalProps<R> = {
  show: boolean;
  onOk: onOkHandler<R>;
  onCancel: onCancelHandler;
};

type PromisifyModal<R = any> = React.FC<PromisifyModalProps<R>>;

所以你完全可以使用一个函数式组件, 避免将所有内容放在一起
那么, 如果对话框使用函数式组件, Modal 如何使用 Page 的内容状态呢? 通过属性下传即可( TODO: 补示范代码 )


License

MIT © g770728y