Commit 7b9e365b authored by alain's avatar alain 🐙
Browse files

change conditional rendering syntax

parent 6d6b4273
...@@ -13,17 +13,17 @@ const SensorTooltip = props => { ...@@ -13,17 +13,17 @@ const SensorTooltip = props => {
<h4>{d.name}</h4> <h4>{d.name}</h4>
<em>{label}</em> <em>{label}</em>
<table className="data"><tbody> <table className="data"><tbody>
{ d.mean !== null ? { d.mean !== null &&
<tr> <tr>
<td>{ texts.lastMean }:</td> <td>{ texts.lastMean }:</td>
<td><strong>{ roundBy(d.mean, 1) }{ unit }</strong></td> <td><strong>{ roundBy(d.mean, 1) }{ unit }</strong></td>
</tr> : null </tr>
} }
{ !!d.max ? { !!d.max &&
<tr> <tr>
<td>{ texts.lastPeak }:</td> <td>{ texts.lastPeak }:</td>
<td><strong>{ roundBy(d.max, 1) }{ unit }</strong></td> <td><strong>{ roundBy(d.max, 1) }{ unit }</strong></td>
</tr> : null </tr>
} }
</tbody></table> </tbody></table>
</div> </div>
......
...@@ -32,7 +32,7 @@ const ChartTooltip = (props) => { ...@@ -32,7 +32,7 @@ const ChartTooltip = (props) => {
<h4>{ moment(label).format("D MMM") } { moment(label).subtract(1, 'hours').format("HH:mm") } - { moment(label).format("HH:mm") }</h4> <h4>{ moment(label).format("D MMM") } { moment(label).subtract(1, 'hours').format("HH:mm") } - { moment(label).format("HH:mm") }</h4>
<table><tbody> <table><tbody>
<tr><td>{ texts.mean }:</td><td>{ roundBy(avg, 1)}{unit}</td></tr> <tr><td>{ texts.mean }:</td><td>{ roundBy(avg, 1)}{unit}</td></tr>
{ !!max ? <tr><td>{ texts.peak }:</td><td>{ roundBy(max, 1)}{unit}</td></tr> : null } { !!max && <tr><td>{ texts.peak }:</td><td>{ roundBy(max, 1)}{unit}</td></tr> }
</tbody></table> </tbody></table>
</div> </div>
) )
......
...@@ -190,13 +190,13 @@ class StationInfo extends React.Component { ...@@ -190,13 +190,13 @@ class StationInfo extends React.Component {
</div> </div>
} }
{ data && data.length > 0 ? { (data && data.length > 0) &&
<div> <div>
<div id="chart-header"> <div id="chart-header">
<h3>{parameter.label} {unit.label}</h3> <h3>{parameter.label} {unit.label}</h3>
{ sourceObject.download ? <span className={`toggle-link ${(downloadForm ? "active" : "")}`} onClick={ ()=> { this.setState({ downloadForm: !downloadForm }) } }> { sourceObject.download && <span className={`toggle-link ${(downloadForm ? "active" : "")}`} onClick={ ()=> { this.setState({ downloadForm: !downloadForm }) } }>
{ texts.downloadData } <IconArrowDown /> { texts.downloadData } <IconArrowDown />
</span> : null } </span> }
</div> </div>
{ downloadJSX } { downloadJSX }
...@@ -227,10 +227,10 @@ class StationInfo extends React.Component { ...@@ -227,10 +227,10 @@ class StationInfo extends React.Component {
</Brush> </Brush>
</ComposedChart> </ComposedChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> : null </div>
} }
{ stationMeta && data.length === 0 ? <em>{ texts.nodata }</em> : null } { (stationMeta && data.length === 0) && <em>{ texts.nodata }</em> }
</div> </div>
) )
} }
......
...@@ -31,7 +31,7 @@ const Legend = (props) => { ...@@ -31,7 +31,7 @@ const Legend = (props) => {
<span>{ unit.legend[unit.range[1]].label }</span> <span>{ unit.legend[unit.range[1]].label }</span>
</div> */} </div> */}
</div> </div>
{ (unit.tooltip ? <div className="tooltip-content">{ ReactHtmlParser(unit.tooltip) }</div> : null) } { unit.tooltip && <div className="tooltip-content">{ ReactHtmlParser(unit.tooltip) }</div> }
</div> </div>
) )
} }
......
...@@ -87,13 +87,13 @@ class PanelLayers extends React.Component { ...@@ -87,13 +87,13 @@ class PanelLayers extends React.Component {
this.props.toggleLayer(option) this.props.toggleLayer(option)
}}><span className="switch"></span>{parameter.label}</span> }}><span className="switch"></span>{parameter.label}</span>
{ parameter.units && parameter.units.length > 1 ? { (parameter.units && parameter.units.length > 1) &&
<span className="switch-labeled">{ parameter.units.map(unit => <span key={unit.id} className={(unitStatus[parameter.id] === unit.id ? "active" : null)} onClick={() => { <span className="switch-labeled">
this.toggleUnit(parameter.id, unit.id) { parameter.units.map(unit => <span key={unit.id} className={(unitStatus[parameter.id] === unit.id ? "active" : null)} onClick={() => { this.toggleUnit(parameter.id, unit.id) }}>{ unit.label }</span>) }
}}>{ unit.label }</span>) }</span> </span>
: null } }
{ parameter.tooltip ? <Tooltip parameter={parameter} /> : null } { parameter.tooltip && <Tooltip parameter={parameter} /> }
{ unit ? <Legend unit={unit} /> : null } { unit && <Legend unit={unit} /> }
</li>) </li>)
}) })
} }
......
...@@ -10,7 +10,7 @@ const Tooltip = (props) => { ...@@ -10,7 +10,7 @@ const Tooltip = (props) => {
? ?
<div className="tooltip-content"> <div className="tooltip-content">
{ ReactHtmlParser(parameter.tooltip) } { ReactHtmlParser(parameter.tooltip) }
{ parameter.more ? <a className="more" href={parameter.more} target="_blank" rel="noopener noreferrer">lees meer</a> : null } { parameter.more && <a className="more" href={parameter.more} target="_blank" rel="noopener noreferrer">lees meer</a> }
</div> </div>
</div> </div>
) )
......
...@@ -232,14 +232,14 @@ class App extends React.Component { ...@@ -232,14 +232,14 @@ class App extends React.Component {
<MapControls mapControlSettings={mapControlSettings} viewport={viewport} changeViewport={this.changeViewport} /> <MapControls mapControlSettings={mapControlSettings} viewport={viewport} changeViewport={this.changeViewport} />
<MapAttributions /> <MapAttributions />
{ loading > 0 || loadingError ? <MapLoading reload={(loadingError ? this.reload : false)} /> : null } { (loading > 0 || loadingError) && <MapLoading reload={(loadingError ? this.reload : false)} /> }
<div className='mapboxgl-ctrl-bottom-left'> <div className='mapboxgl-ctrl-bottom-left'>
{( texts.about ? <Panel id="about" content={ texts.about } openOnLoad={true} /> : null )} {( texts.about && <Panel id="about" content={ texts.about } openOnLoad={true} /> )}
<PanelLayers layers={layers} forceUpdate={layers.join()} dataGroups={dataGroups} toggleLayer={this.toggleLayer} viewportHeight={viewport.height} /> <PanelLayers layers={layers} forceUpdate={layers.join()} dataGroups={dataGroups} toggleLayer={this.toggleLayer} viewportHeight={viewport.height} />
</div> </div>
{ mapLocations ? <MapLocations mapLocations={mapLocations} changeViewportBounds={this.changeViewportBounds} selectedCenter={selectedCenter} /> : null } { mapLocations && <MapLocations mapLocations={mapLocations} changeViewportBounds={this.changeViewportBounds} selectedCenter={selectedCenter} /> }
{ this.renderModal() } { this.renderModal() }
</div> </div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment