From 942a861b467c8427ccc24e1c1bf21f8bd7129832 Mon Sep 17 00:00:00 2001 From: mahdi Date: Sun, 1 May 2022 10:46:06 +0430 Subject: [PATCH] update Input.js and src/components/FormInput/index.js --- src/components/AnimatedInput/Input.js | 1 - src/components/CustomSwitch/index.js | 69 +++++++++++++++++++++++++++ src/components/FormInput/index.js | 14 +++--- 3 files changed, 76 insertions(+), 8 deletions(-) create mode 100644 src/components/CustomSwitch/index.js diff --git a/src/components/AnimatedInput/Input.js b/src/components/AnimatedInput/Input.js index 35994f6..3bc1b80 100644 --- a/src/components/AnimatedInput/Input.js +++ b/src/components/AnimatedInput/Input.js @@ -9,7 +9,6 @@ const FormFields = ({ set, label, borderClassname, - inputClassname, type, maxLength, max, diff --git a/src/components/CustomSwitch/index.js b/src/components/CustomSwitch/index.js new file mode 100644 index 0000000..8c8511f --- /dev/null +++ b/src/components/CustomSwitch/index.js @@ -0,0 +1,69 @@ +import { useState } from "react"; + +const CustomSwitch = ({ + defaultValue, + set, + values, + label, + className, + register, +}) => { + const [value, setValue] = useState(defaultValue); + + return ( + <> + {label &&
{label}
} +
{ + 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]" + }`} + > + +
+ + {values ? ( +
+
+ {values[1]} +
+
+ {values[0]} +
+
+ ) : null} +
+ + ); +}; + +export default CustomSwitch; diff --git a/src/components/FormInput/index.js b/src/components/FormInput/index.js index d462d9a..292996d 100644 --- a/src/components/FormInput/index.js +++ b/src/components/FormInput/index.js @@ -4,6 +4,7 @@ import { useForm } from "react-hook-form"; import DateRangePicker from "../DateRangePicker"; import Input from "../AnimatedInput/Input"; import CustomSelectBox from "../CustomSelectBox"; +import CustomSwitch from "../CustomSwitch"; const FormInput = ({ items }) => { const { register, getValues } = useForm(); @@ -40,12 +41,11 @@ const FormInput = ({ items }) => { className={``} /> -
@@ -80,13 +80,13 @@ const FormInput = ({ items }) => { />
- {/* */} + />