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

fix: DraggableListItem with memo

Browse Source
This commit is contained in:
Nastya 2023-09-28 15:33:02 +03:00
parent 6c46a4b32e
commit f65bdf340a
12 changed files with 13 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/Questions/ButtonsOptions.tsx
View File

@ -51,7 +51,6 @@ export default function ButtonsOptions({
const openedModal = () => {
resetSomeField({ openedModalSettings: "open" });
console.log(openedModalSettings);
};
const theme = useTheme();

16
src/pages/Questions/DraggableList/DraggableListItem.tsx
View File

@ -1,3 +1,4 @@
import { memo } from "react";
import { useParams } from "react-router-dom";
import { Draggable } from "react-beautiful-dnd";
import { Box, ListItem, Typography, useTheme } from "@mui/material";
@ -6,18 +7,23 @@ import QuestionsPageCard from "./QuestionPageCard";
import { questionStore, updateQuestionsList } from "@root/questions";
import {Question} from "@root/questions"
type DraggableListItemProps = {
index: number;
isDragging: boolean;
questionData: Question;
};
export const DraggableListItem = ({
export default memo(({
index,
isDragging,
questionData
}: DraggableListItemProps) => {
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const theme = useTheme();
console.log("Мой индекс "+index)
console.log(questionData)
return (
<Draggable draggableId={String(index)} index={index}>
@ -27,7 +33,7 @@ export const DraggableListItem = ({
{...provided.draggableProps}
sx={{ userSelect: "none", padding: 0 }}
>
{listQuestions[quizId][index].deleted ? (
{questionData.deleted ? (
<Box
{...provided.dragHandleProps}
sx={{
@ -50,7 +56,7 @@ export const DraggableListItem = ({
<Typography
onClick={() => {
updateQuestionsList(quizId, index, {
...listQuestions[quizId][index],
...questionData,
deleted: false,
});
}}
@ -79,4 +85,4 @@ export const DraggableListItem = ({
)}
</Draggable>
);
};
});

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

@ -2,7 +2,7 @@ import { useParams } from "react-router-dom";
import { Box } from "@mui/material";
import { DragDropContext, Droppable } from "react-beautiful-dnd";
import { DraggableListItem } from "./DraggableListItem";
import DraggableListItem from "./DraggableListItem";
import { questionStore, updateQuestionsListDragAndDrop } from "@root/questions";
@ -36,6 +36,7 @@ export const DraggableList = () => {
key={index}
index={index}
isDragging={snapshot.isDraggingOver}
questionData={_}
/>
))}
{provided.placeholder}

1
src/pages/Questions/OptionsPicture/OptionsPicture.tsx
View File

@ -53,7 +53,6 @@ export default function OptionsPicture({ totalIndex }: Props) {
}
};
console.log();
return (
<>

1
src/pages/Questions/QuestionsPage.tsx
View File

@ -77,7 +77,6 @@ export default function QuestionsPage() {
<IconButton
onClick={() => {
createQuestion(quizId);
console.log(listQuestions);
}}
>
<AddPlus />

1
src/pages/Questions/TypeQuestions.tsx
View File

@ -101,7 +101,6 @@ export default function TypeQuestions({ totalIndex }: Props) {
<QuestionsMiniButton
key={title}
onClick={() => {
console.log(value);
updateQuestionsList(quizId, totalIndex, { type: value });
}}
icon={icon}

2
src/pages/startPage/StartPageSettings.tsx
View File

@ -68,7 +68,6 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
const theme = useTheme();
const designType = listQuizes[params].startpage;
const StartPageClone = listQuizes[params];
console.log(StartPageClone);
const [backgroundType, setBackgroundType] = useState(
listQuizes[params].config.startpage.background.type
);
@ -616,7 +615,6 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
label="Кликабельный"
checked={listQuizes[params].config.info.clickable}
handleChange={(e) => {
console.log(e.target.checked);
let SPageClone = listQuizes[params].config;
SPageClone.info.clickable = e.target.checked;
updateQuizesList(params, { config: SPageClone });

5
src/pages/startPage/dropZone.tsx
View File

@ -28,22 +28,18 @@ export default ({ text, sx, heightImg, widthImg }: Props) => {
const [ready, setReady] = useState(false);
const dragenterHC = () => {
// console.log("onDragEnter")
setReady(true);
};
const dragexitHC = () => {
// console.log("onDragExit")
setReady(false);
};
const dropHC = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
// console.log("onDrop")
setReady(false);
const file = event.dataTransfer.files[0];
console.log(event.dataTransfer.files[0]);
if (file.size < 5242880) {
setData(URL.createObjectURL(file));
} else {
@ -53,7 +49,6 @@ export default ({ text, sx, heightImg, widthImg }: Props) => {
const dragOverHC = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
// console.log("onDragOver")
};
return (

23
src/pages/startPage/dropfavicon.tsx
View File

@ -146,14 +146,11 @@ export default ({ text, sx, heightImg, widthImg }: Props) => {
const [favList, setFavList] = useState<string[]>([]);
useEffect(() => {
console.log(favList);
if (favList.length === 18) {
console.log("сейчас я сработаю");
const zip = new JSZip(); //создание зип архива
favList.forEach((uri, i) => {
console.log(i);
const idx = uri.indexOf("base64,") + "base64,".length; //обработка строки картинки
const content = uri.substring(idx); //обработка строки картинки
zip.file(`fav${i}.jpg`, content, { base64: true }); //сохранение картинки в архив с именем "fav.jpg"
@ -201,46 +198,26 @@ export default ({ text, sx, heightImg, widthImg }: Props) => {
const [ready, setReady] = useState(false);
const dragenterHC = () => {
// console.log("onDragEnter")
setReady(true);
};
const dragexitHC = () => {
// console.log("onDragExit")
setReady(false);
};
const dropHC = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
// console.log("onDrop")
setReady(false);
const file = event.dataTransfer.files[0];
console.log(event.dataTransfer.files[0]);
if (file.size < 5242880) {
setData(URL.createObjectURL(file));
} else {
enqueueSnackbar("Размер картинки слишком велик");
}
// try {
// Resizer.imageFileResizer(
// file,
// 50,
// 50,
// "JPEG",
// 100,
// 0,
// callback,
// );
//
// } catch (err) {
// console.log(err);
// }
//
};
const dragOverHC = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
// console.log("onDragOver")
};
return (

2
src/pages/startPage/stepOne.tsx
View File

@ -13,10 +13,8 @@ export default function StepOne({ handleNext }: HandleNext) {
const theme = useTheme();
const params = Number(useParams().quizId);
console.log(params)
const {listQuizes, updateQuizesList,} = quizStore()
console.log(listQuizes)
return (
<>
<Box

3
src/ui_kit/Modal/CropModal.tsx
View File

@ -155,9 +155,6 @@ export const CropModal: FC<Iprops> = ({ opened, onClose, picture }) => {
const aspect = imageWidth / imageHeight;
console.log(aspect);
console.log(width);
if (aspect <= 1.333) {
setWidth(240);

1
src/ui_kit/reactImageFileResizer.ts
View File

@ -51,7 +51,6 @@ class Resizer {
Yoffset = Math.round((size - height) / 2)
}
console.log(height, width)
ctx.drawImage(image, Xoffset, Yoffset, width, height);