Merge pull request #940 from ant-design/feat-form

feat: size of controls in form should be large

components/cascader/demo/size.md

@@ -0,0 +1,47 @@
+# 大小
+
+- order: 7
+
+不同大小的级联选择器。
+
+---
+
+````jsx
+import { Cascader } from 'antd';
+
+const options = [{
+  value: 'zhejiang',
+  label: '浙江',
+  children: [{
+    value: 'hangzhou',
+    label: '杭州',
+    children: [{
+      value: 'xihu',
+      label: '西湖',
+    }],
+  }],
+}, {
+  value: 'jiangsu',
+  label: '江苏',
+  children: [{
+    value: 'nanjing',
+    label: '南京',
+    children: [{
+      value: 'zhonghuamen',
+      label: '中华门',
+    }],
+  }],
+}];
+
+function onChange(value) {
+  console.log(value);
+}
+
+ReactDOM.render(
+  <div>
+    <Cascader size="large" options={options} onChange={onChange} /><br /><br />
+    <Cascader options={options} onChange={onChange} /><br /><br />
+    <Cascader size="small" options={options} onChange={onChange} /><br /><br />
+  </div>
+, mountNode);
+````

components/cascader/index.jsx

@@ -104,7 +104,6 @@ AntCascader.defaultProps = {
     return label.join(' / ');
   },
   disabled: false,
-  size: 'default',
   onPopupVisibleChange() {},
 };
 

components/form/FormItem.jsx

