From 6677695b78d579aca801bca67221c2ee00abf908 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Thu, 28 Jul 2022 18:57:41 +0300
Subject: [PATCH] checkbox Enhanced

---
 src/components/Checkbox.tsx | 79 ++++++++++++++++++++++++++++---------
 1 file changed, 61 insertions(+), 18 deletions(-)

diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index ca6386e..96ec6e0 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,28 +1,71 @@
 import React from "react";
 
-type CheckBoxProps = {
-  /**
-   * here any text can be written to be a label for the checkbox
-   */
-  label: string;
-  /**
-   * onChange callback
-   */
-  onChange?: (value: boolean) => void;
-} & Omit<React.HTMLProps<HTMLInputElement>, "onChange" | "type">;
+/**
+ * [*] A Checkbox Component
+ * 
+ * [*] when the label is clicked => The checkbox will be checked
+ * 
+ * [*] for each item(row) you have to put the following in App.tsx:
+ *    const [isCheckedA, setIsCheckedA] = useState(true);
+      const handleChangeA = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setIsCheckedA(e.target.checked);
+      }; 
+ * 
+ * [*] to create this component, you have to provide the following:
+ * [1] label
+ * [2] if the item is checked or not.
+ * 
+ * [*] A good example will be:
+const App: React.FC = () => 
+{
+    const [isCheckedA, setIsCheckedA] = useState(true);
+    const handleChangeA = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setIsCheckedA(e.target.checked);
+    };
 
-const CheckBox = ({ className, onChange, label, ...props }: CheckBoxProps) => {
+    const [isCheckedB, setIsCheckedB] = useState(true);
+    const handleChangeB = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setIsCheckedB(e.target.checked);
+    };
+
+    return (
+      <div className="App">
+        
+        <Checkbox
+          handleChange={handleChangeA}
+          isChecked={isCheckedA}
+          label=" Leo Tolstoy "
+        />
+
+        <Checkbox
+          handleChange={handleChangeB}
+          isChecked={isCheckedB}
+          label=" Fyodor Dostoevsky "
+        />
+
+      </div>
+    );
+};
+
+*/
+
+interface Props {
+  isChecked: boolean;
+  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  label: string;
+}
+
+const Checkbox = (props: Props) => {
   return (
-    <div className="d-flex align-center">
+    <div>
       <input
-        onChange={() => onChange && onChange(!props.checked)}
-        className="hover:bg-sky-700 focus:bg-sky-900 active:bg-sky-300 text-black"
         type="checkbox"
-        {...props}
+        id={props.label}
+        checked={props.isChecked}
+        onChange={props.handleChange}
       />
-      <label> {label} </label>
+      <label htmlFor={props.label}>{props.label}</label>
     </div>
   );
 };
-
-export default CheckBox;
+export default Checkbox;