ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-11-15 01:25:17 +01:00
Code Issues Releases Wiki Activity

Fix bug for resetting non-native HTML inputs in form

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-09-14 10:49:45 +02:00
parent b5e5102ea4
commit 356483f9ca
3 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
js/components/ascribe_forms/form.js
View File

@ -109,11 +109,12 @@ let Form = React.createClass({
getFormData() {
let data = {};
for(let ref in this.refs){
for(let ref in this.refs) {
data[this.refs[ref].props.name] = this.refs[ref].state.value;
}
if (this.props.getFormData && typeof this.props.getFormData === 'function'){
if(this.props.getFormData && typeof this.props.getFormData === 'function') {
data = mergeOptionsWithDuplicates(data, this.props.getFormData());
}
@ -121,7 +122,7 @@ let Form = React.createClass({
},
handleChangeChild(){
this.setState({edited: true});
this.setState({ edited: true });
},
handleSuccess(response){
@ -149,8 +150,7 @@ let Form = React.createClass({
this.setState({errors: this.state.errors.concat(err.json.errors[input])});
}
}
}
else {
} else {
let formData = this.getFormData();
// sentry shouldn't post the user's password

27
js/components/ascribe_forms/property.js
View File

@ -6,8 +6,11 @@ import ReactAddons from 'react/addons';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import AppConstants from '../../constants/application_constants';
import { mergeOptions } from '../../utils/general_utils';
let Property = React.createClass({
propTypes: {
hidden: React.PropTypes.bool,
@ -90,27 +93,37 @@ let Property = React.createClass({
},
reset() {
let input = this.refs.input;
// maybe do reset by reload instead of front end state?
this.setState({value: this.state.initialValue});
if(input.state && input.state.value) {
// resets the value of a custom react component input
this.refs.input.state.value = this.state.initialValue;
input.state.value = this.state.initialValue;
}
// resets the value of a plain HTML5 input
this.refs.input.getDOMNode().value = this.state.initialValue;
// For some reason, if we set the value of a non HTML element (but a custom input),
// after a reset, the value will be be propagated to this component.
// Therefore we have to make sure only to reset the initial value
// of HTML inputs.
let inputDOMNode = input.getDOMNode();
if(inputDOMNode.type && typeof inputDOMNode.type === 'string' && inputDOMNode.type.toLowerCase() &&
AppConstants.possibleInputTypes.indexOf(inputDOMNode.type) > -1) {
inputDOMNode.value = this.state.initialValue;
}
// For some inputs, reseting state.value is not enough to visually reset the
// component.
//
// So if the input actually needs a visual reset, it needs to implement
// a dedicated reset method.
if(this.refs.input.reset && typeof this.refs.input.reset === 'function') {
this.refs.input.reset();
if(input.reset && typeof input.reset === 'function') {
input.reset();
}
},
handleChange(event) {
this.props.handleChange(event);
if (this.props.onChange && typeof this.props.onChange === 'function') {
this.props.onChange(event);
@ -235,7 +248,7 @@ let Property = React.createClass({
overlay={tooltip}>
<div className={'ascribe-settings-property ' + this.props.className}>
{this.state.errors}
<span>{ this.props.label}</span>
<span>{this.props.label}</span>
{this.renderChildren(style)}
{footer}
</div>

2
js/constants/application_constants.js
View File

@ -53,6 +53,8 @@ let constants = {
'ga': 'UA-60614729-2'
},
'possibleInputTypes': ['button', 'checkbox', 'color', 'date', 'datetime', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week'],
// in case of whitelabel customization, we store stuff here
'whitelabel': {},
'raven': {