Add commit onMessageCommit handler

Author: nicoespeon

packages/gitgraph-core/src/commit.ts

@@ -13,6 +13,7 @@ export interface CommitOptions {
   parents?: string[];
   innerText?: string;
   onClick?: (commit: Commit) => void;
+  onMessageClick?: (commit: Commit) => void;
   onMouseOver?: (commit: Commit) => void;
   onMouseOut?: (commit: Commit) => void;
 }
@@ -141,6 +142,10 @@ export class Commit {
    * Callback to execute on click.
    */
   public onClick: () => void;
+  /**
+   * Callback to execute on click on the commit message.
+   */
+  public onMessageClick: () => void;
   /**
    * Callback to execute on mouse over.
    */
@@ -186,6 +191,8 @@ export class Commit {
 
     // Set callbacks
     this.onClick = () => (options.onClick ? options.onClick(this) : undefined);
+    this.onMessageClick = () =>
+      options.onMessageClick ? options.onMessageClick(this) : undefined;
     this.onMouseOver = () =>
       options.onMouseOver ? options.onMouseOver(this) : undefined;
     this.onMouseOut = () =>

packages/gitgraph-core/src/gitgraph.ts

@@ -61,6 +61,7 @@ export interface GitgraphCommitOptions {
   innerText?: string;
   tag?: string;
   onClick?: (commit: Commit) => void;
+  onMessageClick?: (commit: Commit) => void;
   onMouseOver?: (commit: Commit) => void;
   onMouseOut?: (commit: Commit) => void;
 }

packages/gitgraph-react/src/Gitgraph.tsx

@@ -125,6 +125,7 @@ export class Gitgraph extends React.Component<GitgraphProps, GitgraphState> {
             alignmentBaseline="central"
             fill={commit.style.message.color}
             style={{ font: commit.style.message.font }}
+            onClick={commit.onMessageClick}
           >
             {this.getMessage(commit)}
           </text>

packages/gitgraph-react/src/stories/events.stories.tsx

@@ -5,7 +5,7 @@ import { Gitgraph } from "gitgraph-react/src/Gitgraph";
 import { Commit } from "gitgraph-core";
 
 storiesOf("Gitgraph events", module)
-  .add("on commit click", () => (
+  .add("on commit dot click", () => (
     <Gitgraph>
       {(gitgraph) => {
         function onClick(commit: Commit) {
@@ -26,6 +26,27 @@ storiesOf("Gitgraph events", module)
       }}
     </Gitgraph>
   ))
+  .add("on commit message click", () => (
+    <Gitgraph>
+      {(gitgraph) => {
+        function onMessageClick(commit: Commit) {
+          alert(`Commit ${commit.hashAbbrev} clicked: "${commit.subject}"`);
+        }
+
+        const master = gitgraph.branch("master");
+        master.commit({
+          subject: "Hello",
+          body: "First commit",
+          onMessageClick,
+        });
+        master.commit({
+          subject: "World",
+          body: "Second commit",
+          onMessageClick,
+        });
+      }}
+    </Gitgraph>
+  ))
   .add("on commit mouseover", () => (
     <Gitgraph>
       {(gitgraph) => {