wangsijie / antd-prompt

An ant.design helper that auto create a Modal with an optional message prompting the user to input some text.

antd-prompt

An ant.design helper that auto create a Modal with an optional message prompting the user to input some text.

Support antd v4.

Installation

npm i antd-prompt

Usage

import React, { component } from 'react';
import ReactDOM from 'react-dom';
import prompt from 'antd-prompt';
import { Button, message } from 'antd';

class App extends Component {
    handler = async () => {
        try {
            const name = await prompt({
                title: "Please enter name",
                placeholder: "Your name",
                rules: [
                    // check this link for more help: https://ant.design/components/form/#Validation-Rules
                    {
                        required: true,
                        message: "You must enter name"
                    }
                ],
                modalProps: {
                    width: '80%'
                }
            });
        } catch (e) {
            message.error('Please enter name');
        }
    }
    render() {
        return <div>
            <Button onClick={this.handler}>Set Name</Button>
        </div>
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

Keep modal open after submit

import React, { component } from 'react';
import ReactDOM from 'react-dom';
import prompt from 'antd-prompt';
import { Button, message } from 'antd';

class App extends Component {
    handler = async () => {
        await prompt({
            title: "Please enter name",
            value: 'Initial Value',
            modalProps: {
                width: '80%'
            },
            onOk: name => {
                // do something with name
                return false;
                // or return Promise.resolve(false);
            }
        });
    }
    render() {
        return <div>
            <Button onClick={this.handler}>Set Name</Button>
        </div>
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

antd-prompt's Issues

TypeError: dispatcher.useId is not a function

希望能支持一下校验输入的数据，校验通过了才可以点确定，然后能设置modal的样式就更好了

对于按需加载组件的antd，样式不生效

版本：0.5.0
用按需加载的antd加载组件时，由于antd-prompt不会加载antd的modal的css，故样式会有问题。
实测需要在项目中加载所需的css
import 'antd/es/modal/style/index.css';
方可生效

V0.6.0 not released on npm

Hi,

I realized the version 0.6.0 is not released on npm.
it would be great if you could do so, so everyone can easily benefit from the latest features.

thanks

无法修改Modal插入节点

由于代码内写死了Modal的getContainer={false}，导致无法修改Modal的插入节点，同时没有提供替代参数。
在用于qiankun等框架场景时，直接插入body会导致DOM溢出，需要指定插入节点，故此需要支持。

ts support

add index.d.ts

Module not found: Can't resolve 'antd-prompt' in '/app/components

why i get error:
Module not found: Can't resolve 'antd-prompt' in '/app/components

I am using next.js