formsy-material-ui
Advanced tools
Comparing version
{ | ||
"name": "formsy-material-ui", | ||
"version": "0.1.5", | ||
"version": "0.1.6", | ||
"description": "A formsy-react compatibility wrapper for Material-UI form components.", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -37,3 +37,3 @@ # formsy-material-ui | ||
#### Example App | ||
[Live demo](http://formsy-material-ui.meteor.com), code: [formsy-material-ui](https://github.com/mbrookes/formsy-mui-demo) | ||
[Live demo](http://formsy-mui-demo.meteor.com), code: [formsy-material-ui](https://github.com/mbrookes/formsy-mui-demo) | ||
@@ -48,12 +48,2 @@ #### Example Code | ||
childContextTypes: { | ||
muiTheme: React.PropTypes.object | ||
}, | ||
getChildContext(){ | ||
return { | ||
muiTheme: Styles.ThemeManager.getMuiTheme(Styles.LightRawTheme) | ||
} | ||
}, | ||
getInitialState: function () { | ||
@@ -66,5 +56,3 @@ return { | ||
errorMessages: { | ||
wordsError: "Please only use letters", | ||
numericError: "Please provide a number", | ||
urlError: "Please provide a valid URL" | ||
wordsError: "Please only use letters" | ||
}, | ||
@@ -75,18 +63,5 @@ | ||
{ payload: 'nightly', text: 'Every Night' }, | ||
{ payload: 'weeknights', text: 'Weeknights' }, | ||
{ payload: 'weekends', text: 'Weekends' }, | ||
{ payload: 'weekly', text: 'Weekly' } | ||
{ payload: 'weeknights', text: 'Weeknights' } | ||
], | ||
styles: { | ||
paper: { | ||
width: 300, | ||
margin: 20, | ||
padding: 20 | ||
}, | ||
submit: { | ||
marginTop: 32 | ||
} | ||
}, | ||
enableButton: function () { | ||
@@ -105,35 +80,16 @@ this.setState({ | ||
submitForm: function (model) { | ||
// Submit your validated form | ||
console.log("Model: ", model); | ||
alert( | ||
`Name: ${model.name}\n | ||
Chucked: ${model.chuck}\n | ||
URL: ${model.url}\n | ||
Frequency: ${model.frequency}\n | ||
Date: ${model.date}\n | ||
Time: ${model.time}\n | ||
Agree: ${model.agree}\n | ||
Toggle: ${model.toggle}\n | ||
Speed: ${model.shipSpeed}\n | ||
`); | ||
}, | ||
notifyFormError: function (model) { | ||
console.error('Form error:', model); | ||
}, | ||
render: function () { | ||
let styles = this.styles; | ||
let { wordsError, numericError, urlError } = this.errorMessages; | ||
let { wordsError } = this.errorMessages; | ||
return ( | ||
<Paper style={styles.paper}> | ||
<Formsy.Form | ||
onValid={this.enableButton} | ||
onInvalid={this.disableButton} | ||
onValidSubmit={this.submitForm} | ||
onInvalidSubmit={this.notifyFormError} | ||
style={styles.form} | ||
mapping={this.mapInputs} > | ||
onValidSubmit={this.submitForm} > | ||
<FormsyText | ||
<FormsyText | ||
name='name' | ||
@@ -146,18 +102,2 @@ validations='isWords' | ||
<FormsyText | ||
name='chuck' | ||
validations='isNumeric' | ||
validationError={numericError} | ||
required | ||
hintText="wood could a woodchuck chuck?" | ||
floatingLabelText="How much" /> | ||
<FormsyText | ||
name='url' | ||
validations='isUrl' | ||
validationError={urlError} | ||
required | ||
hintText="Where can we find out more?" | ||
floatingLabelText="URL" /> | ||
<FormsySelect | ||
@@ -182,9 +122,7 @@ name='frequency' | ||
label="Do you agree to disagree?" | ||
defaultChecked={true} | ||
style={{marginBottom:16}} /> | ||
defaultChecked={true} /> | ||
<FormsyToggle | ||
name='toggle' | ||
label="Toggle" | ||
style={{marginBottom:16}} /> | ||
label="Toggle" /> | ||
@@ -194,17 +132,13 @@ <FormsyRadioGroup name="shipSpeed" defaultSelected="not_light"> | ||
value="light" | ||
label="prepare for light speed" | ||
style={{marginBottom:16}} /> | ||
label="prepare for light speed" /> | ||
<FormsyRadio | ||
value="not_light" | ||
label="light speed too slow" | ||
style={{marginBottom:16}}/> | ||
label="light speed too slow" /> | ||
<FormsyRadio | ||
value="ludicrous" | ||
label="go to ludicrous speed" | ||
style={{marginBottom:16}} | ||
disabled={true}/> | ||
disabled={true} /> | ||
</FormsyRadioGroup> | ||
<RaisedButton | ||
style={styles.submit} | ||
type="submit" | ||
@@ -214,3 +148,2 @@ label="Submit" | ||
</Formsy.Form> | ||
</Paper> | ||
); | ||
@@ -235,2 +168,3 @@ } | ||
* 0.1.5 Add react-components keyword to package.json | ||
* 0.1.6 Correct live-demo URL | ||
@@ -237,0 +171,0 @@ |
10743
-13.9%164
-28.7%