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

change conditional rendering syntax

parent 6d6b4273
......@@ -13,17 +13,17 @@ const SensorTooltip = props => {
<h4>{d.name}</h4>
<em>{label}</em>
<table className="data"><tbody>
{ d.mean !== null ?
{ d.mean !== null &&
<tr>
<td>{ texts.lastMean }:</td>
<td><strong>{ roundBy(d.mean, 1) }{ unit }</strong></td>
</tr> : null
</tr>
}
{ !!d.max ?
{ !!d.max &&
<tr>
<td>{ texts.lastPeak }:</td>
<td><strong>{ roundBy(d.max, 1) }{ unit }</strong></td>
</tr> : null
</tr>
}
</tbody></table>
</div>
......
......@@ -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>
<table><tbody>
<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>
</div>
)
......
......@@ -190,13 +190,13 @@ class StationInfo extends React.Component {
</div>
}
{ data && data.length > 0 ?
{ (data && data.length > 0) &&
<div>
<div id="chart-header">
<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 />
</span> : null }
</span> }
</div>
{ downloadJSX }
......@@ -227,10 +227,10 @@ class StationInfo extends React.Component {
</Brush>
</ComposedChart>
</ResponsiveContainer>
</div> : null
</div>
}
{ stationMeta && data.length === 0 ? <em>{ texts.nodata }</em> : null }
{ (stationMeta && data.length === 0) && <em>{ texts.nodata }</em> }
</div>
)
}
......
......@@ -31,7 +31,7 @@ const Legend = (props) => {
<span>{ unit.legend[unit.range[1]].label }</span>
</div> */}
</div>
{ (unit.tooltip ? <div className="tooltip-content">{ ReactHtmlParser(unit.tooltip) }</div> : null) }
{ unit.tooltip && <div className="tooltip-content">{ ReactHtmlParser(unit.tooltip) }</div> }
</div>
)
}
......
......@@ -87,13 +87,13 @@ class PanelLayers extends React.Component {
this.props.toggleLayer(option)
}}><span className="switch"></span>{parameter.label}</span>
{ 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={() => {
this.toggleUnit(parameter.id, unit.id)
}}>{ unit.label }</span>) }</span>
: null }
{ parameter.tooltip ? <Tooltip parameter={parameter} /> : null }
{ unit ? <Legend unit={unit} /> : null }
{ (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={() => { this.toggleUnit(parameter.id, unit.id) }}>{ unit.label }</span>) }
</span>
}
{ parameter.tooltip && <Tooltip parameter={parameter} /> }
{ unit && <Legend unit={unit} /> }
</li>)
})
}
......
......@@ -10,7 +10,7 @@ const Tooltip = (props) => {
?
<div className="tooltip-content">
{ 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>
)
......
......@@ -232,14 +232,14 @@ class App extends React.Component {
<MapControls mapControlSettings={mapControlSettings} viewport={viewport} changeViewport={this.changeViewport} />
<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'>
{( 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} />
</div>
{ mapLocations ? <MapLocations mapLocations={mapLocations} changeViewportBounds={this.changeViewportBounds} selectedCenter={selectedCenter} /> : null }
{ mapLocations && <MapLocations mapLocations={mapLocations} changeViewportBounds={this.changeViewportBounds} selectedCenter={selectedCenter} /> }
{ this.renderModal() }
</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