update Input.js and src/components/FormInput/index.js

master
mahdi 2 years ago
parent 6c83949338
commit 942a861b46
  1. 1
      src/components/AnimatedInput/Input.js
  2. 69
      src/components/CustomSwitch/index.js
  3. 14
      src/components/FormInput/index.js

@ -9,7 +9,6 @@ const FormFields = ({
set, set,
label, label,
borderClassname, borderClassname,
inputClassname,
type, type,
maxLength, maxLength,
max, max,

@ -0,0 +1,69 @@
import { useState } from "react";
const CustomSwitch = ({
defaultValue,
set,
values,
label,
className,
register,
}) => {
const [value, setValue] = useState(defaultValue);
return (
<>
{label && <div className={"mx-1 text-xs"}>{label}</div>}
<div
onClick={() => {
setValue(!value);
register.onChange({ target: { name: register.name, value: !value } });
}}
className={`${className} flex border border-blue-500 relative ${
values
? "rounded h-full min-h-[50px]"
: " rounded-full h-9 aspect-[1/2]"
}`}
>
<input
type="checkbox"
{...register}
checked={value ? "checked" : ""}
className="hidden"
/>
<div
style={{ transform: `translateX(${value ? 0 : -100}%)` }}
className={`${
value || values ? "bg-blue-500" : "bg-gray-300"
} absolute right-[2%] top-[5%] z-0 transition-all duration-300 ${
values
? "h-[90%] rounded w-[48%]"
: "h-[89%] rounded-full aspect-square"
}`}
></div>
{values ? (
<div className=" w-[98%] h-[90%] flex flex-row-reverse right-[1%] top-[5%] z-10 absolute text-color19">
<div
className={
" w-1/2 h-full flex items-center justify-center cursor-pointer " +
(value ? "text-white" : "")
}
>
{values[1]}
</div>
<div
className={
" w-1/2 h-full flex items-center justify-center cursor-pointer " +
(!value ? "text-white" : "")
}
>
{values[0]}
</div>
</div>
) : null}
</div>
</>
);
};
export default CustomSwitch;

@ -4,6 +4,7 @@ import { useForm } from "react-hook-form";
import DateRangePicker from "../DateRangePicker"; import DateRangePicker from "../DateRangePicker";
import Input from "../AnimatedInput/Input"; import Input from "../AnimatedInput/Input";
import CustomSelectBox from "../CustomSelectBox"; import CustomSelectBox from "../CustomSelectBox";
import CustomSwitch from "../CustomSwitch";
const FormInput = ({ items }) => { const FormInput = ({ items }) => {
const { register, getValues } = useForm(); const { register, getValues } = useForm();
@ -40,12 +41,11 @@ const FormInput = ({ items }) => {
className={``} className={``}
/> />
<CustomSelectBox /> <CustomSelectBox />
<Input <CustomSwitch
register={register("gender")} register={register("gender")}
label="جنسیت" className="flex-1 mx-5"
type="number" // defaultValue={activeUser?.gender}
borderClassname={`border-transparent `} values={["خانم", "آقا"]}
className={``}
/> />
</div> </div>
<div className="flex-grow flex-1 flex flex-col gap-y-4 px-4"> <div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
@ -80,13 +80,13 @@ const FormInput = ({ items }) => {
/> />
</div> </div>
<div className="flex-grow flex-1 flex flex-col px-4 justify-between"> <div className="flex-grow flex-1 flex flex-col px-4 justify-between">
{/* <Input <Input
register={register("lastName")} register={register("lastName")}
label="تاریخ ورود" label="تاریخ ورود"
type="text" type="text"
borderClassname={`border-transparent `} borderClassname={`border-transparent `}
className={``} className={``}
/> */} />
<DateRangePicker /> <DateRangePicker />
</div> </div>
</div> </div>

Loading…
Cancel
Save