mirror of
https://github.com/bellingcat/ukraine-timemap.git
synced 2026-06-11 21:08:36 +03:00
lint additional files
This commit is contained in:
@@ -1,26 +1,18 @@
|
||||
import React from 'react';
|
||||
|
||||
import SitesIcon from './presentational/Icons/SitesIcon.js';
|
||||
import RefreshIcon from './presentational/Icons/RefreshIcon.js';
|
||||
import CoeventIcon from './presentational/Icons/CoeventIcon.js';
|
||||
import RouteIcon from './presentational/Icons/RouteIcon.js';
|
||||
// import RefreshIcon from './presentational/Icons/RefreshIcon.js';
|
||||
// import CoeventIcon from './presentational/Icons/CoeventIcon.js';
|
||||
// import RouteIcon from './presentational/Icons/RouteIcon.js';
|
||||
|
||||
function ToolbarBottomActions (props) {
|
||||
function renderMapActions() {
|
||||
return (
|
||||
<div className="bottom-action-block">
|
||||
{/* <RouteIcon */}
|
||||
{/* onClick={(view) => this.toggleMapViews(view)} */}
|
||||
{/* isEnabled={this.props.viewFilters.routes} */}
|
||||
{/* /> */}
|
||||
{process.env.features.USE_SITES ? <SitesIcon
|
||||
isActive={props.sites.enabled}
|
||||
onClickHandler={props.sites.toggle}
|
||||
/> : null}
|
||||
{/* <CoeventIcon */}
|
||||
{/* onClick={(view) => this.toggleMapViews(view)} */}
|
||||
{/* isEnabled={this.props.viewFilters.coevents} */}
|
||||
{/* /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import React from 'react';
|
||||
import React from 'react'
|
||||
|
||||
import { capitalizeFirstLetter } from '../../../js/utilities.js';
|
||||
import { capitalizeFirstLetter } from '../../../js/utilities.js'
|
||||
|
||||
const CardCategory = ({ categoryTitle, categoryLabel, color }) => (
|
||||
<div className="card-row card-cell category">
|
||||
<div className='card-row card-cell category'>
|
||||
<h4>{categoryTitle}</h4>
|
||||
<p>
|
||||
{capitalizeFirstLetter(categoryLabel)}
|
||||
<span className='color-category' style={{ background: color }}/>
|
||||
<span className='color-category' style={{ background: color }} />
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
|
||||
export default CardCategory;
|
||||
export default CardCategory
|
||||
|
||||
@@ -1,30 +1,29 @@
|
||||
import React from 'react';
|
||||
import React from 'react'
|
||||
|
||||
import copy from '../../../js/data/copy.json';
|
||||
import { isNotNullNorUndefined } from '../../../js/utilities';
|
||||
import copy from '../../../js/data/copy.json'
|
||||
import { isNotNullNorUndefined } from '../../../js/utilities'
|
||||
|
||||
const CardLocation = ({ language, location }) => {
|
||||
|
||||
if (isNotNullNorUndefined(location)) {
|
||||
return (
|
||||
<div className="card-cell location">
|
||||
<div className='card-cell location'>
|
||||
<p>
|
||||
<i className="material-icons left">location_on</i>
|
||||
<i className='material-icons left'>location_on</i>
|
||||
{location}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
} else {
|
||||
const unknown = copy[language].cardstack.unknown_location;
|
||||
const unknown = copy[language].cardstack.unknown_location
|
||||
return (
|
||||
<div className="card-cell location">
|
||||
<div className='card-cell location'>
|
||||
<p>
|
||||
<i className="material-icons left">location_on</i>
|
||||
<i className='material-icons left'>location_on</i>
|
||||
{unknown}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default CardLocation;
|
||||
export default CardLocation
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import React from 'react';
|
||||
import React from 'react'
|
||||
|
||||
import CardNarrativeLink from './NarrativeLink';
|
||||
import CardNarrativeLink from './NarrativeLink'
|
||||
|
||||
const CardNarrative = (props) => (
|
||||
<div className="card-row">
|
||||
<div className='card-row'>
|
||||
<h4>Connected events</h4>
|
||||
<div className="card-cell">
|
||||
<p>← <CardNarrativeLink {...props} event={props.next}/></p>
|
||||
<div className='card-cell'>
|
||||
<p>← <CardNarrativeLink {...props} event={props.next} /></p>
|
||||
<p>→ <CardNarrativeLink {...props} event={props.prev} /></p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
|
||||
export default CardNarrative;
|
||||
export default CardNarrative
|
||||
|
||||
@@ -3,11 +3,10 @@ import PropTypes from 'prop-types'
|
||||
import Img from 'react-image'
|
||||
|
||||
import Spinner from '../Spinner'
|
||||
import copy from '../../../js/data/copy.json'
|
||||
|
||||
const CardSource = ({ source, isLoading, onClickHandler }) => {
|
||||
function renderIconText(type) {
|
||||
switch(type) {
|
||||
function renderIconText (type) {
|
||||
switch (type) {
|
||||
case 'Eyewitness Testimony':
|
||||
return 'visibility'
|
||||
case 'Government Data':
|
||||
@@ -29,7 +28,7 @@ const CardSource = ({ source, isLoading, onClickHandler }) => {
|
||||
|
||||
if (!source) {
|
||||
return (
|
||||
<div className="card-source">
|
||||
<div className='card-source'>
|
||||
<div>Error: this source was not found</div>
|
||||
</div>
|
||||
)
|
||||
@@ -45,30 +44,30 @@ const CardSource = ({ source, isLoading, onClickHandler }) => {
|
||||
}
|
||||
|
||||
const fallbackIcon = (
|
||||
<i className="material-icons source-icon">
|
||||
<i className='material-icons source-icon'>
|
||||
{renderIconText(source.type)}
|
||||
</i>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="card-source">
|
||||
<div className='card-source'>
|
||||
{isLoading
|
||||
? <Spinner/>
|
||||
: (
|
||||
<div className="source-row" onClick={() => onClickHandler(source)}>
|
||||
{!!thumbnail ? (
|
||||
<Img
|
||||
className="source-icon"
|
||||
src={thumbnail}
|
||||
loader={<Spinner small />}
|
||||
unloader={fallbackIcon}
|
||||
width={30}
|
||||
height={30}
|
||||
/>
|
||||
) : fallbackIcon}
|
||||
<p>{source.id}</p>
|
||||
</div>
|
||||
)}
|
||||
? <Spinner />
|
||||
: (
|
||||
<div className='source-row' onClick={() => onClickHandler(source)}>
|
||||
{thumbnail ? (
|
||||
<Img
|
||||
className='source-icon'
|
||||
src={thumbnail}
|
||||
loader={<Spinner small />}
|
||||
unloader={fallbackIcon}
|
||||
width={30}
|
||||
height={30}
|
||||
/>
|
||||
) : fallbackIcon}
|
||||
<p>{source.id}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -79,7 +78,7 @@ CardSource.propTypes = {
|
||||
type: PropTypes.string
|
||||
}),
|
||||
isLoading: PropTypes.bool,
|
||||
onClickHandler: PropTypes.func.isRequired,
|
||||
onClickHandler: PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
export default CardSource
|
||||
|
||||
@@ -1,19 +1,18 @@
|
||||
import React from 'react';
|
||||
import React from 'react'
|
||||
|
||||
import copy from '../../../js/data/copy.json';
|
||||
import copy from '../../../js/data/copy.json'
|
||||
|
||||
const CardSummary = ({ language, description, isHighlighted }) => {
|
||||
|
||||
const summary = copy[language].cardstack.description;
|
||||
const summary = copy[language].cardstack.description
|
||||
|
||||
return (
|
||||
<div className="card-row summary">
|
||||
<div className="card-cell">
|
||||
<div className='card-row summary'>
|
||||
<div className='card-cell'>
|
||||
<h4>{summary}</h4>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default CardSummary;
|
||||
export default CardSummary
|
||||
|
||||
@@ -1,37 +1,36 @@
|
||||
import React from 'react';
|
||||
import React from 'react'
|
||||
|
||||
import copy from '../../../js/data/copy.json';
|
||||
import copy from '../../../js/data/copy.json'
|
||||
|
||||
const CardTags = ({ tags, language }) => {
|
||||
const tags_lang = copy[language].cardstack.tags;
|
||||
const no_tags_lang = copy[language].cardstack.notags;
|
||||
const tagsLang = copy[language].cardstack.tags
|
||||
const noTagsLang = copy[language].cardstack.notags
|
||||
|
||||
if (tags.length > 0) {
|
||||
return (
|
||||
<div className="card-row card-cell tags">
|
||||
<h4>{tags_lang}:</h4>
|
||||
<div className='card-row card-cell tags'>
|
||||
<h4>{tagsLang}:</h4>
|
||||
<p>
|
||||
{tags.map((tag, idx) => {
|
||||
return (
|
||||
<span className="tag">
|
||||
<small>{tag.name}</small>
|
||||
{(idx < tags.length - 1)
|
||||
? ','
|
||||
: ''}
|
||||
</span>
|
||||
);
|
||||
return (
|
||||
<span className='tag'>
|
||||
<small>{tag.name}</small>
|
||||
{(idx < tags.length - 1)
|
||||
? ','
|
||||
: ''}
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className="card-row card-cell tags">
|
||||
<h4>{tags_lang}</h4>
|
||||
<p><small>{no_tags_lang}</small></p>
|
||||
<div className='card-row card-cell tags'>
|
||||
<h4>{tagsLang}</h4>
|
||||
<p><small>{noTagsLang}</small></p>
|
||||
</div>
|
||||
);
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default CardTags;
|
||||
export default CardTags
|
||||
|
||||
@@ -1,34 +1,33 @@
|
||||
import React from 'react';
|
||||
import React from 'react'
|
||||
|
||||
import copy from '../../../js/data/copy.json';
|
||||
import { isNotNullNorUndefined } from '../../../js/utilities';
|
||||
import copy from '../../../js/data/copy.json'
|
||||
import { isNotNullNorUndefined } from '../../../js/utilities'
|
||||
|
||||
const CardTimestamp = ({ makeTimelabel, language, timestamp }) => {
|
||||
|
||||
const daytime_lang = copy[language].cardstack.timestamp;
|
||||
const estimated_lang = copy[language].cardstack.estimated;
|
||||
const unknown_lang = copy[language].cardstack.unknown_time;
|
||||
// const daytimeLang = copy[language].cardstack.timestamp
|
||||
// const estimatedLang = copy[language].cardstack.estimated
|
||||
const unknownLang = copy[language].cardstack.unknown_time
|
||||
|
||||
if (isNotNullNorUndefined(timestamp)) {
|
||||
const timelabel = makeTimelabel(timestamp);
|
||||
const timelabel = makeTimelabel(timestamp)
|
||||
return (
|
||||
<div className="card-cell timestamp">
|
||||
<div className='card-cell timestamp'>
|
||||
<p>
|
||||
<i className="material-icons left">today</i>
|
||||
<i className='material-icons left'>today</i>
|
||||
{timelabel}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<div className="card-cell timestamp">
|
||||
<div className='card-cell timestamp'>
|
||||
<p>
|
||||
<i className="material-icons left">today</i>
|
||||
{unknown_lang}
|
||||
<i className='material-icons left'>today</i>
|
||||
{unknownLang}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default CardTimestamp;
|
||||
export default CardTimestamp
|
||||
|
||||
@@ -3,7 +3,6 @@ import React from 'react'
|
||||
const CoeventIcon = ({ isEnabled, toggleMapViews }) => {
|
||||
return (
|
||||
<button
|
||||
className={sitesClass}
|
||||
onClick={() => toggleMapViews('coevents')}
|
||||
>
|
||||
<svg className='coevents' x='0px' y='0px' width='30px' height='20px' viewBox='0 0 30 20' enableBackground='new 0 0 30 20'>
|
||||
|
||||
@@ -3,7 +3,6 @@ import React from 'react'
|
||||
const RouteIcon = ({ isEnabled, toggleMapViews }) => {
|
||||
return (
|
||||
<button
|
||||
className={sitesClass}
|
||||
onClick={() => toggleMapViews('routes')}
|
||||
>
|
||||
<svg x='0px' y='0px' width='30px' height='20px' viewBox='0 0 30 20' enableBackground='new 0 0 30 20'>
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
import React from 'react';
|
||||
import React from 'react'
|
||||
|
||||
const TimelineClip = ({ dims }) => (
|
||||
<clipPath id="clip">
|
||||
<clipPath id='clip'>
|
||||
<rect
|
||||
x={dims.margin_left}
|
||||
y="0"
|
||||
y='0'
|
||||
width={dims.width - dims.margin_left - dims.width_controls}
|
||||
height={dims.height - 25}
|
||||
>
|
||||
</rect>
|
||||
/>
|
||||
</clipPath>
|
||||
);
|
||||
)
|
||||
|
||||
export default TimelineClip;
|
||||
export default TimelineClip
|
||||
|
||||
@@ -1,26 +1,24 @@
|
||||
import React from 'react';
|
||||
import React from 'react'
|
||||
|
||||
const TimelineHandles = ({ dims, onMoveTime }) => {
|
||||
|
||||
return (
|
||||
<g className="time-controls-inline">
|
||||
<g className='time-controls-inline'>
|
||||
<g
|
||||
transform={`translate(${dims.margin_left - 20}, 120)`}
|
||||
onClick={() => onMoveTime('backwards')}
|
||||
>
|
||||
<circle r="15"></circle>
|
||||
<path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z" transform="rotate(270)"></path>
|
||||
<circle r='15' />
|
||||
<path d='M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z' transform='rotate(270)' />
|
||||
</g>
|
||||
<g
|
||||
transform={`translate(${dims.width - dims.width_controls + 20}, 120)`}
|
||||
onClick={() => onMoveTime('forward')}
|
||||
>
|
||||
<circle r="15"></circle>
|
||||
<path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z" transform="rotate(90)"></path>
|
||||
<circle r='15' />
|
||||
<path d='M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z' transform='rotate(90)' />
|
||||
</g>
|
||||
</g>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
export default TimelineHandles;
|
||||
export default TimelineHandles
|
||||
|
||||
@@ -1,38 +1,35 @@
|
||||
import React from 'react';
|
||||
import React from 'react'
|
||||
|
||||
import { formatterWithYear } from '../../../js/utilities.js';
|
||||
import { formatterWithYear } from '../../../js/utilities.js'
|
||||
|
||||
const TimelineLabels = ({ dims, timelabels }) => {
|
||||
|
||||
return (
|
||||
<g>
|
||||
<line
|
||||
class="axisBoundaries"
|
||||
class='axisBoundaries'
|
||||
x1={dims.margin_left}
|
||||
x2={dims.margin_left}
|
||||
y1="10"
|
||||
y2="20"
|
||||
>
|
||||
</line>
|
||||
y1='10'
|
||||
y2='20'
|
||||
/>
|
||||
<line
|
||||
class="axisBoundaries"
|
||||
class='axisBoundaries'
|
||||
x1={dims.width - dims.width_controls}
|
||||
x2={dims.width - dims.width_controls}
|
||||
y1="10"
|
||||
y2="20"
|
||||
>
|
||||
</line>
|
||||
y1='10'
|
||||
y2='20'
|
||||
/>
|
||||
<text
|
||||
class="timeLabel0 timeLabel"
|
||||
x="5"
|
||||
y="15"
|
||||
class='timeLabel0 timeLabel'
|
||||
x='5'
|
||||
y='15'
|
||||
>
|
||||
{formatterWithYear(timelabels[0])}
|
||||
</text>
|
||||
<text
|
||||
class="timelabelF timeLabel"
|
||||
class='timelabelF timeLabel'
|
||||
x={dims.width - dims.width_controls - 5}
|
||||
y="15"
|
||||
y='15'
|
||||
style={{ textAnchor: 'end' }}
|
||||
>
|
||||
{formatterWithYear(timelabels[1])}
|
||||
@@ -41,4 +38,4 @@ const TimelineLabels = ({ dims, timelabels }) => {
|
||||
)
|
||||
}
|
||||
|
||||
export default TimelineLabels;
|
||||
export default TimelineLabels
|
||||
|
||||
Reference in New Issue
Block a user