-
Notifications
You must be signed in to change notification settings - Fork 0
/
Meal_old.tsx
120 lines (105 loc) · 4.7 KB
/
Meal_old.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
// TODO: remove this file
// "use client";
// import { MealData } from "@/model/mealModel";
// import MealItem from "../MealItem";
// import { MealItemData } from "@/model/mealItemModel";
// import { DragDropContext, Draggable, DropResult, Droppable } from "@hello-pangea/dnd";
// import { useState } from "react";
// export type MealProps = {
// mealData: MealData,
// onNewItem: () => void,
// onEditItem: (item: MealItemData) => void,
// onUpdateMeal: (meal: MealData) => void,
// className?: string,
// };
// // a little function to help us with reordering the result
// const reorder = (list: unknown[], startIndex: number, endIndex: number) => {
// const result = Array.from(list);
// const [removed] = result.splice(startIndex, 1);
// result.splice(endIndex, 0, removed);
// return result;
// };
// export default function Meal({ mealData, onNewItem, onEditItem, onUpdateMeal, className }: MealProps) {
// const onDragEnd = (result: DropResult) => {
// // dropped outside the list
// if (!result.destination) {
// return;
// }
// const items = reorder(
// mealData.items,
// result.source.index,
// result.destination.index,
// ) as MealItemData[];
// const newMealData = {
// ...mealData,
// items,
// };
// onUpdateMeal(newMealData);
// }
// const onClearItems = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
// e.preventDefault();
// // Confirm
// if (!confirm('Tem certeza que deseja limpar os itens?')) {
// return;
// }
// const newMealData = {
// ...mealData,
// items: [],
// };
// onUpdateMeal(newMealData);
// }
// return (
// <DragDropContext
// onDragEnd={onDragEnd} autoScrollerOptions={{
// startFromPercentage: 0.1,
// maxScrollAtPercentage: 0.01,
// }}>
// <Droppable droppableId={mealData.id}>
// {(droppableProvided, droppableSnapshot) => (
// <div
// ref={droppableProvided.innerRef}
// >
// <div className={`bg-gray-800 p-3 ${className || ''}`}>
// <div className="flex">
// <h5 className="text-3xl my-2">{mealData.name}</h5>
// <button
// className="btn bg-red-800 px-5 ml-auto text-white"
// onClick={onClearItems}
// >
// Limpar itens
// </button>
// </div>
// {
// mealData.items.map((item, index) =>
// <div key={item.id} className="mt-2">
// <Draggable draggableId={item.id} index={index} shouldRespectForcePress={true}>
// {(draggableProvided, draggableSnapshot) => (
// <div
// ref={draggableProvided.innerRef}
// {...draggableProvided.draggableProps}
// {...draggableProvided.dragHandleProps}
// >
// <MealItem
// mealItem={item}
// onClick={onEditItem}
// favorite='hide'
// />
// </div>)}
// </Draggable>
// </div>
// )
// }
// {droppableProvided.placeholder}
// <button
// className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 min-w-full rounded mt-3"
// onClick={onNewItem}
// >
// Adicionar item
// </button>
// </div>
// </div>
// )}
// </Droppable>
// </DragDropContext>
// )
// }