Browse Source

Add Form[hideRequiredMark] (#4500)

* Add Form[hideRequiredMark]

* omit hideRequiredMark

* Add test case for Form[hideRequiredMark]
pull/4585/merge
偏右 8 years ago
committed by GitHub
parent
commit
6e3565b983
  1. 7
      components/form/Form.tsx
  2. 12
      components/form/__tests__/index.test.js
  3. 1
      components/form/index.en-US.md
  4. 1
      components/form/index.zh-CN.md
  5. 3
      components/form/style/index.less

7
components/form/Form.tsx

@ -24,6 +24,7 @@ export interface FormProps {
style?: React.CSSProperties; style?: React.CSSProperties;
className?: string; className?: string;
prefixCls?: string; prefixCls?: string;
hideRequiredMark?: false;
} }
// function create // function create
@ -84,6 +85,7 @@ export interface ComponentDecorator {
export default class Form extends React.Component<FormProps, any> { export default class Form extends React.Component<FormProps, any> {
static defaultProps = { static defaultProps = {
prefixCls: 'ant-form', prefixCls: 'ant-form',
hideRequiredMark: false,
onSubmit(e) { onSubmit(e) {
e.preventDefault(); e.preventDefault();
}, },
@ -96,6 +98,7 @@ export default class Form extends React.Component<FormProps, any> {
inline: React.PropTypes.bool, inline: React.PropTypes.bool,
children: React.PropTypes.any, children: React.PropTypes.any,
onSubmit: React.PropTypes.func, onSubmit: React.PropTypes.func,
hideRequiredMark: React.PropTypes.bool,
}; };
static Item = FormItem; static Item = FormItem;
@ -154,11 +157,12 @@ export default class Form extends React.Component<FormProps, any> {
} }
render() { render() {
const { prefixCls, className = '', inline, horizontal, vertical } = this.props; const { prefixCls, hideRequiredMark, className = '', inline, horizontal, vertical } = this.props;
const formClassName = classNames(prefixCls, { const formClassName = classNames(prefixCls, {
[`${prefixCls}-horizontal`]: horizontal, [`${prefixCls}-horizontal`]: horizontal,
[`${prefixCls}-vertical`]: vertical, [`${prefixCls}-vertical`]: vertical,
[`${prefixCls}-inline`]: inline, [`${prefixCls}-inline`]: inline,
[`${prefixCls}-hide-required-mark`]: hideRequiredMark,
}, className); }, className);
const formProps = omit(this.props, [ const formProps = omit(this.props, [
@ -168,6 +172,7 @@ export default class Form extends React.Component<FormProps, any> {
'horizontal', 'horizontal',
'vertical', 'vertical',
'form', 'form',
'hideRequiredMark',
]); ]);
return <form {...formProps} className={formClassName} />; return <form {...formProps} className={formClassName} />;

12
components/form/__tests__/index.test.js

@ -0,0 +1,12 @@
import React from 'react';
import { shallow } from 'enzyme';
import Form from '..';
describe('Form', () => {
it('hideRequiredMark', () => {
const wrapper = shallow(
<Form hideRequiredMark />
);
expect(wrapper.hasClass('ant-form-hide-required-mark')).toBe(true);
});
});

1
components/form/index.en-US.md

@ -40,6 +40,7 @@ A form field is defined using `<Form.Item />`.
| vertical | Use vertical layout. | boolean | false | | vertical | Use vertical layout. | boolean | false |
| inline | Use inline alignment. | boolean | false | | inline | Use inline alignment. | boolean | false |
| onSubmit | Defines a function will be called if form data validation is successful. | Function(e:Event) | | | onSubmit | Defines a function will be called if form data validation is successful. | Function(e:Event) | |
| hideRequiredMark | Hide required mark of all form items | Boolean | false |
### Form.create(options) ### Form.create(options)

1
components/form/index.zh-CN.md

@ -42,6 +42,7 @@ title: Form
| vertical | 垂直排列布局 | boolean | false | | vertical | 垂直排列布局 | boolean | false |
| inline | 行内排列布局 | boolean | false | | inline | 行内排列布局 | boolean | false |
| onSubmit | 数据验证成功后回调事件 | Function(e:Event) | | | onSubmit | 数据验证成功后回调事件 | Function(e:Event) | |
| hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false |
### Form.create(options) ### Form.create(options)

3
components/form/style/index.less

@ -26,6 +26,9 @@ label {
line-height: 1; line-height: 1;
font-size: @font-size-base; font-size: @font-size-base;
color: @label-required-color; color: @label-required-color;
.@{form-prefix-cls}-hide-required-mark & {
display: none;
}
} }
// Radio && Checkbox // Radio && Checkbox

Loading…
Cancel
Save