feat: block actions of router while checkbox enabled (#148)

* feat: block actions of router while checkbox enabled * fix: open folder by clicking with alt/option key * fix: ts ignore comment issues
alist-org · Feb 23, 2024 · 77a3d9d · 77a3d9d
1 parent 1fcd962
commit 77a3d9d
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 7 deletions.
diff --git a/src/pages/home/folder/GridItem.tsx b/src/pages/home/folder/GridItem.tsx
@@ -3,7 +3,7 @@ import { Motion } from "@motionone/solid"
 import { useContextMenu } from "solid-contextmenu"
 import { batch, createMemo, createSignal, Show } from "solid-js"
 import { CenterLoading, LinkWithPush, ImageWithError } from "~/components"
-import { usePath, useUtil } from "~/hooks"
+import { usePath, useRouter, useUtil } from "~/hooks"
 import {
   checkboxOpen,
   getMainColor,
@@ -33,6 +33,7 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
     () => checkboxOpen() && (hover() || props.obj.selected),
   )
   const { show } = useContextMenu({ id: 1 })
+  const { pushHref, to } = useRouter()
   return (
     <Motion.div
       initial={{ opacity: 0, scale: 0.9 }}
@@ -55,6 +56,17 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
         }}
         as={LinkWithPush}
         href={props.obj.name}
+        // @ts-ignore
+        on:click={(e: PointerEvent) => {
+          if (!checkboxOpen()) return
+          e.preventDefault()
+          if (e.altKey) {
+            // click with alt/option key
+            to(pushHref(props.obj.name))
+            return
+          }
+          selectIndex(props.index, !props.obj.selected)
+        }}
         onMouseEnter={() => {
           setHover(true)
           setPathAs(props.obj.name, props.obj.is_dir, true)
@@ -79,6 +91,7 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
           w="$full"
           // @ts-ignore
           on:click={(e) => {
+            if (checkboxOpen()) return
             if (props.obj.type === ObjType.IMAGE) {
               e.stopPropagation()
               e.preventDefault()
@@ -93,7 +106,7 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
               left="$1"
               top="$1"
               // colorScheme="neutral"
-              // @ts-ignore
+              // @ts-expect-error
               on:click={(e) => {
                 e.stopPropagation()
               }}

diff --git a/src/pages/home/folder/ImageItem.tsx b/src/pages/home/folder/ImageItem.tsx
@@ -2,7 +2,7 @@ import { Center, VStack, Icon, Checkbox } from "@hope-ui/solid"
 import { Motion } from "@motionone/solid"
 import { useContextMenu } from "solid-contextmenu"
 import { batch, createMemo, createSignal, Show } from "solid-js"
-import { CenterLoading, LinkWithPush, ImageWithError } from "~/components"
+import { CenterLoading, ImageWithError } from "~/components"
 import { useLink, usePath, useUtil } from "~/hooks"
 import { checkboxOpen, getMainColor, selectAll, selectIndex } from "~/store"
 import { ObjType, StoreObj } from "~/types"
@@ -81,8 +81,14 @@ export const ImageItem = (props: { obj: StoreObj; index: number }) => {
             fallbackErr={objIcon}
             src={rawLink(props.obj)}
             loading="lazy"
-            onClick={() => {
-              bus.emit("gallery", props.obj.name)
+            cursor="pointer"
+            // @ts-expect-error
+            on:click={(e: PointerEvent) => {
+              if (!checkboxOpen() || e.altKey) {
+                bus.emit("gallery", props.obj.name)
+                return
+              }
+              selectIndex(props.index, !props.obj.selected)
             }}
           />
         </Center>

diff --git a/src/pages/home/folder/ListItem.tsx b/src/pages/home/folder/ListItem.tsx
@@ -3,7 +3,7 @@ import { Motion } from "@motionone/solid"
 import { useContextMenu } from "solid-contextmenu"
 import { batch, Show } from "solid-js"
 import { LinkWithPush } from "~/components"
-import { usePath, useUtil } from "~/hooks"
+import { usePath, useRouter, useUtil } from "~/hooks"
 import {
   checkboxOpen,
   getMainColor,
@@ -35,6 +35,7 @@ export const ListItem = (props: { obj: StoreObj; index: number }) => {
   }
   const { setPathAs } = usePath()
   const { show } = useContextMenu({ id: 1 })
+  const { pushHref, to } = useRouter()
   const filenameScrollable = () => local["filename_scrollable"] === "true"
   return (
     <Motion.div
@@ -57,6 +58,17 @@ export const ListItem = (props: { obj: StoreObj; index: number }) => {
         }}
         as={LinkWithPush}
         href={props.obj.name}
+        // @ts-expect-error
+        on:click={(e: PointerEvent) => {
+          if (!checkboxOpen()) return
+          e.preventDefault()
+          if (e.altKey) {
+            // click with alt/option key
+            to(pushHref(props.obj.name))
+            return
+          }
+          selectIndex(props.index, !props.obj.selected)
+        }}
         onMouseEnter={() => {
           setPathAs(props.obj.name, props.obj.is_dir, true)
         }}
@@ -91,7 +103,7 @@ export const ListItem = (props: { obj: StoreObj; index: number }) => {
             color={getMainColor()}
             as={getIconByObj(props.obj)}
             mr="$1"
-            // @ts-ignore
+            // @ts-expect-error
             on:click={(e) => {
               if (props.obj.type === ObjType.IMAGE) {
                 e.stopPropagation()