# modalable-antd-form

> Modalable antd form component

Latest version **0.0.9** (published 2018-10-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install modalable-antd-form
pnpm add modalable-antd-form
yarn add modalable-antd-form
bun add modalable-antd-form
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2018-10-25 |
| First published | 2018-05-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 87.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | abbycrook |
| Keywords | react, hoc, modal, component |

## Links

- npm: https://www.npmjs.com/package/modalable-antd-form
- Repository: https://github.com/yizao/modalable-antd-form
- Homepage: https://github.com/yizao/modalable-antd-form#readme
- Issues: https://github.com/yizao/modalable-antd-form/issues
- npm.io page: https://npm.io/package/modalable-antd-form

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.9 (latest) — 2018-10-25
- 0.0.8 — 2018-10-24
- 0.0.7 — 2018-10-24
- 0.0.5 — 2018-05-03
- 0.0.4 — 2018-05-02
- 0.0.3 — 2018-05-02
- 0.0.2 — 2018-05-02
- 0.0.1 — 2018-05-02

## README

# modalable-antd-form
基于 Antd Modal 组件封装的高阶组件，可使表单组件变成 Modal Form Component, Modal 所有的属性同原Antd Modal 属性。

## 📦 安装
```bash
yarn add modalable-antd-form 
or
npm install modalable-antd-form --save
```
## 🔨 示例

```jsx
import modalable from 'modalable-antd-form';
import YourForm from 'your/own/component/YourForm';
const YourFormWithModal = modalable(YourForm);


<YourFormWithModal
  {...yourFormProps}
  ref={node => this.formModal = node}
  handleOk={this.handleOkClick}
/>

// 触发 modal
<Button onClick={() => this.formModal.toggleVisible(true)}>打开表单</Button>

// isContinue 点击[保存并继续按钮]标识
handleOkClick = (formData, isContinue) => {
    // process form data 
  }
```

## ✨ API
* 继承于Antd Modal 属性，参见 [Ant Design 文档](https://ant.design/components/modal-cn/)

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| withContinue | 是否有[保存并继续按钮] | Boolean | false |
| resetField | 是否提交表单后清空填写值 | Boolean | false |
| formData | 表单值 | Object | {} |
| handleOk | 点击确定回调 | function(data, isContinue) |  |

---
_Source: https://npm.io/package/modalable-antd-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._