Factor clear button semantics into a ClearableWidget comp.

src/components/widgets/BaseInput.js

@@ -1,5 +1,7 @@
 import React, {PropTypes} from "react";
 
+import ClearableWidget from "./ClearableWidget";
+
 
 function BaseInput(props) {
   // Note: since React 15.2.0 we can't forward unknown element attributes, so we
@@ -18,25 +20,17 @@ function BaseInput(props) {
   const _onChange = ({target: {value}}) => {
     return props.onChange(value);
   };
-  const _onClear = (event) => {
-    event.preventDefault();
-    return props.onChange(undefined);
-  };
   return (
-    <div className="input-group">
+    <ClearableWidget onChange={props.onChange}>
       <input
-        {...inputProps}
-        className="form-control"
-        readOnly={readonly}
-        autoFocus={autofocus}
-        value={typeof value === "undefined" ? "" : value}
-        onChange={_onChange}
-        onBlur={onBlur && (event => onBlur(inputProps.id, event.target.value))}/>
-      <a href="#" className="input-group-addon clear-btn" title="Clear field"
-        onClick={_onClear}>
-        <i className="glyphicon glyphicon-remove"/>
-      </a>
-    </div>
+      {...inputProps}
+      className="form-control"
+      readOnly={readonly}
+      autoFocus={autofocus}
+      value={typeof value === "undefined" ? "" : value}
+      onChange={_onChange}
+      onBlur={onBlur && (event => onBlur(inputProps.id, event.target.value))}/>
+    </ClearableWidget>
   );
 }
 

src/components/widgets/ClearableWidget.js

@@ -0,0 +1,29 @@
+import React, {PropTypes} from "react";
+
+
+function ClearableWidget({onChange, children}) {
+  const _onClear = (event) => {
+    event.preventDefault();
+    return onChange(undefined);
+  };
+  return (
+    <div className="input-group">
+    {children}
+      <a href="#" className="input-group-addon clear-btn" title="Clear field"
+        onClick={_onClear}>
+        <i className="glyphicon glyphicon-remove"/>
+      </a>
+    </div>
+  );
+}
+
+ClearableWidget.defaultProps = {
+};
+
+if (process.env.NODE_ENV !== "production") {
+  ClearableWidget.propTypes = {
+    onChange: PropTypes.func,
+  };
+}
+
+export default ClearableWidget;

src/components/widgets/SelectWidget.js

@@ -1,7 +1,9 @@
 import React, {PropTypes} from "react";
 
+import ClearableWidget from "./ClearableWidget";
 import {asNumber} from "../../utils";
 
+
 /**
  * This is a silly limitation in the DOM where option change event values are
  * always retrieved as strings.
@@ -49,12 +51,8 @@ function SelectWidget({
     const newValue = getValue(event, multiple);
     onChange(processValue(schema, newValue));
   };
-  const _onClear = (event) => {
-    event.preventDefault();
-    return onChange(undefined);
-  };
   return (
-    <div className="input-group">
+    <ClearableWidget onChange={onChange}>
       <select
         id={id}
         multiple={multiple}
@@ -74,11 +72,7 @@ function SelectWidget({
           return <option key={i} value={value}>{label}</option>;
         })}
       </select>
-      <a href="#" className="input-group-addon clear-btn" title="Clear field"
-        onClick={_onClear}>
-        <i className="glyphicon glyphicon-remove"/>
-      </a>
-    </div>
+    </ClearableWidget>
   );
 }
 

src/components/widgets/TextareaWidget.js

@@ -1,5 +1,7 @@
 import React, {PropTypes} from "react";
 
+import ClearableWidget from "./ClearableWidget";
+
 
 function TextareaWidget({
   schema,
@@ -16,12 +18,8 @@ function TextareaWidget({
   const _onChange = ({target: {value}}) => {
     return onChange(value);
   };
-  const _onClear = (event) => {
-    event.preventDefault();
-    return onChange(undefined);
-  };
   return (
-    <div className="input-group">
+    <ClearableWidget onChange={onChange}>
       <textarea
         id={id}
         className="form-control"
@@ -33,11 +31,7 @@ function TextareaWidget({
         autoFocus={autofocus}
         onBlur={onBlur && (event => onBlur(id, event.target.value))}
         onChange={_onChange}/>
-      <a href="#" className="input-group-addon clear-btn" title="Clear field"
-        onClick={_onClear}>
-        <i className="glyphicon glyphicon-remove"/>
-      </a>
-    </div>
+    </ClearableWidget>
   );
 }