@@ -118,12 +118,29 @@ class FormItem extends React.Component {
   renderChildren() {
     const context = this.context;
     const props = this.props;
-    let children = props.children;
+    let children = null;
     if (context.form && props.id && props.fieldOption) {
+      const child = React.Children.only(props.children);
+      const size = {};
+      if (typeof child.type === 'function' && !child.props.size) {
+        size.size = 'large';
+      }
       children = React.cloneElement(
-        React.Children.only(children),
-        { ...context.form.getFieldProps(props.id, props.fieldOption), id: props.id }
+        child,
+        {
+          ...context.form.getFieldProps(props.id, props.fieldOption),
+          ...size,
+          id: props.id
+        }
       );
+    } else {
+      children = React.Children.map(props.children, (child) => {
+        if (typeof child.type === 'function' && !child.props.size) {
+          return React.cloneElement(child, { size: 'large' });
+        }
+
+        return child;
+      });
     }
     return [
       this.renderLabel(),

components/form/demo/mix.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-import { Form, Select, InputNumber, DatePicker, Switch, Radio,
+import { Form, Select, InputNumber, DatePicker, TimePicker, Switch, Radio,
          Slider, Button, message, Row, Col, Upload, Icon } from 'antd';
 const FormItem = Form.Item;
 const Option = Select.Option;
@@ -56,7 +56,7 @@ const Demo = React.createClass({
           labelCol={{span: 8}}
           wrapperCol={{span: 10}}
           required>
-          <InputNumber size="large" min={1} max={10} style={{width: 100}} defaultValue={3} name="inputNumber" onChange={this.setValue.bind(this, 'inputNumber')} value={formData.inputNumber} />
+          <InputNumber min={1} max={10} style={{width: 100}} defaultValue={3} name="inputNumber" onChange={this.setValue.bind(this, 'inputNumber')} value={formData.inputNumber} />
           <span className="ant-form-text"> 台机器</span>
         </FormItem>
 
@@ -92,7 +92,7 @@ const Demo = React.createClass({
           labelCol={{span: 8}}
           wrapperCol={{span: 16}}
           required>
-          <Select size="large" defaultValue="lucy" style={{width: 200}} name="select" onChange={this.setValue.bind(this, 'select')} value={formData.select}>
+          <Select defaultValue="lucy" style={{width: 200}} name="select" onChange={this.setValue.bind(this, 'select')} value={formData.select}>
             <Option value="jack">jack</Option>
             <Option value="lucy">lucy</Option>
             <Option value="disabled" disabled>disabled</Option>
@@ -115,10 +115,18 @@ const Demo = React.createClass({
           </Col>
         </FormItem>
 
+        <FormItem
+          label="TimePicker 时间选择器："
+          labelCol={{span: 8}}
+          wrapperCol={{span: 16}}
+          required>
+          <TimePicker />
+        </FormItem>
+
         <FormItem
           label="选项："
           labelCol={{span: 8}}>
-          <RadioGroup defaultValue="a" size="large">
+          <RadioGroup defaultValue="a">
             <RadioButton value="a">选项一</RadioButton>
             <RadioButton value="b">选项二</RadioButton>
             <RadioButton value="c">选项三</RadioButton>

components/form/demo/validate-other.md

@@ -70,7 +70,7 @@ let Demo = React.createClass({
               { required: true, message: '请选择您的国籍' }
             ],
           }}>
-          <Select size="large" placeholder="请选择国家" style={{width: '100%'}}>
+          <Select placeholder="请选择国家" style={{width: '100%'}}>
             <Option value="china">中国</Option>
             <Option value="use">美国</Option>
             <Option value="japan">日本</Option>
@@ -89,7 +89,7 @@ let Demo = React.createClass({
               { required: true, message: '请选择您喜欢的颜色', type: 'array' },
             ]
           }}>
-          <Select multiple size="large" placeholder="请选择颜色" style={{width: '100%'}}>
+          <Select multiple placeholder="请选择颜色" style={{width: '100%'}}>
             <Option value="red">红色</Option>
             <Option value="orange">橙色</Option>
             <Option value="yellow">黄色</Option>
@@ -141,7 +141,7 @@ let Demo = React.createClass({
           fieldOption={{
             rules: [{ validator: this.checkPrime }],
           }}>
-          <InputNumber min={8} max={12} size="large" />
+          <InputNumber min={8} max={12} />
         </FormItem>
 
         <FormItem

components/radio/group.jsx

@@ -15,7 +15,6 @@ export default React.createClass({
     return {
       prefixCls: 'ant-radio-group',
       disabled: false,
-      size: 'default',
       onChange() {
       }
     };

components/select/index.jsx

@@ -10,7 +10,6 @@ const AntSelect = React.createClass({
       optionLabelProp: 'children',
       choiceTransitionName: 'zoom',
       showSearch: false,
-      size: 'default'
     };
   },
   render() {

components/spin/index.jsx

@@ -6,7 +6,6 @@ const AntSpin = React.createClass({
   getDefaultProps() {
     return {
       prefixCls: 'ant-spin',
-      size: 'default',
       spining: true
     };
   },
@@ -25,7 +24,8 @@ const AntSpin = React.createClass({
 
     let spinClassName = classNames({
       [prefixCls]: true,
-      [`${prefixCls}-${size}`]: size,
+      [`${prefixCls}-sm`]: size === 'small',
+      [`${prefixCls}-lg`]: size === 'large',
       [className]: !!className,
       [`${prefixCls}-spining`]: this.props.spining,
     });

components/steps/index.jsx

@@ -6,7 +6,6 @@ const AntSteps = React.createClass({
     return {
       prefixCls: 'ant-steps',
       iconPrefix: 'ant',
-      size: 'default',
       maxDescriptionWidth: 100,
       current: 0
     };

components/switch/index.jsx

@@ -6,14 +6,13 @@ export default React.createClass({
   getDefaultProps() {
     return {
       prefixCls: 'ant-switch',
-      size: 'default',
     };
   },
   render() {
     const { prefixCls, size, className } = this.props;
     const cls = classNames({
       [className]: !!className,
-      [prefixCls + '-' + size]: true,
+      [`${prefixCls}-small`]: size === 'small',
     });
     return <Switch className={cls} {...this.props} />;
   }

components/tabs/index.jsx

@@ -78,7 +78,6 @@ class AntTabs extends React.Component {
 
 AntTabs.defaultProps = {
   prefixCls: 'ant-tabs',
-  size: 'default',
   animation: 'slide-horizontal',
   type: 'line', // or 'card' 'editable-card'
   onChange() {},

components/time-picker/index.jsx

@@ -22,7 +22,6 @@ const AntTimePicker = React.createClass({
       disabledMinutes: undefined,
       disabledSeconds: undefined,
       hideDisabledOptions: false,
-      size: 'default',
       placement: 'bottomLeft',
       transitionName: 'slide-up',
     };

components/tree-select/demo/basic.md

@@ -42,5 +42,5 @@ const Demo = React.createClass({
 
 ReactDOM.render(
   <Demo />
-, document.getElementById('components-tree-select-demo-basic'));
+, mountNode);
 ````

components/tree-select/demo/checkable.md

@@ -71,5 +71,5 @@ const Demo = React.createClass({
   },
 });
 
-ReactDOM.render(<Demo />, document.getElementById('components-tree-select-demo-checkable'));
+ReactDOM.render(<Demo />, mountNode);
 ````

components/tree-select/demo/size.md

@@ -0,0 +1,80 @@
+# 大小
+
+- order: 2
+
+不同大小的 TreeSelect。
+
+---
+
+````jsx
+import { TreeSelect } from 'antd';
+const TreeNode = TreeSelect.TreeNode;
+
+const Demo = React.createClass({
+  getInitialState() {
+    return {
+      value: 'leaf1',
+    };
+  },
+  onChange(value) {
+    this.setState({ value });
+  },
+  render() {
+    return (
+      <div>
+        <TreeSelect size="large" style={{width: 180}} showSearch
+          value={this.state.value} optionLabelProp="title"
+          dropdownMenuStyle={{maxHeight: 200, overflow: 'auto'}}
+          treeDefaultExpandAll
+          onChange={this.onChange}>
+          <TreeNode value="parent 1" title="parent 1" key="0-1">
+            <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
+              <TreeNode value="leaf1" title="my leaf" key="random" />
+              <TreeNode value="leaf2" title="your leaf" key="random1" />
+            </TreeNode>
+            <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
+              <TreeNode value="sss" title="sss" key="random3" />
+            </TreeNode>
+          </TreeNode>
+        </TreeSelect>
+        <br /><br />
+        <TreeSelect style={{width: 180}} showSearch
+          value={this.state.value} optionLabelProp="title"
+          dropdownMenuStyle={{maxHeight: 200, overflow: 'auto'}}
+          treeDefaultExpandAll
+          onChange={this.onChange}>
+          <TreeNode value="parent 1" title="parent 1" key="0-1">
+            <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
+              <TreeNode value="leaf1" title="my leaf" key="random" />
+              <TreeNode value="leaf2" title="your leaf" key="random1" />
+            </TreeNode>
+            <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
+              <TreeNode value="sss" title="sss" key="random3" />
+            </TreeNode>
+          </TreeNode>
+        </TreeSelect>
+        <br /><br />
+        <TreeSelect size="small" style={{width: 180}} showSearch
+          value={this.state.value} optionLabelProp="title"
+          dropdownMenuStyle={{maxHeight: 200, overflow: 'auto'}}
+          treeDefaultExpandAll
+          onChange={this.onChange}>
+          <TreeNode value="parent 1" title="parent 1" key="0-1">
+            <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
+              <TreeNode value="leaf1" title="my leaf" key="random" />
+              <TreeNode value="leaf2" title="your leaf" key="random1" />
+            </TreeNode>
+            <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
+              <TreeNode value="sss" title="sss" key="random3" />
+            </TreeNode>
+          </TreeNode>
+        </TreeSelect>
+      </div>
+    );
+  },
+});
+
+ReactDOM.render(
+  <Demo />
+, mountNode);
+````

components/tree-select/index.jsx

@@ -11,7 +11,6 @@ const AntTreeSelect = React.createClass({
       optionLabelProp: 'value',
       choiceTransitionName: 'zoom',
       showSearch: false,
-      size: 'default',
       // openAnimation: animation,
     };
   },

style/components/spin.less

@@ -10,7 +10,7 @@
 .@{spin-prefix-cls} {
   color: @primary-color;
   display: inline-block;
-  font-size: 1em;
+  font-size: @spin-dot-size;
   text-align: center;
   opacity: 0;
   position: absolute;
@@ -68,17 +68,13 @@
 
   // Sizes
   // ------------------------------
-  &-default {
-    font-size: @spin-dot-size;
-  }
-
   // small
-  &-small {
+  &-sm {
     font-size: @spin-dot-size-sm;
   }
 
   // large
-  &-large {
+  &-lg {
     font-size: @spin-dot-size-lg;
   }
 }