allow custom styles in datetimes passed from Timeline

src/components/Map.jsx

@@ -165,9 +165,10 @@ class Map extends React.Component {
    * necessary. The function should return a regular style object.
    */
   styleLocation(location) {
-    return {
-      fill: 'orange'
-    }
+    return [
+      { fill: 'orange' },
+      () => <text>ciao</text>
+    ]
   }
 
   renderEvents() {

src/components/MapEvents.jsx

@@ -26,36 +26,6 @@ class MapEvents extends React.Component {
     return eventCount;
   }
 
-  renderCategory(events, category) {
-    let styles = ({
-      fill: this.props.getCategoryColor(category),
-      fillOpacity: 0.8
-    })
-
-    if (this.props.narrative) {
-      const { steps } = this.props.narrative
-      const onlyIfInNarrative = e => steps.map(s => s.id).includes(e.id)
-      const eventsInNarrative = events.filter(onlyIfInNarrative)
-
-      if (eventsInNarrative.length <= 0) {
-        styles = {
-          ...styles,
-          fillOpacity: 0.1
-        }
-      }
-    }
-
-    return (
-      <circle
-        className="location-event-marker"
-        r={7}
-        style={styles}
-        onClick={() => this.props.onSelect(events)}
-      >
-      </circle>
-    );
-  }
-
   renderLocation(location) {
     /**
     {
@@ -64,16 +34,19 @@ class MapEvents extends React.Component {
       latitude: '47.7',
       longitude: '32.2'
     }
-     */
+    */
     const { x, y } = this.projectPoint([location.latitude, location.longitude]);
-      // const eventsByCategory = this.getLocationEventsDistribution(location);
+    // const eventsByCategory = this.getLocationEventsDistribution(location);
 
     const locCategory = location.events.length > 0 ? location.events[0].category : 'default'
     const customStyles = this.props.styleLocation ? this.props.styleLocation(location) : null
+    const extraStyles = customStyles[0]
+    const extraRender = customStyles[1]
+
     const styles = ({
       fill: this.props.getCategoryColor(locCategory),
       fillOpacity: 1,
-      ...customStyles
+      ...customStyles[0]
     })
 
     // in narrative mode, only render events in narrative
@@ -99,6 +72,7 @@ class MapEvents extends React.Component {
           onClick={() => this.props.onSelect(events)}
         >
         </circle>
+        {extraRender ? extraRender() : null}
       </g>
     )
   }

src/components/Timeline.jsx

@@ -212,9 +212,10 @@ class Timeline extends React.Component {
   }
 
   styleDatetime(timestamp) {
-    return {
-      fill: 'orange'
-    }
+    return [
+      { fill: 'orange' },
+      () => <text>ciao</text>
+    ]
   }
 
   render() {

src/components/presentational/TimelineEvents.js

@@ -12,12 +12,14 @@ const TimelineEvents = ({
 }) => {
   function renderDatetime(datetime) {
     const customStyles = styleDatetime ? styleDatetime(datetime) : null
+    const extraStyles = customStyles[0]
+    const extraRender = customStyles[1]
+
     const styleProps = ({
       fill: getCategoryColor(datetime.events[0].category),
       fillOpacity: 1,
-      transform: `translate(${getDatetimeX(datetime)}px, ${getDatetimeY(datetime)}px)`,
       transition: `transform ${transitionDuration / 1000}s ease`,
-      ...customStyles
+      ...extraStyles
     });
 
     if (narrative) {
@@ -30,15 +32,21 @@ const TimelineEvents = ({
     }
 
     return (
-      <circle
-        className="event"
-        cx={0}
-        cy={0}
-        style={styleProps}
-        r={5}
-        onClick={() => onSelect(datetime.events)}
+      <g
+        className='datetime'
+        transform={`translate(${getDatetimeX(datetime)}, ${getDatetimeY(datetime)})`}
       >
-      </circle>
+        <circle
+          className="event"
+          cx={0}
+          cy={0}
+          style={styleProps}
+          r={5}
+          onClick={() => onSelect(datetime.events)}
+        >
+        </circle>
+        { extraRender ? extraRender() : null }
+      </g>
     )
   }