Compare commits
35 Commits
After Width: | Height: | Size: 520 B |
After Width: | Height: | Size: 835 B |
After Width: | Height: | Size: 293 B |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 820 B |
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 392 B |
After Width: | Height: | Size: 924 B |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 923 B |
After Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 448 B |
After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 672 B |
After Width: | Height: | Size: 555 B |
@ -0,0 +1,169 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; |
||||||
|
|
||||||
|
function Accordion({ finalSpaceCharacters }) { |
||||||
|
const [characters, updateCharacters] = useState(finalSpaceCharacters); |
||||||
|
|
||||||
|
function handleOnDragEnd(result) { |
||||||
|
if (!result.destination) return; |
||||||
|
|
||||||
|
const items = Array.from(characters); |
||||||
|
const [reorderedItem] = items.splice(result.source.index, 1); |
||||||
|
items.splice(result.destination.index, 0, reorderedItem); |
||||||
|
|
||||||
|
updateCharacters(items); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<section className="w-full mt-7"> |
||||||
|
<DragDropContext onDragEnd={handleOnDragEnd}> |
||||||
|
<Droppable droppableId="characters"> |
||||||
|
{(provided) => ( |
||||||
|
<section |
||||||
|
className="characters w-full flex flex-col gap-y-4" |
||||||
|
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-col" |
||||||
|
ref={provided.innerRef} |
||||||
|
{...provided.draggableProps} |
||||||
|
{...provided.dragHandleProps} |
||||||
|
> |
||||||
|
<div className="flex items-center w-full "> |
||||||
|
<img |
||||||
|
src="images/blue-hamburger-menu.jpeg" |
||||||
|
alt="" |
||||||
|
className="w-4 ml-2" |
||||||
|
/> |
||||||
|
<div className="w-full flex flex-row items-center justify-between px-3 py-4 bg-[#EEF5FF] rounded-sm cursor-pointer"> |
||||||
|
<p className="flex-1 mr-3 text-sm text-[#234F8E]"> |
||||||
|
{item.title} |
||||||
|
</p> |
||||||
|
<div className="bg-[#D4E7FF] p-2 rounded-sm"> |
||||||
|
<img |
||||||
|
src="images/blue-cancle-icon.svg" |
||||||
|
alt="" |
||||||
|
className="w-3 " |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{provided.placeholder} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Draggable> |
||||||
|
))} |
||||||
|
{provided.placeholder} |
||||||
|
</section> |
||||||
|
)} |
||||||
|
</Droppable> |
||||||
|
</DragDropContext> |
||||||
|
</section> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default Accordion; |
||||||
|
Accordion.defaultProps = { |
||||||
|
finalSpaceCharacters: [ |
||||||
|
{ |
||||||
|
id: "1", |
||||||
|
title: |
||||||
|
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", |
||||||
|
video: 4, |
||||||
|
min: 30, |
||||||
|
subItems: [ |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "شرکت های بزرگ خیلی خوب هستند", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "2", |
||||||
|
title: |
||||||
|
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", |
||||||
|
video: 4, |
||||||
|
min: 30, |
||||||
|
subItems: [ |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "شرکت های بزرگ خیلی خوب هستند", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "3", |
||||||
|
name: "KVN", |
||||||
|
thumb: "/images/kvn.png", |
||||||
|
title: |
||||||
|
"بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟", |
||||||
|
video: 4, |
||||||
|
min: 30, |
||||||
|
|
||||||
|
subItems: [ |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "شرکت های بزرگ خیلی خوب هستند", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "4", |
||||||
|
name: "Mooncake", |
||||||
|
thumb: "/images/kvn.png", |
||||||
|
title: |
||||||
|
"بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟", |
||||||
|
video: 4, |
||||||
|
min: 30, |
||||||
|
subItems: [ |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "شرکت های بزرگ خیلی خوب هستند", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "5", |
||||||
|
title: |
||||||
|
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", |
||||||
|
video: 4, |
||||||
|
min: 30, |
||||||
|
subItems: [ |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "شرکت های بزرگ خیلی خوب هستند", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
@ -0,0 +1,85 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import fixNumbers from "./fixNumbers"; |
||||||
|
|
||||||
|
const Input = ({ |
||||||
|
defaultValue, |
||||||
|
set, |
||||||
|
label, |
||||||
|
borderClassname, |
||||||
|
inputClassname, |
||||||
|
placeholderClass, |
||||||
|
activePlaceholderClass, |
||||||
|
type, |
||||||
|
maxLength, |
||||||
|
max, |
||||||
|
min, |
||||||
|
register, |
||||||
|
onClick, |
||||||
|
icon, |
||||||
|
}) => { |
||||||
|
const [value, setValue] = useState(defaultValue); |
||||||
|
console.log(value); |
||||||
|
return ( |
||||||
|
<div |
||||||
|
onClick={onClick} |
||||||
|
className={ |
||||||
|
"h-full w-full flex flex-row items-center rounded relative bg-[#F9F9F9] " + |
||||||
|
borderClassname + |
||||||
|
(value ? " bg-white border rounded " : " bg-white ") |
||||||
|
} |
||||||
|
> |
||||||
|
<div |
||||||
|
className={ |
||||||
|
"text-xs absolute transition-all duration-300 pointer-events-none px-3 text-[#00253A] transform -translate-x-[4px]" + |
||||||
|
(value |
||||||
|
? ` ${activePlaceholderClass} + top-[-10px]` |
||||||
|
: ` ${placeholderClass} + top-[10px]`) |
||||||
|
} |
||||||
|
> |
||||||
|
{label} |
||||||
|
</div> |
||||||
|
{type !== "textarea" ? ( |
||||||
|
<input |
||||||
|
{...register} |
||||||
|
maxLength={maxLength} |
||||||
|
value={value} |
||||||
|
type={"text"} |
||||||
|
onInput={(e) => { |
||||||
|
let value = e.target.value; |
||||||
|
if (type === "number") |
||||||
|
value = fixNumbers(value).replace(/[^\d.-]/g, ""); |
||||||
|
if (maxLength && value.length > maxLength) |
||||||
|
value = value.slice(0, maxLength); |
||||||
|
if (!isNaN(max) && +e.target.value > max) value = max; |
||||||
|
if (!isNaN(min) && +e.target.value < min) value = min; |
||||||
|
e.target.value = value; |
||||||
|
}} |
||||||
|
className={`rtl w-full h-full outline-0 text-xs rounded-md border-transparent focus:border-transparent focus:ring-transparent ${inputClassname}
|
||||||
|
${!value ? "bg-[#F9F9F9] " : "bg-white"} `}
|
||||||
|
onChange={(e) => setValue(e.target.value)} |
||||||
|
inputMode={type === "number" ? "numeric" : ""} |
||||||
|
/> |
||||||
|
) : ( |
||||||
|
<textarea |
||||||
|
{...register} |
||||||
|
className={`rtl w-full h-full text-[#00253A] p-4 outline-0 resize-none text-xs rounded-md border-transparent focus:border-transparent focus:ring-transparent ${ |
||||||
|
!value ? "bg-[#F9F9F9] " : "bg-white" |
||||||
|
}`}
|
||||||
|
onChange={(e) => setValue(e.target.value)} |
||||||
|
> |
||||||
|
{value} |
||||||
|
</textarea> |
||||||
|
)} |
||||||
|
{icon && <img src={icon} alt="calender" className="ml-2" />} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Input; |
||||||
|
|
||||||
|
Input.defaultProps = { |
||||||
|
inputClassname: "", |
||||||
|
placeholderClass: "text-[#bdc3c7]", |
||||||
|
activePlaceholderClass: "text-blue-600 bg-white", |
||||||
|
icon: false, |
||||||
|
}; |
@ -0,0 +1,22 @@ |
|||||||
|
const persianNumbers = [ |
||||||
|
/۰/g, |
||||||
|
/۱/g, |
||||||
|
/۲/g, |
||||||
|
/۳/g, |
||||||
|
/۴/g, |
||||||
|
/۵/g, |
||||||
|
/۶/g, |
||||||
|
/۷/g, |
||||||
|
/۸/g, |
||||||
|
/۹/g, |
||||||
|
], |
||||||
|
arabicNumbers = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g], |
||||||
|
fixNumbers = function (str) { |
||||||
|
if (typeof str === "string") { |
||||||
|
for (var i = 0; i < 10; i++) { |
||||||
|
str = str.replace(persianNumbers[i], i).replace(arabicNumbers[i], i); |
||||||
|
} |
||||||
|
} |
||||||
|
return str; |
||||||
|
}; |
||||||
|
export default fixNumbers; |
@ -0,0 +1,71 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { useForm } from "react-hook-form"; |
||||||
|
|
||||||
|
import Accordion from "../Accordion"; |
||||||
|
import CustomSelectBox from "../CustomSelectBox"; |
||||||
|
|
||||||
|
const Checklist = () => { |
||||||
|
return ( |
||||||
|
<div className="w-full flex flex-row items-start justify-between divide-x-2 divide-[#E3E3E3] divide-x-reverse"> |
||||||
|
<div className="flex-grow flex-1 flex flex-col pl-5"> |
||||||
|
<p className=" font-bold text-blue-600 text-left text-xs mb-2"> |
||||||
|
تابع انتخاب |
||||||
|
</p> |
||||||
|
<div className="flex flex-col gap-y-4"> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "افزودن چک لیست" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<Accordion /> |
||||||
|
</div> |
||||||
|
<div className="flex-grow flex-1 flex flex-col pr-5"> |
||||||
|
<p className="font-bold text-[#00253A] text-sm mb-4">شرایط ایجاد</p> |
||||||
|
<div className="flex flex-col gap-y-4"> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "انتخاب سرویس" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "انتخاب تابع" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<hr className="border border-gray-200 w-full my-5" /> |
||||||
|
<p className="font-bold text-[#00253A] text-sm mb-4">تابع فیلتر</p> |
||||||
|
<div className="flex flex-col gap-y-4"> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "انتخاب سرویس" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "انتخاب تابع" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Checklist; |
@ -0,0 +1,18 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
const CircleInCircle = ({ parentClassName, childClassName }) => { |
||||||
|
return ( |
||||||
|
<div className={` ${parentClassName} w-5 h-5 rounded-full relative `}> |
||||||
|
<div |
||||||
|
className={`${childClassName} w-2 h-2 rounded-full absolute left-1/2 bottom-1/2 transform -translate-x-1/2 translate-y-1/2`} |
||||||
|
></div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default CircleInCircle; |
||||||
|
|
||||||
|
CircleInCircle.defaultProps = { |
||||||
|
parentClassName: "bg-red-200", |
||||||
|
childClassName: "bg-red-600", |
||||||
|
}; |
@ -0,0 +1,59 @@ |
|||||||
|
import React from "react"; |
||||||
|
import CustomSelectBox from "../CustomSelectBox"; |
||||||
|
|
||||||
|
const Condition = () => { |
||||||
|
return ( |
||||||
|
<div className="w-full flex flex-row items-center justify-between divide-x-2 divide-[#E3E3E3] divide-x-reverse"> |
||||||
|
<div className="flex-grow flex-1 flex flex-col pl-5 "> |
||||||
|
<div className="font-bold text-center p-4 rounded-sm border border-[#DBDBDB] text-[#333333]"> |
||||||
|
اینجا قرار است بیام از react-monaco-editor استفاده کنم{" "} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="flex-grow flex-1 flex flex-col pr-5"> |
||||||
|
<div className="flex flex-col gap-y-7"> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "محدودیت شبکه" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ |
||||||
|
title: |
||||||
|
"شناسه فرآیندهایی که باعث ابطال وظایف با فرآیند های فعلی می شود", |
||||||
|
}, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ |
||||||
|
title: "رفرنس هایی که شناسه ی آن ها ظروری است", |
||||||
|
}, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ |
||||||
|
title: "رفرنس هایی که باید در یک گردش کار یکتا باشند", |
||||||
|
}, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Condition; |
@ -1,33 +0,0 @@ |
|||||||
// it has style inside index.scss ---> // Start FormInput Component && end FormInput Component
|
|
||||||
|
|
||||||
import React from "react"; |
|
||||||
import CustomSelectBox from "../CustomSelectBox"; |
|
||||||
|
|
||||||
const FormInput = ({ items }) => { |
|
||||||
return ( |
|
||||||
<div className="w-full flex flex-row items-center justify-between mx-auto rounded-sm shadow-sm divide-x-2 divide-gray-400 divide-x-reverse "> |
|
||||||
<div className="flex-grow flex-1 flex flex-col gap-y-4 px-4"> |
|
||||||
<CustomSelectBox /> |
|
||||||
</div> |
|
||||||
<div className="flex-grow flex-1 flex flex-col gap-y-4 px-4"> |
|
||||||
<CustomSelectBox /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default FormInput; |
|
||||||
|
|
||||||
FormInput.defaultProps = { |
|
||||||
items: [ |
|
||||||
{ |
|
||||||
title: "mahdi", |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: "mahdi", |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: "mahdi", |
|
||||||
}, |
|
||||||
], |
|
||||||
}; |
|
@ -0,0 +1,50 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
|
||||||
|
import Button from "../Button"; |
||||||
|
import Tabbar from "../Tabbar"; |
||||||
|
|
||||||
|
const Modal = ({ activeTab, children }) => { |
||||||
|
const [openModal, setOpenModal] = useState(false); |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Button |
||||||
|
className={`bg-[#046AE8] text-white rounded p-2 text-xs`} |
||||||
|
iconHolderClassName={"bg-transparent mr-1"} |
||||||
|
iconClassName={"w-5"} |
||||||
|
icon={"images/blue-edit-icon.svg"} |
||||||
|
text={"ویرایش"} |
||||||
|
onClick={() => setOpenModal(true)} |
||||||
|
/> |
||||||
|
<div |
||||||
|
className={`w-screen h-screen flex items-center justify-center bg-gray-600 bg-opacity-60 backdrop-filter backdrop-blur-sm fixed left-0 top-0 duration-300 transition-all ${ |
||||||
|
openModal ? "flex" : "hidden pointer-events-none" |
||||||
|
}`}
|
||||||
|
> |
||||||
|
<div className="min-w-[900px] w-fit min-h-[700px] flex flex-col justify-between bg-white border border-gray-400 rounded"> |
||||||
|
<div |
||||||
|
className="p-3 flex flex-col" |
||||||
|
onClick={(e) => e.stopPropagation()} |
||||||
|
> |
||||||
|
<Button |
||||||
|
className="w-fit p-1.5 self-end bg-[#D11B1B] rounded-sm mb-7" |
||||||
|
text={false} |
||||||
|
icon={"images/white-cancel.svg"} |
||||||
|
iconHolderClassName={"mr-0"} |
||||||
|
onClick={() => setOpenModal(false)} |
||||||
|
/> |
||||||
|
<Tabbar /> |
||||||
|
</div> |
||||||
|
<div className="w-full flex flex-col items-end p-2 bg-[#e2dfdf]"> |
||||||
|
<Button |
||||||
|
className="w-fit p-2 bg-[#3C58EA] text-white rounded-md text-sm" |
||||||
|
text={"ذخیره و ثبت اطلاعات"} |
||||||
|
iconHolderClassName={"mr-0"} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Modal; |
@ -0,0 +1,79 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { useForm } from "react-hook-form"; |
||||||
|
|
||||||
|
import Accordion from "../Accordion"; |
||||||
|
import Input from "../AnimatedInput/Input"; |
||||||
|
import CustomSelectBox from "../CustomSelectBox"; |
||||||
|
|
||||||
|
const Mokatebat = () => { |
||||||
|
const { register, getValues } = useForm(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="w-full flex flex-row items-start justify-between divide-x-2 divide-[#E3E3E3] divide-x-reverse"> |
||||||
|
<div className="flex-grow flex-1 flex flex-col pl-5"> |
||||||
|
<div className="flex flex-col gap-y-4"> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "قالب نامه" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "جامعه هدف" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<Input |
||||||
|
register={register("lastName")} |
||||||
|
label="متن پیامک اطلاع رسانی" |
||||||
|
type="textarea" |
||||||
|
borderClassname={`border border-red-[#E3E3E3] `} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<p className=" font-bold text-[#00253A] text-sm mt-4 mb-2"> |
||||||
|
تابع انتخاب |
||||||
|
</p> |
||||||
|
<div className="flex flex-col gap-y-4"> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "انتخاب سرویس" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "انتخاب تابع" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
{/* <Accordion /> */} |
||||||
|
</div> |
||||||
|
<div className="flex-grow flex-1 flex flex-col pr-5"> |
||||||
|
<div> |
||||||
|
<p className="font-bold text-[#00253A] text-sm">شرایط ایجاد</p> |
||||||
|
<div className="font-bold text-center p-4 rounded-sm border border-[#DBDBDB] text-[#333333]"> |
||||||
|
اینجا قرار است بیام از react-monaco-editor استفاده کنم{" "} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="mt-4"> |
||||||
|
<p className="font-bold text-[#00253A] text-sm">شرایط امضا</p> |
||||||
|
<div className="font-bold text-center p-4 rounded-sm border border-[#DBDBDB] text-[#333333]"> |
||||||
|
اینجا قرار است بیام از react-monaco-editor استفاده کنم{" "} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Mokatebat; |
@ -1,7 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
|
|
||||||
const Popup = () => { |
|
||||||
return <div>Popup</div>; |
|
||||||
}; |
|
||||||
|
|
||||||
export default Popup; |
|
@ -0,0 +1,23 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Accordion from "../Accordion"; |
||||||
|
import CustomSelectBox from "../CustomSelectBox"; |
||||||
|
|
||||||
|
const Questions = () => { |
||||||
|
// const [selectedQuestion, setSelectedQuestion] = useState(null);
|
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="w-full"> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "انتخاب سوال" }, |
||||||
|
{ title: "سوال شماره ۱" }, |
||||||
|
{ title: "سوال شماره ۲" }, |
||||||
|
{ title: "سوال شماره ۳" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<Accordion /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Questions; |
@ -0,0 +1,40 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
const RadioButton = () => { |
||||||
|
return ( |
||||||
|
<div className="relative"> |
||||||
|
<div className="flex items-center justify-between rounded py-4 bg-[#FBFBFB] focus:bg-[#f5f5f5] border border-[#DBDBDB] focus:border-[#DBDBDB] focus:ring-transparent divide-x-2 divide-[#E3E3E3] divide-x-reverse"> |
||||||
|
<div className="flex items-center justify-center flex-1 pl-5"> |
||||||
|
<input |
||||||
|
id="default-radio-1" |
||||||
|
type="radio" |
||||||
|
value="" |
||||||
|
name="default-radio" |
||||||
|
class="w-4 h-4 cursor-pointer" |
||||||
|
checked="checked" |
||||||
|
/> |
||||||
|
<label for="default-radio-1" class="mr-2 text-xs text-[#00253A]"> |
||||||
|
بله |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div className="flex items-center justify-center flex-1 pl-5"> |
||||||
|
<input |
||||||
|
id="default-radio-2" |
||||||
|
type="radio" |
||||||
|
value="" |
||||||
|
name="default-radio" |
||||||
|
class="w-4 h-4 cursor-pointer" |
||||||
|
/> |
||||||
|
<label for="default-radio-2" class="mr-2 text-xs text-[#00253A]"> |
||||||
|
خیر |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="absolute top-0 transform -translate-y-2.5 -translate-x-2 px-2 z-10 bg-white"> |
||||||
|
<p className="text-xs text-[#00253A]">آیا قابلیت ارجاع دارد؟</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default RadioButton; |
@ -0,0 +1,105 @@ |
|||||||
|
// import React from "react";
|
||||||
|
// import { render } from "react-dom";
|
||||||
|
// import MonacoEditor, { MonacoDiffEditor } from "react-monaco-editor";
|
||||||
|
|
||||||
|
// class CodeEditor extends React.Component {
|
||||||
|
// constructor() {
|
||||||
|
// super();
|
||||||
|
// this.state = {
|
||||||
|
// code: "// type your code... \n",
|
||||||
|
// theme: "vs-light",
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
|
||||||
|
// onChange = (newValue) => {
|
||||||
|
// console.log("onChange", newValue); // eslint-disable-line no-console
|
||||||
|
// };
|
||||||
|
|
||||||
|
// editorDidMount = (editor) => {
|
||||||
|
// // eslint-disable-next-line no-console
|
||||||
|
// console.log("editorDidMount", editor, editor.getValue(), editor.getModel());
|
||||||
|
// this.editor = editor;
|
||||||
|
// };
|
||||||
|
|
||||||
|
// changeEditorValue = () => {
|
||||||
|
// if (this.editor) {
|
||||||
|
// this.editor.setValue("// code changed! \n");
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
|
// changeBySetState = () => {
|
||||||
|
// this.setState({ code: "// code changed by setState! \n" });
|
||||||
|
// };
|
||||||
|
|
||||||
|
// setDarkTheme = () => {
|
||||||
|
// this.setState({ theme: "vs-dark" });
|
||||||
|
// };
|
||||||
|
|
||||||
|
// setLightTheme = () => {
|
||||||
|
// this.setState({ theme: "vs-light" });
|
||||||
|
// };
|
||||||
|
|
||||||
|
// render() {
|
||||||
|
// const { code, theme } = this.state;
|
||||||
|
// const options = {
|
||||||
|
// selectOnLineNumbers: true,
|
||||||
|
// roundedSelection: false,
|
||||||
|
// readOnly: false,
|
||||||
|
// cursorStyle: "line",
|
||||||
|
// automaticLayout: false,
|
||||||
|
// };
|
||||||
|
// return (
|
||||||
|
// <div>
|
||||||
|
// <div>
|
||||||
|
// <button onClick={this.changeEditorValue} type="button">
|
||||||
|
// Change value
|
||||||
|
// </button>
|
||||||
|
// <button onClick={this.changeBySetState} type="button">
|
||||||
|
// Change by setState
|
||||||
|
// </button>
|
||||||
|
// <button onClick={this.setDarkTheme} type="button">
|
||||||
|
// Set dark theme
|
||||||
|
// </button>
|
||||||
|
// <button onClick={this.setLightTheme} type="button">
|
||||||
|
// Set light theme
|
||||||
|
// </button>
|
||||||
|
// </div>
|
||||||
|
// <hr />
|
||||||
|
// <MonacoEditor
|
||||||
|
// height="400"
|
||||||
|
// language="javascript"
|
||||||
|
// value={code}
|
||||||
|
// options={options}
|
||||||
|
// onChange={this.onChange}
|
||||||
|
// editorDidMount={this.editorDidMount}
|
||||||
|
// theme={theme}
|
||||||
|
// />
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// const ReactMonacoEditor = () => {
|
||||||
|
// return (
|
||||||
|
// <div>
|
||||||
|
// <h2>Monaco Editor Sample (controlled mode)</h2>
|
||||||
|
// <CodeEditor />
|
||||||
|
// <hr />
|
||||||
|
// <h2>Another editor (uncontrolled mode)</h2>
|
||||||
|
// {/* <AnotherEditor /> */}
|
||||||
|
// <hr />
|
||||||
|
// <h2>Another editor (showing a diff)</h2>
|
||||||
|
// {/* <DiffEditor /> */}
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
// };
|
||||||
|
|
||||||
|
// export default ReactMonacoEditor;
|
||||||
|
|
||||||
|
import React from "react"; |
||||||
|
|
||||||
|
const ReactMonacoEditor = () => { |
||||||
|
return <div>ReactMonacoEditor</div>; |
||||||
|
}; |
||||||
|
|
||||||
|
export default ReactMonacoEditor; |
@ -0,0 +1,136 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { useForm } from "react-hook-form"; |
||||||
|
|
||||||
|
import CustomSelectBox from "../CustomSelectBox"; |
||||||
|
import Input from "../AnimatedInput/Input"; |
||||||
|
import CircleInCircle from "../CircleInCircle"; |
||||||
|
import RadioButton from "../RadioButton"; |
||||||
|
|
||||||
|
const Settingss = ({ status }) => { |
||||||
|
const { register } = useForm(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="w-full flex flex-row items-start justify-between divide-x-2 divide-[#E3E3E3] divide-x-reverse"> |
||||||
|
<div className="flex-grow flex-1 flex flex-col gap-y-7 pl-5"> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "نام فرآیند" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<Input |
||||||
|
register={register("lastName")} |
||||||
|
label="توضیحات" |
||||||
|
type="textarea" |
||||||
|
borderClassname={`border border-red-[#E3E3E3] `} |
||||||
|
/> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "اولویت دهی" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "نوع فرآیند" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<div className="flex items-center justify-between rounded py-2 bg-[#FBFBFB] border focus:bg-[#f5f5f5] border-[#DBDBDB] focus:border-[#DBDBDB] focus:ring-transparent"> |
||||||
|
<p className="text-xs text-[#00253A] mr-5">وضیعت</p> |
||||||
|
<div className="ml-1"> |
||||||
|
<CircleInCircle |
||||||
|
parentClassName={`w-5 h-5 ${ |
||||||
|
status ? "bg-green-600" : "bg-red-600" |
||||||
|
}`}
|
||||||
|
childClassName={false} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<RadioButton /> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "انتخاب نقش های قابل ارجاع" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "انتخاب نقش انجام دهنده" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="flex-grow flex-1 flex flex-col pr-5 gap-y-7"> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "فرآیند مرجع" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "فرآیندهای لینک" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<div className="w-full flex items-center gap-x-3"> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "زمان تاخیر" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "مهلت انجام" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="w-full flex items-center gap-x-3"> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "تایید خودکار" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "انقضا" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Settingss; |
||||||
|
|
||||||
|
Settingss.defaultProps = { |
||||||
|
status: true, |
||||||
|
}; |
@ -0,0 +1,78 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import Button from "../Button"; |
||||||
|
import Checklist from "../Checklist"; |
||||||
|
import Condition from "../Condition"; |
||||||
|
import Mokatebat from "../Mokatebat"; |
||||||
|
import Questions from "../Questions"; |
||||||
|
import Settingss from "../Settingss"; |
||||||
|
import Tavabee from "../Tavabee"; |
||||||
|
|
||||||
|
const Tabbar = ({ tabs }) => { |
||||||
|
const [activeTab, setActiveTab] = useState(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="flex flex-col "> |
||||||
|
<div className="flex items-center"> |
||||||
|
{tabs.map((tab, index) => ( |
||||||
|
<Button |
||||||
|
key={index} |
||||||
|
text={tab.title} |
||||||
|
className={`${tab.className} ${ |
||||||
|
activeTab === tab |
||||||
|
? "bg-[#F1F3FF] text-[#3C58EA]" |
||||||
|
: "bg-white text-[#333333]" |
||||||
|
} w-full p-3 text-xs border border-b-2 border-t-2 border-[#3C58EA]`}
|
||||||
|
icon={activeTab === tab ? "images/blue-correct-thick-icon.svg" : ""} |
||||||
|
onClick={() => setActiveTab(tab)} |
||||||
|
/> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
<div className={`rounded w-full text-white flex items-center mt-5`}> |
||||||
|
{activeTab?.components} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Tabbar; |
||||||
|
|
||||||
|
Tabbar.defaultProps = { |
||||||
|
tabs: [ |
||||||
|
{ |
||||||
|
title: "تنظیمات", |
||||||
|
className: "rounded-tr-md rounded-br-md border-r-2", |
||||||
|
components: <Settingss />, |
||||||
|
active: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "سوالات", |
||||||
|
className: "", |
||||||
|
components: <Questions />, |
||||||
|
active: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "چک لیست", |
||||||
|
className: "", |
||||||
|
components: <Checklist />, |
||||||
|
active: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "مکاتبات", |
||||||
|
className: "", |
||||||
|
components: <Mokatebat />, |
||||||
|
active: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "توابع", |
||||||
|
className: "", |
||||||
|
components: <Tavabee />, |
||||||
|
active: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "شرایط و اجرا", |
||||||
|
className: "rounded-tl-md rounded-bl-md border-l-2", |
||||||
|
components: <Condition />, |
||||||
|
active: false, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
@ -0,0 +1,53 @@ |
|||||||
|
import React from "react"; |
||||||
|
import CustomSelectBox from "../CustomSelectBox"; |
||||||
|
|
||||||
|
const Tavabee = () => { |
||||||
|
return ( |
||||||
|
<div className="w-full flex flex-row items-center justify-between divide-x-2 divide-[#E3E3E3] divide-x-reverse"> |
||||||
|
<div className="flex-grow flex-1 flex flex-col pl-5"> |
||||||
|
<p className="mb-4 mt-2 font-bold text-[#00253A] text-sm">تابع شروع</p> |
||||||
|
<div className="flex flex-col gap-y-7"> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "انتخاب سرویس" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "انتخاب تابع" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="flex-grow flex-1 flex flex-col pr-5"> |
||||||
|
<p className="mb-4 mt-2 font-bold text-[#00253A] text-sm">تابع پایان</p> |
||||||
|
<div className="flex flex-col gap-y-7"> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "انتخاب سرویس" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<CustomSelectBox |
||||||
|
options={[ |
||||||
|
{ title: "انتخاب تابع" }, |
||||||
|
{ title: "شماره 1" }, |
||||||
|
{ title: "شماره 2" }, |
||||||
|
{ title: "شماره 3" }, |
||||||
|
]} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Tavabee; |
Before Width: | Height: | Size: 2.6 KiB |