double click to check uncheck mod

package-lock.json

@@ -1861,6 +1861,15 @@
         "@types/jest": "*"
       }
     },
+    "@types/use-double-click": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/use-double-click/-/use-double-click-1.0.1.tgz",
+      "integrity": "sha512-mkoH+XW24GIPZO/0FO7ms6SiLxwvPPl8KxYxemoigSkPS9cQxI6CH6lw5gwQ5bLeProgzMGlULUANOnUCJ8GJg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/uuid": {
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
@@ -12554,6 +12563,11 @@
         "prepend-http": "^2.0.0"
       }
     },
+    "use-double-click": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/use-double-click/-/use-double-click-1.0.5.tgz",
+      "integrity": "sha512-71LUca6NtzpzHYlcfM/dOdmwvmvpMbzeIVQpN87w+DctpLiMCXtZpsN8FNWPgHpPBtNhvucPUHIDh5al8D8C7w=="
+    },
     "utf8-byte-length": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz",

package.json

@@ -157,6 +157,7 @@
     "@types/react-outside-click-handler": "^1.3.1",
     "@types/react-test-renderer": "^17.0.2",
     "@types/terser-webpack-plugin": "^5.0.4",
+    "@types/use-double-click": "^1.0.1",
     "@types/uuid": "^8.3.4",
     "@types/webpack-bundle-analyzer": "^4.4.2",
     "@types/webpack-env": "^1.18.0",
@@ -245,6 +246,7 @@
     "rxjs": "^7.5.6",
     "semver": "^7.3.8",
     "tailwind-scrollbar-hide": "^1.1.7",
