parent
4d2be58607
commit
748d5c2568
21 changed files with 728 additions and 191 deletions
@ -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); |
||||
} |
||||
} |
||||
@ -0,0 +1,29 @@ |
||||
import React from "react"; |
||||
|
||||
export default function Checkbox(props : any) { |
||||
return ( |
||||
<div> |
||||
<svg className="checkbox-symbol"> |
||||
<symbol id="check" viewBox="0 0 12 10"> |
||||
<polyline |
||||
points="1.5 6 4.5 9 10.5 1" |
||||
stroke-linecap="round" |
||||
stroke-linejoin="round" |
||||
stroke-width="2" |
||||
></polyline> |
||||
</symbol> |
||||
</svg> |
||||
|
||||
<div className="checkbox-container"> |
||||
<input className="checkbox-input" id="apples" type="checkbox" checked={props.checked} /> |
||||
<label className="checkbox" htmlFor="apples"> |
||||
<span> |
||||
<svg width="12px" height="10px"> |
||||
<use xlinkHref="#check"></use> |
||||
</svg> |
||||
</span> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -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<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 }, |
||||
], |
||||
}; |
||||
|
Before Width: | Height: | Size: 258 B After Width: | Height: | Size: 258 B |
|
After Width: | Height: | Size: 857 B |
@ -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; |
||||
} |
||||
@ -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<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 SelectSearch(props: Types) { |
||||
const [selectedItem, setSelectedItem] = useState(""); |
||||
const [value, setValue] = useState<string>(""); |
||||
|
||||
const [toggle, setToggle] = useState(false); |
||||
const { lang, theme, list, label } = props; |
||||
|
||||
const onChangeItem = (val: string) => { |
||||
setSelectedItem(val); |
||||
}; |
||||
|
||||
const onChangeText = (val: string) => { |
||||
setValue(val); |
||||
}; |
||||
|
||||
return ( |
||||
<div |
||||
className={_.join( |
||||
["select-search", langDetector(lang as string, "fa", "en")], |
||||
" " |
||||
)} |
||||
> |
||||
<div |
||||
className={_.join( |
||||
["search", langDetector(lang as string, "fa", "en")], |
||||
" " |
||||
)} |
||||
> |
||||
<input |
||||
type="search" |
||||
className="transition" |
||||
onChange={(e: any) => onChangeText(e.target.value)} |
||||
onFocus={(e: any) => setToggle(true)} |
||||
placeholder={langDetector( |
||||
lang as string, |
||||
"تنظیمات", |
||||
"setting" |
||||
)} |
||||
/> |
||||
{/* <img |
||||
src={searchIcon} |
||||
alt={langDetector(lang as string, "جستجو", "search")} |
||||
className={_.join( |
||||
[ |
||||
"search__icon", |
||||
langDetector(lang as string, "search__iconFa", "search__iconEn"), |
||||
], |
||||
" " |
||||
)} |
||||
/> */} |
||||
<img |
||||
src={xIcon} |
||||
alt={langDetector(lang as string, "پاک کردن", "clear")} |
||||
className={_.join( |
||||
[ |
||||
"search__x", |
||||
"transition", |
||||
langDetector(lang as string, "search__xFa", "search__xEn"), |
||||
value ? "search__xActive" : "", |
||||
], |
||||
" " |
||||
)} |
||||
onClick={() => setValue("")} |
||||
/> |
||||
</div> |
||||
{toggle && ( |
||||
<div |
||||
className={_.join( |
||||
[ |
||||
"select-search__list", |
||||
toggle ? "select-search__listActive" : "", |
||||
"transition", |
||||
], |
||||
" " |
||||
)} |
||||
> |
||||
<ul> |
||||
{list?.map((item: any, i: any) => ( |
||||
<> |
||||
<li |
||||
key={i} |
||||
className="transition" |
||||
> |
||||
<Checkbox checked={false} /> |
||||
<strong>{item?.name}</strong> |
||||
</li> |
||||
{i !== list?.length - 1 && <hr />} |
||||
</> |
||||
))} |
||||
</ul> |
||||
</div> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
SelectSearch.defaultProps = { |
||||
lang: "fa", |
||||
theme: "light", |
||||
label: "کشور خود را انتخاب کنید", |
||||
list: [ |
||||
{ name: "وسایل آشپزخانه" }, |
||||
{ name: "غریق نجات از تمام جهات" }, |
||||
{ name: "قاشق و چنگال" }, |
||||
{ name: "وسایل آشپزخانه"}, |
||||
], |
||||
}; |
||||
|
After Width: | Height: | Size: 346 B |
|
After Width: | Height: | Size: 258 B |
|
After Width: | Height: | Size: 857 B |
@ -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<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 SelectSearch(props: Types) { |
||||
const [selectedItem, setSelectedItem] = useState(""); |
||||
const [value, setValue] = useState<string>(""); |
||||
|
||||
const [toggle, setToggle] = useState(false); |
||||
const { lang, theme, countries, label } = props; |
||||
|
||||
const onChangeItem = (val: string) => { |
||||
setSelectedItem(val); |
||||
}; |
||||
|
||||
const onChangeText = (val: string) => { |
||||
setValue(val); |
||||
}; |
||||
|
||||
return ( |
||||
<div |
||||
className={_.join( |
||||
["select-search", langDetector(lang as string, "fa", "en")], |
||||
" " |
||||
)} |
||||
> |
||||
<div |
||||
className={_.join( |
||||
["search", langDetector(lang as string, "fa", "en")], |
||||
" " |
||||
)} |
||||
> |
||||
<input |
||||
type="search" |
||||
className="transition" |
||||
onChange={(e: any) => 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" |
||||
)} |
||||
/> |
||||
<img |
||||
src={searchIcon} |
||||
alt={langDetector(lang as string, "جستجو", "search")} |
||||
className={_.join( |
||||
[ |
||||
"search__icon", |
||||
langDetector(lang as string, "search__iconFa", "search__iconEn"), |
||||
], |
||||
" " |
||||
)} |
||||
/> |
||||
<img |
||||
src={xIcon} |
||||
alt={langDetector(lang as string, "پاک کردن", "clear")} |
||||
className={_.join( |
||||
[ |
||||
"search__x", |
||||
"transition", |
||||
langDetector(lang as string, "search__xFa", "search__xEn"), |
||||
value ? "search__xActive" : "", |
||||
], |
||||
" " |
||||
)} |
||||
onClick={() => setValue("")} |
||||
/> |
||||
</div> |
||||
{toggle && ( |
||||
<div |
||||
className={_.join( |
||||
[ |
||||
"select-search__list", |
||||
toggle ? "select-search__listActive" : "", |
||||
"transition", |
||||
], |
||||
" " |
||||
)} |
||||
> |
||||
<ul onClick={() => setToggle(false)}> |
||||
{countries?.map((item: any, i: any) => ( |
||||
<> |
||||
<li |
||||
key={i} |
||||
className="transition" |
||||
onClick={(e) => setSelectedItem(item.name)} |
||||
> |
||||
<img src={item?.icon} alt="" /> |
||||
|
||||
{item?.name} |
||||
</li> |
||||
{i !== countries?.length - 1 && <hr />} |
||||
</> |
||||
))} |
||||
</ul> |
||||
</div> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
SelectSearch.defaultProps = { |
||||
lang: "fa", |
||||
theme: "light", |
||||
label: "کشور خود را انتخاب کنید", |
||||
countries: [ |
||||
{ name: "IRAN", icon: iran }, |
||||
{ name: "IRAQ", icon: iraq }, |
||||
{ name: "SPAIN", icon: spain }, |
||||
{ name: "UK", icon: uk }, |
||||
], |
||||
}; |
||||
|
Before Width: | Height: | Size: 720 B After Width: | Height: | Size: 720 B |
|
Before Width: | Height: | Size: 571 B After Width: | Height: | Size: 571 B |
|
Before Width: | Height: | Size: 692 B After Width: | Height: | Size: 692 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 346 B |
Loading…
Reference in new issue