From e7cac13fb5eb84c4cddeeb06e0c3737b18320236 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Fri, 18 Jan 2019 11:51:00 +0000 Subject: [PATCH] significantly refactor presentational components --- .gitignore | 2 + src/components/.DS_Store | Bin 0 -> 6148 bytes src/components/Card.jsx | 16 ++--- src/components/Dashboard.jsx | 2 +- src/components/Map.jsx | 41 ++++++----- src/components/Timeline.jsx | 14 ++-- src/components/presentational/.DS_Store | Bin 0 -> 6148 bytes .../{CardCaret.js => Card/Caret.js} | 0 .../{CardCategory.js => Card/Category.js} | 2 +- .../{CardLocation.js => Card/Location.js} | 4 +- .../{CardNarrative.js => Card/Narrative.js} | 2 +- .../NarrativeLink.js} | 0 .../{CardSource.js => Card/Source.js} | 4 +- .../{CardSummary.js => Card/Summary.js} | 2 +- .../{CardTags.js => Card/Tags.js} | 2 +- .../{CardTimestamp.js => Card/Timestamp.js} | 4 +- .../Map/DefsMarkers.jsx} | 0 .../Map/Events.jsx} | 43 +++++------- .../Map/Narratives.jsx} | 64 +++++++----------- .../Map/SelectedEvents.jsx} | 13 +--- .../Map/Shapes.jsx} | 10 +-- .../Map/Sites.jsx} | 10 +-- .../Adjust.js} | 0 .../{NarrativeCard.js => Narrative/Card.js} | 2 +- .../{NarrativeClose.js => Narrative/Close.js} | 0 .../Controls.js} | 14 ++-- .../{TimelineClip.js => Timeline/Clip.js} | 0 .../{ => Timeline}/DatetimeDot.js | 0 .../{TimelineEvents.js => Timeline/Events.js} | 0 .../Handles.js} | 0 .../{TimelineHeader.js => Timeline/Header.js} | 0 .../{TimelineLabels.js => Timeline/Labels.js} | 2 +- .../Markers.js} | 0 .../ZoomControls.js} | 0 34 files changed, 103 insertions(+), 150 deletions(-) create mode 100644 src/components/.DS_Store create mode 100644 src/components/presentational/.DS_Store rename src/components/presentational/{CardCaret.js => Card/Caret.js} (100%) rename src/components/presentational/{CardCategory.js => Card/Category.js} (84%) rename src/components/presentational/{CardLocation.js => Card/Location.js} (84%) rename src/components/presentational/{CardNarrative.js => Card/Narrative.js} (86%) rename src/components/presentational/{CardNarrativeLink.js => Card/NarrativeLink.js} (100%) rename src/components/presentational/{CardSource.js => Card/Source.js} (96%) rename src/components/presentational/{CardSummary.js => Card/Summary.js} (88%) rename src/components/presentational/{CardTags.js => Card/Tags.js} (94%) rename src/components/presentational/{CardTimestamp.js => Card/Timestamp.js} (87%) rename src/components/{MapDefsMarkers.jsx => presentational/Map/DefsMarkers.jsx} (100%) rename src/components/{MapEvents.jsx => presentational/Map/Events.jsx} (55%) rename src/components/{MapNarratives.jsx => presentational/Map/Narratives.jsx} (50%) rename src/components/{MapSelectedEvents.jsx => presentational/Map/SelectedEvents.jsx} (66%) rename src/components/{MapShapes.jsx => presentational/Map/Shapes.jsx} (74%) rename src/components/{MapSites.jsx => presentational/Map/Sites.jsx} (63%) rename src/components/presentational/{NarrativeAdjust.js => Narrative/Adjust.js} (100%) rename src/components/presentational/{NarrativeCard.js => Narrative/Card.js} (94%) rename src/components/presentational/{NarrativeClose.js => Narrative/Close.js} (100%) rename src/components/presentational/{NarrativeControls.js => Narrative/Controls.js} (71%) rename src/components/presentational/{TimelineClip.js => Timeline/Clip.js} (100%) rename src/components/presentational/{ => Timeline}/DatetimeDot.js (100%) rename src/components/presentational/{TimelineEvents.js => Timeline/Events.js} (100%) rename src/components/presentational/{TimelineHandles.js => Timeline/Handles.js} (100%) rename src/components/presentational/{TimelineHeader.js => Timeline/Header.js} (100%) rename src/components/presentational/{TimelineLabels.js => Timeline/Labels.js} (94%) rename src/components/presentational/{TimelineMarkers.js => Timeline/Markers.js} (100%) rename src/components/presentational/{TimelineZoomControls.js => Timeline/ZoomControls.js} (100%) diff --git a/.gitignore b/.gitignore index 4ce2e5c..3b88e33 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ build/ node_modules/ config.js dev.config.js + +src/\.DS_Store diff --git a/src/components/.DS_Store b/src/components/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 GIT binary patch literal 6148 zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0 ); @@ -153,9 +160,7 @@ class Map extends React.Component { ) } @@ -165,9 +170,7 @@ class Map extends React.Component { ); } diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index c950fb5..ac49152 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -5,14 +5,14 @@ import hash from 'object-hash'; import copy from '../js/data/copy.json'; import { formatterWithYear, parseDate } from '../js/utilities'; -import TimelineHeader from './presentational/TimelineHeader'; +import TimelineHeader from './presentational/Timeline/Header'; import TimelineAxis from './TimelineAxis.jsx'; -import TimelineClip from './presentational/TimelineClip'; -import TimelineHandles from './presentational/TimelineHandles.js'; -import TimelineZoomControls from './presentational/TimelineZoomControls.js'; -import TimelineLabels from './presentational/TimelineLabels.js'; -import TimelineMarkers from './presentational/TimelineMarkers.js' -import TimelineEvents from './presentational/TimelineEvents.js'; +import TimelineClip from './presentational/Timeline/Clip'; +import TimelineHandles from './presentational/Timeline/Handles.js'; +import TimelineZoomControls from './presentational/Timeline/ZoomControls.js'; +import TimelineLabels from './presentational/Timeline/Labels.js'; +import TimelineMarkers from './presentational/Timeline/Markers.js' +import TimelineEvents from './presentational/Timeline/Events.js'; import TimelineCategories from './TimelineCategories.jsx'; class Timeline extends React.Component { diff --git a/src/components/presentational/.DS_Store b/src/components/presentational/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..1e61c2573f391befc331f5146ef00e4f352b678a GIT binary patch literal 6148 zcmeHKu};G<5Ixfj0hUgP(ZA4*4XcC^mhu6hrfMq^8mblvvE&o@8h(J8ozLN&eYA<< ztO&uKboUb9o$vgl*f9~A@ire34T&g)GA2hb5n(@TM-F6!lMT;N%tw>ys;oMZI-m?F z1HX|0|KZaG-O-xz$oHFk`^r_8<=f4a=yP7Yyq#k)4PV~ts}`L-VL(@?S4FCcr&;U% zy)1hzY5{kZR_)`p+B%5SoEJ@DR&f@s2wa{BA3&+&~eF}^m g$Nqtj;!~&>_$)sFonRdhBM|)&@HD7V27Z)*FMIHPVE_OC literal 0 HcmV?d00001 diff --git a/src/components/presentational/CardCaret.js b/src/components/presentational/Card/Caret.js similarity index 100% rename from src/components/presentational/CardCaret.js rename to src/components/presentational/Card/Caret.js diff --git a/src/components/presentational/CardCategory.js b/src/components/presentational/Card/Category.js similarity index 84% rename from src/components/presentational/CardCategory.js rename to src/components/presentational/Card/Category.js index 20b396d..ab6eb4c 100644 --- a/src/components/presentational/CardCategory.js +++ b/src/components/presentational/Card/Category.js @@ -1,6 +1,6 @@ import React from 'react'; -import { capitalizeFirstLetter } from '../../js/utilities.js'; +import { capitalizeFirstLetter } from '../../../js/utilities.js'; const CardCategory = ({ categoryTitle, categoryLabel, color }) => (
diff --git a/src/components/presentational/CardLocation.js b/src/components/presentational/Card/Location.js similarity index 84% rename from src/components/presentational/CardLocation.js rename to src/components/presentational/Card/Location.js index e9598fa..5025c5b 100644 --- a/src/components/presentational/CardLocation.js +++ b/src/components/presentational/Card/Location.js @@ -1,7 +1,7 @@ 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 }) => { diff --git a/src/components/presentational/CardNarrative.js b/src/components/presentational/Card/Narrative.js similarity index 86% rename from src/components/presentational/CardNarrative.js rename to src/components/presentational/Card/Narrative.js index 49f590d..adc88f2 100644 --- a/src/components/presentational/CardNarrative.js +++ b/src/components/presentational/Card/Narrative.js @@ -1,6 +1,6 @@ import React from 'react'; -import CardNarrativeLink from './CardNarrativeLink'; +import CardNarrativeLink from './NarrativeLink'; const CardNarrative = (props) => (
diff --git a/src/components/presentational/CardNarrativeLink.js b/src/components/presentational/Card/NarrativeLink.js similarity index 100% rename from src/components/presentational/CardNarrativeLink.js rename to src/components/presentational/Card/NarrativeLink.js diff --git a/src/components/presentational/CardSource.js b/src/components/presentational/Card/Source.js similarity index 96% rename from src/components/presentational/CardSource.js rename to src/components/presentational/Card/Source.js index 9b3da5b..7447ca6 100644 --- a/src/components/presentational/CardSource.js +++ b/src/components/presentational/Card/Source.js @@ -1,9 +1,9 @@ import React from 'react' import PropTypes from 'prop-types' -import Spinner from './Spinner' import Img from 'react-image' -import copy from '../../js/data/copy.json' +import Spinner from '../Spinner' +import copy from '../../../js/data/copy.json' const CardSource = ({ source, isLoading, onClickHandler }) => { function renderIconText(type) { diff --git a/src/components/presentational/CardSummary.js b/src/components/presentational/Card/Summary.js similarity index 88% rename from src/components/presentational/CardSummary.js rename to src/components/presentational/Card/Summary.js index 3e0cdbf..ac5bbd2 100644 --- a/src/components/presentational/CardSummary.js +++ b/src/components/presentational/Card/Summary.js @@ -1,6 +1,6 @@ import React from 'react'; -import copy from '../../js/data/copy.json'; +import copy from '../../../js/data/copy.json'; const CardSummary = ({ language, description, isHighlighted }) => { diff --git a/src/components/presentational/CardTags.js b/src/components/presentational/Card/Tags.js similarity index 94% rename from src/components/presentational/CardTags.js rename to src/components/presentational/Card/Tags.js index 6841cd4..2bc4cc4 100644 --- a/src/components/presentational/CardTags.js +++ b/src/components/presentational/Card/Tags.js @@ -1,6 +1,6 @@ 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; diff --git a/src/components/presentational/CardTimestamp.js b/src/components/presentational/Card/Timestamp.js similarity index 87% rename from src/components/presentational/CardTimestamp.js rename to src/components/presentational/Card/Timestamp.js index 0317896..6ac69e6 100644 --- a/src/components/presentational/CardTimestamp.js +++ b/src/components/presentational/Card/Timestamp.js @@ -1,7 +1,7 @@ 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 }) => { diff --git a/src/components/MapDefsMarkers.jsx b/src/components/presentational/Map/DefsMarkers.jsx similarity index 100% rename from src/components/MapDefsMarkers.jsx rename to src/components/presentational/Map/DefsMarkers.jsx diff --git a/src/components/MapEvents.jsx b/src/components/presentational/Map/Events.jsx similarity index 55% rename from src/components/MapEvents.jsx rename to src/components/presentational/Map/Events.jsx index 68c4fe4..39a7901 100644 --- a/src/components/MapEvents.jsx +++ b/src/components/presentational/Map/Events.jsx @@ -1,19 +1,10 @@ import React from 'react'; import { Portal } from 'react-portal'; -class MapEvents extends React.Component { - - projectPoint(location) { - const latLng = new L.LatLng(location[0], location[1]); - return { - x: this.props.map.latLngToLayerPoint(latLng).x + this.props.mapTransformX, - y: this.props.map.latLngToLayerPoint(latLng).y + this.props.mapTransformY - }; - } - - getLocationEventsDistribution(location) { +function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, narrative, onSelect, svg, locations }){ + function getLocationEventsDistribution(location) { const eventCount = {}; - const categories = this.props.categories; + const categories = categories; categories.forEach(cat => { eventCount[cat.category] = []; @@ -26,7 +17,7 @@ class MapEvents extends React.Component { return eventCount; } - renderLocation(location) { + function renderLocation(location) { /** { events: [...], @@ -35,23 +26,23 @@ class MapEvents extends React.Component { longitude: '32.2' } */ - const { x, y } = this.projectPoint([location.latitude, location.longitude]); - // const eventsByCategory = this.getLocationEventsDistribution(location); + const { x, y } = projectPoint([location.latitude, location.longitude]); + // const eventsByCategory = getLocationEventsDistribution(location); const locCategory = location.events.length > 0 ? location.events[0].category : 'default' - const customStyles = this.props.styleLocation ? this.props.styleLocation(location) : null + const customStyles = styleLocation ? styleLocation(location) : null const extraStyles = customStyles[0] const extraRender = customStyles[1] const styles = ({ - fill: this.props.getCategoryColor(locCategory), + fill: getCategoryColor(locCategory), fillOpacity: 1, ...customStyles[0] }) // in narrative mode, only render events in narrative - if (this.props.narrative) { - const { steps } = this.props.narrative + if (narrative) { + const { steps } = narrative const onlyIfInNarrative = e => steps.map(s => s.id).includes(e.id) const eventsInNarrative = location.events.filter(onlyIfInNarrative) @@ -64,7 +55,7 @@ class MapEvents extends React.Component { this.props.onSelect(location.events)} + onClick={() => onSelect(location.events)} > - {this.props.locations.map(loc => this.renderLocation(loc))} - - ); - } + return ( + + {locations.map(renderLocation)} + + ); } export default MapEvents; diff --git a/src/components/MapNarratives.jsx b/src/components/presentational/Map/Narratives.jsx similarity index 50% rename from src/components/MapNarratives.jsx rename to src/components/presentational/Map/Narratives.jsx index 6851fdd..e2ffbea 100644 --- a/src/components/MapNarratives.jsx +++ b/src/components/presentational/Map/Narratives.jsx @@ -1,76 +1,67 @@ import React from 'react' import { Portal } from 'react-portal' -class MapNarratives extends React.Component { - - projectPoint(location) { - const latLng = new L.LatLng(location[0], location[1]) - return { - x: this.props.map.latLngToLayerPoint(latLng).x + this.props.mapTransformX, - y: this.props.map.latLngToLayerPoint(latLng).y + this.props.mapTransformY - } - } - - getNarrativeStyle(narrativeId) { - const styleName = (narrativeId && narrativeId in this.props.narrativeProps) +function MapNarratives ({ narrativeProps, onSelectNarrative, svg, narrative, narratives, projectPoint }) { + function getNarrativeStyle(narrativeId) { + const styleName = (narrativeId && narrativeId in narrativeProps) ? narrativeId : 'default' - return this.props.narrativeProps[styleName] + return narrativeProps[styleName] } - getStepStyle(name) { + function getStepStyle(name) { if (name === 'None') return null - return this.props.narrativeProps.stepStyles[name] + return narrativeProps.stepStyles[name] } - hasNoLocation(step) { + function hasNoLocation(step) { return (step.latitude === '' || step.longitude === '') } - 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 (this.hasNoLocation(step) || this.hasNoLocation(step2)) + 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 === this.props.narrative.id)) ? 1 : 0.1, + : (step && (n.id === narrative.id)) ? 1 : 0.1, strokeWidth: 0, strokeDasharray: 'none', stroke: 'none' } - const p1 = this.projectPoint([step.latitude, step.longitude]) - const p2 = this.projectPoint([step2.latitude, step2.longitude]) + const p1 = projectPoint([step.latitude, step.longitude]) + const p2 = projectPoint([step2.latitude, step2.longitude]) if (step) { if (process.env.features.NARRATIVE_STEP_STYLES) { const _idx = step.narratives.indexOf(n.id) const stepStyle = step.narrative___stepStyles[_idx] - return this._renderNarrativeStep( + return _renderNarrativeStep( p1, p2, - { ...styles, ...this.getStepStyle(stepStyle) } + { ...styles, ...getStepStyle(stepStyle) } ) // otherwise steps are styled per narrative } else { styles = { ...styles, - ...this.getNarrativeStyle(n.id) + ...getNarrativeStyle(n.id) } - return this._renderNarrativeStep(p1,p2,styles) + return _renderNarrativeStep(p1,p2,styles) } } } - _renderNarrativeStep(p1, p2, styles) { + function _renderNarrativeStep(p1, p2, styles) { const { stroke, strokeWidth, strokeDasharray, strokeOpacity } = styles return ( this.props.onSelectNarrative(n)} + onClick={() => onSelectNarrative(n)} style={{ strokeWidth, strokeDasharray, @@ -93,26 +84,23 @@ class MapNarratives extends React.Component { } - renderNarrative(n) { + function renderNarrative(n) { const steps = n.steps.slice(0, n.steps.length - 1) - console.log(n) return ( - {steps.map((s, idx) => this.renderNarrativeStep(idx, n))} + {steps.map((s, idx) => renderNarrativeStep(idx, n))} ) } - render() { - if (this.props.narrative === null) return (
) + if (narrative === null) return (
) - return ( - - {this.props.narratives.map(n => this.renderNarrative(n))} - - ) - } + return ( + + {narratives.map(n => renderNarrative(n))} + + ) } export default MapNarratives diff --git a/src/components/MapSelectedEvents.jsx b/src/components/presentational/Map/SelectedEvents.jsx similarity index 66% rename from src/components/MapSelectedEvents.jsx rename to src/components/presentational/Map/SelectedEvents.jsx index 8c48bc8..88c3036 100644 --- a/src/components/MapSelectedEvents.jsx +++ b/src/components/presentational/Map/SelectedEvents.jsx @@ -2,17 +2,8 @@ import React from 'react'; import { Portal } from 'react-portal'; class MapSelectedEvents extends React.Component { - - projectPoint(location) { - const latLng = new L.LatLng(location[0], location[1]); - return { - x: this.props.map.latLngToLayerPoint(latLng).x + this.props.mapTransformX, - y: this.props.map.latLngToLayerPoint(latLng).y + this.props.mapTransformY - }; - } - renderMarker (event) { - const { x, y } = this.projectPoint([event.latitude, event.longitude]); + const { x, y } = this.props.projectPoint([event.latitude, event.longitude]); return ( { if (!narrative) return null @@ -12,18 +12,18 @@ export default ({ narrative, methods }) => { return ( - - + - - methods.onSelectNarrative(null)} closeMsg='-- exit from narrative --' /> diff --git a/src/components/presentational/TimelineClip.js b/src/components/presentational/Timeline/Clip.js similarity index 100% rename from src/components/presentational/TimelineClip.js rename to src/components/presentational/Timeline/Clip.js diff --git a/src/components/presentational/DatetimeDot.js b/src/components/presentational/Timeline/DatetimeDot.js similarity index 100% rename from src/components/presentational/DatetimeDot.js rename to src/components/presentational/Timeline/DatetimeDot.js diff --git a/src/components/presentational/TimelineEvents.js b/src/components/presentational/Timeline/Events.js similarity index 100% rename from src/components/presentational/TimelineEvents.js rename to src/components/presentational/Timeline/Events.js diff --git a/src/components/presentational/TimelineHandles.js b/src/components/presentational/Timeline/Handles.js similarity index 100% rename from src/components/presentational/TimelineHandles.js rename to src/components/presentational/Timeline/Handles.js diff --git a/src/components/presentational/TimelineHeader.js b/src/components/presentational/Timeline/Header.js similarity index 100% rename from src/components/presentational/TimelineHeader.js rename to src/components/presentational/Timeline/Header.js diff --git a/src/components/presentational/TimelineLabels.js b/src/components/presentational/Timeline/Labels.js similarity index 94% rename from src/components/presentational/TimelineLabels.js rename to src/components/presentational/Timeline/Labels.js index 36466ba..9a75743 100644 --- a/src/components/presentational/TimelineLabels.js +++ b/src/components/presentational/Timeline/Labels.js @@ -1,6 +1,6 @@ import React from 'react'; -import { formatterWithYear } from '../../js/utilities.js'; +import { formatterWithYear } from '../../../js/utilities.js'; const TimelineLabels = ({ dims, timelabels }) => { diff --git a/src/components/presentational/TimelineMarkers.js b/src/components/presentational/Timeline/Markers.js similarity index 100% rename from src/components/presentational/TimelineMarkers.js rename to src/components/presentational/Timeline/Markers.js diff --git a/src/components/presentational/TimelineZoomControls.js b/src/components/presentational/Timeline/ZoomControls.js similarity index 100% rename from src/components/presentational/TimelineZoomControls.js rename to src/components/presentational/Timeline/ZoomControls.js