fix keys and ripple lib

jekrch · Jul 2, 2024 · d8acf3e · d8acf3e
1 parent f271eba
commit d8acf3e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 6 deletions.
diff --git a/src/components/modals/config/AnalyzeTab.tsx b/src/components/modals/config/AnalyzeTab.tsx
@@ -193,7 +193,7 @@ const AnalyzeTab: React.FC = () => {
                       </a>
                       <IconButton
                         className="ml-2 bg-blue-500 hover:bg-blue-700 text-white font-normal pl-[0.7em] rounded-md text-xs py-[0.5em] pr-[1em]"
-                        onClick={() => addRankingAsCategory(comparison.list2Code, rankingTitle, true)}
+                        onClick={() => addRankingAsCategory(comparison.list2Code, rankingTitle)}
                         icon={undefined}
                         title="Add as Category"
                       />
@@ -227,7 +227,7 @@ const AnalyzeTab: React.FC = () => {
                       </a>
                       <IconButton
                         className="ml-2 bg-blue-500 hover:bg-blue-700 text-white font-normal pl-[0.7em] rounded-md text-xs py-[0.5em] pr-[1em]"
-                        onClick={() => addRankingAsCategory(comparison.list2Code, rankingTitle, true)}
+                        onClick={() => addRankingAsCategory(comparison.list2Code, rankingTitle)}
                         icon={undefined}
                         title="Add as Category"
                       />

diff --git a/src/components/ranking/RankedItemsHeader.tsx b/src/components/ranking/RankedItemsHeader.tsx
@@ -103,9 +103,10 @@ const RankedItemsHeader: React.FC<IRankedItemsHeaderProps> = ({
                     />
                 </div>
             )}
+
             {(!showUnranked && categories.length > 0) && (
-                <div className="flex bg-gray-800 bg-opacity-40 border-gray-200 mt-1 -mb-[0.2em] overflow-x-auto">
-                <Ripples placeholder={<></>} onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined}>
+                <div key={`total-tab-container`} className="flex bg-gray-800 bg-opacity-40 border-gray-200 mt-1 -mb-[0.2em] overflow-x-auto">
+                <Ripples key="total-ripple" placeholder={<></>}>
                   <button
                     key="total-tab"
                     className={classNames(
@@ -118,9 +119,9 @@ const RankedItemsHeader: React.FC<IRankedItemsHeaderProps> = ({
                   </button>
                 </Ripples>
                 {categories.map((category, index) => (
-                  <Ripples placeholder={<></>} onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined}>
+                  <Ripples key={`ripple-${index + 1}`} placeholder={<></>}>
                     <button
-                        key={index + 1}
+                      key={`cat-btn-${index + 1}`}
                       className={classNames(
                         "px-4 py-[0.2em] text-sm font-medium flex-shrink-0",
                         activeTab === index + 1 ? "text-blue-400 border-b-0 border-blue-400" : "text-gray-500 hover:text-blue-500"

diff --git a/src/modules/react-ripples.d.ts b/src/modules/react-ripples.d.ts
@@ -0,0 +1,13 @@
+// src/global.d.ts
+import 'react'
+
+declare module 'react' {
+  interface HTMLAttributes<T> {
+    onPointerEnterCapture?: (e: React.PointerEvent<T>) => void
+    onPointerLeaveCapture?: (e: React.PointerEvent<T>) => void
+  }
+  interface RefAttributes<T> {
+    onPointerEnterCapture?: (e: React.PointerEvent<T>) => void
+    onPointerLeaveCapture?: (e: React.PointerEvent<T>) => void
+  }
+}