From b3f519ac52ed1d504d5fa436453d5e699274cc57 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 6 Apr 2016 12:08:40 +0800 Subject: [PATCH] update form style for advanced-search-form demo --- components/form/FormItem.jsx | 72 ++++++++------------ components/form/demo/advanced-search-form.md | 30 ++++---- style/components/form.less | 9 ++- 3 files changed, 47 insertions(+), 64 deletions(-) diff --git a/components/form/FormItem.jsx b/components/form/FormItem.jsx index 0c4c0de52..52d41e801 100644 --- a/components/form/FormItem.jsx +++ b/components/form/FormItem.jsx @@ -7,29 +7,7 @@ function prefixClsFn(prefixCls, ...args) { }).join(' '); } -export default class FormItem extends React.Component { - static defaultProps = { - hasFeedback: false, - prefixCls: 'ant-form', - } - - static propTypes = { - prefixCls: React.PropTypes.string, - label: React.PropTypes.node, - labelCol: React.PropTypes.object, - help: React.PropTypes.oneOfType([React.PropTypes.node, React.PropTypes.bool]), - validateStatus: React.PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']), - hasFeedback: React.PropTypes.bool, - wrapperCol: React.PropTypes.object, - className: React.PropTypes.string, - id: React.PropTypes.string, - children: React.PropTypes.node, - } - - static contextTypes = { - form: React.PropTypes.object, - } - +class FormItem extends React.Component { _getLayoutClass(colDef) { if (!colDef) { return ''; @@ -44,31 +22,18 @@ export default class FormItem extends React.Component { const context = this.context; const props = this.props; if (props.help === undefined && context.form) { - return this.getId() ? (context.form.getFieldError(this.getId()) || []).join(', ') : ''; + return (context.form.getFieldError(this.getId()) || []).join(', '); } return props.help; } - getOnlyControl() { - const children = React.Children.toArray(this.props.children); - const child = children.filter((c) => { - return c.props && '__meta' in c.props; - })[0]; - return child !== undefined ? child : null; - } - - getChildProp(prop) { - const child = this.getOnlyControl(); - return child && child.props && child.props[prop]; - } - getId() { - return this.getChildProp('id'); + return this.props.children.props && this.props.children.props.id; } getMeta() { - return this.getChildProp('__meta'); + return this.props.children.props && this.props.children.props.__meta; } renderHelp() { @@ -85,9 +50,7 @@ export default class FormItem extends React.Component { getValidateStatus() { const { isFieldValidating, getFieldError, getFieldValue } = this.context.form; const field = this.getId(); - if (!field) { - return ''; - } + if (isFieldValidating(field)) { return 'validating'; } else if (!!getFieldError(field)) { @@ -95,6 +58,7 @@ export default class FormItem extends React.Component { } else if (getFieldValue(field) !== undefined) { return 'success'; } + return ''; } @@ -206,3 +170,27 @@ export default class FormItem extends React.Component { return this.renderFormItem(children); } } + +FormItem.propTypes = { + prefixCls: React.PropTypes.string, + label: React.PropTypes.node, + labelCol: React.PropTypes.object, + help: React.PropTypes.oneOfType([React.PropTypes.node, React.PropTypes.bool]), + validateStatus: React.PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']), + hasFeedback: React.PropTypes.bool, + wrapperCol: React.PropTypes.object, + className: React.PropTypes.string, + id: React.PropTypes.string, + children: React.PropTypes.node, +}; + +FormItem.defaultProps = { + hasFeedback: false, + prefixCls: 'ant-form', +}; + +FormItem.contextTypes = { + form: React.PropTypes.object, +}; + +module.exports = FormItem; diff --git a/components/form/demo/advanced-search-form.md b/components/form/demo/advanced-search-form.md index 41c50174b..20fe74232 100644 --- a/components/form/demo/advanced-search-form.md +++ b/components/form/demo/advanced-search-form.md @@ -12,26 +12,26 @@ import { Form, Input, Row, Col, Button } from 'antd'; const FormItem = Form.Item; ReactDOM.render( -
+ - + - + - + @@ -39,19 +39,19 @@ ReactDOM.render( label="搜索名称：" labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}> - + - + - + @@ -59,19 +59,19 @@ ReactDOM.render( label="搜索名称：" labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}> - + - + - + @@ -88,7 +88,7 @@ ReactDOM.render( ````css /* 定制样式 */ -.advanced-search-form { +.ant-advanced-search-form { padding: 16px 8px; background: #f8f8f8; border: 1px solid #d9d9d9; @@ -96,16 +96,12 @@ ReactDOM.render( } /* 由于输入标签长度不确定，所以需要微调使之看上去居中 */ -.advanced-search-form > .row { +.ant-advanced-search-form > .row { position: relative; left: -6px; } -.advanced-search-form .ant-form-item { - margin-bottom: 16px; -} - -.advanced-search-form .ant-btn + .ant-btn { +.ant-advanced-search-form .ant-btn + .ant-btn { margin-left: 8px; } ```` diff --git a/style/components/form.less b/style/components/form.less index 78fe4e65d..5a830391e 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -120,11 +120,6 @@ form { line-height: @input-height-lg; } } - .@{css-prefix}input, - .@{css-prefix}input-group .@{css-prefix}input, - .@{css-prefix}input-group .@{css-prefix}input-group-addon { - .input-lg(); - } textarea.@{css-prefix}input { height: auto; @@ -424,6 +419,10 @@ form { } } +.ant-advanced-search-form .@{css-prefix}form-item { + margin-bottom: 16px; +} + // need there different zoom animation // otherwise won't trigger anim @keyframes diffZoomIn1 {