Skip to content

Commit

Permalink
feat: 添加 card 类型、提交按钮添加时间控制 (#44)
Browse files Browse the repository at this point in the history
* fix: 修复 required 合并问题

* docs: doc

* feat: 添加 minBtnLoadingTime

* feat: card

* feat: upgrade package
  • Loading branch information
crazyair authored Aug 25, 2020
1 parent 23ed514 commit e44595e
Show file tree
Hide file tree
Showing 13 changed files with 145 additions and 33 deletions.
1 change: 1 addition & 0 deletions docs/apis/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ nav:
| onCancel | 点击取消、返回调用的方法(需用到 `submit` 类型) | () => void | - |
| params | 当前表单状态(需用到 `submit` 类型) | <a href="/apis/hooks#paramsobjtype">ParamsObjType</a> | - |
| submitComponentProps |`submit` 类型参数结合使用(用户无需传) | <a href="/types/submit#api">YFormSubmitComponentProps</a> | - |
| minBtnLoadingTime | 按钮最低 loading 时间 | number | 500 |

## YForm.Items

Expand Down
6 changes: 6 additions & 0 deletions docs/changelog.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ nav:
order: 5
---

## [1.2.7](https://github.com/crazyair/yforms/compare/v1.2.6...v1.2.7) (2020-08-24)

### Bug Fixes

- 修复 required 合并问题 ([a889e6d](https://github.com/crazyair/yforms/commit/a889e6d14e40f7a9c2a892db93a08254157b57af))

## [1.2.6](https://github.com/crazyair/yforms/compare/v1.2.5...v1.2.6) (2020-08-20)

### Bug Fixes
Expand Down
27 changes: 27 additions & 0 deletions docs/types/card.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
title: card
nav:
title: Type
---

# Card

卡片表单

## 何时使用

- 卡片样式展示表单使用

## 用例

<code src="./demo/card.tsx" />

## API

### items

为 YForm children 类型

### componentProps

为 Card 类型
37 changes: 37 additions & 0 deletions docs/types/demo/card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React from 'react';
import { YForm } from 'yforms';
import { YFormProps } from 'yforms/src/YForm/Form';

export default () => {
const onFinish = (values: any) => {
console.log('Success:', values);
};

return (
<YForm onFinish={onFinish} initialValues={{ card: [{}] }}>
{[
{
type: 'card',
label: '卡片',
items: [{ type: 'input', name: 'phone', label: '手机号' }],
},
{
type: 'list',
name: 'card',
label: '卡片',
componentProps: { showRightIcons: false },
items: ({ index, icons }): YFormProps['children'] => {
return [
{
type: 'card',
componentProps: { title: `card_${index + 1}`, extra: icons },
items: [{ type: 'input', name: [index, 'phone'], label: '手机号' }],
},
];
},
},
{ type: 'submit' },
]}
</YForm>
);
};
7 changes: 4 additions & 3 deletions docs/types/secureButton.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,10 @@ nav:

## API

| 参数 | 说明 | 类型 | 默认值 |
| -------- | ---------------- | ---- | ------ |
| onLoaded | 请求成功后的回调 | - | true |
| 参数 | 说明 | 类型 | 默认值 |
| ----------------- | --------------------- | ------ | ------ |
| onLoaded | 请求成功后的回调 | - | true |
| minBtnLoadingTime | 按钮最低 loading 时间 | number | 500 |

## FAQ

Expand Down
34 changes: 17 additions & 17 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,55 +39,55 @@
"devDependencies": {
"@babel/plugin-proposal-optional-chaining": "^7.11.0",
"@babel/polyfill": "^7.10.4",
"@commitlint/cli": "^9.1.1",
"@commitlint/config-conventional": "^9.1.1",
"@testing-library/react": "^10.4.8",
"@commitlint/cli": "^9.1.2",
"@commitlint/config-conventional": "^9.1.2",
"@testing-library/react": "^10.4.9",
"@testing-library/react-hooks": "^3.4.1",
"@types/classnames": "^2.2.10",
"@types/enzyme": "^3.10.5",
"@types/jest": "^26.0.9",
"@types/lodash": "^4.14.159",
"@types/react": "^16.9.44",
"@types/jest": "^26.0.10",
"@types/lodash": "^4.14.160",
"@types/react": "^16.9.47",
"@types/react-dom": "^16.9.8",
"@types/react-router-dom": "^5.1.5",
"@types/react-test-renderer": "^16.9.3",
"@types/warning": "^3.0.0",
"@umijs/fabric": "^2.2.2",
"@umijs/test": "^3.2.14",
"@umijs/test": "^3.2.16",
"babel-eslint": "^10.1.0",
"babel-plugin-import": "^1.13.0",
"conventional-changelog": "^3.1.21",
"conventional-changelog": "^3.1.23",
"cross-env": "^7.0.2",
"dumi": "^1.0.34",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "7.6",
"enzyme-adapter-react-16": "^1.15.3",
"eslint": "7.7",
"eslint-config-umi": "^1.6.0",
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jest": "^23.20.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.5",
"eslint-plugin-react-hooks": "^4.0.8",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.0",
"eslint-plugin-unicorn": "^21.0.0",
"father-build": "^1.18.2",
"husky": "^4.2.5",
"lerna": "^3.22.1",
"lerna-changelog": "^1.0.1",
"lint-staged": "^10.2.11",
"prettier": "^2.0.5",
"rc-util": "^5.0.6",
"prettier": "^2.1.0",
"rc-util": "^5.0.7",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-test-renderer": "^16.13.1",
"typescript": "^3.9.7",
"umi": "^3.2.14"
"typescript": "^4.0.2",
"umi": "^3.2.16"
},
"license": "MIT",
"dependencies": {
"antd": "^4.5.2",
"antd": "^4.6.1",
"immutable": "^4.0.0-rc.12",
"rc-queue-anim": "^1.8.5"
}
Expand Down
10 changes: 5 additions & 5 deletions packages/yforms/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "yforms",
"version": "1.2.6",
"version": "1.2.7",
"description": "自定义表单组件",
"main": "lib/index.js",
"typings": "lib/index.d.ts",
Expand Down Expand Up @@ -29,10 +29,10 @@
"registry": "https://registry.npmjs.org/"
},
"dependencies": {
"@ant-design/icons": "^4.2.1",
"@babel/runtime": "^7.10.5",
"antd": "^4.5.0",
"lodash": "^4.17.19",
"@ant-design/icons": "^4.2.2",
"@babel/runtime": "^7.11.2",
"antd": "^4.6.1",
"lodash": "^4.17.20",
"moment": "^2.27.0",
"numbro": "^2.3.1",
"nzh": "^1.0.4",
Expand Down
4 changes: 3 additions & 1 deletion packages/yforms/src/YForm/Form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export interface YFormProps<T = any> extends Omit<FormProps, 'form'>, YFormConfi
params?: ParamsType;
oldValues?: T;
offset?: YFormItemProps['offset'];
minBtnLoadingTime?: number;
}

export function useFormatFieldsValue() {
Expand Down Expand Up @@ -135,6 +136,7 @@ const InternalForm = React.memo<YFormProps>((thisProps) => {
submitComponentProps,
submit,
initialValues,
minBtnLoadingTime = 500,
...rest
} = _props;
const [form] = useForm(propsForm);
Expand Down Expand Up @@ -224,7 +226,7 @@ const InternalForm = React.memo<YFormProps>((thisProps) => {
handleReset({ type: 'onSubmit' });
},
// loading 时间不到 0.5s 的加载 0.5s,超过的立刻结束。
end - begin > 500 ? 0 : 500,
end - begin > minBtnLoadingTime ? 0 : minBtnLoadingTime,
);
} catch (error) {
warning(false, error || 'onSubmit error');
Expand Down
3 changes: 3 additions & 0 deletions packages/yforms/src/YForm/ItemsType.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import {
CustomModify,
} from './ItemsTypeModify';
import Space, { YFormSpaceProps } from './component/Space';
import Card, { YFormCardProps } from './component/Card';

export interface YFormFieldBaseProps<T = any> {
component?: React.ReactElement;
Expand Down Expand Up @@ -101,6 +102,7 @@ export interface YFormItemsTypeDefine {
select: { componentProps?: YSelectProps };
radio: { componentProps?: YRadioProps };
oneLine: YFormOneLineProps;
card: YFormCardProps;
space: YFormSpaceProps;
list: YFormListProps;
submit: YFormSubmitProps;
Expand Down Expand Up @@ -148,6 +150,7 @@ export const itemsType: YFormItemsType = {
},
// 工具类
oneLine: { component: <OneLine />, modifyProps: oneLineModify },
card: { component: <Card /> },
list: { component: <List />, hasFormItem: false },
button: { component: <Button /> },
secureButton: { component: <SecureButton /> },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1408,6 +1408,9 @@ Object {
</span>
</button>
</div>
<div
class="ant-space-item"
/>
<div
class="ant-space-item"
>
Expand Down Expand Up @@ -3754,6 +3757,9 @@ Object {
</span>
</button>
</div>
<div
class="ant-space-item"
/>
<div
class="ant-space-item"
>
Expand Down Expand Up @@ -5159,6 +5165,9 @@ Object {
</span>
</button>
</div>
<div
class="ant-space-item"
/>
<div
class="ant-space-item"
>
Expand Down
24 changes: 24 additions & 0 deletions packages/yforms/src/YForm/component/Card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React, { forwardRef } from 'react';
import { Card } from 'antd';
import { CardProps } from 'antd/lib/card';

import YForm from '..';
import { YFormItemProps } from '../Items';

export interface YFormCardProps extends YFormItemProps {
componentProps?: CardProps;
items?: YFormItemProps['children'];
}

export default forwardRef<any, YFormCardProps['componentProps']>((props, ref) => {
const itemProps = React.useContext(YForm.YFormItemContext);
const { items } = itemProps as YFormCardProps;

React.useImperativeHandle(ref, () => props);

return (
<Card key="card" size="small" {...props}>
<YForm.Items>{items}</YForm.Items>
</Card>
);
});
10 changes: 5 additions & 5 deletions packages/yforms/src/YForm/component/SecureButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ import { Button } from 'antd';
import { ButtonProps } from 'antd/lib/button';

export interface YFormSecureButtonProps {
componentProps?: ButtonProps & { onLoaded?: () => void };
componentProps?: ButtonProps & { onLoaded?: () => void; minBtnLoadingTime?: number };
}

const SecureButton: React.FC<YFormSecureButtonProps['componentProps']> = (props) => {
const { onClick, onLoaded, ...rest } = props;
const { onClick, onLoaded, minBtnLoadingTime = 500, ...rest } = props;
const [loading, setLoading] = useState(false);
const timeOut = useRef<number | null>(null);

Expand All @@ -19,7 +19,7 @@ const SecureButton: React.FC<YFormSecureButtonProps['componentProps']> = (props)
(end: number, begin: number, err?: any) => {
if (err) {
setLoading(false);
} else if (end - begin > 500) {
} else if (end - begin > minBtnLoadingTime) {
// 如果 onClick 执行时间大于 0.5s,就立刻取消 loading
setLoading(false);
if (onLoaded) onLoaded();
Expand All @@ -28,10 +28,10 @@ const SecureButton: React.FC<YFormSecureButtonProps['componentProps']> = (props)
timeOut.current = window.setTimeout(() => {
setLoading(false);
if (onLoaded) onLoaded();
}, 500);
}, minBtnLoadingTime);
}
},
[onLoaded],
[onLoaded, minBtnLoadingTime],
);

const handleClick = async (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
Expand Down
6 changes: 4 additions & 2 deletions packages/yforms/src/YForm/scenes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,9 @@ const scenes: YFormConfig = {
if (itemProps.name && typeProps.type && typeProps.type !== 'list') {
let hasRequired = false;
forEach(rules, (item) => {
hasRequired = 'required' in item;
if ('required' in item) {
hasRequired = true;
}
});
if (!hasRequired) {
_itemProps.rules = [
Expand All @@ -58,7 +60,7 @@ const scenes: YFormConfig = {
}
}
return {
itemProps: { ..._itemProps, ...itemProps },
itemProps: { ...itemProps, ..._itemProps },
};
},
},
Expand Down

0 comments on commit e44595e

Please sign in to comment.