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

Add linting and cleaned up obvious suggestions

Browse Source
This commit is contained in:
Phil Denoncourt
2019-01-18 07:56:53 -05:00
parent ebf32199ce
commit 0002fe0df8
46 changed files with 1161 additions and 601 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/presentational/CardCaret.js
View File

@@ -1,18 +1,17 @@
import React from 'react';
import React from 'react'
const CardCaret = ({ isHighlighted, toggle }) => {
let classes = (isHighlighted)
? 'arrow-down'
: 'arrow-down folded';
: 'arrow-down folded'
return (
<div className="card-toggle" onClick={toggle}>
<div className='card-toggle' onClick={toggle}>
<p>
<i className={classes}></i>
<i className={classes} />
</p>
</div>
);
)
}
export default CardCaret;
export default CardCaret

12
src/components/presentational/CardCategory.js
View File

@@ -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

23
src/components/presentational/CardLocation.js
View File

@@ -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

14
src/components/presentational/CardNarrative.js
View File

@@ -1,15 +1,15 @@
import React from 'react';
import React from 'react'
import CardNarrativeLink from './CardNarrativeLink';
import CardNarrativeLink from './CardNarrativeLink'
const CardNarrative = (props) => (
<div className="card-row">
<div className='card-row'>
<h4>Connected events</h4>
<div className="card-cell">
<p>&larr; <CardNarrativeLink {...props} event={props.next}/></p>
<div className='card-cell'>
<p>&larr; <CardNarrativeLink {...props} event={props.next} /></p>
<p>&rarr; <CardNarrativeLink {...props} event={props.prev} /></p>
</div>
</div>
);
)
export default CardNarrative;
export default CardNarrative

10
src/components/presentational/CardNarrativeLink.js
View File

@@ -1,17 +1,17 @@
import React from 'react';
import React from 'react'
const CardNarrativeLink = ({ event, makeTimelabel, select }) => {
if (event !== null) {
const timelabel = makeTimelabel(event.timestamp);
const timelabel = makeTimelabel(event.timestamp)
return (
<a onClick={() => select(event)}>
<small>{`${timelabel} / ${event.location}`}</small>
</a>
);
)
}
return (<a className="disabled"><small>None</small></a>);
return (<a className='disabled'><small>None</small></a>)
}
export default CardNarrativeLink;
export default CardNarrativeLink

46
src/components/presentational/CardSource.js
View File

@@ -3,11 +3,9 @@ import PropTypes from 'prop-types'
import Spinner from './Spinner'
import Img from 'react-image'
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 +27,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 +43,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 +77,7 @@ CardSource.propTypes = {
type: PropTypes.string
}),
isLoading: PropTypes.bool,
onClickHandler: PropTypes.func.isRequired,
onClickHandler: PropTypes.func.isRequired
}
export default CardSource

15
src/components/presentational/CardSummary.js
View File

@@ -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

41
src/components/presentational/CardTags.js
View File

@@ -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

29
src/components/presentational/CardTimestamp.js
View File

@@ -1,34 +1,31 @@
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 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

6
src/components/presentational/Checkbox.js
View File

@@ -1,10 +1,10 @@
import React from 'react';
import React from 'react'
export default ({ label, isActive, onClickCheckbox }) => (
<div className={(isActive) ? 'item active' : 'item'}>
<span onClick={() => onClickCheckbox()}>{label}</span>
<button onClick={() => onClickCheckbox()}>
<div className="checkbox" />
<div className='checkbox' />
</button>
</div>
);
)

6
src/components/presentational/DatetimeDot.js
View File

