mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update src/components/Accordion/AccordionDesign1/index.js, src/components/Testt/index.js and mahdi.js

Browse Source
master
mahdi 3 years ago
parent 63308a5f4c
commit 4abb7ad24f
3 changed files with 488 additions and 445 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 264
      src/components/Accordion/AccordionDesign1/index.js
  2. 96
      src/components/Testt/index.js
  3. 307
      src/components/Testt/mahdi.js

264
src/components/Accordion/AccordionDesign1/index.js
Unescape View File

@ -1,61 +1,157 @@
import React, { useState } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import CircleInCircle from "../../MiniComponents/CircleInCircle";
import Button from "../../ButtonDesign/Button";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
const AccordionDesign1 = ({ items, vod }) => {
const finalSpaceCharacters = [
{
id: "gary",
test: "mahdi",
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
{
id: "garfdsy",
test: "mahdi",
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
{
id: "kvn",
name: "KVN",
thumb: "/images/kvn.png",
test: "mahdi",
title:
"بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
{
id: "mooncake",
name: "Mooncake",
thumb: "/images/kvn.png",
test: "mahdi",
title:
"بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
{
id: "garfsddsfy",
test: "mahdi",
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
];
function AccordionDesign1({ vod }) {
const [activeAccordion, setActiveAccordion] = useState(null);
const [accordions, updateAccordion] = useState(items);
const [characters, updateCharacters] = useState(finalSpaceCharacters);
function handleOnDragEnd(result) {
if (!result.destination) return;
const items = Array.from(accordions);
const items = Array.from(characters);
const [reorderedItem] = items.splice(result.source.index, 1);
items.splice(result.destination.index, 0, reorderedItem);
updateAccordion(items);
updateCharacters(items);
}
return (
<section className="w-full">
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="container">
<Droppable droppableId="characters">
{(provided) => (
<section
className="w-full flex flex-col bg-gray-200"
className="characters w-full flex flex-col bg-gray-200"
id="container"
{...provided.droppableProps}
ref={provided.innerRef}
id="container"
>
{items.map((item, index) => (
<Draggable
key={item.id}
draggableId={"e" + item.id}
index={index}
>
{characters.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided) => (
<div
className="flex flex-col"
key={index}
props={{
ref: provided.innerRef,
...provided.draggableProps,
...provided.dragHandleProps,
}}
style={provided.draggableProps.style}
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
)
}
className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
activeAccordion === item
? "border-surfaceBorder "
: "border-secondary"
} cursor-pointer`}
>
<CircleInCircle
parentClassName={"bg-secondary w-0 h- "}
@ -84,76 +180,76 @@ const AccordionDesign1 = ({ items, vod }) => {
alt=""
class="w-3 ml-2"
/>
</div>{" "}
{/* child */}
{activeAccordion === item &&
item.subItems.map((subItem, i) => (
<div 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>
))}
{provided.placeholder}
</section>
)}
</Droppable>
</DragDropContext>
</section>
);
};
}
export default AccordionDesign1;
AccordionDesign1.defaultProps = {
vod: false,
items: [
{
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
{
title:
"بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
{
title:
"بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
],
vod: true,
};

96
src/components/Testt/index.js
Unescape View File

@ -7,8 +7,6 @@ import Button from "../ButtonDesign/Button";
const finalSpaceCharacters = [
{
id: "gary",
name: "Gary Goodspeed",
thumb: "/images/kvn.png",
test: "mahdi",
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
@ -28,8 +26,6 @@ const finalSpaceCharacters = [
},
{
id: "garfdsy",
name: "Gary Goodspeed",
thumb: "/images/kvn.png",
test: "mahdi",
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
@ -92,8 +88,6 @@ const finalSpaceCharacters = [
},
{
id: "garfsddsfy",
name: "Gary Goodspeed",
thumb: "/images/kvn.png",
test: "mahdi",
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
@ -138,13 +132,9 @@ function Testt({ vod }) {
{...provided.droppableProps}
ref={provided.innerRef}
>
{characters.map(
({ id, name, thumb, test, title, video, min }, index) => {
return (
<Draggable key={id} draggableId={id} index={index}>
{characters.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided) => (
<>
{/* ! mineeeeeeeeeeeeee */}
<div
className="flex flex-col"
ref={provided.innerRef}
@ -153,40 +143,104 @@ function Testt({ vod }) {
>
{/* parent */}
<div
className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 cursor-pointer`}
onClick={() =>
setActiveAccordion(
activeAccordion === item ? null : item
)
}
className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
activeAccordion === item
? "border-surfaceBorder "
: "border-secondary"
} cursor-pointer`}
>
<CircleInCircle
parentClassName={"bg-secondary w-0 h- "}
childClassName={false}
/>
<h2 className="flex-1 mr-5 text-sm">{title}</h2>
<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>{min}</span>
<span>{item.min}</span>
</p>
<div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
<p className="text-xs">
ویدیو:
<span>{video}</span>
<span>{item.video}</span>
</p>
</div>
)}
<img
src={"images/accordion-.svg"}
src={
activeAccordion === item
? `images/accordion-.svg`
: `images/accordion+.svg`
}
alt=""
class="w-3 ml-2"
/>
</div>{" "}
{/* child */}
{activeAccordion === item &&
item.subItems.map((subItem, i) => (
<div 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>
{provided.placeholder}
<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"
/>
</>
)}
</Draggable>
);
}
</div>
</div>
))}
{provided.placeholder}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</section>
)}

307
src/components/Testt/mahdi.js
Unescape View File

@ -1,57 +1,115 @@
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";
const finalSpaceCharacters = [
{
id: "gary",
name: "Gary Goodspeed",
thumb: "/images/kvn.png",
test: "mahdi",
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
id: "cato",
name: "Little Cato",
thumb: "/images/kvn.png",
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
{
id: "garfdsy",
test: "mahdi",
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
{
id: "kvn",
name: "KVN",
thumb: "/images/kvn.png",
test: "mahdi",
title:
"بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
{
id: "mooncake",
name: "Mooncake",
thumb: "/images/kvn.png",
test: "mahdi",
title:
"بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
id: "quinn",
name: "Quinn Ergon",
thumb: "/images/kvn.png",
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
{
id: "garfsddsfy",
test: "mahdi",
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
];
function Testt({ items, vod }) {
const [characters, updateCharacters] = useState(finalSpaceCharacters);
// const [characters, updateCharacters] = useState(items);
function Testt({ vod }) {
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);
// }
const [characters, updateCharacters] = useState(finalSpaceCharacters);
function handleOnDragEnd(result) {
if (!result.destination) return;
@ -64,22 +122,22 @@ function Testt({ items, vod }) {
}
return (
<div className="App">
<header className="App-header">
<h1>Final Space Characters</h1>
<section>
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="characters">
{(provided) => (
<section
className="w-full flex flex-col bg-gray-200"
className="characters w-full flex flex-col bg-gray-200"
id="container"
{...provided.droppableProps}
ref={provided.innerRef}
>
{characters.map((item, { id, name }, index) => (
{characters.map(
({ id, title, video, min, item, subItems, name }, index) => {
return (
<Draggable key={id} draggableId={id} index={index}>
{(provided) => (
<div
key={index}
className="flex flex-col"
ref={provided.innerRef}
{...provided.draggableProps}
@ -87,32 +145,32 @@ function Testt({ items, vod }) {
>
{/* 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
)
}
className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
activeAccordion === item
? "border-surfaceBorder "
: "border-secondary"
} cursor-pointer`}
>
<CircleInCircle
parentClassName={"bg-secondary w-0 h- "}
childClassName={false}
/>
<h2 className="flex-1 mr-5 text-sm">{name}</h2>
<h2 className="flex-1 mr-5 text-sm">{title}</h2>
{vod && (
<div className="flex flex-row items-center ml-5 ">
<p className="text-xs">
دقیقه:
<span>{item.min}</span>
<span>{min}</span>
</p>
<div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
<p className="text-xs">
ویدیو:
<span>{item.video}</span>
<span>{video}</span>
</p>
</div>
)}
@ -123,188 +181,23 @@ function Testt({ items, vod }) {
: `images/accordion+.svg`
}
alt=""
className="w-3 ml-2"
class="w-3 ml-2"
/>
</div>
{provided.placeholder}
</div>
)}
</Draggable>
))}
);
}
)}
{provided.placeholder}
</section>
)}
</Droppable>
</DragDropContext>
</header>
<p>
Images from{" "}
<a href="https://final-space.fandom.com/wiki/Final_Space_Wiki">
Final Space Wiki
</a>
</p>
</div>
</section>
);
}
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: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
// },
// ],
// },
// ],
};
// import React, { useState } from "react";
// import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
// import "./App.css";
// const finalSpaceCharacters = [
// {
// id: "gary",
// name: "Gary Goodspeed",
// thumb: "/images/kvn.png",
// test: "mahdi",
// },
// {
// id: "cato",
// name: "Little Cato",
// thumb: "/images/kvn.png",
// test: "mahdi",
// },
// {
// id: "kvn",
// name: "KVN",
// thumb: "/images/kvn.png",
// test: "mahdi",
// },
// {
// id: "mooncake",
// name: "Mooncake",
// thumb: "/images/kvn.png",
// test: "mahdi",
// },
// {
// id: "quinn",
// name: "Quinn Ergon",
// thumb: "/images/kvn.png",
// test: "mahdi",
// },
// ];
// function Testt() {
// const [characters, updateCharacters] = useState(finalSpaceCharacters);
// 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) => (
// <ul
// className="characters"
// {...provided.droppableProps}
// ref={provided.innerRef}
// >
// {characters.map(({ id, name, thumb, test }, index) => {
// return (
// <Draggable key={id} draggableId={id} index={index}>
// {(provided) => (
// <li
// ref={provided.innerRef}
// {...provided.draggableProps}
// {...provided.dragHandleProps}
// >
// <div className="characters-thumb">
// <img src={thumb} alt={`${name} Thumb`} />
// </div>
// <p>{name}</p>
// <span className="p-10 bg-red-600">{test}</span>
// </li>
// )}
// </Draggable>
// );
// })}
// {provided.placeholder}
// </ul>
// )}
// </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;

Write Preview
Loading…
Cancel
Save