From 748d5c2568d29070997d563de1bf1d3a381e47a7 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Sat, 30 Oct 2021 11:58:22 +0330 Subject: [PATCH] reza added some thing --- package.json | 1 + src/App.tsx | 7 +- src/components/Checkbox/index.scss | 98 +++++++++++ src/components/Checkbox/index.tsx | 29 ++++ src/components/Country/index.tsx | 153 ----------------- .../{Country => SelectCheckbox}/arrow.png | Bin src/components/SelectCheckbox/icon.png | Bin 0 -> 857 bytes src/components/SelectCheckbox/index.scss | 103 +++++++++++ src/components/SelectCheckbox/index.tsx | 152 ++++++++++++++++ src/components/SelectCheckbox/x.png | Bin 0 -> 346 bytes src/components/SelectSearch/arrow.png | Bin 0 -> 258 bytes src/components/SelectSearch/icon.png | Bin 0 -> 857 bytes .../{Country => SelectSearch}/index.scss | 79 +++++---- src/components/SelectSearch/index.tsx | 162 ++++++++++++++++++ .../{Country => SelectSearch}/iran.png | Bin .../{Country => SelectSearch}/iraq.png | Bin .../{Country => SelectSearch}/spain.png | Bin .../united-kingdom.png | Bin src/components/SelectSearch/x.png | Bin 0 -> 346 bytes src/global.scss | 4 +- yarn.lock | 131 +++++++++++++- 21 files changed, 728 insertions(+), 191 deletions(-) create mode 100644 src/components/Checkbox/index.scss create mode 100644 src/components/Checkbox/index.tsx delete mode 100644 src/components/Country/index.tsx rename src/components/{Country => SelectCheckbox}/arrow.png (100%) create mode 100644 src/components/SelectCheckbox/icon.png create mode 100644 src/components/SelectCheckbox/index.scss create mode 100644 src/components/SelectCheckbox/index.tsx create mode 100644 src/components/SelectCheckbox/x.png create mode 100644 src/components/SelectSearch/arrow.png create mode 100644 src/components/SelectSearch/icon.png rename src/components/{Country => SelectSearch}/index.scss (52%) create mode 100644 src/components/SelectSearch/index.tsx rename src/components/{Country => SelectSearch}/iran.png (100%) rename src/components/{Country => SelectSearch}/iraq.png (100%) rename src/components/{Country => SelectSearch}/spain.png (100%) rename src/components/{Country => SelectSearch}/united-kingdom.png (100%) create mode 100644 src/components/SelectSearch/x.png diff --git a/package.json b/package.json index 482d192..1385eeb 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", + "react-select": "^5.1.0", "sass": "^1.43.3", "typescript": "^4.1.2", "web-vitals": "^1.0.1" diff --git a/src/App.tsx b/src/App.tsx index 3d015ab..300a94e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,8 @@ import "./global.scss"; import Search from "./components/Search"; import PopularSearch from "./components/PopularSearch"; import Input from "./components/Input"; -import Country from "./components/Country"; +import Country from "./components/SelectSearch"; +import SelectCheckbox from "./components/SelectCheckbox"; function App() { return ( @@ -19,7 +20,9 @@ function App() { message={"اشتباه است."} />
- + +
+ ); } diff --git a/src/components/Checkbox/index.scss b/src/components/Checkbox/index.scss new file mode 100644 index 0000000..f4dae1f --- /dev/null +++ b/src/components/Checkbox/index.scss @@ -0,0 +1,98 @@ +.checkbox-symbol { + position: absolute; + width: 0; + height: 0; + pointer-events: none; + user-select: none; +} + +.checkbox-container { + box-sizing: border-box; + background: #ffffff; + color: #222; + height: 30px; + display: flex; + justify-content: center; + align-items: center; + flex-flow: row wrap; +} + +.checkbox-container * { + box-sizing: border-box; +} + +.checkbox-input { + position: absolute; + visibility: hidden; +} + +.checkbox { + user-select: none; + cursor: pointer; + padding: 6px 8px; + border-radius: 6px; + overflow: hidden; + transition: all 0.3s ease; + display: flex; +} + +.checkbox:not(:last-child) { + margin-right: 6px; +} + +.checkbox:hover { + background: inherit; +} + +.checkbox span { + vertical-align: middle; + transform: translate3d(0, 0, 0); +} + +.checkbox span:first-child { + position: relative; + flex: 0 0 18px; + width: 18px; + height: 18px; + border-radius: 4px; + transform: scale(1); + border: 1px solid #cccfdb; + transition: all 0.3s ease; +} + +.checkbox span:first-child svg { + position: absolute; + top: 3px; + left: 2px; + fill: none; + stroke: #fff; + stroke-dasharray: 16px; + stroke-dashoffset: 16px; + transition: all 0.3s ease; + transform: translate3d(0, 0, 0); +} + +.checkbox span:last-child { + padding-left: 8px; + line-height: 18px; +} + +.checkbox:hover span:first-child { + border-color: #0077ff; +} + +.checkbox-input:checked + .checkbox span:first-child { + background: #0077ff; + border-color: #0077ff; + animation: zoom-in-out 0.3s ease; +} + +.checkbox-input:checked + .checkbox span:first-child svg { + stroke-dashoffset: 0; +} + +@keyframes zoom-in-out { + 50% { + transform: scale(0.9); + } +} \ No newline at end of file diff --git a/src/components/Checkbox/index.tsx b/src/components/Checkbox/index.tsx new file mode 100644 index 0000000..eb5b29a --- /dev/null +++ b/src/components/Checkbox/index.tsx @@ -0,0 +1,29 @@ +import React from "react"; + +export default function Checkbox(props : any) { + return ( +
+ + + + + + +
+ + +
+
+ ); +} diff --git a/src/components/Country/index.tsx b/src/components/Country/index.tsx deleted file mode 100644 index 703822e..0000000 --- a/src/components/Country/index.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import React, { useState } from "react"; -import _ from "lodash"; - -import iran from "./iran.png"; -import iraq from "./iraq.png"; -import spain from "./spain.png"; -import uk from "./united-kingdom.png"; -import arrow from "./arrow.png"; - -import Search from "../Search"; - -interface Types { - lang?: string; - theme?: string; - countries?: 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 Country(props: Types) { - const [value, setValue] = useState(undefined); - const [countriesToggle, setCountriesToggle] = useState(false); - const { lang, theme, countries, label } = props; - - const onChange = (val: Value) => { - setValue(val); - }; - - return ( -
-
setCountriesToggle(() => true)} - onClickCapture={() => setCountriesToggle(() => false)} - > - - {value && ( -
- {value.name} - {value.name} -
- )} - - {langDetector(lang -
- {countriesToggle && ( -
- -
    setCountriesToggle(false)}> - {countries?.map((item: any, i: any) => ( - <> -
  • setValue(() => item as Value)} - > - {item?.name} -
  • - {i !== countries?.length - 1 &&
    } - - ))} -
-
- )} -
- ); -} - -Country.defaultProps = { - lang: "fa", - theme: "light", - label: "کشور خود را انتخاب کنید", - countries: [ - { name: "IRAN", icon: iran }, - { name: "IRAQ", icon: iraq }, - { name: "SPAIN", icon: spain }, - { name: "UK", icon: uk }, - ], -}; diff --git a/src/components/Country/arrow.png b/src/components/SelectCheckbox/arrow.png similarity index 100% rename from src/components/Country/arrow.png rename to src/components/SelectCheckbox/arrow.png diff --git a/src/components/SelectCheckbox/icon.png b/src/components/SelectCheckbox/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/SelectCheckbox/index.scss b/src/components/SelectCheckbox/index.scss new file mode 100644 index 0000000..3761a69 --- /dev/null +++ b/src/components/SelectCheckbox/index.scss @@ -0,0 +1,103 @@ +$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; + hr{ + border: 1px solid $gray; + opacity: 0.3 !important; + } + li{ + padding: 5px 0px; + color: $gray; + display: flex; + align-items: center; + + } + } + } + + +} + +.en { + direction: ltr; + text-align: left; +} + +.fa { + direction: rtl; + text-align: right; +} diff --git a/src/components/SelectCheckbox/index.tsx b/src/components/SelectCheckbox/index.tsx new file mode 100644 index 0000000..da6e92e --- /dev/null +++ b/src/components/SelectCheckbox/index.tsx @@ -0,0 +1,152 @@ +import React, { useState } from "react"; +import _ from "lodash"; +import Checkbox from "../Checkbox"; + +import xIcon from "./x.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 SelectSearch(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 ( +
+
+ onChangeText(e.target.value)} + onFocus={(e: any) => setToggle(true)} + placeholder={langDetector( + lang as string, + "تنظیمات", + "setting" + )} + /> + {/* {langDetector(lang */} + {langDetector(lang setValue("")} + /> +
+ {toggle && ( +
+
    + {list?.map((item: any, i: any) => ( + <> +
  • + + {item?.name} +
  • + {i !== list?.length - 1 &&
    } + + ))} +
+
+ )} +
+ ); +} + +SelectSearch.defaultProps = { + lang: "fa", + theme: "light", + label: "کشور خود را انتخاب کنید", + list: [ + { name: "وسایل آشپزخانه" }, + { name: "غریق نجات از تمام جهات" }, + { name: "قاشق و چنگال" }, + { name: "وسایل آشپزخانه"}, + ], +}; diff --git a/src/components/SelectCheckbox/x.png b/src/components/SelectCheckbox/x.png new file mode 100644 index 0000000000000000000000000000000000000000..df19f25a50e39d8ff74765f1bda962aa02b85ae5 GIT binary patch literal 346 zcmV-g0j2(lP){W&YxE9d!nhdrk`veoHDE{Q3bsNmSOfGz1qf*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/SelectSearch/icon.png b/src/components/SelectSearch/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/Country/index.scss b/src/components/SelectSearch/index.scss similarity index 52% rename from src/components/Country/index.scss rename to src/components/SelectSearch/index.scss index 45354cf..665f1df 100644 --- a/src/components/Country/index.scss +++ b/src/components/SelectSearch/index.scss @@ -3,63 +3,73 @@ $gray: #dbdbdb; $danger: #e00a0a; $success: #23c933; -.country { +.select-search { display: flex; flex-direction: column; position: relative; - &__box { + .search { display: flex; - justify-content: space-between; + flex-direction: column; position: relative; - padding: 10px 10px; - border: 1.7px solid $gray; - border-radius: 5px; - min-height: 28px; - &--value{ - display: flex; - align-items: center; - + img{ + cursor: pointer; } - label { - width : fit-content; + &__icon { + width: 27px; position: absolute; top: 50%; - font-size: 13px; transform: translateY(-50%); - color: $gray; - padding: 0px 5px; - } - &--labelFa{ - right: 15px; - } - &--labelEn{ - left: 15px; - } - &--labelFocus{ - top: -2px !important; - font-size: 10px !important; - background-color: white; + &Fa { + left: 10px; + } + &En { + right: 10px; + } } - &--arrow{ + + &__x { + width: 12px; position: absolute; top: 50%; transform: translateY(-50%); - &Fa{ + opacity: 0; + &Fa { + right: 10px; + } + &En { left: 10px; } - &En{ - right: 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: 10px 20px; + padding: 0px 20px; border: 1.7px solid $gray; border-radius: 5px; ul{ @@ -71,6 +81,9 @@ $success: #23c933; li{ padding: 5px 0px; color: $gray; + display: flex; + align-items: center; + } } } diff --git a/src/components/SelectSearch/index.tsx b/src/components/SelectSearch/index.tsx new file mode 100644 index 0000000..f73bc01 --- /dev/null +++ b/src/components/SelectSearch/index.tsx @@ -0,0 +1,162 @@ +import React, { useState } from "react"; +import _ from "lodash"; + +import iran from "./iran.png"; +import iraq from "./iraq.png"; +import spain from "./spain.png"; +import uk from "./united-kingdom.png"; +import arrow from "./arrow.png"; + +import searchIcon from "./icon.png"; +import xIcon from "./x.png"; + +interface Types { + lang?: string; + theme?: string; + countries?: 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 SelectSearch(props: Types) { + const [selectedItem, setSelectedItem] = useState(""); + const [value, setValue] = useState(""); + + const [toggle, setToggle] = useState(false); + const { lang, theme, countries, label } = props; + + const onChangeItem = (val: string) => { + setSelectedItem(val); + }; + + const onChangeText = (val: string) => { + setValue(val); + }; + + return ( +
+
+ onChangeText(e.target.value)} + onFocus={(e: any) => setToggle(true)} + onBlur={(e: any) => setTimeout(() => {setToggle(false)}, 300)} + value={selectedItem} + placeholder={langDetector( + lang as string, + "نام کالا را جستجو کنید", + "search product name" + )} + /> + {langDetector(lang + {langDetector(lang setValue("")} + /> +
+ {toggle && ( +
+
    setToggle(false)}> + {countries?.map((item: any, i: any) => ( + <> +
  • setSelectedItem(item.name)} + > + + + {item?.name} +
  • + {i !== countries?.length - 1 &&
    } + + ))} +
+
+ )} +
+ ); +} + +SelectSearch.defaultProps = { + lang: "fa", + theme: "light", + label: "کشور خود را انتخاب کنید", + countries: [ + { name: "IRAN", icon: iran }, + { name: "IRAQ", icon: iraq }, + { name: "SPAIN", icon: spain }, + { name: "UK", icon: uk }, + ], +}; diff --git a/src/components/Country/iran.png b/src/components/SelectSearch/iran.png similarity index 100% rename from src/components/Country/iran.png rename to src/components/SelectSearch/iran.png diff --git a/src/components/Country/iraq.png b/src/components/SelectSearch/iraq.png similarity index 100% rename from src/components/Country/iraq.png rename to src/components/SelectSearch/iraq.png diff --git a/src/components/Country/spain.png b/src/components/SelectSearch/spain.png similarity index 100% rename from src/components/Country/spain.png rename to src/components/SelectSearch/spain.png diff --git a/src/components/Country/united-kingdom.png b/src/components/SelectSearch/united-kingdom.png similarity index 100% rename from src/components/Country/united-kingdom.png rename to src/components/SelectSearch/united-kingdom.png diff --git a/src/components/SelectSearch/x.png b/src/components/SelectSearch/x.png new file mode 100644 index 0000000000000000000000000000000000000000..df19f25a50e39d8ff74765f1bda962aa02b85ae5 GIT binary patch literal 346 zcmV-g0j2(lP){W&YxE9d!nhdrk`veoHDE{Q3bsNmSOfGz1