reza added some thing

master
Reza_ashrafi 3 years ago
parent 4d2be58607
commit 748d5c2568
  1. 1
      package.json
  2. 7
      src/App.tsx
  3. 98
      src/components/Checkbox/index.scss
  4. 29
      src/components/Checkbox/index.tsx
  5. 153
      src/components/Country/index.tsx
  6. 0
      src/components/SelectCheckbox/arrow.png
  7. BIN
      src/components/SelectCheckbox/icon.png
  8. 103
      src/components/SelectCheckbox/index.scss
  9. 152
      src/components/SelectCheckbox/index.tsx
  10. BIN
      src/components/SelectCheckbox/x.png
  11. BIN
      src/components/SelectSearch/arrow.png
  12. BIN
      src/components/SelectSearch/icon.png
  13. 71
      src/components/SelectSearch/index.scss
  14. 162
      src/components/SelectSearch/index.tsx
  15. 0
      src/components/SelectSearch/iran.png
  16. 0
      src/components/SelectSearch/iraq.png
  17. 0
      src/components/SelectSearch/spain.png
  18. 0
      src/components/SelectSearch/united-kingdom.png
  19. BIN
      src/components/SelectSearch/x.png
  20. 4
      src/global.scss
  21. 131
      yarn.lock

@ -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"

@ -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={"اشتباه است."}
/>
<hr />
<Country lang="en" />
<Country lang="fa" />
<hr />
<SelectCheckbox />
</div>
);
}

@ -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

Binary file not shown.

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 346 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 258 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 857 B

@ -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;
&Fa {
left: 10px;
}
&--labelEn{
left: 15px;
&En {
right: 10px;
}
&--labelFocus{
top: -2px !important;
font-size: 10px !important;
background-color: white;
}
&--arrow{
&__x {
width: 12px;
position: absolute;
top: 50%;
transform: translateY(-50%);
opacity: 0;
&Fa {
left: 10px;
right: 10px;
}
&En {
right: 10px;
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: 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;
}
}
}

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 346 B

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

@ -1098,6 +1098,13 @@
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.12.0", "@babel/runtime@^7.13.10", "@babel/runtime@^7.8.7":
version "7.16.0"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.0.tgz#e27b977f2e2088ba24748bf99b5e1dece64e4f0b"
integrity sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.12.5", "@babel/runtime@^7.9.2":
version "7.15.4"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
@ -1161,6 +1168,71 @@
resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
"@emotion/cache@^11.4.0", "@emotion/cache@^11.5.0":
version "11.5.0"
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.5.0.tgz#a5eb78cbef8163939ee345e3ddf0af217b845e62"
integrity sha512-mAZ5QRpLriBtaj/k2qyrXwck6yeoz1V5lMt/jfj6igWU35yYlNKs2LziXVgvH81gnJZ+9QQNGelSsnuoAy6uIw==
dependencies:
"@emotion/memoize" "^0.7.4"
"@emotion/sheet" "^1.0.3"
"@emotion/utils" "^1.0.0"
"@emotion/weak-memoize" "^0.2.5"
stylis "^4.0.10"
"@emotion/hash@^0.8.0":
version "0.8.0"
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
"@emotion/memoize@^0.7.4":
version "0.7.5"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
"@emotion/react@^11.1.1":
version "11.5.0"
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.5.0.tgz#19b5771bbfbda5e8517e948a2d9064810f0022bd"
integrity sha512-MYq/bzp3rYbee4EMBORCn4duPQfgpiEB5XzrZEBnUZAL80Qdfr7CEv/T80jwaTl/dnZmt9SnTa8NkTrwFNpLlw==
dependencies:
"@babel/runtime" "^7.13.10"
"@emotion/cache" "^11.5.0"
"@emotion/serialize" "^1.0.2"
"@emotion/sheet" "^1.0.3"
"@emotion/utils" "^1.0.0"
"@emotion/weak-memoize" "^0.2.5"
hoist-non-react-statics "^3.3.1"
"@emotion/serialize@^1.0.2":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
dependencies:
"@emotion/hash" "^0.8.0"
"@emotion/memoize" "^0.7.4"
"@emotion/unitless" "^0.7.5"
"@emotion/utils" "^1.0.0"
csstype "^3.0.2"
"@emotion/sheet@^1.0.3":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.3.tgz#00c326cd7985c5ccb8fe2c1b592886579dcfab8f"
integrity sha512-YoX5GyQ4db7LpbmXHMuc8kebtBGP6nZfRC5Z13OKJMixBEwdZrJ914D6yJv/P+ZH/YY3F5s89NYX2hlZAf3SRQ==
"@emotion/unitless@^0.7.5":
version "0.7.5"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
"@emotion/utils@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
"@emotion/weak-memoize@^0.2.5":
version "0.2.5"
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
"@eslint/eslintrc@^0.3.0":
version "0.3.0"
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.3.0.tgz#d736d6963d7003b6514e6324bec9c602ac340318"
@ -1823,6 +1895,13 @@
dependencies:
"@types/react" "*"
"@types/react-transition-group@^4.4.0":
version "4.4.4"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
dependencies:
"@types/react" "*"
"@types/react@*", "@types/react@^17.0.0":
version "17.0.33"
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.33.tgz#e01ae3de7613dac1094569880bb3792732203ad5"
@ -4188,6 +4267,14 @@ dom-converter@^0.2:
dependencies:
utila "~0.4"
dom-helpers@^5.0.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
dependencies:
"@babel/runtime" "^7.8.7"
csstype "^3.0.2"
dom-serializer@0:
version "0.2.2"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@ -5516,6 +5603,13 @@ hmac-drbg@^1.0.1:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"
hoist-non-react-statics@^3.3.1:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
dependencies:
react-is "^16.7.0"
hoopy@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@ -7145,6 +7239,11 @@ media-typer@0.3.0:
resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
memoize-one@^5.0.0:
version "5.2.1"
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
memory-fs@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@ -8877,7 +8976,7 @@ prompts@2.4.0, prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@^15.7.2:
prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@ -9097,7 +9196,7 @@ react-error-overlay@^6.0.9:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
react-is@^16.8.1:
react-is@^16.7.0, react-is@^16.8.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@ -9178,6 +9277,29 @@ react-scripts@4.0.3:
optionalDependencies:
fsevents "^2.1.3"
react-select@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.1.0.tgz#ac384c8e25ba6f03126026192b2bdad0f53fbf50"
integrity sha512-SkEBD1AYsSXrIdNj5HBt7+Ehe+jxdiB448J0atJqR6lE3l/GcFlRf4JYB3NlHe/02jrW4AnIQLo1t0IqWrxXOw==
dependencies:
"@babel/runtime" "^7.12.0"
"@emotion/cache" "^11.4.0"
"@emotion/react" "^11.1.1"
"@types/react-transition-group" "^4.4.0"
memoize-one "^5.0.0"
prop-types "^15.6.0"
react-transition-group "^4.3.0"
react-transition-group@^4.3.0:
version "4.4.2"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
dependencies:
"@babel/runtime" "^7.5.5"
dom-helpers "^5.0.1"
loose-envify "^1.4.0"
prop-types "^15.6.2"
react@^17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@ -10386,6 +10508,11 @@ stylehacks@^4.0.0:
postcss "^7.0.0"
postcss-selector-parser "^3.0.0"
stylis@^4.0.10:
version "4.0.10"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
supports-color@^5.3.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"

Loading…
Cancel
Save