From fec4a93dfd7fda1474bdbc9e98407abfd02ba760 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Wed, 27 Oct 2021 18:14:53 +0330 Subject: [PATCH] reza added PopularSearch and Input --- src/App.tsx | 16 ++- src/components/Input/danger.png | Bin 0 -> 779 bytes src/components/Input/index.scss | 116 +++++++++++++++ src/components/Input/index.tsx | 179 ++++++++++++++++++++++++ src/components/Input/tick.png | Bin 0 -> 411 bytes src/components/PopularSearch/icon.png | Bin 0 -> 857 bytes src/components/PopularSearch/index.scss | 115 +++++++++++++++ src/components/PopularSearch/index.tsx | 102 ++++++++++++++ src/components/PopularSearch/x.png | Bin 0 -> 346 bytes src/components/Search/index.scss | 3 + src/components/Search/index.tsx | 7 +- src/global.scss | 3 +- 12 files changed, 532 insertions(+), 9 deletions(-) create mode 100644 src/components/Input/danger.png create mode 100644 src/components/Input/index.scss create mode 100644 src/components/Input/index.tsx create mode 100644 src/components/Input/tick.png create mode 100644 src/components/PopularSearch/icon.png create mode 100644 src/components/PopularSearch/index.scss create mode 100644 src/components/PopularSearch/index.tsx create mode 100644 src/components/PopularSearch/x.png diff --git a/src/App.tsx b/src/App.tsx index 64d11c0..2655dc8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,22 @@ -import './global.scss'; -import Search from './components/Search'; +import "./global.scss"; +import Search from "./components/Search"; +import PopularSearch from "./components/PopularSearch"; +import Input from "./components/Input"; function App() { return (
+
+ +
+
); } diff --git a/src/components/Input/danger.png b/src/components/Input/danger.png new file mode 100644 index 0000000000000000000000000000000000000000..a171ed0b371da0dbf4ae72eb186f08c837e95cbb GIT binary patch literal 779 zcmV+m1N8ifP)tY?!yFj+K*Jx)%D$7jZ~m7$2*tofMur)r`}{g(?Pr-?fY3ZGQeq z#)s0mkYiW9<9rkHcO zx>AzT;CkUf@qnMdRiLh}iod9cU{L%#d6Gf?-8;PM;E_j4as!!2$Y4;}0ZeX*;G74{ zAnzs5o)usg6{RRR{ycxq@Z7@Uo!p~G!eE0R@bX%*85nGnJamYk5|f`>S$+C@^{T7v zr%$Kgh0tSF)w#Us>5=@!#hm0A{-Lw;``3B%7R%hal@8L6QfxlAvpc}y>uV-ZQbLm9 zAG^A~e_gq9xAeJl{xC;j6!gI4Hyaq%p}>NkpIJ-{uj4^s`Z_rH)4#WGSHN6~(_mZeceyWoEaq;Ahj*V_?(Q2kZHD@glf-`g#2L$6sg8{AKv?!4njw=q|uo=YbS~ ziqnSz0)arLA+v;p>%Y&RwLs!byu8`wdCD#iZYq9_U002ov JPDHLkV1mo=fEEA% literal 0 HcmV?d00001 diff --git a/src/components/Input/index.scss b/src/components/Input/index.scss new file mode 100644 index 0000000..436fa94 --- /dev/null +++ b/src/components/Input/index.scss @@ -0,0 +1,116 @@ +$primary: #06BACE; +$gray: #dbdbdb; +$danger: #E00A0A; +$success: #23C933; + +.input { + display: flex; + flex-direction: column; + position: relative; + input{ + flex: 1; + border-radius: 5px; + border: 1.7px solid $gray; + padding: 15px 11px 15px 30px; + font-size: 14px; + outline: 0px; + } + label{ + position: absolute; + top: 50%; + font-size: 13px; + transform: translateY(-50%); + color: $gray; + background-color: white; + padding: 0px 5px; + } + &__labelFa{ + right: 15px; + } + &__labelEn{ + left: 15px; + } + &__labelFocus{ + top: 0px !important; + font-size: 9px !important; + color: $primary !important; + } + &__labelDanger{ + top: 0px !important; + font-size: 9px !important; + color: $danger !important; + } + &__labelSuccess{ + top: 0px !important; + font-size: 9px !important; + color: $success !important; + } + + + &__inputActive{ + border-color: $primary !important; + } + &__inputSuccess{ + border-color: $success !important; + } + &__inputDanger{ + border-color: $danger !important; + } + + & img{ + width : 18px; + position: absolute; + top: 50%; + transform: translateY(-50%); + } + &__iconFa{ + left: 15px; + } + &__iconEn{ + right: 15px; + } + &__message{ + position: absolute; + bottom: -25px; + font-size: 12px; + &En{ + left: 5px; + } + &Fa{ + right: 5px; + } + &Success{ + color: $success; + } + &Danger{ + color: $danger; + } + } + &__length{ + position: absolute; + bottom: -25px; + font-size: 12px; + &En{ + right: 5px; + } + &Fa{ + left: 5px; + } + &Success{ + color: $success; + } + &Danger{ + color: $danger; + } + } +} + +.en { + direction: ltr; + text-align: left; +} + +.fa { + direction: rtl; + text-align: right; +} diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx new file mode 100644 index 0000000..2d7ba78 --- /dev/null +++ b/src/components/Input/index.tsx @@ -0,0 +1,179 @@ +import React, { useState } from "react"; +import _ from "lodash"; + +import tick from "./tick.png"; +import danger from "./danger.png"; + +interface Types { + lang?: string; + theme?: string; + inputMode?: any; + label?: string; + status?: boolean; + maxLength?: number; + message?: string; +} + +const langDetector = (lang: string, option1: any, option2: any) => { + return lang === "fa" ? option1 : option2; +}; + +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; + } + } + } +}; + +export default function Input(props: Types) { + const [value, setValue] = useState(""); + const [focusToggle, setFocusToggle] = useState(false); + + const { lang, theme, inputMode, label, status, maxLength, message } = props; + + const onChange = (val: string) => { + setValue(val); + }; + + return ( +
+ + onChange(e.target.value)} + value={value} + onFocus={() => setFocusToggle(true)} + onBlur={() => !value && setFocusToggle(false)} + maxLength={maxLength} + /> + {!status && value && ( + {langDetector(lang + )} + {status && value && ( + {langDetector(lang + )} + + {value && !status && ( + + {message} + + )} + {value && ( + + {value.length + '/' + maxLength} + + )} +
+ ); +} diff --git a/src/components/Input/tick.png b/src/components/Input/tick.png new file mode 100644 index 0000000000000000000000000000000000000000..805f74ab2990e2f79bc6c22ac1a011d06361832d GIT binary patch literal 411 zcmV;M0c8G(P)QZqonY)~En<(iuiN1-H@()!UqpU*k>0NY{NOVQ@v{2CLygB>`m6S@)@9B8et zwgx$2@18`Q5#$~BP;3Qq7Vd~?n51qJNV=*oNm;{XFNENlPsvi7fj*D>QL2nJ0%hTT z@+AP+^!6e4o<~MUBak!i1@!faX8HwN=&P<=6(9=jlny4yai|XEtj=j??p~6TTg})9 zVj|R$ROP#1f+N@p0S9St>oEIC_!e5ze1Axmg7rI@wPKVNuq>A^{+5PIpWVEA(YQ)= zk&zR+WDAZ-y2Ms8F#b*H7}Jlj7x{J83sC;^ENf~GqX~^EmkU$6a=4Y&%;q1M)+!%! zQMyf)`#1jI!daw@?Pm{5rE3IAFPC6Jxpa*|n;z7i{Q#<%qXYOkGNAwf002ovPDHLk FV1iEjt*`(9 literal 0 HcmV?d00001 diff --git a/src/components/PopularSearch/icon.png b/src/components/PopularSearch/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/PopularSearch/index.scss b/src/components/PopularSearch/index.scss new file mode 100644 index 0000000..73d7abc --- /dev/null +++ b/src/components/PopularSearch/index.scss @@ -0,0 +1,115 @@ +$primary: #246e8a; +$gray: #dbdbdb; +$primary1: #EEFAFF; + +.search { + display: flex; + flex-direction: column; + position: relative; + img{ + cursor: pointer; + } + &__icon { + width: 27px; + position: absolute; + top: 50%; + transform: translateY(-50%); + &Fa { + left: 20px; + } + &En { + right: 20px; + } + } + + &__x { + width: 15px; + position: absolute; + top: 50%; + transform: translateY(-50%); + opacity: 0; + &Fa { + right: 15px; + } + &En { + left: 10px; + } + &Active{ + opacity: 1; + } + } + + input { + padding: 15px 40px 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: $primary; + &::placeholder { + color: $primary; + } + } + } + + &__populars{ + margin-top: 10px; + width: 100%; + border: 1.7px solid $gray; + border-radius: 5px; + background-color: white; + display: flex; + flex-direction: column; + list-style: none; + position: absolute; + top: 50px; + left: 0px; + opacity: 0; + display: none; + z-index: 100; + &Active{ + opacity: 1; + display: flex; + } + strong{ + width: 100%; + padding: 15px 40px; + font-size: 15px; + } + ul{ + width : calc(100% - 80px); + list-style: none; + margin: 0px auto; + padding: 0px; + li{ + padding: 15px 5px; + &:hover{ + background-color: $primary1; + } + cursor: pointer; + font-size: 13px; + } + hr{ + margin: 0px auto; + margin: 0px; + border: 0.5px solid #eee; + } + } + } +} + +.en { + direction: ltr; + text-align: left; +} + +.fa { + direction: rtl; + text-align: right; +} diff --git a/src/components/PopularSearch/index.tsx b/src/components/PopularSearch/index.tsx new file mode 100644 index 0000000..0b0a7bb --- /dev/null +++ b/src/components/PopularSearch/index.tsx @@ -0,0 +1,102 @@ +import React, { useState } from "react"; +import _ from "lodash"; +import searchIcon from "./icon.png"; +import xIcon from "./x.png"; + +interface Types { + lang?: string; + theme?: string; + populars?: Array; +} + +const langDetector = (lang: string, option1: any, option2: any) => { + return lang === "fa" ? option1 : option2; +}; + +export default function PopularSearch(props: Types) { + const [value, setValue] = useState(""); + const [popularsToggle, setPopularsToggle] = useState(false); + const { lang, theme, populars } = props; + + const onChange = (val: string) => { + setValue(val); + }; + + return ( +
+ onChange(e.target.value)} + value={value} + placeholder={langDetector( + lang as string, + "نام کالا را جستجو کنید", + "search product name" + )} + onFocus={() => setPopularsToggle(true)} + onBlur={() => setPopularsToggle(false)} + /> + {langDetector(lang + {langDetector(lang setValue("")} + /> +
+ + {langDetector(lang as string, "جستجوهای پرطرفدار", "Popular search")} + +
    + {populars?.map((item: string, i: any) => ( + <> +
  • setValue(() => item)}> + {item} +
    • + {i !== populars?.length - 1 &&
    } + + ))} +
+
+
+ ); +} + +PopularSearch.defaultProps = { + lang: "fa", + theme: "light", + populars: ["علی", "علیرضا", "محمد", "محمدرضا"], +}; diff --git a/src/components/PopularSearch/x.png b/src/components/PopularSearch/x.png new file mode 100644 index 0000000000000000000000000000000000000000..df19f25a50e39d8ff74765f1bda962aa02b85ae5 GIT binary patch literal 346 zcmV-g0j2(lP){W&YxE9d!nhdrk`veoHDE{Q3bsNmSOfGz1 { }; export default function Search(props: Types) { - const [clear, setClear] = useState(false); const [value, setValue] = useState(""); const { lang, theme } = props; const onChange = (val: string) => { setValue(val); - if (val.length) { - setClear(true); - } else { - setClear(false); - } }; return ( @@ -61,6 +55,7 @@ export default function Search(props: Types) { langDetector(lang as string, "search__xFa", "search__xEn"), value ? "search__xActive" : "", ], " ")} + onClick={() => setValue("")} /> ); diff --git a/src/global.scss b/src/global.scss index 7a5cccd..e4703a2 100644 --- a/src/global.scss +++ b/src/global.scss @@ -1,11 +1,12 @@ @import './components/Search/index.scss'; +@import './components/PopularSearch/index.scss'; +@import './components/Input/index.scss'; .app{ padding: 50px 20px; min-height: 100vh; display: flex; flex-direction: column; - background-color: black; } .transition{