From 902f569bac661d962c608b7e1e2f095d8479e605 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Sat, 30 Oct 2021 16:14:06 +0330 Subject: [PATCH] reza added some component --- src/App.tsx | 6 + src/components/Radio/index.scss | 60 ++++++++++ src/components/Radio/index.tsx | 12 ++ src/components/SelectCheckbox/index.scss | 18 ++- src/components/SelectCheckbox/index.tsx | 47 ++++---- src/components/SelectRadio/arrow.png | Bin 0 -> 258 bytes src/components/SelectRadio/icon.png | Bin 0 -> 857 bytes src/components/SelectRadio/index.scss | 118 ++++++++++++++++++ src/components/SelectRadio/index.tsx | 146 +++++++++++++++++++++++ src/components/SelectRadio/x.png | Bin 0 -> 346 bytes src/global.scss | 1 + 11 files changed, 386 insertions(+), 22 deletions(-) create mode 100644 src/components/Radio/index.scss create mode 100644 src/components/Radio/index.tsx create mode 100644 src/components/SelectRadio/arrow.png create mode 100644 src/components/SelectRadio/icon.png create mode 100644 src/components/SelectRadio/index.scss create mode 100644 src/components/SelectRadio/index.tsx create mode 100644 src/components/SelectRadio/x.png 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 0000000000000000000000000000000000000000..4714949fc619aee56ea02d5aa7a3d2310c121c5a GIT binary patch literal 258 zcmeAS@N?(olHy`uVBq!ia0vp^Vj#@H1|*Mc$*~4fEX7WqAsj$Z!;#Vfqf*j=5Sn;9<1|8A^Mny|Ow#ucWJY=#hP`3~;JH_QgL8jcrl z+^AsGSoj|ZT#|U&rFP91v*!ICI*Bvo+$HH%izsYD{D3)#x#B^><}4=D6~7!IS6wN5mU9&To(l zyfI15vANUtyvpv1D+xu;4CUt*-*8#MXyPr(aQbz=`2M2vxj;`ac)I$ztaD0e0stO9 BTSfo? literal 0 HcmV?d00001 diff --git a/src/components/SelectRadio/icon.png b/src/components/SelectRadio/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..81d586c7fa7862e5d51c832c1c1a94814283778a GIT binary patch literal 857 zcmV-f1E&0mP)(+L_Ts5c;; zpmc)L3DW=bJ>?Wfw(L0WrFZD=9SN57KK*)6eoAt3#4R~uwv$0{v)SyUEpD=2uix`I zNs^WRyz2Xp`F#F5WbwV>1av3Ishr-(Dxj9O6l|&fU-tp+43}jYK!t1~`y*SLq0Y)V zS3jNu4LoB$prj!4q9`8wC>e#5GaLammHm?C0$Fr*Vz6`dCj{8?dyVIBw6($+*mqNF zrb%(KS2N{Ndo8=wRAp?UMmPiesR`(F(`B-lGtGIfJ^-@S0P?x91>ro!E;KUjx(zWn zp4;50b|$-Oo4X0_iv~_@a8&*-P<|f+e9`}Y%PyNTc?Zs7gE$)$V=-V$lxOw(EVw+> zKLp2sQw<q-}kpQEs<|s_P zYxz8l!4aTOp;e3}p|@Kk#@6Ay*;X$RqUX;cK`nC;WhXI0aGX8mApv4@36Qr&D_o`y zg}|ck+nBSy&jnYBA>XM#)>kgqgHLa8HEFvjNB#9pwv#n|x2bP`!I2OYq=eR{{Wl3g zQOOD(>nrH1M4$dr&F$FE5mtYFQD2=2?y`@AA$h`<^-bYj15hmuEvBgw<^@a{&9Q=#2XBI- zpe42^O+K37xOo8<555OTzfzGoNLUJfo&G%6}St{b6;1#6Pz1l7m{4x+3t7VWTp3+Wa7MZ z4Ji2z7qH$9YzMFxoWC;LZg;Au-ZK&iHCIjBRadA9aBsM}gQ4F&z)b;gG;kK%Q{vgh j@lnAIN{FFb*LVD1*@<&E6n{BQ00000NkvXXu0mjfUL%A| literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..df19f25a50e39d8ff74765f1bda962aa02b85ae5 GIT binary patch literal 346 zcmV-g0j2(lP){W&YxE9d!nhdrk`veoHDE{Q3bsNmSOfGz1