bellingcat/ukraine-timemap
1
0
Fork 0
mirror of https://github.com/bellingcat/ukraine-timemap.git synced 2026-06-11 21:08:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

lint jsx files

Browse Source
This commit is contained in:
Lachlan Kermode
2019-01-23 11:35:34 +00:00
parent 939a4833b8
commit fb4d0c2d86
28 changed files with 572 additions and 627 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/presentational/Icons/RefreshIcon.js
View File

@@ -1,6 +1,6 @@
import React from 'react'
const RefreshIcon = () => {
export default ({ isActive, isDisabled, onClickHandler }) => {
return (
<svg className='reset' x='0px' y='0px' width='25px' height='25px' viewBox='7.5 7.5 25 25' enableBackground='new 7.5 7.5 25 25'>
<path stroke-width='2' stroke-miterlimit='10' d='M28.822,16.386c1.354,3.219,0.898,7.064-1.5,9.924
@@ -9,5 +9,3 @@ const RefreshIcon = () => {
</svg>
)
}
export default RefreshIcon

0
src/components/presentational/Icons/SitesIcon.js → src/components/presentational/Icons/Sites.js
View File

18
src/components/presentational/Map/DefsMarkers.jsx
View File

@@ -1,14 +1,14 @@
import React from 'react';
import React from 'react'
const MapDefsMarkers = ({}) => (
const MapDefsMarkers = () => (
<defs>
<marker id="arrow" viewBox="0 0 6 6" refX="3" refY="3" markerWidth="6" markerHeight="6" orient="auto">
<path d="M0,3v-3l6,3l-6,3z" style={{ fill: 'red' }}></path>
<marker id='arrow' viewBox='0 0 6 6' refX='3' refY='3' markerWidth='6' markerHeight='6' orient='auto'>
<path d='M0,3v-3l6,3l-6,3z' style={{ fill: 'red' }} />
</marker>
<marker id='arrow-off' viewBox='0 0 6 6' refX='3' refY='3' markerWidth='6' markerHeight='6' orient='auto'>
<path d='M0,3v-3l6,3l-6,3z' style={{ fill: 'black', fillOpacity: 0.2 }} />
</marker>
<marker id="arrow-off" viewBox="0 0 6 6" refX="3" refY="3" markerWidth="6" markerHeight="6" orient="auto">
<path d="M0,3v-3l6,3l-6,3z" style={{ fill: 'black', fillOpacity: 0.2 }}></path>
</marker>
</defs>
);
)
export default MapDefsMarkers;
export default MapDefsMarkers

51
src/components/presentational/Map/Events.jsx
View File

@@ -1,23 +1,23 @@
import React from 'react';
import { Portal } from 'react-portal';
import React from 'react'
import { Portal } from 'react-portal'
function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, narrative, onSelect, svg, locations }){
function getLocationEventsDistribution(location) {
const eventCount = {};
const categories = categories;
function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, narrative, onSelect, svg, locations }) {
// function getLocationEventsDistribution (location) {
// const eventCount = {}
//
// categories.forEach(cat => {
// eventCount[cat.category] = []
// })
//
// location.events.forEach((event) => {
// ;
// eventCount[event.category].push(event)
// })
//
// return eventCount
// }
categories.forEach(cat => {
eventCount[cat.category] = [];
});
location.events.forEach((event) => {;
eventCount[event.category].push(event);
});
return eventCount;
}
function renderLocation(location) {
function renderLocation (location) {
/**
{
events: [...],
@@ -26,7 +26,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
longitude: '32.2'
}
*/
const { x, y } = projectPoint([location.latitude, location.longitude]);
const { x, y } = projectPoint([location.latitude, location.longitude])
// const eventsByCategory = getLocationEventsDistribution(location);
const locCategory = location.events.length > 0 ? location.events[0].category : 'default'
@@ -37,7 +37,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
const styles = ({
fill: getCategoryColor(locCategory),
fillOpacity: 1,
...customStyles[0]
...extraStyles
})
// in narrative mode, only render events in narrative
@@ -53,16 +53,15 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
return (
<g
className="location"
className='location'
transform={`translate(${x}, ${y})`}
onClick={() => onSelect(location.events)}
>
<circle
className="location-event-marker"
className='location-event-marker'
r={7}
style={styles}
>
</circle>
/>
{extraRender ? extraRender() : null}
</g>
)
@@ -72,7 +71,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
<Portal node={svg}>
{locations.map(renderLocation)}
</Portal>
);
)
}
export default MapEvents;
export default MapEvents

38
src/components/presentational/Map/Narratives.jsx
View File