+    "use-double-click": "^1.0.5",
     "uuid": "^9.0.0"
   },
   "devEngines": {

src/renderer/components/shared/bsm-checkbox.component.tsx

@@ -15,10 +15,10 @@ export function BsmCheckbox({className, checked, onChange, disabled} : Props) {
     }
 
     return (
-        <div className={`group ${className}`} onClickCapture={e => {e.stopPropagation(); handleClick()}}>
+        <div className={`group ${className}`}>
             {!disabled && <span className="glow-on-hover !w-[calc(100%+6px)] !h-[calc(100%+6px)] !-top-[3px] !-left-[3px] group-hover:opacity-100"/>}
             
-            <span className={`w-full h-full flex items-center justify-center rounded-md border-2 border-current overflow-hidden bg-light-main-color-3 dark:bg-main-color-1 ${disabled ? "brightness-50 cursor-not-allowed" : "cursor-pointer"}`}>
+            <span className={`w-full h-full flex items-center justify-center rounded-md border-2 border-current overflow-hidden bg-light-main-color-3 dark:bg-main-color-1 ${disabled ? "brightness-50 cursor-not-allowed" : "cursor-pointer"}`} onClickCapture={e => {e.stopPropagation(); handleClick()}}>
                 <BsmIcon className="w-full h-full" icon="check" style={{color: iconColor, backgroundColor: checkedColor, visibility: checked ? "visible" : "hidden"}}/>
             </span>
         </div>

src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx

@@ -1,21 +1,30 @@
 import { BsmButton } from "renderer/components/shared/bsm-button.component";
 import { BsmCheckbox } from "renderer/components/shared/bsm-checkbox.component";
 import { Mod } from "shared/models/mods/mod.interface";
-import { CSSProperties } from "react"
+import { CSSProperties, useRef, useState } from "react"
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 import { BsModsManagerService } from "renderer/services/bs-mods-manager.service";
 import { useObservable } from "renderer/hooks/use-observable.hook";
 import { PageStateService } from "renderer/services/page-state.service";
+import useDoubleClick from 'use-double-click';
 
-type Props = {mod: Mod, installedVersion: string, isDependency?: boolean, isSelected?: boolean, onChange?: (val: boolean) => void, wantInfo?: boolean}
+type Props = {mod: Mod, installedVersion: string, isDependency?: boolean, isSelected?: boolean, onChange?: (val: boolean) => void, wantInfo?: boolean, onWantInfo?: (mod: Mod) => void}
 
-export function ModItem({mod, installedVersion, isDependency, isSelected, onChange, wantInfo}: Props) {
+export function ModItem({mod, installedVersion, isDependency, isSelected, onChange, wantInfo, onWantInfo}: Props) {
 
     const modsManager = BsModsManagerService.getInstance();
     const pageState = PageStateService.getInstance();
 
     const themeColor = useThemeColor("second-color");
     const uninstalling = useObservable(modsManager.isUninstalling$);
+    const clickRef = useRef();
+
+    useDoubleClick({
+        onSingleClick: e => handleWantInfo(e),
+        onDoubleClick: e => handleOnChange(e),
+        ref: clickRef,
+        latency: 200
+    })
 
     const wantInfoStyle: CSSProperties = wantInfo ? {borderColor: themeColor}  : {borderColor: "transparent"};
     const isOutDated =  installedVersion < mod.version;
@@ -24,10 +33,15 @@ export function ModItem({mod, installedVersion, isDependency, isSelected, onChan
         modsManager.uninstallMod(mod, pageState.getState());
     }
 
+    const handleWantInfo = (e: React.MouseEvent<Element, MouseEvent>) => { e.preventDefault(); onWantInfo(mod); }
+    const handleOnChange = (e: React.MouseEvent<Element, MouseEvent>) => { e.preventDefault(); onChange(!isChecked); }
+
+    const isChecked = isDependency || isSelected ||  mod.required;
+
     return (
-        <div className="contents bg-light-main-color-3 dark:bg-main-color-1 text-main-color-1 dark:text-light-main-color-1">
+        <div ref={clickRef} className="contents bg-light-main-color-3 dark:bg-main-color-1 text-main-color-1 dark:text-light-main-color-1">
             <div className="h-full aspect-square flex items-center justify-center p-[7px] rounded-l-md bg-inherit ml-3 border-2 border-r-0" style={wantInfoStyle}>
-                <BsmCheckbox className="h-full aspect-square z-[1] relative bg-inherit" onChange={onChange} disabled={mod.required || isDependency} checked={isDependency || isSelected ||  mod.required}/>
+                <BsmCheckbox className="h-full aspect-square z-[1] relative bg-inherit" onChange={onChange} disabled={mod.required || isDependency} checked={isChecked}/>
             </div>
             <span className="bg-inherit py-2 pl-3 font-bold text-sm whitespace-nowrap border-t-2 border-b-2 blur-none" style={wantInfoStyle}>{mod.name}</span>
             <span className={`min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 ${(installedVersion && isOutDated) && "text-red-400 line-through"} ${installedVersion && !isOutDated && "text-green-400"}`} style={wantInfoStyle}>{installedVersion || "-"}</span>

src/renderer/components/version-viewer/slides/mods/mods-grid.component.tsx

@@ -73,8 +73,8 @@ export function ModsGrid({modsMap, installed, modsSelected, onModChange, moreInf
                     <ul key={key} className="contents">
                         <h2 className="col-span-full py-1 font-bold pl-3">{key}</h2>
                         {modsMap.get(key).map(mod => mod.name.toLowerCase().includes(filter) && (
-                            <li className="contents cursor-pointer" onClick={() => onWantInfos(mod)} key={mod.name}>
-                                <ModItem mod={mod} installedVersion={installedModVersion(key, mod)} isDependency={isDependency(mod)} isSelected={isSelected(mod)} onChange={(val) => onModChange(val, mod)} wantInfo={mod.name === moreInfoMod?.name}/>
+                            <li className="contents cursor-pointer" key={mod.name}>
+                                <ModItem mod={mod} installedVersion={installedModVersion(key, mod)} isDependency={isDependency(mod)} isSelected={isSelected(mod)} onChange={(val) => onModChange(val, mod)} onWantInfo={onWantInfos} wantInfo={mod.name === moreInfoMod?.name}/>
                             </li>
                         ))}
                     </ul>