fix Input prefix and suffix vertical align style

ant-design · Jan 5, 2017 · c4ac4d1 · c4ac4d1
1 parent d4132ac
commit c4ac4d1
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 87 deletions.
diff --git a/components/input/demo/presuffix.md b/components/input/demo/presuffix.md
@@ -11,7 +11,7 @@ title:
 
 ## en-US
 
-Add a prefix or suffix icon on the input.
+Add prefix or suffix icons inside input.
 
 ````jsx
 import { Input, Icon } from 'antd';
@@ -21,69 +21,27 @@ class App extends React.Component {
     super(props);
     this.state = {
       userName: '',
-      domain: '',
     };
-    this.onChangeUserName = this.emitChange.bind(this, 'userName');
-    this.onChangeDomain = this.emitChange.bind(this, 'domain');
   }
-  emitEmpty(type) {
-    this[`${type}Input`].focus();
-    this.setState({
-      [type]: '',
-    });
+  emitEmpty = () => {
+    this.userNameInput.focus();
+    this.setState({ userName: '' });
   }
-  emitChange(type, e) {
-    this.setState({
-      [type]: e.target.value,
-    });
-  }
-  renderClearIcon(type) {
-    const value = this.state[type];
-    const empty = this.emitEmpty.bind(this, type);
-    return value ? (
-      <Icon
-        type="close-circle"
-        onClick={empty}
-      />
-    ) : null;
-  }
-  renderUserNameInput() {
-    const { userName } = this.state;
-    return (
-      <div style={{ marginBottom: 16 }}>
-        <Input
-          placeholder="Enter your userName"
-          prefix={<Icon type="user" />}
-          suffix={this.renderClearIcon('userName')}
-          value={userName}
-          onChange={this.onChangeUserName}
-          ref={node => this.userNameInput = node}
-        />
-      </div>
-    );
-  }
-  renderDomainInput() {
-    const { domain } = this.state;
-    return (
-      <div style={{ marginBottom: 16 }}>
-        <Input
-          placeholder="Input your domain"
-          addonBefore="Http://"
-          addonAfter=".com"
-          suffix={this.renderClearIcon('domain')}
-          value={domain}
-          onChange={this.onChangeDomain}
-          ref={node => this.domainInput = node}
-        />
-      </div>
-    );
+  onChangeUserName = (e) => {
+    this.setState({ userName: e.target.value });
   }
   render() {
+    const { userName } = this.state;
+    const suffix = userName ? <Icon type="close-circle" onClick={this.emitEmpty} /> : null;
     return (
-      <div>
-        {this.renderUserNameInput()}
-        {this.renderDomainInput()}
-      </div>
+      <Input
+        placeholder="Enter your userName"
+        prefix={<Icon type="user" />}
+        suffix={suffix}
+        value={userName}
+        onChange={this.onChangeUserName}
+        ref={node => this.userNameInput = node}
+      />
     );
   }
 }

diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
@@ -1,7 +1,7 @@
 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@input-presuffix-width: 16;
+@input-presuffix-width: 17;
 
 // size mixins for input
 .input-lg() {
@@ -85,23 +85,6 @@
   }
 }
 
-// Input with icons, you can define @height if you wish to change the input size
-.input-with-icon(@height: @input-height-base) {
-  position: relative;
-
-  .@{iconfont-css-prefix} {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    z-index: 2;
-    .square(@height);
-    font-size: @font-size-lg;
-    line-height: @height;
-    text-align: center;
-    pointer-events: none;
-  }
-}
-
 // label input
 .input-group(@inputClass) {
   position: relative;
@@ -302,20 +285,17 @@
     z-index: 1;
   }
 
+  &:hover .@{inputClass} {
+    .hover();
+  }
+
   .@{inputClass}-prefix,
   .@{inputClass}-suffix {
     position: absolute;
-    top: 0;
-    bottom: 0;
+    top: 50%;
+    transform: translateY(-50%);
     z-index: 2;
-
-    &:after {
-      content: '';
-      display: inline-block;
-      width: 0;
-      height: 100%;
-      vertical-align: middle;
-    }
+    line-height: 1.2;
   }
 
   .@{inputClass}-prefix {
@@ -334,4 +314,3 @@
     padding-right: @input-padding-horizontal + @input-presuffix-width;
   }
 }
-