Merge pull request #846 from yexiaosong/master

input添加trim属性, 以优化带有输入框的表单提交

Author: hazel54

site/docs/en-US/input.md

@@ -339,6 +339,7 @@ render() {
 |resize| control the resizability | string | none, both, horizontal, vertical | — |
 |autoFocus | same as `autofocus` in native input | boolean | — | false |
 | onIconClick | hook function when clicking on the input icon | function | — | — |
+| trim        | trim input contents   | boolean    | — | false |
 
 ### Autocomplete Attributes
 

site/docs/zh-CN/input.md

@@ -460,6 +460,7 @@ render() {
 | resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | — |
 | autoFocus | 原生属性，自动获取焦点 | boolean | true, false | false |
 | onIconClick | 点击 Input 内的图标的钩子函数 | function | — | — |
+| trim          | 对input内容进行trim    | boolean    | — | false |
 
 ### Autocomplete Attributes
 

src/checkbox/__test__/Checkbox_test.jsx

@@ -53,7 +53,7 @@ test('should render checked checkbox if checkboxGroup value contains the same la
 test('should display indeterminate mark when checkbox is an indeterminate state', () => {
   const wrapper = mount(
     <Checkbox
-      indeterminate={true}/>
+      indeterminate={true} />
   )
   expect(wrapper.find('.el-checkbox__input').hasClass('is-indeterminate')).toEqual(true)
 })
@@ -77,7 +77,7 @@ test('should limited to max and min value', () => {
   )
 
   //test checked length
-  expect(wrapper.find('.el-checkbox__input .is-checked').length).toBe(2)
+  expect(wrapper.find('.el-checkbox .el-checkbox__input.is-checked').length).toBe(2)
 
 
   const Input = document.createElement('input');
@@ -87,7 +87,7 @@ test('should limited to max and min value', () => {
   wrapper.find('input[type="checkbox"]').forEach(e => {
     if (!e.prop('checked')) {
       e.simulate('change', { target: Input });
-      expect(wrapper.find('.el-checkbox__input .is-checked').length).toBe(2)
+      expect(wrapper.find('.el-checkbox__input.is-checked').length).toBe(2)
     }
   })
 
@@ -96,7 +96,7 @@ test('should limited to max and min value', () => {
   wrapper.find('input[type="checkbox"]').forEach(e => {
     if (e.prop('checked')) {
       e.simulate('change', { target: Input })
-      expect(wrapper.find('.el-checkbox__input .is-checked').length).toBe(1)
+      expect(wrapper.find('.el-checkbox__input.is-checked').length).toBe(1)
     }
   })
 })

src/input/Input.jsx

@@ -69,10 +69,19 @@ export default class Input extends Component {
   }
 
   handleBlur(e: SyntheticEvent): void {
-    const { onBlur } = this.props;
+    const { onBlur } = this.props
+    if (this.props.trim) this.handleTrim()
     if (onBlur) onBlur(e)
   }
 
+  handleTrim(): void {
+    this.refs.input.value = this.refs.input.value.trim()
+    if(this.props.onChange) {
+      // this's for controlled components 
+      this.props.onChange(this.refs.input.value.trim())
+    }
+  }
+
   handleIconClick(): void {
     if (this.props.onIconClick) {
       this.props.onIconClick()
@@ -170,6 +179,7 @@ Input.propTypes = {
   minLength: PropTypes.number,
   defaultValue: PropTypes.any,
   value: PropTypes.any,
+  trim: PropTypes.bool,
 
   // type !== 'textarea'
   size: PropTypes.oneOf(['large', 'small', 'mini']),

src/switch/__test__/switch_test.jsx

@@ -11,16 +11,16 @@ test('Basic usage', () => {
     </Switch>
   );
 
-  expect(switch1.find('div .el-switch__label').at(0).text()).toEqual('');
-  expect(switch1.find('div .el-switch__label').at(1).text()).toEqual('');
-  expect(switch1.find('label .el-switch').at(0).hasClass('is-checked')).toEqual(true);
+  expect(switch1.find('label.el-switch .el-switch__label').at(0).text()).toEqual('');
+  expect(switch1.find('label.el-switch .el-switch__label').at(1).text()).toEqual('');
+  expect(switch1.find('label.el-switch').hasClass('is-checked')).toEqual(true);
 
   // switch off
   switch1.find('input').simulate('change', {target: {value: false}});
 
-  expect(switch1.find('div .el-switch__label').at(0).text()).toEqual('');
-  expect(switch1.find('div .el-switch__label').at(1).text()).toEqual('');
-  expect(switch1.find('label .el-switch').at(0).hasClass('is-checked')).toEqual(false);
+  expect(switch1.find('label.el-switch .el-switch__label').at(0).text()).toEqual('');
+  expect(switch1.find('label.el-switch .el-switch__label').at(1).text()).toEqual('');
+  expect(switch1.find('label.el-switch').at(0).hasClass('is-checked')).toEqual(false);
 
   const switch2 = mount(
     <Switch
@@ -30,20 +30,21 @@ test('Basic usage', () => {
     </Switch>
   );
 
-  expect(switch2.find('label .el-switch').at(0).hasClass('is-checked')).toEqual(true);
-  expect(switch2.find('div .el-switch__label').at(0).text()).toEqual('ON');
-  expect(switch2.find('div .el-switch__label').at(1).text()).toEqual('OFF');
-  expect(switch2.find('div .el-switch__label').at(0).prop('style').display).toEqual(undefined);
-  expect(switch2.find('div .el-switch__label').at(1).prop('style').display).toEqual('none');
+  expect(switch2.find('label.el-switch').at(0).hasClass('is-checked')).toEqual(true);
+  expect(switch2.find('label.el-switch .el-switch__label').at(0).text()).toEqual('ON');
+  expect(switch2.find('label.el-switch .el-switch__label').at(1).text()).toEqual('OFF');
+  expect(switch2.find('label.el-switch .el-switch__label').at(0).prop('style').display).toEqual(undefined);
+  expect(switch2.find('label.el-switch .el-switch__label').at(1).prop('style').display).toEqual('none');
 
   // switch off
   switch2.find('input[type="checkbox"]').simulate('change', {target: {value: false}});
 
-  expect(switch2.find('label .el-switch').at(0).hasClass('is-checked')).toEqual(false);
-  expect(switch2.find('div .el-switch__label').at(0).text()).toEqual('ON');
-  expect(switch2.find('div .el-switch__label').at(1).text()).toEqual('OFF');
-  expect(switch2.find('div .el-switch__label').at(0).prop('style').display).toEqual('none');
-  expect(switch2.find('div .el-switch__label').at(1).prop('style').display).toEqual(undefined);
+  expect(switch2.find('label.el-switch').at(0).hasClass('is-checked')).toEqual(false);
+  expect(switch2.find('label.el-switch .el-switch__label').at(0).text()).toEqual('ON');
+  expect(switch2.find('label.el-switch .el-switch__label').at(1).text()).toEqual('OFF');
+  expect(switch2.find('label.el-switch .el-switch__label').at(0).prop('style').display).toEqual('none');
+  expect(switch2.find('label.el-switch .el-switch__label').at(1).prop('style').display).toEqual(undefined);
+
 });
 
 test('Extended value types', () => {
@@ -73,7 +74,7 @@ test('Extended value types', () => {
       </Tooltip>
     </div>);
 
-  expect(component.find('label .el-switch .el-switch--wide').at(0).hasClass('is-checked')).toEqual(true);
+  expect(component.find('label.el-switch.el-switch--wide').at(0).hasClass('is-checked')).toEqual(true);
   expect(component.find('div .el-switch__label').at(0).text()).toEqual('ON');
   expect(component.find('div .el-switch__label').at(1).text()).toEqual('OFF');
   expect(component.find('div .el-switch__label').at(0).prop('style').display).toEqual(undefined);
@@ -83,7 +84,7 @@ test('Extended value types', () => {
   // switch off
   component.find('input[type="checkbox"]').simulate('change', {target: {value: false}});
 
-  expect(component.find('label .el-switch .el-switch--wide').at(0).hasClass('is-checked')).toEqual(false);
+  expect(component.find('label.el-switch.el-switch--wide').at(0).hasClass('is-checked')).toEqual(false);
   expect(component.find('div .el-switch__label').at(0).text()).toEqual('ON');
   expect(component.find('div .el-switch__label').at(1).text()).toEqual('OFF');
   expect(component.find('div .el-switch__label').at(0).prop('style').display).toEqual('none');
@@ -101,7 +102,7 @@ test('Disabled', () => {
     </Switch>
   );
 
-  expect(switch1.find('label .el-switch').at(0).hasClass('is-disabled')).toEqual(true);
+  expect(switch1.find('label.el-switch').at(0).hasClass('is-disabled')).toEqual(true);
   expect(switch1.find('input[type="checkbox"]').at(0).prop('disabled')).toEqual(true);
 
   const switch2 = mount(
@@ -110,7 +111,7 @@ test('Disabled', () => {
       disabled>
     </Switch>);
 
-  expect(switch2.find('label .el-switch').at(0).hasClass('is-disabled')).toEqual(true);
+  expect(switch2.find('label.el-switch').at(0).hasClass('is-disabled')).toEqual(true);
   expect(switch2.find('input[type="checkbox"]').at(0).prop('disabled')).toEqual(true);
 
 });