Compare commits
35 Commits
44 changed files with 5456 additions and 1531 deletions
File diff suppressed because it is too large
Load Diff
|
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 |
Loading…
Reference in new issue