Merge pull request #33 from SkyLightQP/develop

fix: fix button issue and add blur option
SkyLightQP · Dec 3, 2024 · 04bdb03 · 04bdb03
2 parents 81abcb7 + 552cdec
commit 04bdb03
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/src/components/Dialogs/ImageDetailModal.tsx b/src/components/Dialogs/ImageDetailModal.tsx
@@ -36,7 +36,14 @@ const ImageDetailModal: React.FC<ImageDetailModalProps> = ({ modalController, im
       <ModalOverlay />
       <StyledModalContent>
         <ModalBody>
-          <StyledImage src={image.url} alt={image.alt} width={1024} height={768} />
+          <StyledImage
+            src={image.url}
+            alt={image.alt}
+            width={1024}
+            height={768}
+            placeholder="blur"
+            blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP0rAcAARcAyjleRTkAAAAASUVORK5CYII="
+          />
           <ImageLabel>{image.alt}</ImageLabel>
         </ModalBody>
       </StyledModalContent>

diff --git a/src/components/Dialogs/LinkModal.tsx b/src/components/Dialogs/LinkModal.tsx
@@ -19,9 +19,9 @@ import {
 import { SubmitHandler, useFieldArray, useForm } from 'react-hook-form';
 import styled from '@emotion/styled';
 import { RiArrowRightLine, RiDeleteBin2Line, RiMenuLine } from '@remixicon/react';
-import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable';
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { DndContext, DragEndEvent } from '@dnd-kit/core';
+import { DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import Colors from '../../styles/Colors';
 import { SchemaType } from '../../types/type-util';
 import { Space } from '../Space';
@@ -98,6 +98,16 @@ const LinkModal: React.FC<LinkModalProps> = ({ modalController, dataId }) => {
     isClosable: true,
     position: 'top-left'
   });
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5
+      }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
 
   const fetchData = useCallback(
     async (id: number) => {
@@ -197,7 +207,7 @@ const LinkModal: React.FC<LinkModalProps> = ({ modalController, dataId }) => {
           <Space y={10} />
           <Divider />
           <Space y={10} />
-          <DndContext onDragEnd={onChangeData}>
+          <DndContext onDragEnd={onChangeData} sensors={sensors}>
             <SortableContext items={data.map((i) => i.id.toString())}>
               <LinkList>
                 {fields.map((field, index) => (