Skip to content

Commit

Permalink
build: release v1.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
Jiaqi Liu committed Mar 3, 2020
1 parent 7b82052 commit b8a474b
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 37 deletions.
50 changes: 19 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

[![react-antd-formutil](https://nodei.co/npm/react-antd-formutil.png?compact=true)](https://npm.im/react-antd-formutil)

Happy to use react-formutil in the project based on ant-design ^\_^
Happy to use react-formutil in the project based on ant-design@`3`&`4` ^\_^

[ant-design](https://github.com/ant-design/ant-design) 项目,结合 [react-formutil](https://github.com/qiqiboy/react-formutil) 来快速构建表单。**支持所有的`ant-design`输入型(`data-entry`)组件。**

Expand All @@ -27,8 +27,6 @@ Happy to use react-formutil in the project based on ant-design ^\_^
<!-- vim-markdown-toc GFM -->

- [安装 Installation](#安装-installation)
+ [`Ant Design 4.x`](#ant-design-4x)
+ [`Ant Design 3.x`](#ant-design-3x)
- [使用 Usage](#使用-usage)
+ [`<FormItem />`](#formitem-)
* [`name`](#name)
Expand Down Expand Up @@ -72,24 +70,14 @@ Happy to use react-formutil in the project based on ant-design ^\_^

[![react-antd-formutil](https://nodei.co/npm/react-antd-formutil.png?compact=true)](https://npm.im/react-antd-formutil)

#### `Ant Design 4.x`
**`react-antd-formutil``1.0.0`版本开始,同时支持 Ant Design `3.x``4.x`版本**

```bash
# npm
npm install react-antd-formutil@next --save
npm install react-antd-formutil --save

# yarn
yarn install react-antd-formutil@next
```

#### `Ant Design 3.x`

```bash
# npm
npm install [email protected] --save

# yarn
yarn install [email protected]
yarn install react-antd-formutil
```

### 使用 Usage
Expand Down Expand Up @@ -155,22 +143,22 @@ class MyForm extends Component {

##### `$defaultValue`

设置该表单项的默认值 _(同`react-formutil``Field`同名参数,可以参考[$defaultvalue](https://github.com/qiqiboy/react-formutil#defaultvalue)_
设置该表单项的默认值 _(同`react-formutil``Field`同名参数,可以参考[\$defaultvalue](https://github.com/qiqiboy/react-formutil#defaultvalue)_

##### `$validators`

设置校验方法 _(同`react-formutil``Field`同名参数, 可以参考 [$validators](https://github.com/qiqiboy/react-formutil#validators)_
设置校验方法 _(同`react-formutil``Field`同名参数, 可以参考 [\$validators](https://github.com/qiqiboy/react-formutil#validators)_

> 同 react-formutil 的 EasyField,FormItem 也内置了同样的校验规则:
> * `required` 必填 `required`
> * `maxLength` 。最大输入长度,有效输入时才会校验 `maxLength="100"`
> * `minLength` 最小输入长度,有效输入时才会校验 `minLength="10"`
> * `max` 最大输入数值,仅支持 Number 比较。有效输入时才会校验 `max="100"`
> * `min` 最小输入数值,仅支持 Number 比较。有效输入时才会校验 `min="10"`
> * `pattern` 正则匹配。有效输入时才会校验 `pattern={/^\d+$/}`
> * `enum` 枚举值检测。有效输入时才会校验 `enum={[1,2,3]}`
> * `checker` 自定义校验函数。`checker={value => value > 10 && value < 100 || '输入比如大于10小与100'}`
> - `required` 必填 `required`
> - `maxLength` 。最大输入长度,有效输入时才会校验 `maxLength="100"`
> - `minLength` 最小输入长度,有效输入时才会校验 `minLength="10"`
> - `max` 最大输入数值,仅支持 Number 比较。有效输入时才会校验 `max="100"`
> - `min` 最小输入数值,仅支持 Number 比较。有效输入时才会校验 `min="10"`
> - `pattern` 正则匹配。有效输入时才会校验 `pattern={/^\d+$/}`
> - `enum` 枚举值检测。有效输入时才会校验 `enum={[1,2,3]}`
> - `checker` 自定义校验函数。`checker={value => value > 10 && value < 100 || '输入比如大于10小与100'}`
注:校验属性的值为 `null` 时表示不进行该校验

Expand Down Expand Up @@ -246,10 +234,10 @@ class MyForm extends Component {

`setErrorLevel` 该方法可以用来全局设置错误信息何时出现,有三个级别可以设置:

* `0``$dirty` `$touched` `$invalid` 都为 true 时
* `1``$dirty` `$invalid` 都为 true 时
* `2``$invalid` 为 true 时
* `off` 关闭错误显示
- `0``$dirty` `$touched` `$invalid` 都为 true 时
- `1``$dirty` `$invalid` 都为 true 时
- `2``$invalid` 为 true 时
- `off` 关闭错误显示

默认值为 `1`

Expand Down Expand Up @@ -351,7 +339,7 @@ setErrorLevel(0);

##### [`Upload`](https://ant.design/components/upload-cn/)

`Upload` 组件会将 onChange 回调的对象同步到表单状态中,所以如果仅仅需要拿到上传成功后的服务端返回信息(比如上传后保存在服务器的 url),可以通过$parser 进行过滤:
`Upload` 组件会将 onChange 回调的对象同步到表单状态中,所以如果仅仅需要拿到上传成功后的服务端返回信息(比如上传后保存在服务器的 url),可以通过\$parser 进行过滤:

```javascript
<FormItem
Expand Down
11 changes: 8 additions & 3 deletions index.d.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
// Type definitions for react-antd-formutil@>0.1.0
// Type definitions for react-antd-formutil@>=1.0.0
// Project: react-antd-formutil
// Definitions by: qiqiboy <https://github.com/qiqiboy>

import { FormItemProps } from 'antd/lib/form/FormItem';
// If the next line occur error, please install rc-field-form or add 'skipLibCheck' to tsconfig.json for disable t.ds check.
import { FieldProps } from 'rc-field-form/lib/Field';
import React from 'react';
import { BaseEasyFieldComponentProps, Omit, OtherKeys } from 'react-formutil';
Expand All @@ -11,9 +12,13 @@ export * from 'react-formutil';

export type ErrorLevel = 0 | 1 | 2 | 'off';

// Compatible with antd@3 & antd@4
type FilterPropNames = any extends FieldProps ? 'required' : keyof FieldProps | 'required';

export interface FormItemComponentProps<T = any, P = {}, Fields = {}, WeakFields = Fields>
extends BaseEasyFieldComponentProps<T, P, Fields, WeakFields>, Omit<FormItemProps, keyof FieldProps | 'required'> {
itemProps?: Omit<FormItemProps, keyof FieldProps | 'required'>;
extends BaseEasyFieldComponentProps<T, P, Fields, WeakFields>,
Omit<FormItemProps, FilterPropNames> {
itemProps?: Omit<FormItemProps, FilterPropNames>;
errorLevel?: ErrorLevel;
children: React.ReactElement<any>;
}
Expand Down
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-antd-formutil",
"version": "4.0.0-beta.1",
"version": "1.0.0",
"description": "Happy to use react-formutil in the project based on ant-design ^_^",
"main": "dist/index.cjs.js",
"module": "dist/index.esm.js",
Expand Down Expand Up @@ -36,9 +36,9 @@
"homepage": "https://github.com/qiqiboy/react-antd-formutil#readme",
"types": "./index.d.ts",
"peerDependencies": {
"react": ">=16.9.0",
"react": ">=16.0.0",
"prop-types": ">15.0.0",
"antd": ">=4.0.0",
"antd": "^3.0.0 || ^4.0.0",
"react-formutil": ">0.6.0"
},
"devDependencies": {
Expand Down

0 comments on commit b8a474b

Please sign in to comment.