mirror of
https://github.com/ascribe/onion.git
synced 2024-12-23 01:39:36 +01:00
Fix all instances of input checkbox
This commit is contained in:
parent
3142e00ea5
commit
bb11bbc6e4
@ -63,6 +63,7 @@ let Form = React.createClass({
|
|||||||
if ('getFormData' in this.props){
|
if ('getFormData' in this.props){
|
||||||
data = mergeOptionsWithDuplicates(data, this.props.getFormData());
|
data = mergeOptionsWithDuplicates(data, this.props.getFormData());
|
||||||
}
|
}
|
||||||
|
console.log(data);
|
||||||
return data;
|
return data;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -15,7 +15,6 @@ import LoanContractActions from '../../actions/loan_contract_actions';
|
|||||||
|
|
||||||
import AppConstants from '../../constants/application_constants';
|
import AppConstants from '../../constants/application_constants';
|
||||||
|
|
||||||
import { mergeOptions } from '../../utils/general_utils';
|
|
||||||
import { getLangText } from '../../utils/lang_utils';
|
import { getLangText } from '../../utils/lang_utils';
|
||||||
|
|
||||||
|
|
||||||
@ -60,7 +59,7 @@ let LoanForm = React.createClass({
|
|||||||
className="ascribe-settings-property-collapsible-toggle"
|
className="ascribe-settings-property-collapsible-toggle"
|
||||||
style={{paddingBottom: 0}}>
|
style={{paddingBottom: 0}}>
|
||||||
<InputCheckbox
|
<InputCheckbox
|
||||||
defaultValue={false}>
|
defaultChecked={false}>
|
||||||
<span>
|
<span>
|
||||||
{getLangText('I agree to the')}
|
{getLangText('I agree to the')}
|
||||||
<a href={this.state.contractUrl} target="_blank">
|
<a href={this.state.contractUrl} target="_blank">
|
||||||
@ -73,14 +72,11 @@ let LoanForm = React.createClass({
|
|||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<Property
|
<Property
|
||||||
hidden={true}
|
|
||||||
name="terms"
|
name="terms"
|
||||||
className="ascribe-settings-property-collapsible-toggle"
|
style={{paddingBottom: 0}}
|
||||||
style={{paddingBottom: 0}}>
|
hidden={true}>
|
||||||
<input
|
<InputCheckbox
|
||||||
ref="input"
|
defaultChecked={true} />
|
||||||
type="checkbox"
|
|
||||||
defaultValue={true} />
|
|
||||||
</Property>
|
</Property>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -135,8 +131,7 @@ let LoanForm = React.createClass({
|
|||||||
</Property>
|
</Property>
|
||||||
<Property
|
<Property
|
||||||
name='gallery_name'
|
name='gallery_name'
|
||||||
label={getLangText('Gallery/exhibition (optional)')}
|
label={getLangText('Gallery/exhibition (optional)')}>
|
||||||
onBlur={this.handleOnBlur}>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder={getLangText('Gallery/exhibition (optional)')}/>
|
placeholder={getLangText('Gallery/exhibition (optional)')}/>
|
||||||
|
@ -63,9 +63,7 @@ let SignupForm = React.createClass({
|
|||||||
this.props.handleSuccess(getLangText('We sent an email to your address') + ' ' + response.user.email + ', ' + getLangText('please confirm') + '.');
|
this.props.handleSuccess(getLangText('We sent an email to your address') + ' ' + response.user.email + ', ' + getLangText('please confirm') + '.');
|
||||||
|
|
||||||
},
|
},
|
||||||
getFormData(){
|
|
||||||
return {terms: this.refs.form.refs.terms.refs.input.state.value};
|
|
||||||
},
|
|
||||||
render() {
|
render() {
|
||||||
let tooltipPassword = getLangText('Your password must be at least 10 characters') + '.\n ' +
|
let tooltipPassword = getLangText('Your password must be at least 10 characters') + '.\n ' +
|
||||||
getLangText('This password is securing your digital property like a bank account') + '.\n ' +
|
getLangText('This password is securing your digital property like a bank account') + '.\n ' +
|
||||||
@ -76,7 +74,6 @@ let SignupForm = React.createClass({
|
|||||||
ref='form'
|
ref='form'
|
||||||
url={apiUrls.users_signup}
|
url={apiUrls.users_signup}
|
||||||
handleSuccess={this.handleSuccess}
|
handleSuccess={this.handleSuccess}
|
||||||
getFormData={this.getFormData}
|
|
||||||
buttons={
|
buttons={
|
||||||
<button type="submit" className="btn ascribe-btn ascribe-btn-login">
|
<button type="submit" className="btn ascribe-btn ascribe-btn-login">
|
||||||
{this.props.submitMessage}
|
{this.props.submitMessage}
|
||||||
@ -123,7 +120,8 @@ let SignupForm = React.createClass({
|
|||||||
name="terms"
|
name="terms"
|
||||||
className="ascribe-settings-property-collapsible-toggle"
|
className="ascribe-settings-property-collapsible-toggle"
|
||||||
style={{paddingBottom: 0}}>
|
style={{paddingBottom: 0}}>
|
||||||
<InputCheckbox>
|
<InputCheckbox
|
||||||
|
defaultChecked={true}>
|
||||||
<span>
|
<span>
|
||||||
{' ' + getLangText('I agree to the Terms of Service') + ' '}
|
{' ' + getLangText('I agree to the Terms of Service') + ' '}
|
||||||
(<a href="https://www.ascribe.io/terms" target="_blank" style={{fontSize: '0.9em', color: 'rgba(0,0,0,0.7)'}}>
|
(<a href="https://www.ascribe.io/terms" target="_blank" style={{fontSize: '0.9em', color: 'rgba(0,0,0,0.7)'}}>
|
||||||
|
@ -9,36 +9,42 @@ let InputCheckbox = React.createClass({
|
|||||||
children: React.PropTypes.oneOfType([
|
children: React.PropTypes.oneOfType([
|
||||||
React.PropTypes.arrayOf(React.PropTypes.element),
|
React.PropTypes.arrayOf(React.PropTypes.element),
|
||||||
React.PropTypes.element
|
React.PropTypes.element
|
||||||
]).isRequired
|
])
|
||||||
},
|
},
|
||||||
|
|
||||||
getDefaultProps() {
|
getDefaultProps() {
|
||||||
return {
|
return {
|
||||||
defaultValue: false
|
defaultChecked: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
value: this.props.defaultChecked
|
value: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
componentDidMount() {
|
componentWillReceiveProps(nextProps) {
|
||||||
this.props.onChange({
|
if(this.props.defaultValue) {
|
||||||
target: {
|
console.warn('InputCheckbox is of type checkbox. Therefore its value is represented by checked and defaultChecked.');
|
||||||
value: this.state.value
|
}
|
||||||
}
|
|
||||||
});
|
if(this.state.value === null) {
|
||||||
|
this.setState({value: !!nextProps.defaultChecked });
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onChange() {
|
onChange() {
|
||||||
let value = !this.refs.checkbox.getDOMNode().checked;
|
let inverseValue = !this.refs.checkbox.getDOMNode().checked;
|
||||||
this.setState({value: value});
|
|
||||||
|
this.setState({value: inverseValue});
|
||||||
|
|
||||||
this.props.onChange({
|
this.props.onChange({
|
||||||
target: {
|
target: {
|
||||||
value: value
|
value: inverseValue
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -50,19 +50,29 @@ let Property = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
componentWillReceiveProps() {
|
componentWillReceiveProps() {
|
||||||
|
let childInput = this.refs.input;
|
||||||
|
|
||||||
// In order to set this.state.value from another component
|
// In order to set this.state.value from another component
|
||||||
// the state of value should only be set if its not undefined and
|
// the state of value should only be set if its not undefined and
|
||||||
// actually references something
|
// actually references something
|
||||||
if(typeof this.refs.input.getDOMNode().value !== 'undefined') {
|
if(typeof childInput.getDOMNode().value !== 'undefined') {
|
||||||
this.setState({
|
this.setState({
|
||||||
value: this.refs.input.getDOMNode().value
|
value: childInput.getDOMNode().value
|
||||||
|
});
|
||||||
|
|
||||||
|
// When implementing custom input components, their value isn't exposed like the one
|
||||||
|
// from native HTML elements.
|
||||||
|
// To enable developers to create input elements, they can expose a property called value
|
||||||
|
// in their state that will be picked up by property.js
|
||||||
|
} else if(childInput.state && typeof childInput.state.value !== 'undefined') {
|
||||||
|
this.setState({
|
||||||
|
value: childInput.state.value
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if(!this.state.initialValue) {
|
if(!this.state.initialValue) {
|
||||||
this.setState({
|
this.setState({
|
||||||
initialValue: this.refs.input.getDOMNode().defaultValue
|
initialValue: childInput.defaultValue
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user