You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
224 lines
8.6 KiB
224 lines
8.6 KiB
3 years ago
|
import React, { useState } from "react";
|
||
|
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
|
||
|
import "./App.css";
|
||
|
|
||
|
import CircleInCircle from "../MiniComponents/CircleInCircle";
|
||
|
import Button from "../ButtonDesign/Button";
|
||
|
|
||
|
function Testt({ items, vod }) {
|
||
|
// const [characters, updateCharacters] = useState(finalSpaceCharacters);
|
||
|
const [characters, updateCharacters] = useState(items);
|
||
|
const [activeAccordion, setActiveAccordion] = useState(null);
|
||
|
|
||
|
function handleOnDragEnd(result) {
|
||
|
if (!result.destination) return;
|
||
|
|
||
|
const items = Array.from(characters);
|
||
|
const [reorderedItem] = items.splice(result.source.index, 1);
|
||
|
items.splice(result.destination.index, 0, reorderedItem);
|
||
|
|
||
|
updateCharacters(items);
|
||
|
}
|
||
|
|
||
|
return (
|
||
|
<div className="App">
|
||
|
<header className="App-header">
|
||
|
<h1>Final Space Characters</h1>
|
||
|
<DragDropContext onDragEnd={handleOnDragEnd}>
|
||
|
<Droppable droppableId="characters">
|
||
|
{(provided) => (
|
||
|
<section
|
||
|
className="w-full flex flex-col bg-gray-200"
|
||
|
{...provided.droppableProps}
|
||
|
ref={provided.innerRef}
|
||
|
>
|
||
|
{items.map((item, index) => (
|
||
|
<Draggable index={index}>
|
||
|
{(provided) => (
|
||
|
<div
|
||
|
className="flex flex-col"
|
||
|
ref={provided.innerRef}
|
||
|
{...provided.draggableProps}
|
||
|
{...provided.dragHandleProps}
|
||
|
>
|
||
|
{/* parent */}
|
||
|
<div
|
||
|
className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
|
||
|
activeAccordion === item
|
||
|
? "border-surfaceBorder "
|
||
|
: "border-secondary"
|
||
|
} cursor-pointer`}
|
||
|
onClick={() =>
|
||
|
setActiveAccordion(
|
||
|
activeAccordion === item ? null : item
|
||
|
)
|
||
|
}
|
||
|
>
|
||
|
<CircleInCircle
|
||
|
parentClassName={"bg-secondary w-0 h- "}
|
||
|
childClassName={false}
|
||
|
/>
|
||
|
<h2 className="flex-1 mr-5 text-sm">{item.title}</h2>
|
||
|
{vod && (
|
||
|
<div className="flex flex-row items-center ml-5 ">
|
||
|
<p className="text-xs">
|
||
|
دقیقه:
|
||
|
<span>{item.min}</span>
|
||
|
</p>
|
||
|
<div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
|
||
|
<p className="text-xs">
|
||
|
ویدیو:
|
||
|
<span>{item.video}</span>
|
||
|
</p>
|
||
|
</div>
|
||
|
)}
|
||
|
<img
|
||
|
src={
|
||
|
activeAccordion === item
|
||
|
? `images/accordion-.svg`
|
||
|
: `images/accordion+.svg`
|
||
|
}
|
||
|
alt=""
|
||
|
className="w-3 ml-2"
|
||
|
/>
|
||
|
</div>
|
||
|
{/* child */}
|
||
|
{activeAccordion === item &&
|
||
|
item.subItems.map((subItem, i) => (
|
||
|
<div
|
||
|
key={i}
|
||
|
className="flex flex-row items-center justify-between p-3 border-b-2 border-surfaceBorder cursor-pointer transition-all duration-500 ease-in-out"
|
||
|
>
|
||
|
<div className="flex flex-row items-center">
|
||
|
{vod === !true && (
|
||
|
<img
|
||
|
src="images/accordionGroup2725.svg"
|
||
|
className="w-3"
|
||
|
alt="line"
|
||
|
/>
|
||
|
)}
|
||
|
<span
|
||
|
className={`text-sm ${
|
||
|
vod === true ? "mr-0" : "mr-3"
|
||
|
}`}
|
||
|
>
|
||
|
{i + 1}
|
||
|
</span>
|
||
|
</div>
|
||
|
<div className="w-0.5 h-5 mx-3 bg-surfaceBorder"></div>
|
||
|
<p className="text-sm flex-1">{subItem.name}</p>
|
||
|
<div className="flex flex-row items-center justify-end gap-x-3 flex-1">
|
||
|
{vod ? (
|
||
|
<>
|
||
|
<div className="flex flex-row items-center ml-7">
|
||
|
<p className="text-xs">
|
||
|
دقیقه:
|
||
|
<span>{item.min}</span>
|
||
|
</p>
|
||
|
<Button
|
||
|
className="px-2 py-1 text-primary text-sm border border-surfaceBorder rounded mr-4"
|
||
|
text={"پخش"}
|
||
|
/>
|
||
|
</div>
|
||
|
</>
|
||
|
) : (
|
||
|
<>
|
||
|
<img
|
||
|
src="images/accordionGroup2724.svg"
|
||
|
className="w-8 rounded"
|
||
|
alt="delete-button"
|
||
|
/>
|
||
|
<img
|
||
|
src="images/accordionGroup2723.svg"
|
||
|
className="w-8 rounded"
|
||
|
alt="edit-button"
|
||
|
/>
|
||
|
</>
|
||
|
)}
|
||
|
</div>
|
||
|
</div>
|
||
|
))}
|
||
|
{provided.placeholder}
|
||
|
</div>
|
||
|
)}
|
||
|
</Draggable>
|
||
|
))}
|
||
|
</section>
|
||
|
)}
|
||
|
</Droppable>
|
||
|
</DragDropContext>
|
||
|
</header>
|
||
|
<p>
|
||
|
Images from{" "}
|
||
|
<a href="https://final-space.fandom.com/wiki/Final_Space_Wiki">
|
||
|
Final Space Wiki
|
||
|
</a>
|
||
|
</p>
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
export default Testt;
|
||
|
|
||
|
Testt.defaultProps = {
|
||
|
vod: false,
|
||
|
|
||
|
items: [
|
||
|
{
|
||
|
id: "gary",
|
||
|
title:
|
||
|
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
|
||
|
video: 4,
|
||
|
min: 30,
|
||
|
subItems: [
|
||
|
{
|
||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
|
||
|
},
|
||
|
{
|
||
|
name: "شرکت های بزرگ خیلی خوب هستند",
|
||
|
},
|
||
|
{
|
||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
{
|
||
|
id: "kevin",
|
||
|
title:
|
||
|
"بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
|
||
|
video: 4,
|
||
|
min: 30,
|
||
|
|
||
|
subItems: [
|
||
|
{
|
||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
|
||
|
},
|
||
|
{
|
||
|
name: "شرکت های بزرگ خیلی خوب هستند",
|
||
|
},
|
||
|
{
|
||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
{
|
||
|
id: "rafiqaneh",
|
||
|
title:
|
||
|
"بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
|
||
|
video: 4,
|
||
|
min: 30,
|
||
|
subItems: [
|
||
|
{
|
||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
|
||
|
},
|
||
|
{
|
||
|
name: "شرکت های بزرگ خیلی خوب هستند",
|
||
|
},
|
||
|
{
|
||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
],
|
||
|
};
|