[add] deselect all button on CharacterSelectionDialog

spd789562 · Nov 12, 2024 · e97bff0 · e97bff0
1 parent 562ce4a
commit e97bff0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/src/components/dialog/CharacterSelectionDialog/CharacterSelectionDialog.tsx b/src/components/dialog/CharacterSelectionDialog/CharacterSelectionDialog.tsx
@@ -13,9 +13,9 @@ export const CharacterSelectionDialog = (
   return (
     <Dialog.Root {...props}>
       <Portal>
-        <Dialog.Backdrop zIndex="settingOverlay" />
-        <Dialog.Positioner zIndex="settingModal">
-          <Dialog.Content minWidth="2xl">
+        <Dialog.Backdrop zIndex="topDrawer" />
+        <Dialog.Positioner zIndex="topDrawer">
+          <Dialog.Content minWidth="2xl" height="75%">
             {props.children}
             <Dialog.CloseTrigger
               asChild={(closeTriggerProps) => (

diff --git a/src/components/dialog/CharacterSelectionDialog/index.tsx b/src/components/dialog/CharacterSelectionDialog/index.tsx
@@ -1,12 +1,14 @@
-import { createSignal, splitProps, createEffect, on } from 'solid-js';
+import { createSignal, splitProps } from 'solid-js';
 import type { ReadableAtom } from 'nanostores';
 
 import { Grid } from 'styled-system/jsx/grid';
+import { HStack } from 'styled-system/jsx';
 import {
   Title,
   type RootProps as DialogRootProps,
   type OpenChangeDetails,
 } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
 
 import { CharacterSelectionDialog as Dialog } from './CharacterSelectionDialog';
 import { CharacterGrid } from './CharacterGrid';
@@ -46,6 +48,10 @@ export const CharacterSelectionDialog = (
     setSelectIds([...currentIds]);
   }
 
+  function handleClear() {
+    setSelectIds([]);
+  }
+
   function handleExit() {
     props.onExit?.(selectedIds());
   }
@@ -58,8 +64,7 @@ export const CharacterSelectionDialog = (
     >
       <Grid
         position="relative"
-        overflow="auto"
-        gridTemplateRows="auto 1fr"
+        gridTemplateRows="auto 1fr auto"
         height="[100%]"
         padding="4"
       >
@@ -69,6 +74,11 @@ export const CharacterSelectionDialog = (
           selectedIds={selectedIds()}
           onSelect={handleSelect}
         />
+        <HStack justify="flex-end" py="1">
+          <Button variant="outline" onClick={handleClear}>
+            清除選取
+          </Button>
+        </HStack>
       </Grid>
     </Dialog>
   );