feat(calendar): add onDayClick property to Calendar components

plouc · May 13, 2016 · ca94708 · ca94708
1 parent 644cc8e
commit ca94708
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 2 deletions.
diff --git a/src/components/charts/calendar/Calendar.js b/src/components/charts/calendar/Calendar.js
@@ -25,6 +25,7 @@ class Calendar extends Component {
         const {
             from, to,
             data,
+            onDayClick,
             direction,
             colorScale,
             emptyColor,
@@ -53,6 +54,7 @@ class Calendar extends Component {
         if (motion === true) {
             calendar = (
                 <MotionCalendar
+                    onDayClick={onDayClick}
                     direction={direction}
                     years={years} months={months} days={days}
                     yearLegendOffset={yearLegendOffset}
@@ -64,6 +66,7 @@ class Calendar extends Component {
         } else {
             calendar = (
                 <StaticCalendar
+                    onDayClick={onDayClick}
                     direction={direction}
                     years={years} months={months} days={days}
                     yearLegendOffset={yearLegendOffset}

diff --git a/src/components/charts/calendar/CalendarD3.js b/src/components/charts/calendar/CalendarD3.js
@@ -27,6 +27,7 @@ class CalendarD3 extends Component {
         const {
             from, to,
             data,
+            onDayClick,
             direction,
             colorScale, emptyColor,
             yearSpacing, yearLegendOffset,
@@ -83,6 +84,7 @@ class CalendarD3 extends Component {
                 stroke:         dayBorderColor,
                 'stroke-width': dayBorderWidth,
             })
+            .on('click', d => onDayClick(d))
         ;
 
         dayNodes

diff --git a/src/components/charts/calendar/CalendarDay.js b/src/components/charts/calendar/CalendarDay.js
@@ -12,11 +12,23 @@ import React, { Component, PropTypes } from 'react';
 
 
 class CalendarDay extends Component {
+    constructor(props) {
+        super(props);
+
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick() {
+        const { onClick, data } = this.props;
+        onClick(data);
+    }
+
     render() {
         const { x, y, size, color, borderWidth, borderColor } = this.props;
 
         return (
             <rect
+                onClick={this.handleClick}
                 className="nivo_calendar_day"
                 x={x} y={y}
                 width={size} height={size}
@@ -30,9 +42,11 @@ class CalendarDay extends Component {
     }
 }
 
-const { number, string } = PropTypes;
+const { number, string, object, func } = PropTypes;
 
 CalendarDay.propTypes = {
+    onClick:     func.isRequired,
+    data:        object.isRequired,
     x:           number.isRequired,
     y:           number.isRequired,
     size:        number.isRequired,

diff --git a/src/components/charts/calendar/CalendarProps.js b/src/components/charts/calendar/CalendarProps.js
@@ -17,7 +17,7 @@ import {
 } from '../../../constants/directions';
 
 
-const { number, string, bool, shape, oneOf, oneOfType, instanceOf, arrayOf } = PropTypes;
+const { number, string, bool, func, shape, oneOf, oneOfType, instanceOf, arrayOf } = PropTypes;
 
 
 /**
@@ -35,6 +35,7 @@ export const calendarPropTypes = {
         day:   string.isRequired,
         value: number.isRequired,
     })).isRequired,
+    onDayClick:           func.isRequired,
     direction:            oneOf([DIRECTION_HORIZONTAL, DIRECTION_VERTICAL]),
     colorScale:           scale.isRequired,
     emptyColor:           string.isRequired,
@@ -67,6 +68,7 @@ export const calendarPropTypes = {
 export const calendarDefaultProps = {
     margin:               Nivo.defaults.margin,
     direction:            DIRECTION_HORIZONTAL,
+    onDayClick:           () => {},
     emptyColor:           '#fff',
     // years
     yearSpacing:          30,

diff --git a/src/components/charts/calendar/MotionCalendar.js b/src/components/charts/calendar/MotionCalendar.js
@@ -85,6 +85,7 @@ const dayStyles = ({ days, stiffness, damping }) => {
 class MotionCalendar extends Component {
     render() {
         const {
+            onDayClick,
             years, months, days,
             direction,
             yearLegendOffset,
@@ -108,6 +109,8 @@ class MotionCalendar extends Component {
                             {interpolatedStyles.map(d => (
                                 <CalendarDay
                                     key={d.key}
+                                    onClick={onDayClick}
+                                    data={d.data}
                                     x={d.style.x} y={d.style.y}
                                     size={d.style.size}
                                     color={d.data.color}

diff --git a/src/components/charts/calendar/StaticCalendar.js b/src/components/charts/calendar/StaticCalendar.js
@@ -18,6 +18,7 @@ import CalendarMonthPath        from './CalendarMonthPath';
 class StaticCalendar extends Component {
     render() {
         const {
+            onDayClick,
             years, months, days,
             direction,
             yearLegendOffset,
@@ -32,6 +33,8 @@ class StaticCalendar extends Component {
                 {days.map(d => (
                     <CalendarDay
                         key={d.date.toString()}
+                        onClick={onDayClick}
+                        data={d}
                         x={d.x} y={d.y}
                         size={d.size}
                         color={d.color}