on commit click for routing

Author: liuliu-dev

CHANGELOG.md

@@ -192,3 +192,7 @@ If you are upgrading from a version prior to 2.0.0, please note the changes to p
 ## [2.3.9]
 
 -- Diff section UI fixes.
+
+## [2.3.11]
+
+-- Add optional `onCommitClick` in `commit` object, to handle routing in commit item.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "commit-graph",
-  "version": "2.3.9",
+  "version": "2.3.11",
   "homepage": "https://liuliu-dev.github.io/CommitGraph/",
   "author": "Liu Liu <[email protected]>",
   "description": "A React component to visualize a commit graph.",
@@ -97,4 +97,4 @@
     "cross-spawn": "^7.0.5",
     "wrap-ansi/string-width": "^4.2.0"
   }
-}
+}

rollup.config.js

@@ -12,22 +12,19 @@ export default [
   {
     input: "src/index.ts",
     output: [
-      {
-        file: packageJson.main,
-        format: "cjs",
-        sourcemap: false,
-      },
-      {
-        file: packageJson.module,
-        format: "esm",
-        sourcemap: false,
-      },
+      { file: packageJson.main, format: "cjs", sourcemap: false },
+      { file: packageJson.module, format: "esm", sourcemap: false },
     ],
     plugins: [
       peerDepsExternal(),
       resolve(),
       commonjs(),
-      typescript({ tsconfig: "./tsconfig.json" }),
+      typescript({
+        tsconfig: "./tsconfig.json",
+        noEmit: false,
+        declaration: false,
+        exclude: ["**/__tests__", "**/*.test.ts"],
+      }),
       terser(),
       postcss(),
     ],

src/components/CommitDetails/index.module.css

@@ -54,3 +54,7 @@
   color: #3d91f0;
   cursor: pointer;
 }
+
+.clickable{
+  cursor: pointer;
+}

src/components/CommitDetails/index.tsx

@@ -68,10 +68,22 @@ export default function CommitDetails({
       >
         <div style={{ color: commit.commitColor }} className={css.labelAndLink}>
           <div>
-            {commit.commitLink ? (
+            {commit.onCommitClick ? (
+              <span
+                style={{ color: color }}
+                className={`${css.bold} ${css.clickable}`}
+                onClick={() => {
+                  commit.onCommitClick!();
+                }}
+                onMouseOver={() => setColor("#1f6dc6")}
+                onMouseLeave={() => setColor(commit.commitColor)}
+              >
+                {commitHashAuthorDate}
+              </span>
+            ) : commit.commitLink ? (
               <a
                 style={{ color: color }}
-                href={commit.commitLink}
+                href={commit.commitLink as string}
                 className={css.bold}
                 onMouseOver={() => setColor("#1f6dc6")}
                 onMouseLeave={() => setColor(commit.commitColor)}
@@ -81,6 +93,7 @@ export default function CommitDetails({
             ) : (
               <span className={css.bold}>{commitHashAuthorDate}</span>
             )}
+
             {showDiffButton && !!getDiff && !!commit.parents.length && (
               <button
                 type="button"

src/helpers/utils.ts

@@ -38,6 +38,7 @@ export function formatCommits(commits: Commit[]): CommitNode[] {
       message: commit.commit.message,
       commitDate: new Date(commit.commit.author.date),
       commitLink: commit.html_url,
+      onCommitClick: commit.onCommitClick,
       commitColor: "",
       x: -1,
       y: -1,
@@ -115,5 +116,6 @@ export function fromCommitNodeToCommit(commit: CommitNode): Commit {
     },
     parents: commit.parents.map(p => ({ sha: p })),
     html_url: commit.commitLink,
+    onCommitClick: commit.onCommitClick,
   };
 }

src/types.ts

@@ -1,19 +1,14 @@
-type ParentCommit = {
-  sha: string;
-};
+type ParentCommit = { sha: string };
 
 export type Commit = {
   sha: string;
   commit: {
-    author: {
-      name: string;
-      date: string | number | Date;
-      email?: string;
-    };
+    author: { name: string; date: string | number | Date; email?: string };
     message: string;
   };
   parents: ParentCommit[];
   html_url?: string;
+  onCommitClick?: () => void;
 };
 
 export type CommitNode = {
@@ -29,6 +24,7 @@ export type CommitNode = {
   y: number;
   commitColor: string;
   commitLink?: string;
+  onCommitClick?: () => void;
 };
 
 export type BranchPathType = {
@@ -40,13 +36,7 @@ export type BranchPathType = {
   branchOrder: number;
 };
 
-export type Branch = {
-  name: string;
-  commit: {
-    sha: string;
-  };
-  link?: string;
-};
+export type Branch = { name: string; commit: { sha: string }; link?: string };
 
 export type GraphStyle = {
   commitSpacing: number;
@@ -64,7 +54,4 @@ export type ChangedItem = {
   blob_url?: string;
 };
 
-export type Diff = {
-  files?: ChangedItem[];
-  tables?: ChangedItem[];
-};
+export type Diff = { files?: ChangedItem[]; tables?: ChangedItem[] };

tsconfig.json

@@ -3,24 +3,24 @@
     "rootDir": "src",
     "baseUrl": ".",
     "declaration": true,
-    "declarationDir": "types",
     "outDir": "dist",
     "target": "ES2015",
     "lib": ["DOM", "ESNext"],
     "module": "ESNext",
     "moduleResolution": "node",
     "jsx": "react",
-    "emitDeclarationOnly": true,
+    "emitDeclarationOnly": false,
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "strict": true,
     "noImplicitAny": true, 
-    "types": ["node"]
+    "types": ["node"],
+    "noEmit": false
   },
   "exclude": [
     "node_modules",
-    "../dist",
+    "dist",
     "src/**/**/*.test.ts",
     "src/stories",
     "src/**/sampleCommits.ts"