@@ -15,14 +15,12 @@ export default ({
onClick={() => onSelect(events)}
>
<circle
className="event"
className='event'
cx={0}
cy={0}
style={styleProps}
r={5}
>
</circle>
/>
{ extraRender ? extraRender() : null }
</g>
)

23
src/components/presentational/Icons/CoeventIcon.js
View File

@@ -1,24 +1,21 @@
import React from 'react';
import React from 'react'
const CoeventIcon = ({ isEnabled, toggleMapViews }) => {
const classes = (isEnabled) ? 'action-button active disabled' : 'action-button disabled';
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">
<polygon stroke-linejoin="round" stroke-miterlimit="10" points="19.178,20 10.823,20 10.473,14.081
10,13.396 10,6.084 20,6.084 20,13.396 19.445,14.021 "/>
<rect className="no-fill" x="11.4" y="7.867" width="7.2" height="3.35"/>
<line stroke-linejoin="round" stroke-miterlimit="10" x1="12.125" y1="1" x2="12.125" y2="5.35"/>
<rect x="11.4" y="4.271" width="1.496" height="1.079"/>
<rect x="17.104" y="4.271" width="1.496" height="1.079"/>
<svg className='coevents' x='0px' y='0px' width='30px' height='20px' viewBox='0 0 30 20' enableBackground='new 0 0 30 20'>
<polygon stroke-linejoin='round' stroke-miterlimit='10' points='19.178,20 10.823,20 10.473,14.081
10,13.396 10,6.084 20,6.084 20,13.396 19.445,14.021 ' />
<rect className='no-fill' x='11.4' y='7.867' width='7.2' height='3.35' />
<line stroke-linejoin='round' stroke-miterlimit='10' x1='12.125' y1='1' x2='12.125' y2='5.35' />
<rect x='11.4' y='4.271' width='1.496' height='1.079' />
<rect x='17.104' y='4.271' width='1.496' height='1.079' />
</svg>
</button>
);
)
}
export default CoeventIcon;
export default CoeventIcon

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

@@ -1,14 +1,13 @@
import React from 'react';
const RefreshIcon = ({ }) => {
import React from 'react'
const RefreshIcon = () => {
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
c-3.419,4.073-9.49,4.604-13.562,1.186c-4.073-3.417-4.604-9.49-1.187-13.562c1.987-2.368,4.874-3.54,7.74-3.433" />
<polygon points="26.137,12.748 27.621,19.464 28.9,16.741 31.898,16.503" />
<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
c-3.419,4.073-9.49,4.604-13.562,1.186c-4.073-3.417-4.604-9.49-1.187-13.562c1.987-2.368,4.874-3.54,7.74-3.433' />
<polygon points='26.137,12.748 27.621,19.464 28.9,16.741 31.898,16.503' />
</svg>
);
)
}
export default RefreshIcon;
export default RefreshIcon

15
src/components/presentational/Icons/RouteIcon.js
View File

@@ -1,20 +1,17 @@
import React from 'react';
import React from 'react'
const RouteIcon = ({ isEnabled, toggleMapViews }) => {
const classes = (isEnabled) ? 'action-button active disabled' : 'action-button disabled';
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">
<path d="M0.806,13.646h7.619c2.762,0,3-0.238,3-3v-0.414c0-2.762,0.301-3,3.246-3h14.523"/>
<polyline points="16.671,9.228 19.103,7.233 16.671,5.237 "/>
<svg x='0px' y='0px' width='30px' height='20px' viewBox='0 0 30 20' enableBackground='new 0 0 30 20'>
<path d='M0.806,13.646h7.619c2.762,0,3-0.238,3-3v-0.414c0-2.762,0.301-3,3.246-3h14.523' />
<polyline points='16.671,9.228 19.103,7.233 16.671,5.237 ' />
</svg>
</button>
);
)
}
export default RouteIcon;
export default RouteIcon

10
src/components/presentational/Icons/SitesIcon.js
View File

@@ -1,7 +1,7 @@
import React from 'react';
import React from 'react'
const SitesIcon = ({ isActive, isDisabled, onClickHandler }) => {
let classes = (isActive) ? 'action-button enabled' : 'action-button';
let classes = (isActive) ? 'action-button enabled' : 'action-button'
if (isDisabled) {
classes = 'action-button disabled'
}
@@ -11,11 +11,11 @@ const SitesIcon = ({ isActive, isDisabled, onClickHandler }) => {
className={classes}
onClick={onClickHandler}
>
<svg x="0px" y="0px" width="30px" height="20px" viewBox="0 0 30 20" enableBackground="new 0 0 30 20">
<path d="M24.615,6.793H5.385c-2.761,0-3,0.239-3,3v0.414c0,2.762,0.239,3,3,3h7.621l1.996,2.432l1.996-2.432h7.618c2.762,0,3-0.238,3-3V9.793C27.615,7.032,27.377,6.793,24.615,6.793z"/>
<svg x='0px' y='0px' width='30px' height='20px' viewBox='0 0 30 20' enableBackground='new 0 0 30 20'>
<path d='M24.615,6.793H5.385c-2.761,0-3,0.239-3,3v0.414c0,2.762,0.239,3,3,3h7.621l1.996,2.432l1.996-2.432h7.618c2.762,0,3-0.238,3-3V9.793C27.615,7.032,27.377,6.793,24.615,6.793z' />
</svg>
</button>
)
}
export default SitesIcon;
export default SitesIcon

