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

update App.css and src/components/Testt/index.js

Browse Source
master
mahdi 3 years ago
parent 26ab2153e2
commit faeb2de4f5
2 changed files with 183 additions and 52 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. 4
      src/components/Testt/App.css
  2. 217
      src/components/Testt/index.js

4
src/components/Testt/App.css
Unescape View File

@ -1,4 +1,4 @@
.App { /* .App {
text-align: center; text-align: center;
} }
@ -57,4 +57,4 @@
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: auto;
} } */

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

@ -2,36 +2,13 @@ import React, { useState } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import "./App.css"; import "./App.css";
const finalSpaceCharacters = [ import CircleInCircle from "../MiniComponents/CircleInCircle";
{ import Button from "../ButtonDesign/Button";
id: "gary",
name: "Gary Goodspeed",
thumb: "/images/gary.png",
},
{
id: "cato",
name: "Little Cato",
thumb: "/images/cato.png",
},
{
id: "kvn",
name: "KVN",
thumb: "/images/kvn.png",
},
{
id: "mooncake",
name: "Mooncake",
thumb: "/images/mooncake.png",
},
{
id: "quinn",
name: "Quinn Ergon",
thumb: "/images/quinn.png",
},
];
function Testt() { function Testt({ items, vod }) {
const [characters, updateCharacters] = useState(finalSpaceCharacters); // const [characters, updateCharacters] = useState(finalSpaceCharacters);
const [characters, updateCharacters] = useState(items);
const [activeAccordion, setActiveAccordion] = useState(null);
function handleOnDragEnd(result) { function handleOnDragEnd(result) {
if (!result.destination) return; if (!result.destination) return;
@ -50,31 +27,123 @@ function Testt() {
<DragDropContext onDragEnd={handleOnDragEnd}> <DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="characters"> <Droppable droppableId="characters">
{(provided) => ( {(provided) => (
<ul <section
className="characters" className="w-full flex flex-col bg-gray-200"
{...provided.droppableProps} {...provided.droppableProps}
ref={provided.innerRef} ref={provided.innerRef}
> >
{characters.map(({ id, name, thumb }, index) => { {items.map((item, index) => (
return ( <Draggable index={index}>
<Draggable key={id} draggableId={id} index={index}>
{(provided) => ( {(provided) => (
<li <div
className="flex flex-col"
ref={provided.innerRef} ref={provided.innerRef}
{...provided.draggableProps} {...provided.draggableProps}
{...provided.dragHandleProps} {...provided.dragHandleProps}
> >
<div className="characters-thumb"> {/* parent */}
<img src={thumb} alt={`${name} Thumb`} /> <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>
<p>{name}</p> <div className="w-0.5 h-5 mx-3 bg-surfaceBorder"></div>
</li> <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} {provided.placeholder}
</ul> </div>
)}
</Draggable>
))}
</section>
)} )}
</Droppable> </Droppable>
</DragDropContext> </DragDropContext>
@ -90,3 +159,65 @@ function Testt() {
} }
export default Testt; 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: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
],
};

Write Preview
Loading…
Cancel
Save