import * as React from "react" ; import Layout from "../../classes/Layout" ; import { Layouts } from "../../constants/Layouts" ; import { lazyInject } from "../../inversify.config" ; import VisualizationOptionStore from "../../stores/VisualizationOptionStore" ; export class LayoutPicker extends React . Component < any , any > { @ lazyInject ( "VisualizationOptionStore" ) private readonly visualizationOptions ! : VisualizationOptionStore ; render ( ) { return ( < div className = { "layout-component" } > < div className = { "radio-group list" } > { this . createLayoutButtons ( Layouts . availableLayouts ) } < /div> < /div>); } private createLayoutButtons ( l ) { return l . map ( ( layout ) => ( < label className = { this . getClassName ( layout ) } id = { "select-" + layout . id } key = { layout . id } > < input type = { "radio" } onChange = { this . handleChange } value = { layout . id } id = { layout . id } name = "gender" checked = { this . isChecked ( layout ) } / > { layout . label } < /label>)); } handleChange = ( e ) => { const layout = Layouts . getLayoutById ( e . target . value ) ; if ( layout !== undefined ) { this . visualizationOptions . layout = layout ; } } ; private isChecked ( layout ) { return this . visualizationOptions . layout . id === layout . id ; } private getClassName ( layout ) { if ( this . isChecked ( layout ) ) { return "active" ; } else { return "" ; } } }