SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix: drag&drop bug

Browse Source
This commit is contained in:
IlyaDoronin 2023-08-29 15:39:51 +03:00
parent 99bce26b52
commit 6f2d5437ca
5 changed files with 25 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/index.tsx
View File

@ -42,25 +42,23 @@ const routeslink: {
const root = createRoot(document.getElementById("root")!);
root.render(
<React.StrictMode>
<DndProvider backend={HTML5Backend}>
<ThemeProvider theme={lightTheme}>
<BrowserRouter>
<Routes>
{routeslink.map((e, i) => (
<Route
key={i}
path={e.path}
element={
<Main page={e.page} header={e.header} sidebar={e.sidebar} />
}
/>
))}
<Route path="quize-setting/:quizId" element={<StartPage />} />
<Route path="crop" element={<ImageCrop />} />
</Routes>
</BrowserRouter>
</ThemeProvider>
</DndProvider>
</React.StrictMode>
<DndProvider backend={HTML5Backend}>
<ThemeProvider theme={lightTheme}>
<BrowserRouter>
<Routes>
{routeslink.map((e, i) => (
<Route
key={i}
path={e.path}
element={
<Main page={e.page} header={e.header} sidebar={e.sidebar} />
}
/>
))}
<Route path="quize-setting/:quizId" element={<StartPage />} />
<Route path="crop" element={<ImageCrop />} />
</Routes>
</BrowserRouter>
</ThemeProvider>
</DndProvider>
);

23
src/pages/Questions/DraggableList/StrictModeDroppable.tsx
View File

@ -1,23 +0,0 @@
import { useState, useEffect } from "react";
import { Droppable } from "react-beautiful-dnd";
import type { DroppableProps } from "react-beautiful-dnd";
export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
const [enabled, setEnabled] = useState(false);
useEffect(() => {
const animation = requestAnimationFrame(() => setEnabled(true));
return () => {
setEnabled(false);
cancelAnimationFrame(animation);
};
}, []);
if (!enabled) {
return null;
}
return <Droppable {...props}>{children}</Droppable>;
};

7
src/pages/Questions/DraggableList/index.tsx
View File

@ -1,8 +1,7 @@
import { useState } from "react";
import { Box } from "@mui/material";
import { DragDropContext } from "react-beautiful-dnd";
import { DragDropContext, Droppable } from "react-beautiful-dnd";
import { StrictModeDroppable } from "./StrictModeDroppable";
import { DraggableListItem } from "./DraggableListItem";
import { questionStore, updateQuestionsListDragAndDrop } from "@root/questions";
@ -37,7 +36,7 @@ export const DraggableList = () => {
}}
onDragEnd={onDragEnd}
>
<StrictModeDroppable droppableId="droppable-list">
<Droppable droppableId="droppable-list">
{(provided) => (
<Box
ref={provided.innerRef}
@ -58,7 +57,7 @@ export const DraggableList = () => {
{provided.placeholder}
</Box>
)}
</StrictModeDroppable>
</Droppable>
</DragDropContext>
);
};

23
src/pages/Questions/answerOptions/AnswerDraggableList/StrictModeDroppable.tsx
View File

@ -1,23 +0,0 @@
import { useState, useEffect } from "react";
import { Droppable } from "react-beautiful-dnd";
import type { DroppableProps } from "react-beautiful-dnd";
export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
const [enabled, setEnabled] = useState(false);
useEffect(() => {
const animation = requestAnimationFrame(() => setEnabled(true));
return () => {
setEnabled(false);
cancelAnimationFrame(animation);
};
}, []);
if (!enabled) {
return null;
}
return <Droppable {...props}>{children}</Droppable>;
};

7
src/pages/Questions/answerOptions/AnswerDraggableList/index.tsx
View File

@ -1,7 +1,6 @@
import { Box } from "@mui/material";
import { DragDropContext } from "react-beautiful-dnd";
import { DragDropContext, Droppable } from "react-beautiful-dnd";
import { StrictModeDroppable } from "./StrictModeDroppable";
import { AnswerItem } from "./AnswerItem";
import { updateVariants } from "@root/questions";
@ -30,7 +29,7 @@ export const AnswerDraggableList = ({
return (
<DragDropContext onDragEnd={onDragEnd}>
<StrictModeDroppable droppableId="droppable-answer-list">
<Droppable droppableId="droppable-answer-list">
{(provided) => (
<Box ref={provided.innerRef} {...provided.droppableProps}>
{variants.map((variant, index) => (
@ -45,7 +44,7 @@ export const AnswerDraggableList = ({
{provided.placeholder}
</Box>
)}
</StrictModeDroppable>
</Droppable>
</DragDropContext>
);
};