Add support for event handlers

Author: grubersjoe

.eslintrc

@@ -9,9 +9,10 @@
   "plugins": ["@typescript-eslint"],
   "ignorePatterns": ["*.css"],
   "rules": {
-    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/ban-types": ["error"],
+    "@typescript-eslint/ban-ts-comment": ["off"],
     "arrow-body-style": ["error", "as-needed"],
-    "react/prop-types": 0
+    "react/prop-types": ["off"]
   },
   "settings": {
     "react": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-activity-calendar",
-  "version": "1.3.6",
+  "version": "1.4.0",
   "description": " A React component to display activity data in calendar",
   "author": "Jonathan Gruber <gruberjonathan@gmail.com>",
   "license": "MIT",

src/component/ActivityCalendar.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { Story, Meta } from '@storybook/react';
 import ReactTooltip from 'react-tooltip';
 import eachDayOfInterval from 'date-fns/eachDayOfInterval';
@@ -9,6 +9,17 @@ import ActivityCalendar, { Props } from './ActivityCalendar';
 import { Day, Level, Theme } from '../types';
 import { DEFAULT_MONTH_LABELS, DEFAULT_WEEKDAY_LABELS } from '../util';
 
+const styles: {
+  [elem: string]: CSSProperties;
+} = {
+  code: {
+    fontSize: '0.9rem',
+  },
+  p: {
+    maxWidth: '68ch',
+  },
+};
+
 export default {
   title: 'Activity Calendar',
   component: ActivityCalendar,
@@ -63,8 +74,9 @@ const Template: Story<Props> = args => <ActivityCalendar {...args} />;
 const TemplateLocalized: Story<Props> = args => (
   <>
     <h1>Localization</h1>
+    <p>(Example in German)</p>
     <ActivityCalendar {...args} style={{ margin: '2rem 0' }} />
-    <pre>
+    <pre style={styles.code}>
       {`
 // Shape of \`labels\` property (default values).
 // All properties are optional.
@@ -104,6 +116,40 @@ const labels = {
   </>
 );
 
+const TemplateEventHandlers: Story<Props> = args => (
+  <>
+    <h1>Event Handlers</h1>
+    <p style={styles.p}>
+      You can register event handlers for the SVG <code style={styles.code}>&lt;rect/&gt;</code>{' '}
+      elements that are used to render the calendar days. This way you can control the behaviour on
+      click, hover, etc.
+    </p>
+    <p style={styles.p}>
+      All event listeners have the following signature, so you are able to use the shown data inside
+      the handler:
+    </p>
+    <p style={styles.p}>
+      <code style={styles.code}>(event: React.SyntheticEvent) =&gt; (data: Day) =&gt; void</code>
+    </p>
+    <p style={styles.p}>Click on any block below to see it in action:</p>
+    <ActivityCalendar {...args} style={{ margin: '2rem 0' }} />
+    <pre style={styles.code}>
+      {`
+<ActivityCalendar 
+  data={data}  
+  eventHandlers: {
+    onClick: event => data => {
+      console.log({ event, data });
+      alert(JSON.stringify(data, null, 4));
+    },
+    onMouseEnter: event => data => console.log('mouseEnter'),
+  }
+/>
+`}
+    </pre>
+  </>
+);
+
 const theme: Theme = {
   level0: '#F0F0F0',
   level1: '#C4EDDE',
@@ -211,6 +257,18 @@ WithLocalizedLabels.args = {
   },
 };
 
+const eventHandlerData = generateData();
+export const EventHandlers = TemplateEventHandlers.bind({});
+EventHandlers.args = {
+  data: eventHandlerData,
+  eventHandlers: {
+    onClick: event => data => {
+      console.log({ event, data });
+      alert(JSON.stringify(data, null, 4));
+    },
+  },
+};
+
 function generateData(monthStart = 0, monthEnd = 11): Array<Day> {
   const MAX = 10;
   const LEVELS = 5;

src/component/ActivityCalendar.tsx

@@ -8,7 +8,7 @@ import type { Day as WeekDay } from 'date-fns';
 
 import styles from './styles.css';
 
-import { Day, Labels, Theme } from '../types';
+import { Day, EventHandlerMap, Labels, ReactEvent, SVGRectEventHandler, Theme } from '../types';
 import {
   generateEmptyData,
   getClassName,
@@ -65,6 +65,10 @@ export interface Props {
    * A date-fns/format compatible date string used in tooltips.
    */
   dateFormat?: string;
+  /**
+   * Event handlers to register for the SVG `<rect>` elements that are used to render the calendar days. Handler signature: `event => data => void`
+   */
+  eventHandlers?: EventHandlerMap;
   /**
    * Font size for text in pixels.
    */
@@ -115,6 +119,7 @@ const ActivityCalendar: FunctionComponent<Props> = ({
   children,
   color = undefined,
   dateFormat = 'MMM do, yyyy',
+  eventHandlers = {},
   fontSize = 14,
   hideColorLegend = false,
   hideMonthLabels = false,
@@ -154,6 +159,18 @@ const ActivityCalendar: FunctionComponent<Props> = ({
     return `<strong>${contribution.count} contributions</strong> on ${date}`;
   }
 
+  function getEventHandlers(data: Day): SVGRectEventHandler {
+    return (
+      Object.keys(eventHandlers) as Array<keyof SVGRectEventHandler>
+    ).reduce<SVGRectEventHandler>(
+      (handlers, key) => ({
+        ...handlers,
+        [key]: (event: ReactEvent<SVGRectElement>) => eventHandlers[key]?.(event)(data),
+      }),
+      {},
+    );
+  }
+
   function renderLabels() {
     const style = {
       fontSize,
@@ -224,6 +241,7 @@ const ActivityCalendar: FunctionComponent<Props> = ({
 
           return (
             <rect
+              {...getEventHandlers(day)}
               x={0}
               y={textHeight + (blockSize + blockMargin) * dayIndex}
               width={blockSize}
@@ -297,7 +315,7 @@ const ActivityCalendar: FunctionComponent<Props> = ({
   const additionalStyles = {
     width,
     maxWidth: '100%',
-    // Required to have correct colors in CSS loading animation
+    // Required for correct colors in CSS loading animation
     [`--${NAMESPACE}-loading`]: theme.level0,
     [`--${NAMESPACE}-loading-active`]: tinycolor(theme.level0).darken(8).toString(),
   };

src/types.ts

@@ -1,3 +1,5 @@
+import React, { DOMAttributes } from 'react';
+
 export type Level = 0 | 1 | 2 | 3 | 4;
 
 export interface Day {
@@ -26,3 +28,29 @@ export interface Theme {
   readonly level1: string;
   readonly level0: string;
 }
+
+export type SVGRectEventHandler = Omit<
+  DOMAttributes<SVGRectElement>,
+  'css' | 'children' | 'dangerouslySetInnerHTML'
+>;
+
+export type EventHandlerMap = {
+  [key in keyof SVGRectEventHandler]: (
+    ...event: Parameters<NonNullable<SVGRectEventHandler[keyof SVGRectEventHandler]>>
+  ) => (data: Day) => void;
+};
+
+export type ReactEvent<E extends Element> = React.AnimationEvent<E> &
+  React.ClipboardEvent<E> &
+  React.CompositionEvent<E> &
+  React.DragEvent<E> &
+  React.FocusEvent<E> &
+  React.FormEvent<E> &
+  React.KeyboardEvent<E> &
+  React.MouseEvent<E> &
+  React.PointerEvent<E> &
+  React.SyntheticEvent<E> &
+  React.TouchEvent<E> &
+  React.TransitionEvent<E> &
+  React.UIEvent<E> &
+  React.WheelEvent<E>;