update src/components/Accordion/AccordionDesign1/index.js, src/components/Testt/index.js and mahdi.js
parent
63308a5f4c
commit
4abb7ad24f
3 changed files with 488 additions and 445 deletions
@ -1,159 +1,255 @@ |
||||
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 ( |
||||
<DragDropContext onDragEnd={handleOnDragEnd}> |
||||
<Droppable droppableId="container"> |
||||
{(provided) => ( |
||||
<section |
||||
className="w-full flex flex-col bg-gray-200" |
||||
{...provided.droppableProps} |
||||
ref={provided.innerRef} |
||||
id="container" |
||||
> |
||||
{items.map((item, index) => ( |
||||
<Draggable |
||||
key={item.id} |
||||
draggableId={"e" + item.id} |
||||
index={index} |
||||
> |
||||
{(provided) => ( |
||||
<div |
||||
className="flex flex-col" |
||||
key={index} |
||||
props={{ |
||||
ref: provided.innerRef, |
||||
...provided.draggableProps, |
||||
...provided.dragHandleProps, |
||||
}} |
||||
style={provided.draggableProps.style} |
||||
> |
||||
{/* parent */} |
||||
<section className="w-full"> |
||||
<DragDropContext onDragEnd={handleOnDragEnd}> |
||||
<Droppable droppableId="characters"> |
||||
{(provided) => ( |
||||
<section |
||||
className="characters w-full flex flex-col bg-gray-200" |
||||
id="container" |
||||
{...provided.droppableProps} |
||||
ref={provided.innerRef} |
||||
> |
||||
{characters.map((item, index) => ( |
||||
<Draggable key={item.id} draggableId={item.id} index={index}> |
||||
{(provided) => ( |
||||
<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-col" |
||||
ref={provided.innerRef} |
||||
{...provided.draggableProps} |
||||
{...provided.dragHandleProps} |
||||
> |
||||
<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` |
||||
{/* parent */} |
||||
<div |
||||
onClick={() => |
||||
setActiveAccordion( |
||||
activeAccordion === item ? null : item |
||||
) |
||||
} |
||||
alt="" |
||||
class="w-3 ml-2" |
||||
/> |
||||
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">{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="" |
||||
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> |
||||
{provided.placeholder} |
||||
</div> |
||||
)} |
||||
</Draggable> |
||||
))} |
||||
</section> |
||||
)} |
||||
</Droppable> |
||||
</DragDropContext> |
||||
)} |
||||
</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, |
||||
}; |
||||
|
||||
Loading…
Reference in new issue