From a70498e49a95fc68d318258bb244f3ac1f3bcc16 Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Sun, 15 May 2022 12:23:19 +0430
Subject: [PATCH] update data.js

---
 public/images/SelectCheckboxarrow-top.png     | Bin 0 -> 229 bytes
 .../SelectBox/SelectCheckbox/index.js         | 121 ++++++++++++++++++
 src/components/SelectBox/index.js             |  25 ++++
 src/redux/data.js                             |  11 ++
 4 files changed, 157 insertions(+)
 create mode 100644 public/images/SelectCheckboxarrow-top.png
 create mode 100644 src/components/SelectBox/SelectCheckbox/index.js
 create mode 100644 src/components/SelectBox/index.js

diff --git a/public/images/SelectCheckboxarrow-top.png b/public/images/SelectCheckboxarrow-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/src/components/SelectBox/SelectCheckbox/index.js b/src/components/SelectBox/SelectCheckbox/index.js
new file mode 100644
index 0000000..02c3402
--- /dev/null
+++ b/src/components/SelectBox/SelectCheckbox/index.js
@@ -0,0 +1,121 @@
+import React, { useState } from "react";
+import _ from "lodash";
+import Checkbox from "../../Checkbox";
+
+const langDetector = (lang, option1, option2) => {
+  return lang === "fa" ? option1 : option2;
+};
+
+export default function SelectCheckbox(props) {
+  const [selectedItem, setSelectedItem] = useState("");
+  const [value, setValue] = useState("");
+
+  const [toggle, setToggle] = useState(false);
+  const { lang, theme, list, label, arrowIcon } = props;
+
+  const onChangeItem = (val) => {
+    setSelectedItem(val);
+  };
+
+  const onChangeText = (val) => {
+    setValue(val);
+  };
+
+  return (
+    <div
+      className={_.join(
+        [
+          "w-full select-search flex flex-col relative my-2 rounded-md",
+          langDetector(lang, "fa", "en"),
+        ],
+        " "
+      )}
+    >
+      <div
+        className={_.join(
+          [
+            "search flex flex-column relative rounded-md bg-white mb-2",
+            langDetector(lang, "fa", "en"),
+          ],
+          " "
+        )}
+        onClick={() => setToggle(() => !toggle)}
+      >
+        <input
+          type="search"
+          className="w-full py-3 px-3 text-xs bg-transparent placeholder-gray-500 border border-gray-400 rounded"
+          onChange={(e) => onChangeText(e.target.value)}
+          placeholder={langDetector(lang, "تنظیمات", "setting")}
+          disabled
+        />
+        <img
+          src={arrowIcon}
+          alt=""
+          className={_.join(
+            [
+              "cursor-pointer w-5 absolute top-1/2 transform -translate-y-1/2 transition-all duration-300",
+              langDetector(lang, "left-3", "right-3"),
+              toggle ? "" : "-rotate-180",
+            ],
+            " "
+          )}
+        />
+      </div>
+      {toggle && (
+        <div
+          className={_.join(
+            [
+              "select-search__list absolute top-12 left-0 flex flex-col px-5 py-2 border border-gray-300 rounded-md w-full z-20",
+              toggle ? "select-search__listActive" : "",
+              "transition",
+            ],
+            " "
+          )}
+        >
+          <ul className="list-none divide-y divide-gray-200 w-full">
+            {list?.map((item, i) => (
+              <>
+                <li
+                  key={i}
+                  className="w-full py-2 gap-y-1 text-gray-700 flex items-start flex-col"
+                >
+                  <div className="flex items-center">
+                    <Checkbox checked={false} />
+                    <span className="text-xs mr-2">{item?.name}</span>
+                  </div>
+                  <ul className="w-full p-0 mx-auto my-0">
+                    {item.sublist?.map((item1, j) => (
+                      <>
+                        <li
+                          className="flex flex-row flex-1 px-5 pb-0 py-1 items-center"
+                          key={j}
+                        >
+                          <Checkbox checked={false} />
+                          <span className="text-xs mr-2">{item1?.name}</span>
+                        </li>
+                      </>
+                    ))}
+                  </ul>
+                </li>
+              </>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+SelectCheckbox.defaultProps = {
+  lang: "fa",
+  theme: "light",
+  label: "کشور خود را انتخاب کنید",
+  arrowIcon: "images/arrow-top.png",
+
+  list: [
+    { name: "وسایل آشپزخانه", sublist: [{ name: "اتو" }] },
+    { name: "غریق نجات از تمام جهات" },
+    { name: "قاشق و چنگال" },
+    { name: "وسایل آشپزخانه" },
+  ],
+};
diff --git a/src/components/SelectBox/index.js b/src/components/SelectBox/index.js
new file mode 100644
index 0000000..17828fc
--- /dev/null
+++ b/src/components/SelectBox/index.js
@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+import SelectCheckbox from "./SelectCheckbox";
+
+function Advertisements() {
+  const list = {
+    1: <SelectCheckbox />,
+  };
+  const [type, setType] = useState(1);
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="mb-10 w-20 bg-gray-200"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default Advertisements;
diff --git a/src/redux/data.js b/src/redux/data.js
index 3bfd06a..e92aaf8 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -32,6 +32,7 @@ import RadioButton from "../components/RadioButton";
 import Range from "../components/Range";
 import Datepicker from "../components/Datepicker";
 import SearchWithSuggestion from "../components/SearchWithSuggestion";
+import SelectBox from "../components/SelectBox";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -665,6 +666,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Select Box",
+    author: "Ashrafi",
+    props: [],
+    content: {
+      name: "Select Box",
+      component: <SelectBox />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",