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

update src/components/Accordion/AccordionDesign1/index.js and src/components/Code/index.js

Browse Source
master
mahdi 3 years ago
parent 421ef0a9ea
commit 8a1ce0f8fa
2 changed files with 131 additions and 151 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. 280
      src/components/Accordion/AccordionDesign1/index.js
  2. 2
      src/components/Code/index.js

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

@ -3,9 +3,9 @@ import CircleInCircle from "../../MiniComponents/CircleInCircle";
import Button from "../../ButtonDesign/Button"; import Button from "../../ButtonDesign/Button";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
const AccordionDesign1 = ({ courses, vod }) => { const AccordionDesign1 = ({ items, vod }) => {
const [activeAccordion, setActiveAccordion] = useState(null); const [activeAccordion, setActiveAccordion] = useState(null);
const [accordions, updateAccordion] = useState(courses); const [accordions, updateAccordion] = useState(items);
function handleOnDragEnd(result) { function handleOnDragEnd(result) {
if (!result.destination) return; if (!result.destination) return;
@ -18,137 +18,135 @@ const AccordionDesign1 = ({ courses, vod }) => {
} }
return ( return (
<> <DragDropContext onDragEnd={handleOnDragEnd}>
<DragDropContext onDragEnd={handleOnDragEnd}> <Droppable droppableId="container">
<Droppable droppableId="accordions"> {(provided) => (
{(provided) => ( <section
<section className="w-full flex flex-col bg-gray-200"
className="w-full flex flex-col bg-gray-200" {...provided.droppableProps}
{...provided.droppableProps} ref={provided.innerRef}
ref={provided.innerRef} id="container"
id="accordions" >
> {items.map((item, index) => (
{courses.map((course, index) => ( <Draggable
<Draggable key={item.id}
key={course.id} draggableId={"e" + item.id}
draggableId={"e" + course.id} index={index}
index={index} >
> {(provided) => (
{(provided) => ( <div
className="flex flex-col"
key={index}
props={{
ref: provided.innerRef,
...provided.draggableProps,
...provided.dragHandleProps,
}}
style={provided.draggableProps.style}
>
{/* parent */}
<div <div
className="flex flex-col" className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
key={index} activeAccordion === item
props={{ ? "border-surfaceBorder "
ref: provided.innerRef, : "border-secondary"
...provided.draggableProps, } cursor-pointer`}
...provided.dragHandleProps, onClick={() =>
}} setActiveAccordion(
style={provided.draggableProps.style} activeAccordion === item ? null : item
)
}
> >
{/* parent */} <CircleInCircle
<div parentClassName={"bg-secondary w-0 h- "}
className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${ childClassName={false}
activeAccordion === course />
? "border-surfaceBorder " <h2 className="flex-1 mr-5 text-sm">{item.title}</h2>
: "border-secondary" {vod && (
} cursor-pointer`} <div className="flex flex-row items-center ml-5 ">
onClick={() => <p className="text-xs">
setActiveAccordion( دقیقه:
activeAccordion === course ? null : course <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=""
<CircleInCircle class="w-3 ml-2"
parentClassName={"bg-secondary w-4 h-4 "} />
childClassName={false} </div>
/> {/* child */}
<h2 className="flex-1 mr-5 text-sm">{course.title}</h2> {activeAccordion === item &&
{vod && ( item.subItems.map((subItem, i) => (
<div className="flex flex-row items-center ml-5 "> <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">
<p className="text-xs"> <div className="flex flex-row items-center">
دقیقه: {vod === !true && (
<span>{course.min}</span> <img
</p> src="images/accordionGroup2725.svg"
<div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div> className="w-3"
<p className="text-xs"> alt="line"
ویدیو: />
<span>{course.video}</span> )}
</p> <span
className={`text-sm ${
vod === true ? "mr-0" : "mr-3"
}`}
>
{i + 1}
</span>
</div> </div>
)} <div className="w-0.5 h-5 mx-3 bg-surfaceBorder"></div>
<img <p className="text-sm flex-1">{subItem.name}</p>
src={ <div className="flex flex-row items-center justify-end gap-x-3 flex-1">
activeAccordion === course {vod ? (
? `images/accordion-.svg` <>
: `images/accordion+.svg` <div className="flex flex-row items-center ml-7">
} <p className="text-xs">
alt="" دقیقه:
class="w-3 ml-2" <span>{item.min}</span>
/> </p>
</div> <Button
{/* child */} className="px-2 py-1 text-primary text-sm border border-surfaceBorder rounded mr-4"
{activeAccordion === course && text={"پخش"}
course.lessons.map((lesson, 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>
<div className="flex flex-row items-center"> </>
{vod === !true && ( ) : (
<>
<img <img
src="images/accordionGroup2725.svg" src="images/accordionGroup2724.svg"
className="w-3" className="w-8 rounded"
alt="line" alt="delete-button"
/> />
)} <img
<span src="images/accordionGroup2723.svg"
className={`text-sm ${ className="w-8 rounded"
vod === true ? "mr-0" : "mr-3" alt="edit-button"
}`} />
> </>
{i + 1} )}
</span>
</div>
<div className="w-0.5 h-5 mx-3 bg-surfaceBorder"></div>
<p className="text-sm flex-1">{lesson.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>{course.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> </div>
))} </div>
{provided.placeholder} ))}
</div> {provided.placeholder}
)} </div>
</Draggable> )}
))} </Draggable>
</section> ))}
)} </section>
</Droppable> )}
</DragDropContext> </Droppable>
</> </DragDropContext>
); );
}; };
@ -157,13 +155,13 @@ export default AccordionDesign1;
AccordionDesign1.defaultProps = { AccordionDesign1.defaultProps = {
vod: false, vod: false,
courses: [ items: [
{ {
title: title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
video: 4, video: 4,
min: 30, min: 30,
lessons: [ subItems: [
{ {
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
}, },
@ -177,10 +175,11 @@ AccordionDesign1.defaultProps = {
}, },
{ {
title: title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
video: 4, video: 4,
min: 30, min: 30,
lessons: [
subItems: [
{ {
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
}, },
@ -194,10 +193,10 @@ AccordionDesign1.defaultProps = {
}, },
{ {
title: title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
video: 4, video: 4,
min: 30, min: 30,
lessons: [ subItems: [
{ {
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
}, },
@ -211,20 +210,3 @@ AccordionDesign1.defaultProps = {
}, },
], ],
}; };
{
/* monaco */
}
// import MonacoEditor from "react-monaco-editor";‍
// <MonacoEditor
// width="800"
// height="600"
// language="javascript"
// theme="vs-dark"
// value={code}
// options={options}
// onChange={::this.onChange}
// editorDidMount={::this.editorDidMount}
// />

2
src/components/Code/index.js
Unescape View File

@ -1,6 +1,5 @@
import { useState } from "react"; import { useState } from "react";
import copyIcon from "./copy.png"; import copyIcon from "./copy.png";
import MonacoEditor from "react-monaco-editor";
function Code({ code }) { function Code({ code }) {
const [copied, setCopied] = useState(false); const [copied, setCopied] = useState(false);
@ -14,7 +13,6 @@ function Code({ code }) {
/* Copy the text inside the text field */ /* Copy the text inside the text field */
navigator.clipboard.writeText(copyText); navigator.clipboard.writeText(copyText);
}; };
return ( return (
<div className="flex flex-col w-full my-10"> <div className="flex flex-col w-full my-10">
<div className="w-full flex flex-row items-center justify-between"> <div className="w-full flex flex-row items-center justify-between">

Write Preview
Loading…
Cancel
Save