Release 0.3.7

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## Changelog
 
+* 0.3.7 Expose a `.focus()` method (@py-in-the-sky)
 * 0.3.6 Add custom onBlur and onFocus handler support (@Aweary)
 * 0.3.5 Support composable SelctField (@rblakeley), update REDME SelectField example, remove mixin
 * 0.3.4 Fix for #35 - Treat MUI Checkbox as a controlled component to address MUI 0.14.0-rc2 regression

lib/FormsyCheckbox.js

@@ -16,6 +16,8 @@ var _materialUiLibCheckbox = require('material-ui/lib/checkbox');
 
 var _materialUiLibCheckbox2 = _interopRequireDefault(_materialUiLibCheckbox);
 
+var _utils = require('./utils');
+
 var FormsyCheckbox = _react2['default'].createClass({
   displayName: 'FormsyCheckbox',
 
@@ -30,16 +32,14 @@ var FormsyCheckbox = _react2['default'].createClass({
   },
 
   componentDidMount: function componentDidMount() {
-    this.setValue(this._checkbox.isChecked());
+    this.setValue(this._muiComponent.isChecked());
   },
 
-  render: function render() {
-    var _this = this;
+  _setMuiComponentAndMaybeFocus: _utils._setMuiComponentAndMaybeFocus,
 
+  render: function render() {
     return _react2['default'].createElement(_materialUiLibCheckbox2['default'], _extends({}, this.props, {
-      ref: function (c) {
-        return _this._checkbox = c;
-      },
+      ref: this._setMuiComponentAndMaybeFocus,
       onCheck: this.handleValueChange,
       checked: this.getValue()
     }));

lib/FormsyDate.js

@@ -16,6 +16,8 @@ var _materialUiLibDatePickerDatePicker = require('material-ui/lib/date-picker/da
 
 var _materialUiLibDatePickerDatePicker2 = _interopRequireDefault(_materialUiLibDatePickerDatePicker);
 
+var _utils = require('./utils');
+
 var FormsyDate = _react2['default'].createClass({
   displayName: 'FormsyDate',
 
@@ -29,13 +31,16 @@ var FormsyDate = _react2['default'].createClass({
     this.setValue(value);
   },
 
+  _setMuiComponentAndMaybeFocus: _utils._setMuiComponentAndMaybeFocus,
+
   render: function render() {
     return _react2['default'].createElement(_materialUiLibDatePickerDatePicker2['default'],
     // Sets the default date format to be ISO8601 (YYYY-MM-DD), accounting for current timezone
     _extends({ formatDate: function (date) {
         return new Date(date.toDateString() + " 12:00:00 +0000").toISOString().substring(0, 10);
       }
     }, this.props, {
+      ref: this._setMuiComponentAndMaybeFocus,
       defaultValue: this.props.value,
       onChange: this.handleValueChange,
       errorText: this.getErrorMessage(),

lib/FormsyRadioGroup.js

@@ -16,6 +16,8 @@ var _materialUiLibRadioButtonGroup = require('material-ui/lib/radio-button-group
 
 var _materialUiLibRadioButtonGroup2 = _interopRequireDefault(_materialUiLibRadioButtonGroup);
 
+var _utils = require('./utils');
+
 var FormsyRadioGroup = _react2['default'].createClass({
   displayName: 'FormsyRadioGroup',
 
@@ -30,18 +32,16 @@ var FormsyRadioGroup = _react2['default'].createClass({
   },
 
   componentDidMount: function componentDidMount() {
-    this.setValue(this._radio.getSelectedValue());
+    this.setValue(this._muiComponent.getSelectedValue());
   },
 
-  render: function render() {
-    var _this = this;
+  _setMuiComponentAndMaybeFocus: _utils._setMuiComponentAndMaybeFocus,
 
+  render: function render() {
     return _react2['default'].createElement(
       _materialUiLibRadioButtonGroup2['default'],
       _extends({}, this.props, {
-        ref: function (c) {
-          return _this._radio = c;
-        },
+        ref: this._setMuiComponentAndMaybeFocus,
         onChange: this.handleValueChange
       }),
       this.props.children

lib/FormsySelect.js

@@ -16,6 +16,8 @@ var _materialUiLibSelectField = require('material-ui/lib/select-field');
 
 var _materialUiLibSelectField2 = _interopRequireDefault(_materialUiLibSelectField);
 
+var _utils = require('./utils');
+
 var FormsySelect = _react2['default'].createClass({
   displayName: 'FormsySelect',
 
@@ -36,12 +38,15 @@ var FormsySelect = _react2['default'].createClass({
     this.setState({ hasChanged: true });
   },
 
+  _setMuiComponentAndMaybeFocus: _utils._setMuiComponentAndMaybeFocus,
+
   render: function render() {
     var value = this.state.hasChanged ? this.getValue() : this.props.value;
 
     return _react2['default'].createElement(
       _materialUiLibSelectField2['default'],
       _extends({}, this.props, {
+        ref: this._setMuiComponentAndMaybeFocus,
         onChange: this.handleChange,
         errorText: this.getErrorMessage(),
         value: value

lib/FormsyText.js

@@ -16,6 +16,8 @@ var _materialUiLibTextField = require('material-ui/lib/text-field');
 
 var _materialUiLibTextField2 = _interopRequireDefault(_materialUiLibTextField);
 
+var _utils = require('./utils');
+
 var FormsyText = _react2['default'].createClass({
   displayName: 'FormsyText',
 
@@ -52,8 +54,11 @@ var FormsyText = _react2['default'].createClass({
     this.setValue(event.currentTarget.value);
   },
 
+  _setMuiComponentAndMaybeFocus: _utils._setMuiComponentAndMaybeFocus,
+
   render: function render() {
     return _react2['default'].createElement(_materialUiLibTextField2['default'], _extends({}, this.props, {
+      ref: this._setMuiComponentAndMaybeFocus,
       defaultValue: this.props.value,
       onChange: this.handleChange,
       onBlur: this.handleBlur,

lib/FormsyTime.js

@@ -16,6 +16,8 @@ var _materialUiLibTimePickerTimePicker = require('material-ui/lib/time-picker/ti
 
 var _materialUiLibTimePickerTimePicker2 = _interopRequireDefault(_materialUiLibTimePickerTimePicker);
 
+var _utils = require('./utils');
+
 var FormsyTime = _react2['default'].createClass({
   displayName: 'FormsyTime',
 
@@ -29,8 +31,11 @@ var FormsyTime = _react2['default'].createClass({
     this.setValue(value);
   },
 
+  _setMuiComponentAndMaybeFocus: _utils._setMuiComponentAndMaybeFocus,
+
   render: function render() {
     return _react2['default'].createElement(_materialUiLibTimePickerTimePicker2['default'], _extends({}, this.props, {
+      ref: this._setMuiComponentAndMaybeFocus,
       onChange: this.handleValueChange
     }));
   }

lib/FormsyToggle.js

@@ -16,6 +16,8 @@ var _materialUiLibToggle = require('material-ui/lib/toggle');
 
 var _materialUiLibToggle2 = _interopRequireDefault(_materialUiLibToggle);
 
+var _utils = require('./utils');
+
 var FormsyToggle = _react2['default'].createClass({
   displayName: 'FormsyToggle',
 
@@ -30,16 +32,14 @@ var FormsyToggle = _react2['default'].createClass({
   },
 
   componentDidMount: function componentDidMount() {
-    this.setValue(this._toggle.isToggled());
+    this.setValue(this._muiComponent.isToggled());
   },
 
-  render: function render() {
-    var _this = this;
+  _setMuiComponentAndMaybeFocus: _utils._setMuiComponentAndMaybeFocus,
 
+  render: function render() {
     return _react2['default'].createElement(_materialUiLibToggle2['default'], _extends({}, this.props, {
-      ref: function (c) {
-        return _this._toggle = c;
-      },
+      ref: this._setMuiComponentAndMaybeFocus,
       onToggle: this.handleValueChange
     }));
   }

lib/utils.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+exports._setMuiComponentAndMaybeFocus = _setMuiComponentAndMaybeFocus;
+
+function _setMuiComponentAndMaybeFocus(c) {
+  if (c === this._muiComponent) return;
+
+  this._muiComponent = c;
+
+  if (c && typeof c.focus === 'function') {
+    this.focus = function () {
+      return c.focus();
+    };
+  } else if (this.hasOwnProperty('focus')) {
+    delete this.focus;
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "formsy-material-ui",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "A formsy-react compatibility wrapper for Material-UI form components.",
   "main": "./lib/index.js",
   "scripts": {