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 /> - {/* {langDetector(lang */} + /> {langDetector(lang {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 + /> + {langDetector(lang + {langDetector(lang 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;