reza added some component

master
Reza_ashrafi 3 years ago
parent 748d5c2568
commit 902f569bac
  1. 6
      src/App.tsx
  2. 60
      src/components/Radio/index.scss
  3. 12
      src/components/Radio/index.tsx
  4. 18
      src/components/SelectCheckbox/index.scss
  5. 47
      src/components/SelectCheckbox/index.tsx
  6. BIN
      src/components/SelectRadio/arrow.png
  7. BIN
      src/components/SelectRadio/icon.png
  8. 118
      src/components/SelectRadio/index.scss
  9. 146
      src/components/SelectRadio/index.tsx
  10. BIN
      src/components/SelectRadio/x.png
  11. 1
      src/global.scss

@ -4,6 +4,9 @@ import PopularSearch from "./components/PopularSearch";
import Input from "./components/Input"; import Input from "./components/Input";
import Country from "./components/SelectSearch"; import Country from "./components/SelectSearch";
import SelectCheckbox from "./components/SelectCheckbox"; import SelectCheckbox from "./components/SelectCheckbox";
import SelectSearch from "./components/SelectRadio";
import SelectRadio from "./components/SelectRadio";
import Radio from "./components/Radio";
function App() { function App() {
return ( return (
@ -23,6 +26,9 @@ function App() {
<Country lang="fa" /> <Country lang="fa" />
<hr /> <hr />
<SelectCheckbox /> <SelectCheckbox />
<hr />
<SelectRadio />
<hr />
</div> </div>
); );
} }

@ -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>
);
}

@ -75,16 +75,30 @@ $success: #23c933;
ul{ ul{
list-style: none; list-style: none;
padding: 0px; padding: 0px;
width : 100%;
hr{ hr{
border: 1px solid $gray; border: 1px solid $gray;
opacity: 0.3 !important; opacity: 0.3 !important;
} }
li{ li{
width: 100%;
padding: 5px 0px; padding: 5px 0px;
color: $gray; color: $gray;
display: flex; display: flex;
align-items: center; align-items: flex-start;
flex-direction: column;
div{
display: flex;
}
ul{
margin: 0px auto;
li{
display: flex;
flex-direction: row;
flex: 1;
padding: 5px 20px 0px;
}
}
} }
} }
} }

@ -3,6 +3,7 @@ import _ from "lodash";
import Checkbox from "../Checkbox"; import Checkbox from "../Checkbox";
import xIcon from "./x.png"; import xIcon from "./x.png";
import arrowIcon from "./arrow.png";
interface Types { interface Types {
lang?: string; lang?: string;
@ -42,8 +43,7 @@ interface Value {
const langDetector = (lang: string, option1: any, option2: any) => { const langDetector = (lang: string, option1: any, option2: any) => {
return lang === "fa" ? option1 : option2; return lang === "fa" ? option1 : option2;
}; };
export default function SelectCheckbox(props: Types) {
export default function SelectSearch(props: Types) {
const [selectedItem, setSelectedItem] = useState(""); const [selectedItem, setSelectedItem] = useState("");
const [value, setValue] = useState<string>(""); const [value, setValue] = useState<string>("");
@ -70,20 +70,17 @@ export default function SelectSearch(props: Types) {
["search", langDetector(lang as string, "fa", "en")], ["search", langDetector(lang as string, "fa", "en")],
" " " "
)} )}
onClick={() => setToggle(() => !toggle)}
> >
<input <input
type="search" type="search"
className="transition" className="transition"
onChange={(e: any) => onChangeText(e.target.value)} onChange={(e: any) => onChangeText(e.target.value)}
onFocus={(e: any) => setToggle(true)} placeholder={langDetector(lang as string, "تنظیمات", "setting")}
placeholder={langDetector( disabled
lang as string,
"تنظیمات",
"setting"
)}
/> />
{/* <img <img
src={searchIcon} src={arrowIcon}
alt={langDetector(lang as string, "جستجو", "search")} alt={langDetector(lang as string, "جستجو", "search")}
className={_.join( className={_.join(
[ [
@ -92,7 +89,7 @@ export default function SelectSearch(props: Types) {
], ],
" " " "
)} )}
/> */} />
<img <img
src={xIcon} src={xIcon}
alt={langDetector(lang as string, "پاک کردن", "clear")} alt={langDetector(lang as string, "پاک کردن", "clear")}
@ -122,12 +119,22 @@ export default function SelectSearch(props: Types) {
<ul> <ul>
{list?.map((item: any, i: any) => ( {list?.map((item: any, i: any) => (
<> <>
<li <li key={i} className="transition">
key={i} <div>
className="transition" <Checkbox checked={false} />
> <strong>{item?.name}</strong>
<Checkbox checked={false} /> </div>
<strong>{item?.name}</strong> <ul>
{item.sublist?.map((item1: any, j: any) => (
<>
{j !== item1.sublist?.length - 1 && <hr />}
<li key={j}>
<Checkbox checked={false} />
<strong>{item1?.name}</strong>
</li>
</>
))}
</ul>
</li> </li>
{i !== list?.length - 1 && <hr />} {i !== list?.length - 1 && <hr />}
</> </>
@ -139,14 +146,14 @@ export default function SelectSearch(props: Types) {
); );
} }
SelectSearch.defaultProps = { SelectCheckbox.defaultProps = {
lang: "fa", lang: "fa",
theme: "light", theme: "light",
label: "کشور خود را انتخاب کنید", label: "کشور خود را انتخاب کنید",
list: [ list: [
{ name: "وسایل آشپزخانه" }, { name: "وسایل آشپزخانه", sublist: [{ name: "اتو" }] },
{ name: "غریق نجات از تمام جهات" }, { name: "غریق نجات از تمام جهات" },
{ name: "قاشق و چنگال" }, { name: "قاشق و چنگال" },
{ name: "وسایل آشپزخانه"}, { name: "وسایل آشپزخانه" },
], ],
}; };

Binary file not shown.

After

Width:  |  Height:  |  Size: 258 B

Binary file not shown.

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: "وسایل آشپزخانه" },
],
};

Binary file not shown.

After

Width:  |  Height:  |  Size: 346 B

@ -4,6 +4,7 @@
@import './components/SelectSearch/index.scss'; @import './components/SelectSearch/index.scss';
@import './components/Checkbox/index.scss'; @import './components/Checkbox/index.scss';
@import './components/SelectCheckbox/index.scss'; @import './components/SelectCheckbox/index.scss';
@import './components/Radio/index.scss';
.app{ .app{
padding: 50px 20px; padding: 50px 20px;

Loading…
Cancel
Save