You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
3.1 KiB
116 lines
3.1 KiB
import React, { useState } from "react"; |
|
|
|
import IconText from "../IconText"; |
|
import ButtonDivTag from "../ButtonDivTag"; |
|
import TitleSubtitle from "../TitleSubtitle"; |
|
|
|
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; |
|
|
|
const CardDesign2 = ({ buttons }) => { |
|
const [dokmeha, updateDokmeha] = useState(buttons); |
|
|
|
function handleOnDragEnd(result) { |
|
if (!result.destination) return; |
|
|
|
const items = Array.from(dokmeha); |
|
const [reorderedItem] = items.splice(result.source.index, 1); |
|
items.splice(result.destination.index, 0, reorderedItem); |
|
|
|
updateDokmeha(items); |
|
} |
|
|
|
return ( |
|
<div className="max-h-[400px] h-fit overflow-y-auto scrollYDesign w-full flex flex-col p-4 bg-white shadow rounded mt-3"> |
|
<TitleSubtitle |
|
subTitle={false} |
|
title={"افراد حاضر در این سالن"} |
|
titleClassName={"font-bold text-primary"} |
|
titleBorderClassName={"w-1 h-5 bg-green-400 ml-1.5"} |
|
/> |
|
<IconText /> |
|
<DragDropContext onDragEnd={handleOnDragEnd}> |
|
<Droppable droppableId="container"> |
|
{(provided) => ( |
|
<div |
|
className="flex flex-col gap-y-4 justify-around mt-4 w-full" |
|
{...provided.droppableProps} |
|
ref={provided.innerRef} |
|
id="container" |
|
> |
|
{dokmeha.map((btn, index) => ( |
|
<Draggable |
|
key={btn.id} |
|
draggableId={"e" + btn.id} |
|
index={index} |
|
> |
|
{(provided) => ( |
|
<div className={`w-full`}> |
|
<ButtonDivTag |
|
props={{ |
|
ref: provided.innerRef, |
|
...provided.draggableProps, |
|
...provided.dragHandleProps, |
|
}} |
|
className={`${btn.className} w-full h-full text-white py-3 border-none text-xs rounded-sm`} |
|
style={provided.draggableProps.style} |
|
text={btn.name} |
|
/> |
|
</div> |
|
)} |
|
</Draggable> |
|
))} |
|
{provided.placeholder} |
|
</div> |
|
)} |
|
</Droppable> |
|
</DragDropContext> |
|
</div> |
|
); |
|
}; |
|
|
|
export default CardDesign2; |
|
|
|
CardDesign2.defaultProps = { |
|
buttons: [ |
|
{ |
|
id: 1, |
|
name: "پنجره", |
|
className: "bg-[#FFF7BF]", |
|
}, |
|
{ |
|
id: 2, |
|
name: "کمک اولیه", |
|
className: "bg-[#DBFDFF]", |
|
}, |
|
{ |
|
id: 3, |
|
name: "درب خروجی", |
|
className: "bg-[#828282]", |
|
}, |
|
{ |
|
id: 4, |
|
name: "سیستم سرمایش", |
|
className: "bg-[#F6FFEB]", |
|
}, |
|
{ |
|
id: 5, |
|
name: "آب سردکن", |
|
className: "bg-[#F0FFB4]", |
|
}, |
|
{ |
|
id: 6, |
|
name: "سرویس بهداشتی", |
|
className: "bg-[#FFDD8E]", |
|
}, |
|
{ |
|
id: 7, |
|
name: "حمام", |
|
className: "bg-[#EEEFFF]", |
|
}, |
|
{ |
|
id: 8, |
|
name: "تخت", |
|
className: "bg-[#FFF5EE]", |
|
}, |
|
], |
|
};
|
|
|