ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00
Code Issues Releases Wiki Activity

add documentation for input checkbox

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-07-28 15:46:55 +02:00
parent bb11bbc6e4
commit bd28450619
2 changed files with 30 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
js/components/ascribe_forms/form_signup.js
View File

@ -120,8 +120,7 @@ let SignupForm = React.createClass({
name="terms"
className="ascribe-settings-property-collapsible-toggle"
style={{paddingBottom: 0}}>
<InputCheckbox
defaultChecked={true}>
<InputCheckbox>
<span>
{' ' + 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)'}}>

32
js/components/ascribe_forms/input_checkbox.js
View File

@ -2,9 +2,21 @@
import React from 'react';
/**
* This component can be used as a custom input element for form properties.
* It exposes its state via state.value and can be considered as a reference implementation
* for custom input components that live inside of properties.
*/
let InputCheckbox = React.createClass({
propTypes: {
required: React.PropTypes.bool,
// As can be read here: https://facebook.github.io/react/docs/forms.html
// inputs of type="checkbox" define their state via checked.
// Their default state is defined via defaultChecked.
//
// Since this component even has checkbox in its name, it felt wrong to expose defaultValue
// as the default-setting prop to other developers, which is why we choose defaultChecked.
defaultChecked: React.PropTypes.bool,
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
@ -12,12 +24,15 @@ let InputCheckbox = React.createClass({
])
},
// As HTML inputs, we're setting the default value for an input to checked === false
getDefaultProps() {
return {
defaultChecked: false
};
},
// Setting value to null in initialState is essentially since we're deriving a certain state from
// value === null as can be seen in componentWillReceiveProps.
getInitialState() {
return {
value: null
@ -25,20 +40,31 @@ let InputCheckbox = React.createClass({
},
componentWillReceiveProps(nextProps) {
// Developer's are used to define defaultValues for inputs via defaultValue, but since this is a
// input of type checkbox we warn the dev to not do that.
if(this.props.defaultValue) {
console.warn('InputCheckbox is of type checkbox. Therefore its value is represented by checked and defaultChecked.');
console.warn('InputCheckbox is of type checkbox. Therefore its value is represented by checked and defaultChecked. defaultValue will do nothing!');
}
// The first time InputCheckbox is rendered, we want to set its value to the value of defaultChecked.
// This needs to be done in order to expose it for the Property component.
// We can determine the first render by checking if value still has it's initialState(from getInitialState)
if(this.state.value === null) {
this.setState({value: !!nextProps.defaultChecked });
this.setState({value: nextProps.defaultChecked });
}
},
onChange() {
// On every change, we're inversing the input's value
let inverseValue = !this.refs.checkbox.getDOMNode().checked;
// pass it to the state
this.setState({value: inverseValue});
// and also call Property's onChange method
// (in this case we're mocking event.target.value, since we can not use the event
// coming from onChange. Its coming from the span (user is clicking on the span) and not the input)
this.props.onChange({
target: {
value: inverseValue