Tests, example, and documentation for disabled property.

Author: wehriam

README.md

@@ -78,6 +78,10 @@ DatePicker component. Renders as a [React-Bootstrap InputGroup](https://react-bo
     * **Optional**
     * **Type:** `string`
     * **Example:** `"2016-05-19T16:00:00.000Z"`
+  * `disabled` - Whether or not component is disabled.
+    * **Optional**
+    * **Type:** `bool`
+    * **Example:** `false`
   * `onChange` - Focus callback function.
     * **Optional**
     * **Type:** `function`
@@ -107,7 +111,7 @@ DatePicker component. Renders as a [React-Bootstrap InputGroup](https://react-bo
     * **Example:** `"×"`
   * `showClearButton` - Toggles the visibility of the clearButton
     * **Optional**
-    * **Type:** `bool` 
+    * **Type:** `bool`
     * **Example:** `false`
   * `onClear` - Defines what happens when clear button is clicked.
     * **Optional**

lib/index.js

@@ -169,6 +169,7 @@ exports.default = _react2.default.createClass({
     monthLabels: _react2.default.PropTypes.array,
     onChange: _react2.default.PropTypes.func,
     onClear: _react2.default.PropTypes.func,
+    disabled: _react2.default.PropTypes.bool,
     weekStartsOnMonday: _react2.default.PropTypes.bool,
     clearButtonElement: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
     showClearButton: _react2.default.PropTypes.bool,
@@ -190,7 +191,8 @@ exports.default = _react2.default.createClass({
       nextButtonElement: ">",
       calendarPlacement: "bottom",
       dateFormat: dateFormat,
-      showClearButton: true
+      showClearButton: true,
+      disabled: false
     };
   },
   getInitialState: function getInitialState() {
@@ -426,7 +428,7 @@ exports.default = _react2.default.createClass({
       dateFormat: this.props.dateFormat });
     return _react2.default.createElement(
       _reactBootstrap.InputGroup,
-      { ref: 'inputGroup', bsClass: this.props.bsClass, bsSize: this.props.bsSize, id: this.props.id ? this.props.id + "_group" : null },
+      { ref: 'inputGroup', bsClass: this.props.showClearButton ? this.props.bsClass : "", bsSize: this.props.bsSize, id: this.props.id ? this.props.id + "_group" : null },
       _react2.default.createElement(
         _reactBootstrap.Overlay,
         { rootClose: true, onHide: this.handleHide, show: this.state.focused, container: function container() {
@@ -447,15 +449,21 @@ exports.default = _react2.default.createClass({
         value: this.state.inputValue || '',
         ref: 'input',
         type: 'text',
+        disabled: this.props.disabled,
         placeholder: this.state.focused ? this.props.dateFormat : this.state.placeholder,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
-        onChange: this.handleInputChange
+        onChange: this.handleInputChange,
+        style: { width: "100%" }
       }),
       this.props.showClearButton && _react2.default.createElement(
         _reactBootstrap.InputGroup.Addon,
-        { onClick: this.clear, style: { cursor: this.state.inputValue ? "pointer" : "not-allowed" } },
-        this.props.clearButtonElement
+        { onClick: this.props.disabled ? null : this.clear, style: { cursor: this.state.inputValue && !this.props.disabled ? "pointer" : "not-allowed" } },
+        _react2.default.createElement(
+          'div',
+          { style: { opacity: this.state.inputValue && !this.props.disabled ? 1 : 0.5 } },
+          this.props.clearButtonElement
+        )
       )
     );
   }

test/core.test.jsx

@@ -447,4 +447,46 @@ describe("Date Picker", function() {
     assert.notEqual(document.querySelector("#calendarContainer #calendar"), null);
     ReactDOM.unmountComponentAtNode(container);
   }));
+  it("should disable the input.", co.wrap(function *(){
+    const id = UUID.v4();
+    const value = new Date().toISOString();
+    const App = React.createClass({
+      render: function(){
+        return <div>
+          <DatePicker id={id} value={value} disabled={true}/>
+        </div>;
+      }
+    });
+    yield new Promise(function(resolve, reject){
+      ReactDOM.render(<App />, container, resolve);
+    });
+    const hiddenInputElement = document.getElementById(id);
+    const inputElement = document.querySelector("input.form-control");
+    assert.equal(inputElement.disabled, true);
+    ReactDOM.unmountComponentAtNode(container);
+  }));
+  it("should disable the input.", co.wrap(function *(){
+    const id = UUID.v4();
+    let value = new Date().toISOString();
+    let originalValue = value;
+    const App = React.createClass({
+      handleChange: function(newValue){
+        value = newValue;
+      },
+      render: function(){
+        return <div>
+          <DatePicker id={id} onChange={this.handleChange} disabled={true} />
+        </div>;
+      }
+    });
+    yield new Promise(function(resolve, reject){
+      ReactDOM.render(<App />, container, resolve);
+    });
+    const inputElement = document.querySelector("input.form-control");
+    assert.equal(inputElement.disabled, true);
+    const clearButtonElement = document.querySelector("span.input-group-addon");
+    TestUtils.Simulate.click(clearButtonElement);
+    assert.equal(value, originalValue);
+    ReactDOM.unmountComponentAtNode(container);
+  }));
 });