reza added something

master
Reza_ashrafi 3 years ago
parent fec4a93dfd
commit 4d2be58607
  1. 3
      src/App.tsx
  2. BIN
      src/components/Country/arrow.png
  3. 89
      src/components/Country/index.scss
  4. 153
      src/components/Country/index.tsx
  5. BIN
      src/components/Country/iran.png
  6. BIN
      src/components/Country/iraq.png
  7. BIN
      src/components/Country/spain.png
  8. BIN
      src/components/Country/united-kingdom.png
  9. 1
      src/global.scss

@ -2,6 +2,7 @@ import "./global.scss";
import Search from "./components/Search"; import Search from "./components/Search";
import PopularSearch from "./components/PopularSearch"; import PopularSearch from "./components/PopularSearch";
import Input from "./components/Input"; import Input from "./components/Input";
import Country from "./components/Country";
function App() { function App() {
return ( return (
@ -17,6 +18,8 @@ function App() {
maxLength={30} maxLength={30}
message={"اشتباه است."} message={"اشتباه است."}
/> />
<hr />
<Country lang="en" />
</div> </div>
); );
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 258 B

@ -0,0 +1,89 @@
$primary: #06bace;
$gray: #dbdbdb;
$danger: #e00a0a;
$success: #23c933;
.country {
display: flex;
flex-direction: column;
position: relative;
&__box {
display: flex;
justify-content: space-between;
position: relative;
padding: 10px 10px;
border: 1.7px solid $gray;
border-radius: 5px;
min-height: 28px;
&--value{
display: flex;
align-items: center;
}
label {
width : fit-content;
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;
}
&--arrow{
position: absolute;
top: 50%;
transform: translateY(-50%);
&Fa{
left: 10px;
}
&En{
right: 10px;
}
}
}
&__list{
position: relative;
bottom: -8px;
left: 0px;
display: flex;
flex-direction: column;
padding: 10px 20px;
border: 1.7px solid $gray;
border-radius: 5px;
ul{
list-style: none;
padding: 0px;
hr{
border: 1px solid $gray;
}
li{
padding: 5px 0px;
color: $gray;
}
}
}
}
.en {
direction: ltr;
text-align: left;
}
.fa {
direction: rtl;
text-align: right;
}

@ -0,0 +1,153 @@
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<object>;
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<Value | undefined>(undefined);
const [countriesToggle, setCountriesToggle] = useState(false);
const { lang, theme, countries, label } = props;
const onChange = (val: Value) => {
setValue(val);
};
return (
<div
className={_.join(
["country", langDetector(lang as string, "fa", "en")],
" "
)}
>
<div
className="country__box"
onClick={() => setCountriesToggle(() => true)}
onClickCapture={() => setCountriesToggle(() => false)}
>
<label
className={_.join(
[
langDetector(
lang as string,
"country__box--labelFa",
"country__box--labelEn"
),
"transition",
countriesToggle || value ? "country__box--labelFocus" : "",
],
" "
)}
>
{label}
</label>
{value && (
<div className="country__box--value">
<img src={value.icon} alt={value.name} />
<strong>{value.name}</strong>
</div>
)}
<img
src={arrow}
alt={langDetector(lang as string, "فلش", "arrow")}
className={_.join(
[
"country__box--arrow",
langDetector(
lang as string,
"country__box--arrowFa",
"country__box--arrowEn"
),
],
" "
)}
/>
</div>
{countriesToggle && (
<div
className={_.join(
[
"country__list",
countriesToggle ? "country__listActive" : "",
"transition",
],
" "
)}
>
<Search lang={lang} />
<ul onClick={() => setCountriesToggle(false)}>
{countries?.map((item: any, i: any) => (
<>
<li
key={i}
className="transition"
onClick={() => setValue(() => item as Value)}
>
{item?.name}
</li>
{i !== countries?.length - 1 && <hr />}
</>
))}
</ul>
</div>
)}
</div>
);
}
Country.defaultProps = {
lang: "fa",
theme: "light",
label: "کشور خود را انتخاب کنید",
countries: [
{ name: "IRAN", icon: iran },
{ name: "IRAQ", icon: iraq },
{ name: "SPAIN", icon: spain },
{ name: "UK", icon: uk },
],
};

Binary file not shown.

After

Width:  |  Height:  |  Size: 720 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 571 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 692 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

@ -1,6 +1,7 @@
@import './components/Search/index.scss'; @import './components/Search/index.scss';
@import './components/PopularSearch/index.scss'; @import './components/PopularSearch/index.scss';
@import './components/Input/index.scss'; @import './components/Input/index.scss';
@import './components/Country/index.scss';
.app{ .app{
padding: 50px 20px; padding: 50px 20px;

Loading…
Cancel
Save