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

build(deps): update package-lock.json, src/components/Accordion/AccordionDesign1/index.js, src/components/MiniComponents/OfferSection/index.js and yarn.lock

Browse Source
master
mahdi 3 years ago
parent 7181cbd580
commit 1961d937d1
1 changed files with 136 additions and 89 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 225
      src/components/Accordion/AccordionDesign1/index.js

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

@ -1,105 +1,152 @@
import React, { useState } from "react"; import React, { useState } from "react";
import CircleInCircle from "../../MiniComponents/CircleInCircle"; import CircleInCircle from "../../MiniComponents/CircleInCircle";
import Button from "../../ButtonDesign/Button"; import Button from "../../ButtonDesign/Button";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
const AccordionDesign1 = ({ items, vod }) => { const AccordionDesign1 = ({ items, vod }) => {
const [activeAccordion, setActiveAccordion] = useState(null); const [activeAccordion, setActiveAccordion] = useState(null);
const [accordions, updateAccordion] = useState(items);
function handleOnDragEnd(result) {
if (!result.destination) return;
const items = Array.from(accordions);
const [reorderedItem] = items.splice(result.source.index, 1);
items.splice(result.destination.index, 0, reorderedItem);
updateAccordion(items);
}
return ( return (
<section className="w-full flex flex-col bg-gray-200"> <DragDropContext onDragEnd={handleOnDragEnd}>
{items.map((item, index) => ( <Droppable droppableId="container">
<div className="flex flex-col" key={index}> {(provided) => (
{/* parent */} <section
<div className="w-full flex flex-col bg-gray-200"
className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${ {...provided.droppableProps}
activeAccordion === item ref={provided.innerRef}
? "border-surfaceBorder " id="container"
: "border-secondary"
} cursor-pointer`}
onClick={() =>
setActiveAccordion(activeAccordion === item ? null : item)
}
> >
<CircleInCircle {items.map((item, index) => (
parentClassName={"bg-secondary w-3 h-3 "} <Draggable
childClassName={false} key={item.id}
/> draggableId={"e" + item.id}
<h2 className="flex-1 mr-5 text-sm">{item.title}</h2> index={index}
{vod && ( >
<div className="flex flex-row items-center ml-5 "> {(provided) => (
<p className="text-xs"> <div
دقیقه: className="flex flex-col"
<span>{item.min}</span> key={index}
</p> props={{
<div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div> ref: provided.innerRef,
<p className="text-xs"> ...provided.draggableProps,
ویدیو: ...provided.dragHandleProps,
<span>{item.video}</span> }}
</p> style={provided.draggableProps.style}
</div> >
)} {/* parent */}
<img <div
src={ className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
activeAccordion === item activeAccordion === item
? `images/accordion-.svg` ? "border-surfaceBorder "
: `images/accordion+.svg` : "border-secondary"
} } cursor-pointer`}
alt="" onClick={() =>
class="w-3 ml-2" setActiveAccordion(
/> activeAccordion === item ? null : item
</div> )
{/* child */} }
{activeAccordion === item && >
item.subItems.map((subItem, i) => ( <CircleInCircle
<div className="flex flex-row items-center justify-between p-3 border-b-2 border-surfaceBorder cursor-pointer"> parentClassName={"bg-secondary w-3 h-3 "}
<div className="flex flex-row items-center"> childClassName={false}
{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"
/> />
<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 <img
src="images/accordionGroup2723.svg" src={
className="w-8 rounded" activeAccordion === item
alt="edit-button" ? `images/accordion-.svg`
: `images/accordion+.svg`
}
alt=""
class="w-3 ml-2"
/> />
</> </div>
)} {/* child */}
</div> {activeAccordion === item &&
</div> 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>
))} ))}
</div> </section>
))} )}
</section> </Droppable>
</DragDropContext>
); );
}; };

Write Preview
Loading…
Cancel
Save