| 1 |
import React, { Component } from 'react'; |
| 2 |
|
| 3 |
class MultipleCheckboxes extends Component { |
| 4 |
|
| 5 |
static slug = 'mphb_multiple_checkboxes'; |
| 6 |
|
| 7 |
_onCheckboxChange = ( event ) => { |
| 8 |
|
| 9 |
const { value, checked } = event.target; |
| 10 |
const oldValue = this.props.value.split(','); |
| 11 |
let newValue; |
| 12 |
|
| 13 |
if ( checked ) { |
| 14 |
newValue = [ ...oldValue, value ]; |
| 15 |
} else { |
| 16 |
newValue = oldValue.filter( box => box !== value ) ; |
| 17 |
} |
| 18 |
|
| 19 |
this.props._onChange( this.props.name, newValue.join(',') ) |
| 20 |
} |
| 21 |
|
| 22 |
render() { |
| 23 |
|
| 24 |
let checkboxes_data = this.props.fieldDefinition.options; |
| 25 |
|
| 26 |
const checkboxes = Object.keys( checkboxes_data ).map( ( id, index ) => { |
| 27 |
return ( |
| 28 |
<p className="et-fb-multiple-checkbox" key={ index }> |
| 29 |
<label htmlFor={ `${this.constructor.slug}-${this.props.name}-checkbox-${id}` }> |
| 30 |
<input |
| 31 |
type="checkbox" |
| 32 |
id={ `${this.constructor.slug}-${this.props.name}-checkbox-${id}` } |
| 33 |
name={ `${this.constructor.slug}-${this.props.name}-checkbox` } |
| 34 |
value={ id } |
| 35 |
data-text={ checkboxes_data[ id ] } |
| 36 |
onChange={ this._onCheckboxChange } |
| 37 |
checked={ this.props.value.includes( id.toString() ) } |
| 38 |
/>{ checkboxes_data[ id ] } |
| 39 |
</label> |
| 40 |
</p> |
| 41 |
); |
| 42 |
}); |
| 43 |
|
| 44 |
return ( |
| 45 |
<div className={ `${this.constructor.slug}-wrap et-fb-multiple-checkboxes-wrap` }> |
| 46 |
{ checkboxes } |
| 47 |
<input |
| 48 |
id={ `${this.constructor.slug}-${this.props.name}` } |
| 49 |
name={ this.props.name } |
| 50 |
value={ this.props.value } |
| 51 |
type='hidden' |
| 52 |
/> |
| 53 |
</div> |
| 54 |
); |
| 55 |
} |
| 56 |
} |
| 57 |
|
| 58 |
export default MultipleCheckboxes; |
| 59 |
|
