Merge pull request #252 from XiaoMi/hotfix/#152

fix #152
XiaoMi · Jun 3, 2019 · 51df5b0 · 51df5b0
2 parents ba0530f + f2711ee
commit 51df5b0
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 81 deletions.
diff --git a/components/input/index.js b/components/input/index.js
@@ -195,82 +195,56 @@ class Input extends Component {
     let { disabled } = this.props
 
     return (
-      <div className='hi-input__out'>
-        <div className={`hi-input__inner ${active ? 'active' : ''} ${disabled ? 'disabled' : ''}`}>
-          <textarea
-            autoComplete='off'
-            ref={arg => {
-              this._Input = arg
-            }}
-            className={`hi-input__text ${disabled ? 'disabled' : ''}`}
-            value={this.state.value}
-            disabled={disabled}
-            {...this.attrs}
-            onChange={e => {
-              e.persist()
-              let valueTrue = e.target.value
-
-              this.setState({ value: valueTrue, valueTrue }, () => {
-                this.props.onChange && this.props.onChange(e, valueTrue)
-              })
-            }}
-            onBlur={e => {
-              e.persist()
-              let valueTrue = e.target.value
-
-              this.setState({ active: false }, () => {
-                this.props.onBlur && this.props.onBlur(e, valueTrue)
-              })
-            }}
-            onFocus={e => {
-              e.persist()
-              const valueTrue = e.target.value
-
-              this.setState({ active: true }, () => {
-                this.props.onFocus && this.props.onFocus(e, valueTrue)
-              })
-            }}
-            onKeyDown={e => {
-              const valueTrue = e.target.value
-
-              this.props.onKeyDown && this.props.onKeyDown(e, valueTrue)
-            }}
-            onKeyUp={e => {
-              const valueTrue = e.target.value
+      <textarea
+        className={`hi-input ${active ? 'active' : ''} ${disabled ? 'disabled' : ''}`}
+        style={this.props.style}
+        autoComplete='off'
+        value={this.state.value}
+        disabled={disabled}
+        {...this.attrs}
+        onChange={e => {
+          e.persist()
+          let valueTrue = e.target.value
+
+          this.setState({ value: valueTrue, valueTrue }, () => {
+            this.props.onChange && this.props.onChange(e, valueTrue)
+          })
+        }}
+        onBlur={e => {
+          e.persist()
+          let valueTrue = e.target.value
 
-              this.props.onKeyUp && this.props.onKeyUp(e, valueTrue)
-            }}
-            onKeyPress={e => {
-              const valueTrue = e.target.value
+          this.setState({ active: false }, () => {
+            this.props.onBlur && this.props.onBlur(e, valueTrue)
+          })
+        }}
+        onFocus={e => {
+          e.persist()
+          const valueTrue = e.target.value
 
-              this.props.onKeyPress && this.props.onKeyPress(e, valueTrue)
-            }}
-            onInput={e => {
-              const valueTrue = e.target.value
+          this.setState({ active: true }, () => {
+            this.props.onFocus && this.props.onFocus(e, valueTrue)
+          })
+        }}
+        onKeyDown={e => {
+          const valueTrue = e.target.value
 
-              this.props.onInput && this.props.onInput(e, valueTrue)
-            }}
-          />
-        </div>
-      </div>
-    )
-  }
+          this.props.onKeyDown && this.props.onKeyDown(e, valueTrue)
+        }}
+        onKeyUp={e => {
+          const valueTrue = e.target.value
 
-  render () {
-    const { type } = this.attrs
+          this.props.onKeyUp && this.props.onKeyUp(e, valueTrue)
+        }}
+        onKeyPress={e => {
+          const valueTrue = e.target.value
 
-    const { size, id, className, required } = this.props
+          this.props.onKeyPress && this.props.onKeyPress(e, valueTrue)
+        }}
+        onInput={e => {
+          const valueTrue = e.target.value
 
-    return (
-      <div
-        id={id}
-        className={`hi-input ${className || ''} ${type || ''}${size ? ' hi-input_' + size : ''}${
-          required ? ' required' : ''
-        }`}
-        style={this.props.style}
-        data-value={this.state.valueTrue}
-        onClick={e => {
-          this._Input.focus()
+          this.props.onInput && this.props.onInput(e, valueTrue)
         }}
         onMouseOver={e => {
           this.setState({
@@ -282,11 +256,39 @@ class Input extends Component {
             hover: false
           })
         }}
-      >
-        {type === 'textarea' ? this.renderTextarea() : this.renderText()}
-      </div>
+      />
     )
   }
+
+  render () {
+    const { type } = this.attrs
+
+    const { size, id, className, required } = this.props
+
+    return type === 'textarea' ? this.renderTextarea() : (<div
+      id={id}
+      className={`hi-input ${className || ''} ${type || ''}${size ? ' hi-input_' + size : ''}${
+        required ? ' required' : ''
+      }`}
+      style={this.props.style}
+      data-value={this.state.valueTrue}
+      onClick={e => {
+        this._Input.focus()
+      }}
+      onMouseOver={e => {
+        this.setState({
+          hover: true
+        })
+      }}
+      onMouseLeave={e => {
+        this.setState({
+          hover: false
+        })
+      }}
+    >
+      {this.renderText()}
+    </div>)
+  }
 }
 
 export default Input
diff --git a/components/input/style/index.scss b/components/input/style/index.scss
@@ -2,6 +2,53 @@
 
 $input: 'hi-input' !default;
 
+textarea.#{$input} {
+  box-shadow: none;
+  outline: none;
+  color: $normal-color;
+  font-size: $font-size;
+  min-height: 30px;
+  line-height: $line-height;
+  resize: vertical;
+  overflow: auto;
+  height: 100%;
+  padding: 4px 12px;
+  border: 1px solid $border-color-normal;
+  box-sizing: border-box;
+  border-radius: $border-radius;
+  background-color: #fff;
+  transition: border-color 0.3s;
+
+  &:not(.disabled):hover {
+    border-color: $border-color-active;
+  }
+
+  &.active {
+    border-color: $border-color-active;
+  }
+
+  &.disabled {
+    color: $disabled-color;
+    background-color: $disabled-bg-color;
+  }
+
+  &::-webkit-input-placeholder {
+    color: $placeholder-color;
+  }
+
+  &:-moz-placeholder {
+    color: $placeholder-color;
+  }
+
+  &::-moz-placeholder {
+    color: $placeholder-color;
+  }
+
+  &:-ms-input-placeholder {
+    color: $placeholder-color;
+  }
+}
+
 .#{$input},
 .#{$input}_m {
   position: relative;
@@ -26,8 +73,7 @@ $input: 'hi-input' !default;
     color: $placeholder-color;
   }
 
-  input,
-  textarea {
+  input {
     flex: 1 1 auto;
     border: none;
     outline: none;
@@ -44,12 +90,6 @@ $input: 'hi-input' !default;
     }
   }
 
-  textarea {
-    resize: vertical;
-    overflow: auto;
-    height: 100%;
-  }
-
   input[type='search'] {
     /* stylelint-disable */
     -webkit-appearance: none;