remove ant-form-item-compact, rewrite form-item align style

This commit is contained in:
afc163 2016-01-22 20:58:45 +08:00
parent 7e187485ea
commit 0265e3eb6e
5 changed files with 26 additions and 45 deletions

View File

@ -80,34 +80,11 @@ class FormItem extends React.Component {
]; ];
} }
// `.ant-form-item-compact`
_isCompact(children) {
const compactControls = ['checkbox', 'radio', 'radio-group', 'static', 'file'];
let isCompact = false;
const childrenArray = Array.isArray(children) ? children : [children];
childrenArray.map((child) => {
const type = child.props && child.props.type;
let prefixCls = child.props && child.props.prefixCls;
prefixCls = prefixCls ? prefixCls.substring(prefixCls.indexOf('-') + 1) : '';
if ((type && compactControls.indexOf(type) > -1) ||
(prefixCls && compactControls.indexOf(prefixCls) > -1)) {
isCompact = true;
} else if (child.props && typeof child.props.children === 'object') {
isCompact = this._isCompact(child.props.children);
}
});
return isCompact;
}
renderFormItem(children) { renderFormItem(children) {
const props = this.props; const props = this.props;
const prefixCls = props.prefixCls; const prefixCls = props.prefixCls;
const itemClassName = { const itemClassName = {
[`${prefixCls}-item`]: true, [`${prefixCls}-item`]: true,
[`${prefixCls}-item-compact`]: this._isCompact(props.children),
[`${prefixCls}-item-with-help`]: !!props.help, [`${prefixCls}-item-with-help`]: !!props.help,
[`${props.className}`]: !!props.className, [`${props.className}`]: !!props.className,
}; };

View File

@ -7,10 +7,12 @@
--- ---
````jsx ````jsx
import { Form, Select, InputNumber, DatePicker, Switch, import { Form, Select, InputNumber, DatePicker, Switch, Radio,
Slider, Button, message, Row, Col, Upload, Icon } from 'antd'; Slider, Button, message, Row, Col, Upload, Icon } from 'antd';
const FormItem = Form.Item; const FormItem = Form.Item;
const Option = Select.Option; const Option = Select.Option;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const Demo = React.createClass({ const Demo = React.createClass({
mixins: [Form.ValueMixin], mixins: [Form.ValueMixin],
@ -117,18 +119,29 @@ const Demo = React.createClass({
<DatePicker name="endDate" onChange={this.setValue.bind(this, 'endDate')} value={formData.endDate} /> <DatePicker name="endDate" onChange={this.setValue.bind(this, 'endDate')} value={formData.endDate} />
</Col> </Col>
</FormItem> </FormItem>
<FormItem
label="选项:"
labelCol={{span: 8}}>
<RadioGroup defaultValue="a" size="large">
<RadioButton value="a">选项一</RadioButton>
<RadioButton value="b">选项二</RadioButton>
<RadioButton value="c">选项三</RadioButton>
</RadioGroup>
</FormItem>
<FormItem <FormItem
label="logo图" label="logo图"
labelCol={{span: 8}} labelCol={{span: 8}}
wrapperCol={{span: 16}} wrapperCol={{span: 16}}
help="提示信息要长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长"> help="提示信息要长长长长长长长长长长长长长长">
<Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}> <Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}>
<Button type="ghost"> <Button type="ghost">
<Icon type="upload" /> 点击上传 <Icon type="upload" /> 点击上传
</Button> </Button>
</Upload> </Upload>
</FormItem> </FormItem>
<Row> <Row style={{marginTop: 24}}>
<Col span="16" offset="8"> <Col span="16" offset="8">
<Button type="primary" htmlType="submit">确定</Button> <Button type="primary" htmlType="submit">确定</Button>
</Col> </Col>

View File

@ -72,7 +72,6 @@ input[type="checkbox"] {
color: #666; color: #666;
&-control { &-control {
min-height: 32px;
line-height: 32px; line-height: 32px;
} }
@ -84,6 +83,8 @@ input[type="checkbox"] {
color: @label-color; color: @label-color;
text-align: right; text-align: right;
vertical-align: middle; vertical-align: middle;
padding-top: 7px;
padding-bottom: 7px;
&:lang(en) { &:lang(en) {
padding-right: 8px; padding-right: 8px;
@ -95,6 +96,11 @@ input[type="checkbox"] {
} }
} }
.@{css-prefix}form-explain {
line-height: 1.5;
margin-top: 3px;
}
.@{css-prefix}form-text { .@{css-prefix}form-text {
display: inline-block; display: inline-block;
padding-right: 8px; padding-right: 8px;
@ -151,11 +157,6 @@ form {
.@{css-prefix}checkbox-vertical, .@{css-prefix}checkbox-vertical,
.@{css-prefix}radio-vertical { .@{css-prefix}radio-vertical {
display: block; display: block;
margin-top: 16px;
&:first-child {
margin-top: 0;
}
} }
.@{input-number-prefix-cls} { .@{input-number-prefix-cls} {
@ -230,15 +231,6 @@ form {
.make-row; .make-row;
} }
.@{css-prefix}form-item-compact {
label,
.@{css-prefix}form-text,
.@{css-prefix}form-split {
padding-top: 0;
padding-bottom: 0;
}
}
.@{css-prefix}radio-inline, .@{css-prefix}radio-inline,
.@{css-prefix}checkbox-inline { .@{css-prefix}checkbox-inline {
vertical-align: top; vertical-align: top;
@ -277,10 +269,9 @@ form {
.@{css-prefix}form-horizontal, .@{css-prefix}form-horizontal,
.@{css-prefix}form-inline { .@{css-prefix}form-inline {
label { label {
line-height: 32px;
> input[type="radio"], > input[type="radio"],
> input[type="checkbox"] { > input[type="checkbox"] {
margin-right: 5px; margin-right: 4px;
} }
} }
} }