26
src/components/presentational/LoadingOverlay.js
View File

@@ -1,21 +1,21 @@
import React from 'react';
import copy from '../../js/data/copy.json';
import React from 'react'
import copy from '../../js/data/copy.json'
const LoadingOverlay = ({ isLoading, language }) => {
let classes = 'loading-overlay';
classes += (!isLoading) ? ' hidden' : '';
let classes = 'loading-overlay'
classes += (!isLoading) ? ' hidden' : ''
return (
<div id="loading-overlay" className={classes}>
<div className="loading-wrapper">
<span id="loading-text" className="text">{copy[language].loading}</span>
<div className="spinner">
<div className="double-bounce1" />
<div className="double-bounce2" />
<div id='loading-overlay' className={classes}>
<div className='loading-wrapper'>
<span id='loading-text' className='text'>{copy[language].loading}</span>
<div className='spinner'>
<div className='double-bounce1' />
<div className='double-bounce2' />
</div>
</div>
</div>
);
};
)
}
export default LoadingOverlay;
export default LoadingOverlay

8
src/components/presentational/NarrativeCard.js
View File

@@ -3,12 +3,10 @@ import { connect } from 'react-redux'
import { selectActiveNarrative } from '../../selectors'
function NarrativeCard ({ narrative }) {
// no display if no narrative
// no display if no narrative
const { steps, current } = narrative
if (steps[current]) {
const step = steps[current]
return (
<div className='narrative-info'>
<div className='narrative-info-header'>
@@ -27,14 +25,14 @@ function NarrativeCard ({ narrative }) {
<div className='narrative-info-desc'>
<p>{narrative.description}</p>
</div>
</div>
</div>
)
} else {
return null
}
}
function mapStateToProps(state) {
function mapStateToProps (state) {
return {
narrative: selectActiveNarrative(state)
}

2
src/components/presentational/NarrativeClose.js
View File

@@ -9,7 +9,7 @@ export default ({ onClickHandler, closeMsg }) => {
<button
className='side-menu-burg is-active'
>
<span></span>
<span />
</button>
<div className='close-text'>{closeMsg}</div>
</div>

14
src/components/presentational/NoSource.js
View File

@@ -1,16 +1,16 @@
import React from 'react';
import React from 'react'
const NoSource = ({ failedUrls }) => {
const NoSource = ({ failedUrls }) => {
return (
<div className="no-source-container">
<div className="no-source-row">
<div className='no-source-container'>
<div className='no-source-row'>
<p>
<i className="material-icons no-source-icon">error</i>
</p>
<i className='material-icons no-source-icon'>error</i>
</p>
<p>No media found, as the original media has not yet been uploaded to the platform.</p>
</div>
</div>
)
}
export default NoSource;
export default NoSource

8
src/components/presentational/Spinner.js
View File

@@ -1,12 +1,12 @@
import React from 'react';
import React from 'react'
const Spinner = ({ small }) => {
return (
<div className={`spinner ${small ? 'small' : ''}`}>
<div className="double-bounce-overlay"></div>
<div className="double-bounce"></div>
<div className='double-bounce-overlay' />
<div className='double-bounce' />
</div>
)
}
export default Spinner;
export default Spinner

15
src/components/presentational/TimelineClip.js
View File

@@ -1,15 +1,14 @@
import React from 'react';
import React from 'react'
const TimelineClip = ({ dims }) => (
<clipPath id="clip">
<clipPath id='clip'>
<rect
x="120"
y="0"
x='120'
y='0'
width={dims.width - dims.margin_left - dims.width_controls}
height={dims.height - 25}
>
</rect>
/>
</clipPath>
);
)
export default TimelineClip;
export default TimelineClip

14
src/components/presentational/TimelineEvents.js
View File

@@ -1,8 +1,8 @@
import React from 'react';
import React from 'react'
import DatetimeDot from './DatetimeDot'
// return a list of lists, where each list corresponds to a single category
function getDotsToRender(events) {
function getDotsToRender (events) {
// each datetime needs to render as many dots as there are distinct
// categories in the events contained by the datetime.
// To this end, eventsByCategory is an intermediate data structure that
@@ -32,7 +32,7 @@ const TimelineEvents = ({
transitionDuration,
styleDatetime
}) => {
function renderDatetime(datetime) {
function renderDatetime (datetime) {
if (narrative) {
const { steps } = narrative
// check all events in the datetime before rendering in narrative
@@ -41,7 +41,7 @@ const TimelineEvents = ({
const event = datetime.events[i]
if (steps.map(s => s.id).includes(event.id)) {
isInNarrative = true
break;
break
}
}
@@ -80,11 +80,11 @@ const TimelineEvents = ({
return (
<g
clipPath={"url(#clip)"}
clipPath={'url(#clip)'}
>
{datetimes.map(datetime => renderDatetime(datetime))}
</g>
);
)
}
export default TimelineEvents;
export default TimelineEvents

16
src/components/presentational/TimelineHandles.js
View File

@@ -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}, 62)`}
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}, 62)`}
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

8
src/components/presentational/TimelineHeader.js
View File

@@ -1,15 +1,15 @@
import React from 'react';
import React from 'react'
const TimelineHeader = ({ title, date0, date1, onClick, hideInfo }) => (
<div className='timeline-header'>
<div className='timeline-toggle' onClick={() => onClick()}>
<p><i className='arrow-down'></i></p>
<p><i className='arrow-down' /></p>
</div>
<div className={`timeline-info ${hideInfo ? 'hidden' : ''}`}>
<p>{title}</p>
<p>{date0} - {date1}</p>
</div>
</div>
);
)
export default TimelineHeader;
export default TimelineHeader

25
src/components/presentational/TimelineLabels.js
View File

@@ -1,27 +1,22 @@
import React from 'react';
import { formatterWithYear } from '../../js/utilities.js';
import React from 'react'
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" */}
@@ -41,4 +36,4 @@ const TimelineLabels = ({ dims, timelabels }) => {
)
}
export default TimelineLabels;
export default TimelineLabels

17
src/components/presentational/TimelineMarkers.js
View File

@@ -1,10 +1,10 @@
import React from 'react';
import React from 'react'
const TimelineMarkers = ({ getEventX, getCategoryY, transitionDuration, selected }) => {
function renderMarker(event) {
function renderMarker (event) {
return (
<circle
className="timeline-marker"
className='timeline-marker'
cx={0}
cy={0}
style={{
@@ -13,19 +13,18 @@ const TimelineMarkers = ({ getEventX, getCategoryY, transitionDuration, selected
'-moz-transition': 'none',
'opacity': 0.9
}}
r="10"
>
</circle>
r='10'
/>
)
}
return (
<g
clipPath={"url(#clip)"}
clipPath={'url(#clip)'}
>
{selected.map(event => renderMarker(event))}
</g>
);
)
}
export default TimelineMarkers;
export default TimelineMarkers

10
src/components/presentational/TimelineZoomControls.js
View File

@@ -1,12 +1,12 @@
import React from 'react';
import React from 'react'
const TimelineZoomControls = ({ extent, zoomLevels, dims, onApplyZoom }) => {
function renderZoom(zoom, idx) {
function renderZoom (zoom, idx) {
const isActive = (zoom.duration === extent)
return (
<text
className={`zoom-level-button ${isActive ? 'active' : ''}`}
x="60"
x='60'
y={(idx * 15) + 20}
onClick={() => onApplyZoom(zoom)}
>
@@ -19,7 +19,7 @@ const TimelineZoomControls = ({ extent, zoomLevels, dims, onApplyZoom }) => {
<g transform={`translate(${dims.width - dims.width_controls}, 0)`}>
{zoomLevels.map((z, idx) => renderZoom(z, idx))}
</g>
);
)
}
export default TimelineZoomControls;
export default TimelineZoomControls