add input inline placeholder

vmakhaev · Dec 3, 2014 · d8ecf6d · d8ecf6d
1 parent 608282b
commit d8ecf6d
Showing 1 changed file with 10 additions and 7 deletions.
diff --git a/src/js/input.jsx b/src/js/input.jsx
@@ -8,6 +8,7 @@ var Input = React.createClass({
   propTypes: {
     multiline: React.PropTypes.bool,
     required: React.PropTypes.bool,
+    inlinePlaceholder: React.PropTypes.bool,
     min: React.PropTypes.number,
     max: React.PropTypes.number,
     step: React.PropTypes.number,
@@ -52,22 +53,24 @@ var Input = React.createClass({
       'mui-text': this.props.type === 'text',
       'mui-error': this.props.error !== undefined && this.props.error !== null
     }),
+    placeholder = this.props.inlinePlaceholder ? this.props.placeholder : "",
     inputElement = this.props.multiline ?
       this.props.valueLink ?
-        <textarea {...this.props} className="mui-input-textarea" placeholder=""
+        <textarea {...this.props} className="mui-input-textarea" placeholder={placeholder}
           rows={this.state.rows} /> :
         <textarea {...this.props} value={this.state.value} className="mui-input-textarea"
-          placeholder="" rows={this.state.rows} onChange={this._onTextAreaChange} onBlur={this._onInputBlur} /> :
+          placeholder={placeholder} rows={this.state.rows} onChange={this._onTextAreaChange} onBlur={this._onInputBlur} /> :
         this.props.valueLink ?
-          <input {...this.props} ref="input" placeholder="" /> :
-          <input {...this.props} ref="input" value={this.state.value} placeholder=""
-            onChange={this._onInputChange} onBlur={this._onInputBlur} />;
+          <input {...this.props} ref="input" placeholder={placeholder} /> :
+          <input {...this.props} ref="input" value={this.state.value} placeholder={placeholder}
+            onChange={this._onInputChange} onBlur={this._onInputBlur} />
+    placeholderSpan = this.props.inlinePlaceholder ? null : <span className="mui-input-placeholder"
+      onClick={this._onPlaceholderClick}>{this.props.placeholder}</span>;
 
     return (
       <div ref={this.props.ref} className={classes}>
         {inputElement}
-        <span className="mui-input-placeholder"
-          onClick={this._onPlaceholderClick}>{this.props.placeholder}</span>
+        {placeholderSpan}
         <span className="mui-input-highlight"></span>
         <span className="mui-input-bar"></span>
         <span className="mui-input-description">{this.props.description}</span>