parent
748d5c2568
commit
902f569bac
11 changed files with 386 additions and 22 deletions
@ -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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,12 @@ |
||||
import React from "react"; |
||||
|
||||
export default function Radio(props: any) { |
||||
return ( |
||||
<div className="container"> |
||||
<div className="radio"> |
||||
<input id="radio-1" name="radio" type="radio" /> |
||||
<label htmlFor="radio-1" className="radio-label">{props.label}</label> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
After Width: | Height: | Size: 258 B |
|
After Width: | Height: | Size: 857 B |
@ -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; |
||||
} |
||||
@ -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<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 SelectRadio(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")], |
||||
" " |
||||
)} |
||||
onClick={() => setToggle(() => !toggle)} |
||||
> |
||||
<input |
||||
type="search" |
||||
className="transition" |
||||
onChange={(e: any) => onChangeText(e.target.value)} |
||||
placeholder={langDetector(lang as string, "تنظیمات", "setting")} |
||||
disabled |
||||
/> |
||||
<img |
||||
src={arrowIcon} |
||||
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"> |
||||
<Radio checked={false} label={item?.name} /> |
||||
</li> |
||||
{i !== list?.length - 1 && <hr />} |
||||
</> |
||||
))} |
||||
</ul> |
||||
</div> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
SelectRadio.defaultProps = { |
||||
lang: "fa", |
||||
theme: "light", |
||||
label: "کشور خود را انتخاب کنید", |
||||
list: [ |
||||
{ name: "وسایل آشپزخانه", sublist: [{ name: "اتو" }] }, |
||||
{ name: "غریق نجات از تمام جهات" }, |
||||
{ name: "قاشق و چنگال" }, |
||||
{ name: "وسایل آشپزخانه" }, |
||||
], |
||||
}; |
||||
|
After Width: | Height: | Size: 346 B |
Loading…
Reference in new issue