From e5265fbcbabeb1fb128ee00a1f73292a779be8b6 Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Sun, 15 May 2022 12:31:01 +0430
Subject: [PATCH] update src/components/SelectBox/index.js

---
 public/images/SelectRadioarrow-top.png        | Bin 0 -> 229 bytes
 public/images/SelectRadiox.png                | Bin 0 -> 346 bytes
 src/components/SelectBox/SelectRadio/index.js | 104 ++++++++++++++++++
 src/components/SelectBox/index.js             |   2 +
 4 files changed, 106 insertions(+)
 create mode 100644 public/images/SelectRadioarrow-top.png
 create mode 100644 public/images/SelectRadiox.png
 create mode 100644 src/components/SelectBox/SelectRadio/index.js

diff --git a/public/images/SelectRadioarrow-top.png b/public/images/SelectRadioarrow-top.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b296a6563cec4c1f9a16ad37d17d500057591f5
GIT binary patch
literal 229
zcmeAS@N?(olHy`uVBq!ia0vp^f*{Pn1|+R>-G2comSQK*5Dp-y;YjHK^5=NEIEGmG
zU%lkW*W|#%df~s}<Jvaq4FcPXnLnl!vBdPXGxQ&lO3FHx($TiiaAIr8%_aJOGdo4Q
zv?XqEZ2COcnXOXhO=$OCiQ_-EsTFb^X1e2kn5p$`aD-52L&I|emlLkdX(y}=rfuWv
z*jYN2tyV!(VcmL1;YEy|E6(J;@jr2Id+!9_o((0v*WHxzES}}H{rR+0`sa;&<$wNj
Z)DOJ$7D~CsD*|*UgQu&X%Q~loCIIOLSCRk#

literal 0
HcmV?d00001

diff --git a/public/images/SelectRadiox.png b/public/images/SelectRadiox.png
new file mode 100644
index 0000000000000000000000000000000000000000..df19f25a50e39d8ff74765f1bda962aa02b85ae5
GIT binary patch
literal 346
zcmV-g0j2(lP)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00004b3#c}2nYxW
zd<bNS0003INkl<ZI8U9_J#xY@5C!0U&d9aTktSxi04YLBk}_4o2^fyR4Y)yExu(Q4
zZ~%hu69+Hi$ADvLC0mUON#BgLZw0l=zlh7H;<Z1eu4A1?;cxlP2xd^LpE(E<CQgcB
zf85&Cm@0S;qPPT}^-QF)T>{W&YxE9d!nhdrk`veoHDE{Q3bsNmSOfGz1<VMFr~|Wt
zM$`in!5YeCN(dg0(Wt6vi&w2ErcG+OO%Vhid|Et5L&~ZQUam<@vCgTU+~K!_|K5z4
z2R`99gO&pLbW{^`RMUmlLC<JN=neG5T)lq=TVfK5u9yu)nC%w&&l$NoKnip9rhCS_
s{;~6zLDAn!ZzCOYtvzJ<+dibt0p?~0DSF=W5dZ)H07*qoM6N<$f;?Z2i2wiq

literal 0
HcmV?d00001

diff --git a/src/components/SelectBox/SelectRadio/index.js b/src/components/SelectBox/SelectRadio/index.js
new file mode 100644
index 0000000..57ea61a
--- /dev/null
+++ b/src/components/SelectBox/SelectRadio/index.js
@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+import _ from "lodash";
+import Radio from "../../RadioButton/Radio1";
+
+const langDetector = (lang, option1, option2) => {
+  return lang === "fa" ? option1 : option2;
+};
+
+export default function SelectRadio(props) {
+  const [selectedItem, setSelectedItem] = useState("");
+  const [value, setValue] = useState("");
+
+  const [toggle, setToggle] = useState(false);
+  const { lang, theme, list, label, xIcon, arrowIcon } = props;
+
+  const onChangeItem = (val) => {
+    setSelectedItem(val);
+  };
+
+  const onChangeText = (val) => {
+    setValue(val);
+  };
+
+  return (
+    <div
+      className={_.join(
+        [
+          "w-full flex flex-col relative rounded-md my-2",
+          langDetector(lang, "fa", "en"),
+        ],
+        " "
+      )}
+    >
+      <div
+        className={_.join(
+          [
+            "flex flex-col relative bg-white rounded-md ",
+            langDetector(lang, "fa", "en"),
+          ],
+          " "
+        )}
+        onClick={() => setToggle(() => !toggle)}
+      >
+        <input
+          type="search"
+          className="py-3 px-3 text-xs rounded-md bg-transparent focus:ring-1 outline-none    focus:placeholder-blue-500 placeholder-gray-500"
+          onChange={(e) => onChangeText(e.target.value)}
+          placeholder={langDetector(lang, "تنظیمات", "setting")}
+          disabled
+        />
+        <img
+          src={arrowIcon}
+          alt=""
+          className={_.join(
+            [
+              "w-5 absolute top-1/2 transform -translate-y-1/2 cursor-pointer transition-all duration-300",
+              langDetector(lang, "left-3", "right-3"),
+              toggle ? "" : "-rotate-180",
+            ],
+            " "
+          )}
+        />
+      </div>
+      {toggle && (
+        <div
+          className={_.join(
+            [
+              "w-full absolute top-12 left-0 flex flex-col  rounded-md bg-white z-20 border border-gray-300",
+              toggle ? "select-search__listActive" : "",
+            ],
+            " "
+          )}
+        >
+          <ul className="list-none divide-y divide-gray-200 py-1 text-gray-700 w-full px-3">
+            {list?.map((item, i) => (
+              <>
+                <li
+                  key={i}
+                  className="transition w-full text-gray-700 items-center py-3 flex-col justify-center"
+                >
+                  <Radio label={item?.name} name="reza" />
+                </li>
+              </>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+SelectRadio.defaultProps = {
+  lang: "fa",
+  theme: "light",
+  xIcon: "images/SelectRadiox.png",
+  arrowIcon: "images/SelectRadioarrow-top.png",
+
+  list: [
+    { name: "وسایل آشپزخانه", sublist: [{ name: "اتو" }] },
+    { name: "غریق نجات از تمام جهات" },
+    { name: "قاشق و چنگال" },
+    { name: "وسایل آشپزخانه" },
+  ],
+};
diff --git a/src/components/SelectBox/index.js b/src/components/SelectBox/index.js
index 17828fc..a396904 100644
--- a/src/components/SelectBox/index.js
+++ b/src/components/SelectBox/index.js
@@ -1,10 +1,12 @@
 import React, { useState } from "react";
 
 import SelectCheckbox from "./SelectCheckbox";
+import SelectRadio from "./SelectRadio";
 
 function Advertisements() {
   const list = {
     1: <SelectCheckbox />,
+    2: <SelectRadio />,
   };
   const [type, setType] = useState(1);
   return (