mirror of
https://github.com/bellingcat/ukraine-timemap.git
synced 2026-06-12 13:28:36 +03:00
refactor controls out of NarrativeCard
This commit is contained in:
@@ -2,35 +2,34 @@ import React from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
import { selectActiveNarrative } from '../../selectors'
|
||||
|
||||
function NarrativeCard ({ narrative, methods }) {
|
||||
const { onSelectNarrative, onNext, onPrev } = methods
|
||||
function renderClose() {
|
||||
return (
|
||||
<button
|
||||
className='side-menu-burg is-active'
|
||||
onClick={() => { onSelectNarrative(null) }}
|
||||
>
|
||||
<span></span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
function NarrativeCard ({ narrative }) {
|
||||
// function renderClose() {
|
||||
// return (
|
||||
// <button
|
||||
// className='side-menu-burg is-active'
|
||||
// onClick={() => { onSelectNarrative(null) }}
|
||||
// >
|
||||
// <span></span>
|
||||
// </button>
|
||||
// )
|
||||
// }
|
||||
|
||||
function _renderActions(current, steps) {
|
||||
const prevExists = current !== 0
|
||||
const nextExists = current < steps.length - 1
|
||||
return (
|
||||
<div className='actions'>
|
||||
<div
|
||||
className={`${prevExists ? '' : 'disabled'} action`}
|
||||
onClick={prevExists ? onPrev : null}>←
|
||||
</div>
|
||||
<div
|
||||
className={`${nextExists ? '' : 'disabled'} action`}
|
||||
onClick={nextExists ? onNext : null}>→
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
// function _renderActions(current, steps) {
|
||||
// const prevExists = current !== 0
|
||||
// const nextExists = current < steps.length - 1
|
||||
// return (
|
||||
// <div className='actions'>
|
||||
// <div
|
||||
// className={`${prevExists ? '' : 'disabled'} action`}
|
||||
// onClick={prevExists ? onPrev : null}>←
|
||||
// </div>
|
||||
// <div
|
||||
// className={`${nextExists ? '' : 'disabled'} action`}
|
||||
// onClick={nextExists ? onNext : null}>→
|
||||
// </div>
|
||||
// </div>
|
||||
// )
|
||||
// }
|
||||
|
||||
// no display if no narrative
|
||||
if (!narrative) return null
|
||||
|
||||
40
src/components/presentational/NarrativeControls.js
Normal file
40
src/components/presentational/NarrativeControls.js
Normal file
@@ -0,0 +1,40 @@
|
||||
import React from 'react'
|
||||
import NarrativeCard from './NarrativeCard'
|
||||
|
||||
export default ({ narrative, methods }) => {
|
||||
// function renderClose() {
|
||||
// return (
|
||||
// <button
|
||||
// className='side-menu-burg is-active'
|
||||
// onClick={() => { onSelectNarrative(null) }}
|
||||
// >
|
||||
// <span></span>
|
||||
// </button>
|
||||
// )
|
||||
// }
|
||||
|
||||
// function _renderActions(current, steps) {
|
||||
// const prevExists = current !== 0
|
||||
// const nextExists = current < steps.length - 1
|
||||
// return (
|
||||
// <div className='actions'>
|
||||
// <div
|
||||
// className={`${prevExists ? '' : 'disabled'} action`}
|
||||
// onClick={prevExists ? onPrev : null}>←
|
||||
// </div>
|
||||
// <div
|
||||
// className={`${nextExists ? '' : 'disabled'} action`}
|
||||
// onClick={nextExists ? onNext : null}>→
|
||||
// </div>
|
||||
// </div>
|
||||
// )
|
||||
// }
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<NarrativeCard narrative={narrative} />
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user