diff --git a/src/App.tsx b/src/App.tsx
index 300a94e..7473ee2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,9 @@ import PopularSearch from "./components/PopularSearch";
import Input from "./components/Input";
import Country from "./components/SelectSearch";
import SelectCheckbox from "./components/SelectCheckbox";
+import SelectSearch from "./components/SelectRadio";
+import SelectRadio from "./components/SelectRadio";
+import Radio from "./components/Radio";
function App() {
return (
@@ -23,6 +26,9 @@ function App() {
+
+
+
);
}
diff --git a/src/components/Radio/index.scss b/src/components/Radio/index.scss
new file mode 100644
index 0000000..dfa4c09
--- /dev/null
+++ b/src/components/Radio/index.scss
@@ -0,0 +1,60 @@
+$color1: #f4f4f4;
+$color2: #3197EE;
+
+.radio {
+ margin: 0.5rem;
+ input[type="radio"] {
+ position: absolute;
+ opacity: 0;
+ + .radio-label {
+ &:before {
+ content: '';
+ background: $color1;
+ border-radius: 100%;
+ border: 1px solid darken($color1, 25%);
+ display: inline-block;
+ width: 1.4em;
+ height: 1.4em;
+ position: relative;
+ top: -0.2em;
+ margin-right: 1em;
+ vertical-align: top;
+ cursor: pointer;
+ text-align: center;
+ transition: all 250ms ease;
+ }
+ }
+ &:checked {
+ + .radio-label {
+ &:before {
+ background-color: $color2;
+ box-shadow: inset 0 0 0 4px $color1;
+ }
+ }
+ }
+ &:focus {
+ + .radio-label {
+ &:before {
+ outline: none;
+ border-color: $color2;
+ }
+ }
+ }
+ &:disabled {
+ + .radio-label {
+ &:before {
+ box-shadow: inset 0 0 0 4px $color1;
+ border-color: darken($color1, 25%);
+ background: darken($color1, 25%);
+ }
+ }
+ }
+ + .radio-label {
+ &:empty {
+ &:before {
+ margin-right: 0;
+ }
+ }
+ }
+ }
+ }
\ No newline at end of file
diff --git a/src/components/Radio/index.tsx b/src/components/Radio/index.tsx
new file mode 100644
index 0000000..af8dc41
--- /dev/null
+++ b/src/components/Radio/index.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function Radio(props: any) {
+ return (
+
+ );
+}
diff --git a/src/components/SelectCheckbox/index.scss b/src/components/SelectCheckbox/index.scss
index 3761a69..4561bf7 100644
--- a/src/components/SelectCheckbox/index.scss
+++ b/src/components/SelectCheckbox/index.scss
@@ -75,16 +75,30 @@ $success: #23c933;
ul{
list-style: none;
padding: 0px;
+ width : 100%;
hr{
border: 1px solid $gray;
opacity: 0.3 !important;
}
li{
+ width: 100%;
padding: 5px 0px;
color: $gray;
display: flex;
- align-items: center;
-
+ align-items: flex-start;
+ flex-direction: column;
+ div{
+ display: flex;
+ }
+ ul{
+ margin: 0px auto;
+ li{
+ display: flex;
+ flex-direction: row;
+ flex: 1;
+ padding: 5px 20px 0px;
+ }
+ }
}
}
}
diff --git a/src/components/SelectCheckbox/index.tsx b/src/components/SelectCheckbox/index.tsx
index da6e92e..8b3df0e 100644
--- a/src/components/SelectCheckbox/index.tsx
+++ b/src/components/SelectCheckbox/index.tsx
@@ -3,6 +3,7 @@ import _ from "lodash";
import Checkbox from "../Checkbox";
import xIcon from "./x.png";
+import arrowIcon from "./arrow.png";
interface Types {
lang?: string;
@@ -42,8 +43,7 @@ interface Value {
const langDetector = (lang: string, option1: any, option2: any) => {
return lang === "fa" ? option1 : option2;
};
-
-export default function SelectSearch(props: Types) {
+export default function SelectCheckbox(props: Types) {
const [selectedItem, setSelectedItem] = useState("");
const [value, setValue] = useState("");
@@ -70,20 +70,17 @@ export default function SelectSearch(props: Types) {
["search", langDetector(lang as string, "fa", "en")],
" "
)}
+ onClick={() => setToggle(() => !toggle)}
>
onChangeText(e.target.value)}
- onFocus={(e: any) => setToggle(true)}
- placeholder={langDetector(
- lang as string,
- "تنظیمات",
- "setting"
- )}
+ placeholder={langDetector(lang as string, "تنظیمات", "setting")}
+ disabled
/>
- {/* */}
+ />
{list?.map((item: any, i: any) => (
<>
-
-
- {item?.name}
+
+
+
+ {item?.name}
+
+
+ {item.sublist?.map((item1: any, j: any) => (
+ <>
+ {j !== item1.sublist?.length - 1 && }
+
+
+ {item1?.name}
+
+ >
+ ))}
+
{i !== list?.length - 1 && }
>
@@ -139,14 +146,14 @@ export default function SelectSearch(props: Types) {
);
}
-SelectSearch.defaultProps = {
+SelectCheckbox.defaultProps = {
lang: "fa",
theme: "light",
label: "کشور خود را انتخاب کنید",
list: [
- { name: "وسایل آشپزخانه" },
+ { name: "وسایل آشپزخانه", sublist: [{ name: "اتو" }] },
{ name: "غریق نجات از تمام جهات" },
{ name: "قاشق و چنگال" },
- { name: "وسایل آشپزخانه"},
+ { name: "وسایل آشپزخانه" },
],
};
diff --git a/src/components/SelectRadio/arrow.png b/src/components/SelectRadio/arrow.png
new file mode 100644
index 0000000..4714949
Binary files /dev/null and b/src/components/SelectRadio/arrow.png differ
diff --git a/src/components/SelectRadio/icon.png b/src/components/SelectRadio/icon.png
new file mode 100644
index 0000000..81d586c
Binary files /dev/null and b/src/components/SelectRadio/icon.png differ
diff --git a/src/components/SelectRadio/index.scss b/src/components/SelectRadio/index.scss
new file mode 100644
index 0000000..0472b7d
--- /dev/null
+++ b/src/components/SelectRadio/index.scss
@@ -0,0 +1,118 @@
+$primary: #06bace;
+$gray: #dbdbdb;
+$danger: #e00a0a;
+$success: #23c933;
+
+.select-search {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ .search {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ img{
+ cursor: pointer;
+ }
+ &__icon {
+ width: 27px;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ &Fa {
+ left: 10px;
+ }
+ &En {
+ right: 10px;
+ }
+ }
+
+ &__x {
+ width: 12px;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ opacity: 0;
+ &Fa {
+ right: 10px;
+ }
+ &En {
+ left: 10px;
+ }
+ &Active{
+ opacity: 1;
+ }
+ }
+
+ input {
+ padding: 15px 30px 15px 30px;
+ font-size: 14px;
+ border: 1.7px solid $gray;
+ border-radius: 5px;
+ background-color: inherit;
+ &::placeholder {
+ color: $gray;
+ }
+ &:focus {
+ border-color: $primary;
+ outline: 0px;
+ color: #246e8a;
+ &::placeholder {
+ color: #246e8a;
+ }
+ }
+ }
+ }
+ &__list{
+ position: relative;
+ bottom: -8px;
+ left: 0px;
+ display: flex;
+ flex-direction: column;
+ padding: 0px 20px;
+ border: 1.7px solid $gray;
+ border-radius: 5px;
+ ul{
+ list-style: none;
+ padding: 0px;
+ width : 100%;
+ hr{
+ border: 1px solid $gray;
+ opacity: 0.3 !important;
+ }
+ li{
+ width: 100%;
+ padding: 5px 0px;
+ color: $gray;
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+ justify-content: center;
+ div{
+ display: flex;
+ }
+ ul{
+ margin: 0px auto;
+ li{
+ display: flex;
+ flex-direction: row;
+ flex: 1;
+ padding: 5px 20px 0px;
+ }
+ }
+ }
+ }
+ }
+
+
+}
+
+.en {
+ direction: ltr;
+ text-align: left;
+}
+
+.fa {
+ direction: rtl;
+ text-align: right;
+}
diff --git a/src/components/SelectRadio/index.tsx b/src/components/SelectRadio/index.tsx
new file mode 100644
index 0000000..9185f57
--- /dev/null
+++ b/src/components/SelectRadio/index.tsx
@@ -0,0 +1,146 @@
+import React, { useState } from "react";
+import _ from "lodash";
+import Radio from "../Radio";
+
+import xIcon from "./x.png";
+import arrowIcon from "./arrow.png";
+
+interface Types {
+ lang?: string;
+ theme?: string;
+ list?: Array;
+ label?: string;
+}
+
+interface Value {
+ icon: any;
+ name: string;
+}
+
+// const inputStatusHandler = (
+// value: string,
+// focus: boolean,
+// status: boolean,
+// primary: string,
+// success: string,
+// danger: string
+// ) => {
+// if (!focus) {
+// return "";
+// } else {
+// if (!value) {
+// return primary;
+// } else {
+// if (status) {
+// return success;
+// } else {
+// return danger;
+// }
+// }
+// }
+// };
+
+const langDetector = (lang: string, option1: any, option2: any) => {
+ return lang === "fa" ? option1 : option2;
+};
+
+export default function SelectRadio(props: Types) {
+ const [selectedItem, setSelectedItem] = useState("");
+ const [value, setValue] = useState("");
+
+ const [toggle, setToggle] = useState(false);
+ const { lang, theme, list, label } = props;
+
+ const onChangeItem = (val: string) => {
+ setSelectedItem(val);
+ };
+
+ const onChangeText = (val: string) => {
+ setValue(val);
+ };
+
+ return (
+
+
setToggle(() => !toggle)}
+ >
+
onChangeText(e.target.value)}
+ placeholder={langDetector(lang as string, "تنظیمات", "setting")}
+ disabled
+ />
+
+
setValue("")}
+ />
+
+ {toggle && (
+
+
+ {list?.map((item: any, i: any) => (
+ <>
+
+
+
+ {i !== list?.length - 1 && }
+ >
+ ))}
+
+
+ )}
+
+ );
+}
+
+SelectRadio.defaultProps = {
+ lang: "fa",
+ theme: "light",
+ label: "کشور خود را انتخاب کنید",
+ list: [
+ { name: "وسایل آشپزخانه", sublist: [{ name: "اتو" }] },
+ { name: "غریق نجات از تمام جهات" },
+ { name: "قاشق و چنگال" },
+ { name: "وسایل آشپزخانه" },
+ ],
+};
diff --git a/src/components/SelectRadio/x.png b/src/components/SelectRadio/x.png
new file mode 100644
index 0000000..df19f25
Binary files /dev/null and b/src/components/SelectRadio/x.png differ
diff --git a/src/global.scss b/src/global.scss
index e77e30b..7ee45d6 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -4,6 +4,7 @@
@import './components/SelectSearch/index.scss';
@import './components/Checkbox/index.scss';
@import './components/SelectCheckbox/index.scss';
+@import './components/Radio/index.scss';
.app{
padding: 50px 20px;