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

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 { useState } from "react";
import { Box } from "@mui/material"; 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 { DraggableListItem } from "./DraggableListItem";
import { questionStore, updateQuestionsListDragAndDrop } from "@root/questions"; import { questionStore, updateQuestionsListDragAndDrop } from "@root/questions";
@ -37,7 +36,7 @@ export const DraggableList = () => {
}} }}
onDragEnd={onDragEnd} onDragEnd={onDragEnd}
> >
<StrictModeDroppable droppableId="droppable-list"> <Droppable droppableId="droppable-list">
{(provided) => ( {(provided) => (
<Box <Box
ref={provided.innerRef} ref={provided.innerRef}
@ -58,7 +57,7 @@ export const DraggableList = () => {
{provided.placeholder} {provided.placeholder}
</Box> </Box>
)} )}
</StrictModeDroppable> </Droppable>
</DragDropContext> </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 { 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 { AnswerItem } from "./AnswerItem";
import { updateVariants } from "@root/questions"; import { updateVariants } from "@root/questions";
@ -30,7 +29,7 @@ export const AnswerDraggableList = ({
return ( return (
<DragDropContext onDragEnd={onDragEnd}> <DragDropContext onDragEnd={onDragEnd}>
<StrictModeDroppable droppableId="droppable-answer-list"> <Droppable droppableId="droppable-answer-list">
{(provided) => ( {(provided) => (
<Box ref={provided.innerRef} {...provided.droppableProps}> <Box ref={provided.innerRef} {...provided.droppableProps}>
{variants.map((variant, index) => ( {variants.map((variant, index) => (
@ -45,7 +44,7 @@ export const AnswerDraggableList = ({
{provided.placeholder} {provided.placeholder}
</Box> </Box>
)} )}
</StrictModeDroppable> </Droppable>
</DragDropContext> </DragDropContext>
); );
}; };