Input prop audit

enigma-io · Feb 2, 2017 · 632116a · 632116a
1 parent 1999ed9
commit 632116a
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 317 deletions.
diff --git a/packages/boundless-input/README.md b/packages/boundless-input/README.md
@@ -79,6 +79,12 @@ There are no required props.
 
 ### Optional Props
 
+- __`component`__ ・ overrides the HTML container tag
+
+  Expects | Default Value
+  -       | -
+  `string` | `'div'`
+
 - __`hidePlaceholderOnFocus`__ ・ triggers the placeholder to disappear when the input field is focused, reappears when the user has tabbed away or focus is moved
 
   Expects | Default Value

diff --git a/packages/boundless-input/index.js b/packages/boundless-input/index.js
@@ -23,6 +23,11 @@ When using `Input` in your project, you may call the following methods on a rend
  */
 export default class Input extends React.PureComponent {
     static propTypes = {
+        /**
+         * overrides the HTML container tag
+         */
+        component: PropTypes.string,
+
         /**
          * triggers the placeholder to disappear when the input field is focused, reappears when the user has tabbed away or focus is moved
          */
@@ -43,6 +48,7 @@ export default class Input extends React.PureComponent {
     }
 
     static defaultProps = {
+        component: 'div',
         hidePlaceholderOnFocus: true,
         inputProps: {
             type: 'text',
@@ -118,35 +124,32 @@ export default class Input extends React.PureComponent {
 
     getPlaceholderText() {
         const isNonEmpty = this.state.input !== '';
-        const shouldShowPlaceholder =   this.props.hidePlaceholderOnFocus === true
-                                        ? this.state.isFocused === false && isNonEmpty === false
-                                        : isNonEmpty === false;
+        const shouldShowPlaceholder = this.props.hidePlaceholderOnFocus === true
+                                      ? this.state.isFocused === false && isNonEmpty === false
+                                      : isNonEmpty === false;
 
         return shouldShowPlaceholder ? this.props.inputProps.placeholder : '';
     }
 
     render() {
-        const {props} = this;
-
         return (
-            <div
-                {...omit(props, Input.internalKeys)}
-                ref='wrapper'
-                className={cx('b-input-wrapper', props.className)}
+            <this.props.component
+                {...omit(this.props, Input.internalKeys)}
+                className={cx('b-input-wrapper', this.props.className)}
                 title={this.getPlaceholderText()}>
                 <input
-                    {...props.inputProps}
+                    {...this.props.inputProps}
                     ref='field'
-                    className={cx('b-input', props.inputProps.className)}
+                    className={cx('b-input', this.props.inputProps.className)}
                     placeholder={null}
                     onBlur={this.handleBlur}
                     onFocus={this.handleFocus}
                     onChange={this.handleChange} />
 
-                <div ref='placeholder' className='b-input-placeholder b-input'>
+                <div className='b-input-placeholder b-input'>
                     {this.getPlaceholderText()}
                 </div>
-            </div>
+            </this.props.component>
         );
     }
 }