From 611965fe9674d9f482dc37f30a9ce23eeca78103 Mon Sep 17 00:00:00 2001 From: mbrookes Date: Tue, 10 Nov 2015 18:44:56 +0000 Subject: [PATCH] Split into separate files to allow individual import of MUI components --- CHANGELOG.md | 1 + README.md | 19 +++- formsy-material-ui.jsx | 193 ------------------------------------ index.js | 203 -------------------------------------- lib/FormCmponentMixin.js | 20 ++++ lib/FormComponentMixin.js | 15 +++ lib/FormsyCheckbox.js | 30 ++++++ lib/FormsyDate.js | 25 +++++ lib/FormsyRadio.js | 15 +++ lib/FormsyRadioGroup.js | 34 +++++++ lib/FormsySelect.js | 31 ++++++ lib/FormsyText.js | 53 ++++++++++ lib/FormsyTime.js | 21 ++++ lib/FormsyToggle.js | 30 ++++++ lib/index.js | 12 +++ package.json | 7 +- src/FormComponentMixin.js | 13 +++ src/FormsyCheckbox.jsx | 23 +++++ src/FormsyDate.jsx | 19 ++++ src/FormsyRadio.jsx | 11 +++ src/FormsyRadioGroup.jsx | 25 +++++ src/FormsySelect.jsx | 28 ++++++ src/FormsyText.jsx | 52 ++++++++++ src/FormsyTime.jsx | 18 ++++ src/FormsyToggle.jsx | 23 +++++ src/index.jsx | 10 ++ 26 files changed, 531 insertions(+), 400 deletions(-) delete mode 100644 formsy-material-ui.jsx delete mode 100644 index.js create mode 100644 lib/FormCmponentMixin.js create mode 100644 lib/FormComponentMixin.js create mode 100644 lib/FormsyCheckbox.js create mode 100644 lib/FormsyDate.js create mode 100644 lib/FormsyRadio.js create mode 100644 lib/FormsyRadioGroup.js create mode 100644 lib/FormsySelect.js create mode 100644 lib/FormsyText.js create mode 100644 lib/FormsyTime.js create mode 100644 lib/FormsyToggle.js create mode 100644 lib/index.js create mode 100644 src/FormComponentMixin.js create mode 100644 src/FormsyCheckbox.jsx create mode 100644 src/FormsyDate.jsx create mode 100644 src/FormsyRadio.jsx create mode 100644 src/FormsyRadioGroup.jsx create mode 100644 src/FormsySelect.jsx create mode 100644 src/FormsyText.jsx create mode 100644 src/FormsyTime.jsx create mode 100644 src/FormsyToggle.jsx create mode 100644 src/index.jsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 0289902..2fef8ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## Changelog +* 0.3.0 Split into separate files to allow individual import of MUI components * 0.2.5 Fix issue #21 Textfield defaultValue handling. * 0.2.4 Updated textfield handling (@vijayrawatsan), selectfield fix (@dmlinn). * 0.2.3 Fix textfield initialization through this.refs.form.reset(model) (@vijayrawatsan). diff --git a/README.md b/README.md index 8ab6735..25fdad0 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,24 @@ Note: For React 0.13.x compatibility, specify formsy-react 0.14.1 in your app. ## Usage -Note for `FormsyText` you must use `value` instead of `defaultValue` to set a default value. +Note: for `FormsyText` you must use `value` instead of `defaultValue` to set a default value. + +As of 0.3.0 the library is split into separate modules, so you can import only those needed for a particular form. +This will save overhead particularly if you are not using the Date and / or Time components. + +```js +var FormsyCheckbox = require('formsy-material-ui/lib/FormsyCheckbox'); +var FormsyDate = require('formsy-material-ui/lib/FormsyDate'); +var FormsyRadio = require('formsy-material-ui/lib/FormsyRadio'); +var FormsyRadioGroup = require('formsy-material-ui/lib/FormsyRadioGroup'); +var FormsySelect = require('formsy-material-ui/lib/FormsySelect'); +var FormsyText = require('formsy-material-ui/lib/FormsyText'); +var FormsyTime = require('formsy-material-ui/lib/FormsyTime'); +var FormsyToggle = require('formsy-material-ui/lib/FormsyToggle'); +``` + +If you prefer you can import the whole library, and associated MUI components, by requiring `formsy-material-ui` +this will have the same footprint, regardless of which components you chose to assign in the following line(s): ### ES6: diff --git a/formsy-material-ui.jsx b/formsy-material-ui.jsx deleted file mode 100644 index 7801424..0000000 --- a/formsy-material-ui.jsx +++ /dev/null @@ -1,193 +0,0 @@ -'use strict'; - -const React = require('react'); -const Formsy = require('formsy-react'); - -const Checkbox = require('material-ui/lib/checkbox'); -const DatePicker = require('material-ui/lib/date-picker/date-picker'); -const RadioButtonGroup = require('material-ui/lib/radio-button-group'); -const SelectField = require('material-ui/lib/select-field'); -const TextField = require('material-ui/lib/text-field'); -const TimePicker = require('material-ui/lib/time-picker/time-picker'); -const Toggle = require('material-ui/lib/toggle'); - -let FormComponentMixin = { - propTypes: { - name: React.PropTypes.string.isRequired, - validations: React.PropTypes.string, - validationError: React.PropTypes.string, - hintText: React.PropTypes.string, - floatingLabelText: React.PropTypes.string - }, - - handleChange: function (event) { - this.setValue(event.target.value); - }, - - handleValueChange: function (event, value) { - this.setValue(value); - } - -}; - -let FormsyCheckbox = React.createClass({ - mixins: [ Formsy.Mixin, FormComponentMixin ], - - componentDidMount: function () { - this.setValue(this._checkbox.isChecked()); - }, - - render: function () { - return ( - this._checkbox = c} - onCheck={this.handleValueChange} /> - ); - } -}); - -let FormsyDate = React.createClass({ - mixins: [ Formsy.Mixin, FormComponentMixin ], - - render: function () { - return ( - date.toISOString().substring(0,10)} - {...this.props} - onChange={this.handleValueChange} /> - ); - } -}); - -let FormsyRadio = React.createClass({ - mixins: [ Formsy.Mixin ], - - // Material-UI replaces any component inside RadioButtonGroup with RadioButton, so no need to render it here - render: function () {} -}); - -let FormsyRadioGroup = React.createClass({ - mixins: [ Formsy.Mixin, FormComponentMixin ], - - componentDidMount: function () { - this.setValue(this._radio.getSelectedValue()); - }, - - render: function () { - return ( - this._radio = c} - onChange={this.handleValueChange} > - {this.props.children} - - ); - } -}); - -let FormsySelect = React.createClass({ - mixins: [ Formsy.Mixin, FormComponentMixin], - - render: function () { - return ( - - ); - } -}); - -let FormsyText = React.createClass({ - displayName: 'FormsyText', - - propTypes: { - name: React.PropTypes.string.isRequired, - validations: React.PropTypes.string, - validationError: React.PropTypes.string, - hintText: React.PropTypes.string, - floatingLabelText: React.PropTypes.string - }, - - handleChange: function handleChange(event) { - if(this.getErrorMessage() != null){ - this.setValue(event.currentTarget.value); - } - else{ - if (this.isValidValue(event.target.value)) { - this.setValue(event.target.value); - } - else{ - this.setState({ - _value: event.currentTarget.value, - _isPristine: false - }); - } - } - }, - - handleBlur: function handleBlur(event) { - this.setValue(event.currentTarget.value); - }, - - handleEnterKeyDown: function handleEnterKeyDown(event) { - this.setValue(event.currentTarget.value); - }, - - mixins: [ Formsy.Mixin ], - - render: function () { - return ( - - ); - } -}); - -let FormsyTime = React.createClass({ - mixins: [ Formsy.Mixin, FormComponentMixin ], - - render: function () { - return ( - - ); - } -}); - -let FormsyToggle = React.createClass({ - mixins: [ Formsy.Mixin, FormComponentMixin ], - - componentDidMount: function () { - this.setValue(this._toggle.isToggled()); - }, - - render: function () { - return ( - this._toggle = c} - onToggle={this.handleValueChange} /> - ); - } -}); - -module.exports = { - FormsyCheckbox: FormsyCheckbox, - FormsyDate: FormsyDate, - FormsyRadio: FormsyRadio, - FormsyRadioGroup: FormsyRadioGroup, - FormsySelect: FormsySelect, - FormsyText: FormsyText, - FormsyTime: FormsyTime, - FormsyToggle: FormsyToggle -}; \ No newline at end of file diff --git a/index.js b/index.js deleted file mode 100644 index a9ba482..0000000 --- a/index.js +++ /dev/null @@ -1,203 +0,0 @@ -'use strict'; - -var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; - -var React = require('react'); -var Formsy = require('formsy-react'); - -var Checkbox = require('material-ui/lib/checkbox'); -var DatePicker = require('material-ui/lib/date-picker/date-picker'); -var RadioButtonGroup = require('material-ui/lib/radio-button-group'); -var SelectField = require('material-ui/lib/select-field'); -var TextField = require('material-ui/lib/text-field'); -var TimePicker = require('material-ui/lib/time-picker/time-picker'); -var Toggle = require('material-ui/lib/toggle'); - -var FormComponentMixin = { - propTypes: { - name: React.PropTypes.string.isRequired, - validations: React.PropTypes.string, - validationError: React.PropTypes.string, - hintText: React.PropTypes.string, - floatingLabelText: React.PropTypes.string - }, - - handleChange: function handleChange(event) { - this.setValue(event.target.value); - }, - - handleValueChange: function handleValueChange(event, value) { - this.setValue(value); - } - -}; - -var FormsyCheckbox = React.createClass({ - displayName: 'FormsyCheckbox', - - mixins: [Formsy.Mixin, FormComponentMixin], - - componentDidMount: function componentDidMount() { - this.setValue(this._checkbox.isChecked()); - }, - - render: function render() { - var _this = this; - - return React.createElement(Checkbox, _extends({}, this.props, { - ref: function (c) { - return _this._checkbox = c; - }, - onCheck: this.handleValueChange })); - } -}); - -var FormsyDate = React.createClass({ - displayName: 'FormsyDate', - - mixins: [Formsy.Mixin, FormComponentMixin], - - render: function render() { - return React.createElement(DatePicker, _extends({ - formatDate: function (date) { - return date.toISOString().substring(0, 10); - } - }, this.props, { - onChange: this.handleValueChange })); - } -}); - -var FormsyRadio = React.createClass({ - displayName: 'FormsyRadio', - - mixins: [Formsy.Mixin], - - // Material-UI replaces any component inside RadioButtonGroup with RadioButton, so no need to render it here - render: function render() {} -}); - -var FormsyRadioGroup = React.createClass({ - displayName: 'FormsyRadioGroup', - - mixins: [Formsy.Mixin, FormComponentMixin], - - componentDidMount: function componentDidMount() { - this.setValue(this._radio.getSelectedValue()); - }, - - render: function render() { - var _this2 = this; - - return React.createElement( - RadioButtonGroup, - _extends({}, this.props, { - ref: function (c) { - return _this2._radio = c; - }, - onChange: this.handleValueChange }), - this.props.children - ); - } -}); - -var FormsySelect = React.createClass({ - displayName: 'FormsySelect', - - mixins: [Formsy.Mixin, FormComponentMixin], - - render: function render() { - return React.createElement(SelectField, _extends({}, this.props, { - onChange: this.handleChange, - errorText: this.getErrorMessage(), - value: this.getValue() })); - } -}); - -var FormsyText = React.createClass({ - displayName: 'FormsyText', - - propTypes: { - name: React.PropTypes.string.isRequired, - validations: React.PropTypes.string, - validationError: React.PropTypes.string, - hintText: React.PropTypes.string, - floatingLabelText: React.PropTypes.string - }, - - handleChange: function handleChange(event) { - if (this.getErrorMessage() != null) { - this.setValue(event.currentTarget.value); - } else { - if (this.isValidValue(event.target.value)) { - this.setValue(event.target.value); - } else { - this.setState({ - _value: event.currentTarget.value, - _isPristine: false - }); - } - } - }, - - handleBlur: function handleBlur(event) { - this.setValue(event.currentTarget.value); - }, - - handleEnterKeyDown: function handleEnterKeyDown(event) { - this.setValue(event.currentTarget.value); - }, - - mixins: [Formsy.Mixin], - - render: function render() { - return React.createElement(TextField, _extends({}, this.props, { - defaultValue: this.props.value, - onChange: this.handleChange, - onBlur: this.handleBlur, - onEnterKeyDown: this.handleEnterKeyDown, - errorText: this.getErrorMessage(), - value: this.getValue() })); - } -}); - -var FormsyTime = React.createClass({ - displayName: 'FormsyTime', - - mixins: [Formsy.Mixin, FormComponentMixin], - - render: function render() { - return React.createElement(TimePicker, _extends({}, this.props, { - onChange: this.handleValueChange })); - } -}); - -var FormsyToggle = React.createClass({ - displayName: 'FormsyToggle', - - mixins: [Formsy.Mixin, FormComponentMixin], - - componentDidMount: function componentDidMount() { - this.setValue(this._toggle.isToggled()); - }, - - render: function render() { - var _this3 = this; - - return React.createElement(Toggle, _extends({}, this.props, { - ref: function (c) { - return _this3._toggle = c; - }, - onToggle: this.handleValueChange })); - } -}); - -module.exports = { - FormsyCheckbox: FormsyCheckbox, - FormsyDate: FormsyDate, - FormsyRadio: FormsyRadio, - FormsyRadioGroup: FormsyRadioGroup, - FormsySelect: FormsySelect, - FormsyText: FormsyText, - FormsyTime: FormsyTime, - FormsyToggle: FormsyToggle -}; diff --git a/lib/FormCmponentMixin.js b/lib/FormCmponentMixin.js new file mode 100644 index 0000000..0619527 --- /dev/null +++ b/lib/FormCmponentMixin.js @@ -0,0 +1,20 @@ +'use strict'; + +var React = require('react'); + +var FormComponentMixin = { + propTypes: { + name: React.PropTypes.string.isRequired, + value: React.PropTypes.string + }, + + handleChange: function handleChange(event) { + this.setValue(event.target.value); + }, + + handleValueChange: function handleValueChange(event, value) { + this.setValue(value); + } +}; + +module.exports = { FormComponentMixin: FormComponentMixin }; \ No newline at end of file diff --git a/lib/FormComponentMixin.js b/lib/FormComponentMixin.js new file mode 100644 index 0000000..6b7af3d --- /dev/null +++ b/lib/FormComponentMixin.js @@ -0,0 +1,15 @@ +'use strict'; + +var React = require('react'); + +module.exports = { + + propTypes: { + name: React.PropTypes.string.isRequired + }, + + handleValueChange: function handleValueChange(event, value) { + this.setValue(value); + } + +}; \ No newline at end of file diff --git a/lib/FormsyCheckbox.js b/lib/FormsyCheckbox.js new file mode 100644 index 0000000..d9b04b2 --- /dev/null +++ b/lib/FormsyCheckbox.js @@ -0,0 +1,30 @@ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var React = require('react'); +var Formsy = require('formsy-react'); +var Checkbox = require('material-ui/lib/checkbox'); +var FormComponentMixin = require('./FormComponentMixin'); + +var FormsyCheckbox = React.createClass({ + displayName: 'FormsyCheckbox', + + mixins: [Formsy.Mixin, FormComponentMixin], + + componentDidMount: function componentDidMount() { + this.setValue(this._checkbox.isChecked()); + }, + + render: function render() { + var _this = this; + + return React.createElement(Checkbox, _extends({}, this.props, { + ref: function (c) { + return _this._checkbox = c; + }, + onCheck: this.handleValueChange })); + } +}); + +module.exports = FormsyCheckbox; \ No newline at end of file diff --git a/lib/FormsyDate.js b/lib/FormsyDate.js new file mode 100644 index 0000000..41eb1fa --- /dev/null +++ b/lib/FormsyDate.js @@ -0,0 +1,25 @@ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var React = require('react'); +var Formsy = require('formsy-react'); +var DatePicker = require('material-ui/lib/date-picker/date-picker'); +var FormComponentMixin = require('./FormComponentMixin'); + +var FormsyDate = React.createClass({ + displayName: 'FormsyDate', + + mixins: [Formsy.Mixin, FormComponentMixin], + + render: function render() { + return React.createElement(DatePicker, _extends({ + formatDate: function (date) { + return date.toISOString().substring(0, 10); + } + }, this.props, { + onChange: this.handleValueChange })); + } +}); + +module.exports = FormsyDate; \ No newline at end of file diff --git a/lib/FormsyRadio.js b/lib/FormsyRadio.js new file mode 100644 index 0000000..6eb96c1 --- /dev/null +++ b/lib/FormsyRadio.js @@ -0,0 +1,15 @@ +'use strict'; + +var React = require('react'); +var Formsy = require('formsy-react'); + +var FormsyRadio = React.createClass({ + displayName: 'FormsyRadio', + + mixins: [Formsy.Mixin], + + // Material-UI replaces any component inside RadioButtonGroup with RadioButton, so no need to render it here + render: function render() {} +}); + +module.exports = FormsyRadio; \ No newline at end of file diff --git a/lib/FormsyRadioGroup.js b/lib/FormsyRadioGroup.js new file mode 100644 index 0000000..08ec791 --- /dev/null +++ b/lib/FormsyRadioGroup.js @@ -0,0 +1,34 @@ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var React = require('react'); +var Formsy = require('formsy-react'); +var RadioButtonGroup = require('material-ui/lib/radio-button-group'); +var FormComponentMixin = require('./FormComponentMixin'); + +var FormsyRadioGroup = React.createClass({ + displayName: 'FormsyRadioGroup', + + mixins: [Formsy.Mixin, FormComponentMixin], + + componentDidMount: function componentDidMount() { + this.setValue(this._radio.getSelectedValue()); + }, + + render: function render() { + var _this = this; + + return React.createElement( + RadioButtonGroup, + _extends({}, this.props, { + ref: function (c) { + return _this._radio = c; + }, + onChange: this.handleValueChange }), + this.props.children + ); + } +}); + +module.exports = FormsyRadioGroup; \ No newline at end of file diff --git a/lib/FormsySelect.js b/lib/FormsySelect.js new file mode 100644 index 0000000..e930138 --- /dev/null +++ b/lib/FormsySelect.js @@ -0,0 +1,31 @@ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var React = require('react'); +var Formsy = require('formsy-react'); +var SelectField = require('material-ui/lib/select-field'); +var FormComponentMixin = require('./FormComponentMixin'); + +var FormsySelect = React.createClass({ + displayName: 'FormsySelect', + + mixins: [Formsy.Mixin], + + propTypes: { + name: React.PropTypes.string.isRequired + }, + + handleChange: function handleChange(event) { + this.setValue(event.target.value); + }, + + render: function render() { + return React.createElement(SelectField, _extends({}, this.props, { + onChange: this.handleChange, + errorText: this.getErrorMessage(), + value: this.getValue() })); + } +}); + +module.exports = FormsySelect; \ No newline at end of file diff --git a/lib/FormsyText.js b/lib/FormsyText.js new file mode 100644 index 0000000..3a5d3d7 --- /dev/null +++ b/lib/FormsyText.js @@ -0,0 +1,53 @@ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var React = require('react'); +var Formsy = require('formsy-react'); +var TextField = require('material-ui/lib/text-field'); + +var FormsyText = React.createClass({ + displayName: 'FormsyText', + + mixins: [Formsy.Mixin], + + propTypes: { + name: React.PropTypes.string.isRequired, + value: React.PropTypes.string + }, + + handleChange: function handleChange(event) { + if (this.getErrorMessage() != null) { + this.setValue(event.currentTarget.value); + } else { + if (this.isValidValue(event.target.value)) { + this.setValue(event.target.value); + } else { + this.setState({ + _value: event.currentTarget.value, + _isPristine: false + }); + } + } + }, + + handleBlur: function handleBlur(event) { + this.setValue(event.currentTarget.value); + }, + + handleEnterKeyDown: function handleEnterKeyDown(event) { + this.setValue(event.currentTarget.value); + }, + + render: function render() { + return React.createElement(TextField, _extends({}, this.props, { + defaultValue: this.props.value, + onChange: this.handleChange, + onBlur: this.handleBlur, + onEnterKeyDown: this.handleEnterKeyDown, + errorText: this.getErrorMessage(), + value: this.getValue() })); + } +}); + +module.exports = FormsyText; \ No newline at end of file diff --git a/lib/FormsyTime.js b/lib/FormsyTime.js new file mode 100644 index 0000000..327c142 --- /dev/null +++ b/lib/FormsyTime.js @@ -0,0 +1,21 @@ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var React = require('react'); +var Formsy = require('formsy-react'); +var TimePicker = require('material-ui/lib/time-picker/time-picker'); +var FormComponentMixin = require('./FormComponentMixin'); + +var FormsyTime = React.createClass({ + displayName: 'FormsyTime', + + mixins: [Formsy.Mixin, FormComponentMixin], + + render: function render() { + return React.createElement(TimePicker, _extends({}, this.props, { + onChange: this.handleValueChange })); + } +}); + +module.exports = FormsyTime; \ No newline at end of file diff --git a/lib/FormsyToggle.js b/lib/FormsyToggle.js new file mode 100644 index 0000000..312ec90 --- /dev/null +++ b/lib/FormsyToggle.js @@ -0,0 +1,30 @@ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var React = require('react'); +var Formsy = require('formsy-react'); +var Toggle = require('material-ui/lib/toggle'); +var FormComponentMixin = require('./FormComponentMixin'); + +var FormsyToggle = React.createClass({ + displayName: 'FormsyToggle', + + mixins: [Formsy.Mixin, FormComponentMixin], + + componentDidMount: function componentDidMount() { + this.setValue(this._toggle.isToggled()); + }, + + render: function render() { + var _this = this; + + return React.createElement(Toggle, _extends({}, this.props, { + ref: function (c) { + return _this._toggle = c; + }, + onToggle: this.handleValueChange })); + } +}); + +module.exports = FormsyToggle; \ No newline at end of file diff --git a/lib/index.js b/lib/index.js new file mode 100644 index 0000000..46410b3 --- /dev/null +++ b/lib/index.js @@ -0,0 +1,12 @@ +'use strict'; + +module.exports = { + FormsyCheckbox: require('./FormsyCheckbox'), + FormsyDate: require('./FormsyDate'), + FormsyRadio: require('./FormsyRadio'), + FormsyRadioGroup: require('./FormsyRadioGroup'), + FormsySelect: require('./FormsySelect'), + FormsyText: require('./FormsyText'), + FormsyTime: require('./FormsyTime'), + FormsyToggle: require('./FormsyToggle') +}; \ No newline at end of file diff --git a/package.json b/package.json index 13acbaf..1451035 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "formsy-material-ui", - "version": "0.2.5", + "version": "0.3.0", "description": "A formsy-react compatibility wrapper for Material-UI form components.", - "main": "index.js", + "main": "lib/index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, @@ -13,6 +13,7 @@ "files": [ "index.js", "README.md", + "CHANGELOG.md", "LICENSE" ], "peerDependencies": { @@ -22,7 +23,7 @@ "babel": "^5.0.0" }, "scripts": { - "prepublish": "babel formsy-material-ui.jsx -o index.js" + "prepublish": "babel ./src/ -d ./lib/" }, "keywords": [ "formsy", diff --git a/src/FormComponentMixin.js b/src/FormComponentMixin.js new file mode 100644 index 0000000..9efa5c9 --- /dev/null +++ b/src/FormComponentMixin.js @@ -0,0 +1,13 @@ +const React = require('react'); + +module.exports = { + + propTypes: { + name: React.PropTypes.string.isRequired + }, + + handleValueChange: function (event, value) { + this.setValue(value); + } + +}; diff --git a/src/FormsyCheckbox.jsx b/src/FormsyCheckbox.jsx new file mode 100644 index 0000000..86c0524 --- /dev/null +++ b/src/FormsyCheckbox.jsx @@ -0,0 +1,23 @@ +const React = require('react'); +const Formsy = require('formsy-react'); +const Checkbox = require('material-ui/lib/checkbox'); +const FormComponentMixin = require('./FormComponentMixin'); + +let FormsyCheckbox = React.createClass({ + mixins: [ Formsy.Mixin, FormComponentMixin ], + + componentDidMount: function () { + this.setValue(this._checkbox.isChecked()); + }, + + render: function () { + return ( + this._checkbox = c} + onCheck={this.handleValueChange} /> + ); + } +}); + +module.exports = FormsyCheckbox; diff --git a/src/FormsyDate.jsx b/src/FormsyDate.jsx new file mode 100644 index 0000000..73547e4 --- /dev/null +++ b/src/FormsyDate.jsx @@ -0,0 +1,19 @@ +const React = require('react'); +const Formsy = require('formsy-react'); +const DatePicker = require('material-ui/lib/date-picker/date-picker'); +const FormComponentMixin = require('./FormComponentMixin'); + +let FormsyDate = React.createClass({ + mixins: [ Formsy.Mixin, FormComponentMixin ], + + render: function () { + return ( + date.toISOString().substring(0,10)} + {...this.props} + onChange={this.handleValueChange} /> + ); + } +}); + +module.exports = FormsyDate; diff --git a/src/FormsyRadio.jsx b/src/FormsyRadio.jsx new file mode 100644 index 0000000..9534548 --- /dev/null +++ b/src/FormsyRadio.jsx @@ -0,0 +1,11 @@ +const React = require('react'); +const Formsy = require('formsy-react'); + +let FormsyRadio = React.createClass({ + mixins: [ Formsy.Mixin ], + + // Material-UI replaces any component inside RadioButtonGroup with RadioButton, so no need to render it here + render: function () {} +}); + +module.exports = FormsyRadio; diff --git a/src/FormsyRadioGroup.jsx b/src/FormsyRadioGroup.jsx new file mode 100644 index 0000000..81570df --- /dev/null +++ b/src/FormsyRadioGroup.jsx @@ -0,0 +1,25 @@ +const React = require('react'); +const Formsy = require('formsy-react'); +const RadioButtonGroup = require('material-ui/lib/radio-button-group'); +const FormComponentMixin = require('./FormComponentMixin'); + +let FormsyRadioGroup = React.createClass({ + mixins: [ Formsy.Mixin, FormComponentMixin ], + + componentDidMount: function () { + this.setValue(this._radio.getSelectedValue()); + }, + + render: function () { + return ( + this._radio = c} + onChange={this.handleValueChange} > + {this.props.children} + + ); + } +}); + +module.exports = FormsyRadioGroup; diff --git a/src/FormsySelect.jsx b/src/FormsySelect.jsx new file mode 100644 index 0000000..0583097 --- /dev/null +++ b/src/FormsySelect.jsx @@ -0,0 +1,28 @@ +const React = require('react'); +const Formsy = require('formsy-react'); +const SelectField = require('material-ui/lib/select-field'); +const FormComponentMixin = require('./FormComponentMixin'); + +let FormsySelect = React.createClass({ + mixins: [ Formsy.Mixin], + + propTypes: { + name: React.PropTypes.string.isRequired + }, + + handleChange: function (event) { + this.setValue(event.target.value); + }, + + render: function () { + return ( + + ); + } +}); + +module.exports = FormsySelect; diff --git a/src/FormsyText.jsx b/src/FormsyText.jsx new file mode 100644 index 0000000..134fc1b --- /dev/null +++ b/src/FormsyText.jsx @@ -0,0 +1,52 @@ +const React = require('react'); +const Formsy = require('formsy-react'); +const TextField = require('material-ui/lib/text-field'); + +let FormsyText = React.createClass({ + mixins: [ Formsy.Mixin ], + + propTypes: { + name: React.PropTypes.string.isRequired, + value: React.PropTypes.string + }, + + handleChange: function handleChange(event) { + if(this.getErrorMessage() != null){ + this.setValue(event.currentTarget.value); + } + else{ + if (this.isValidValue(event.target.value)) { + this.setValue(event.target.value); + } + else{ + this.setState({ + _value: event.currentTarget.value, + _isPristine: false + }); + } + } + }, + + handleBlur: function handleBlur(event) { + this.setValue(event.currentTarget.value); + }, + + handleEnterKeyDown: function handleEnterKeyDown(event) { + this.setValue(event.currentTarget.value); + }, + + render: function () { + return ( + + ); + } +}); + +module.exports = FormsyText; diff --git a/src/FormsyTime.jsx b/src/FormsyTime.jsx new file mode 100644 index 0000000..97c2394 --- /dev/null +++ b/src/FormsyTime.jsx @@ -0,0 +1,18 @@ +const React = require('react'); +const Formsy = require('formsy-react'); +const TimePicker = require('material-ui/lib/time-picker/time-picker'); +const FormComponentMixin = require('./FormComponentMixin'); + +let FormsyTime = React.createClass({ + mixins: [ Formsy.Mixin, FormComponentMixin ], + + render: function () { + return ( + + ); + } +}); + +module.exports = FormsyTime; diff --git a/src/FormsyToggle.jsx b/src/FormsyToggle.jsx new file mode 100644 index 0000000..192d7ec --- /dev/null +++ b/src/FormsyToggle.jsx @@ -0,0 +1,23 @@ +const React = require('react'); +const Formsy = require('formsy-react'); +const Toggle = require('material-ui/lib/toggle'); +const FormComponentMixin = require('./FormComponentMixin'); + +let FormsyToggle = React.createClass({ + mixins: [ Formsy.Mixin, FormComponentMixin ], + + componentDidMount: function () { + this.setValue(this._toggle.isToggled()); + }, + + render: function () { + return ( + this._toggle = c} + onToggle={this.handleValueChange} /> + ); + } +}); + +module.exports = FormsyToggle; diff --git a/src/index.jsx b/src/index.jsx new file mode 100644 index 0000000..e58c26f --- /dev/null +++ b/src/index.jsx @@ -0,0 +1,10 @@ +module.exports = { + FormsyCheckbox: require('./FormsyCheckbox'), + FormsyDate: require('./FormsyDate'), + FormsyRadio: require('./FormsyRadio'), + FormsyRadioGroup: require('./FormsyRadioGroup'), + FormsySelect: require('./FormsySelect'), + FormsyText: require('./FormsyText'), + FormsyTime: require('./FormsyTime'), + FormsyToggle: require('./FormsyToggle') +};