1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00

add documentation for input checkbox

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

View File

@ -120,8 +120,7 @@ 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)'}}>

View File

@ -2,9 +2,21 @@
import React from 'react'; 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({ let InputCheckbox = React.createClass({
propTypes: { propTypes: {
required: React.PropTypes.bool, 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, defaultChecked: React.PropTypes.bool,
children: React.PropTypes.oneOfType([ children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element), 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() { getDefaultProps() {
return { return {
defaultChecked: false 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() { getInitialState() {
return { return {
value: null value: null
@ -25,20 +40,31 @@ let InputCheckbox = React.createClass({
}, },
componentWillReceiveProps(nextProps) { 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) { 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) { if(this.state.value === null) {
this.setState({value: !!nextProps.defaultChecked }); this.setState({value: nextProps.defaultChecked });
} }
}, },
onChange() { onChange() {
// On every change, we're inversing the input's value
let inverseValue = !this.refs.checkbox.getDOMNode().checked; let inverseValue = !this.refs.checkbox.getDOMNode().checked;
// pass it to the state
this.setState({value: inverseValue}); 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({ this.props.onChange({
target: { target: {
value: inverseValue value: inverseValue