ادامه کار | 100

master
mahdi 2 years ago
parent fca56638ec
commit fa0d709565
  1. 1
      package.json
  2. 85
      src/components/AnimatedInput/Input.js
  3. 22
      src/components/AnimatedInput/fixNumbers.js
  4. 2
      src/components/Modal/index.js
  5. 37
      src/components/RadioButton/index.js
  6. 44
      src/components/Settingss/index.js
  7. 16502
      yarn.lock

@ -9,6 +9,7 @@
"node-sass": "^7.0.1", "node-sass": "^7.0.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-hook-form": "^7.33.1",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },

@ -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;

@ -18,7 +18,7 @@ const Modal = () => {
onClick={() => setOpenModal(true)} onClick={() => setOpenModal(true)}
/> />
<div <div
className={`cursor-pointer w-screen h-screen flex items-center justify-center bg-black fixed left-0 top-0 duration-300 transition-all className={`cursor-pointer w-screen h-screen flex items-center justify-center bg-black fixed left-0 top-0 duration-300 transition-all
${openModal ? "opacity-90" : "opacity-0 pointer-events-none"} ${openModal ? "opacity-90" : "opacity-0 pointer-events-none"}
`} `}
> >

@ -0,0 +1,37 @@
import React from "react";
const RadioButton = () => {
return (
<div className="relative flex items-center justify-between rounded py-4 bg-[#FBFBFB] border focus:bg-[#f5f5f5] 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 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<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 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label for="default-radio-2" class="mr-2 text-xs text-[#00253A]">
خیر
</label>
</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;

@ -1,9 +1,16 @@
import React from "react"; import React from "react";
import { useForm } from "react-hook-form";
import CustomSelectBox from "../CustomSelectBox"; import CustomSelectBox from "../CustomSelectBox";
import Input from "../AnimatedInput/Input";
import CircleInCircle from "../CircleInCircle";
import RadioButton from "../RadioButton";
const Settingss = ({ status }) => {
const { register, getValues } = useForm();
const Settingss = () => {
return ( return (
<div className="w-full flex flex-row items-center justify-between mx-auto rounded-sm shadow-sm divide-x-2 divide-[#E3E3E3] divide-x-reverse"> <div className="w-full flex flex-row items-start justify-between mx-auto rounded-sm shadow-sm divide-x-2 divide-[#E3E3E3] divide-x-reverse">
<div className="flex-grow flex-1 flex flex-col pl-5"> <div className="flex-grow flex-1 flex flex-col pl-5">
<div className="flex flex-col gap-y-7"> <div className="flex flex-col gap-y-7">
<CustomSelectBox <CustomSelectBox
@ -14,18 +21,43 @@ const Settingss = () => {
{ title: "شماره 3" }, { title: "شماره 3" },
]} ]}
/> />
<Input
register={register("lastName")}
label="توضیحات"
type="textarea"
borderClassname={`border border-red-[#E3E3E3] `}
/>
<CustomSelectBox <CustomSelectBox
options={[ options={[
{ title: "انتخاب تابع" }, { title: ولویت دهی" },
{ title: "شماره 1" }, { title: "شماره 1" },
{ title: "شماره 2" }, { title: "شماره 2" },
{ title: "شماره 3" }, { 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 />
</div> </div>
</div> </div>
<div className="flex-grow flex-1 flex flex-col pr-5"> <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"> <div className="flex flex-col gap-y-7">
<CustomSelectBox <CustomSelectBox
options={[ options={[
@ -50,3 +82,7 @@ const Settingss = () => {
}; };
export default Settingss; export default Settingss;
Settingss.defaultProps = {
status: true,
};

16502
yarn.lock

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save