@@ -2,40 +2,39 @@ import React from 'react'
import { Portal } from 'react-portal'
function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives, projectPoint }) {
function getNarrativeStyle(narrativeId) {
function getNarrativeStyle (narrativeId) {
const styleName = (narrativeId && narrativeId in styles)
? narrativeId
: 'default'
return styles[styleName]
}
function getStepStyle(name) {
function getStepStyle (name) {
if (name === 'None') return null
return styles.stepStyles[name]
}
function hasNoLocation(step) {
function hasNoLocation (step) {
return (step.latitude === '' || step.longitude === '')
}
function renderNarrativeStep(idx, n) {
function renderNarrativeStep (idx, n) {
const step = n.steps[idx]
const step2 = n.steps[idx + 1]
// don't draw if one of the steps has no location
if (hasNoLocation(step) || hasNoLocation(step2))
return null
if (hasNoLocation(step) || hasNoLocation(step2)) { return null }
// 0 if not in narrative mode, 1 if active narrative, 0.1 if inactive
let styles = {
strokeOpacity: (n === null) ? 0
: (step && (n.id === narrative.id)) ? 1 : 0.1,
strokeOpacity: (n === null) ? 0
: (step && (n.id === narrative.id)) ? 1 : 0.1,
strokeWidth: 0,
strokeDasharray: 'none',
stroke: 'none'
}
const p1 = projectPoint([step.latitude, step.longitude])
const p1 = projectPoint([step.latitude, step.longitude])
const p2 = projectPoint([step2.latitude, step2.longitude])
if (step) {
@@ -55,40 +54,37 @@ function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives,
...styles,
...getNarrativeStyle(n.id)
}
return _renderNarrativeStep(p1,p2,styles)
return _renderNarrativeStep(p1, p2, styles)
}
}
}
function _renderNarrativeStep(p1, p2, styles) {
function _renderNarrativeStep (p1, p2, styles) {
const { stroke, strokeWidth, strokeDasharray, strokeOpacity } = styles
return (
<line
className="narrative-step"
className='narrative-step'
x1={p1.x}
x2={p2.x}
y1={p1.y}
y2={p2.y}
markerStart="none"
onClick={() => onSelectNarrative(n)}
markerStart='none'
onClick={n => onSelectNarrative(n)}
style={{
strokeWidth,
strokeDasharray,
strokeOpacity,
stroke,
stroke
}}
>
</line>
/>
)
}
function renderNarrative(n) {
function renderNarrative (n) {
const steps = n.steps.slice(0, n.steps.length - 1)
return (
<g id={`narrative-${n.id.replace(/ /g,"_")}`} className="narrative">
<g id={`narrative-${n.id.replace(/ /g, '_')}`} className='narrative'>
{steps.map((s, idx) => renderNarrativeStep(idx, n))}
</g>
)

35
src/components/presentational/Map/SelectedEvents.jsx
View File

@@ -1,31 +1,30 @@
import React from 'react';
import { Portal } from 'react-portal';
import React from 'react'
import { Portal } from 'react-portal'
class MapSelectedEvents extends React.Component {
renderMarker (event) {
const { x, y } = this.props.projectPoint([event.latitude, event.longitude]);
const { x, y } = this.props.projectPoint([event.latitude, event.longitude])
return (
<g
className="location-marker"
className='location-marker'
transform={`translate(${x - 32}, ${y})`}
>
<path
className="leaflet-interactive"
stroke="#ffffff"
stroke-opacity="1"
stroke-width="3"
stroke-linecap=""
stroke-linejoin="round"
stroke-dasharray="5,2"
fill="none"
d="M0,0a32,32 0 1,0 64,0 a32,32 0 1,0 -64,0 "
>
</path>
className='leaflet-interactive'
stroke='#ffffff'
stroke-opacity='1'
stroke-width='3'
stroke-linecap=''
stroke-linejoin='round'
stroke-dasharray='5,2'
fill='none'
d='M0,0a32,32 0 1,0 64,0 a32,32 0 1,0 -64,0 '
/>
</g>
);
)
}
render() {
render () {
return (
<Portal node={this.props.svg}>
{this.props.selected.map(s => this.renderMarker(s))}
@@ -33,4 +32,4 @@ class MapSelectedEvents extends React.Component {
)
}
}
export default MapSelectedEvents;
export default MapSelectedEvents

14
src/components/presentational/Map/Shapes.jsx
View File

@@ -1,15 +1,15 @@
import React from 'react'
import { Portal } from 'react-portal'
function MapShapes({ svg, shapes, projectPoint, styles }) {
function renderShape(shape) {
function MapShapes ({ svg, shapes, projectPoint, styles }) {
function renderShape (shape) {
const lineCoords = []
const points = shape.points
.map(projectPoint)
points.forEach((p1, idx) => {
if (idx < shape.points.length - 1) {
const p2 = points[idx+1]
const p2 = points[idx + 1]
lineCoords.push({
x1: p1.x,
y1: p1.y,
@@ -27,11 +27,10 @@ function MapShapes({ svg, shapes, projectPoint, styles }) {
return (
<line
id={`${shape.name}_style`}
markerStart="none"
markerStart='none'
{...coords}
style={shapeStyles}
>
</line>
/>
)
})
}
@@ -40,12 +39,11 @@ function MapShapes({ svg, shapes, projectPoint, styles }) {
return (
<Portal node={svg}>
<g id={`shapes-layer`} className="narrative">
<g id={`shapes-layer`} className='narrative'>
{shapes.map(renderShape)}
</g>
</Portal>
)
}
export default MapShapes

21
src/components/presentational/Map/Sites.jsx
View File

@@ -1,25 +1,24 @@
import React from 'react';
import React from 'react'
function MapSites({ sites, projectPoint }) {
function renderSite(site) {
const { x, y } = projectPoint([site.latitude, site.longitude]);
function MapSites ({ sites, projectPoint }) {
function renderSite (site) {
const { x, y } = projectPoint([site.latitude, site.longitude])
return (<div
className="leaflet-tooltip site-label leaflet-zoom-animated leaflet-tooltip-top"
style={{ opacity: 1, transform: `translate3d(calc(${x}px - 50%), ${y - 25}px, 0px)`}}>
className='leaflet-tooltip site-label leaflet-zoom-animated leaflet-tooltip-top'
style={{ opacity: 1, transform: `translate3d(calc(${x}px - 50%), ${y - 25}px, 0px)` }}>
{site.site}
</div>
);
)
}
if (!sites || !sites.length) return null;
if (!sites || !sites.length) return null
return (
<div className="sites-layer">
<div className='sites-layer'>
{sites.map(renderSite)}
</div>
)
}
export default MapSites;
export default MapSites