build(deps): update package-lock.json, package.json, src/components/Datepicker/index.js and yarn.lock
parent
8f5a50f690
commit
17dc78a425
1 changed files with 88 additions and 0 deletions
@ -0,0 +1,88 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import _ from "lodash"; |
||||||
|
|
||||||
|
const langDetector = (lang, option1, option2) => { |
||||||
|
return lang === "fa" ? option1 : option2; |
||||||
|
}; |
||||||
|
|
||||||
|
export default function PopularSearch(props) { |
||||||
|
const [value, setValue] = useState(""); |
||||||
|
const [popularsToggle, setPopularsToggle] = useState(false); |
||||||
|
const { lang, theme, populars } = props; |
||||||
|
|
||||||
|
const onChange = (val) => { |
||||||
|
setValue(val); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={_.join( |
||||||
|
["flex flex-col relative search my-2", langDetector(lang, "fa", "en")], |
||||||
|
" " |
||||||
|
)} |
||||||
|
> |
||||||
|
<input |
||||||
|
type="search" |
||||||
|
className="transition py-2 pr-4 pl-14 mx-0 border rounded-md outline-none focus:ring-1 placeholder-gray-500 placeholder-opacity-40 focus:placeholder-blue-300" |
||||||
|
onChange={(e) => onChange(e.target.value)} |
||||||
|
value={value} |
||||||
|
placeholder={langDetector( |
||||||
|
lang, |
||||||
|
"نام کالا را جستجو کنید", |
||||||
|
"search product name" |
||||||
|
)} |
||||||
|
onFocus={() => setPopularsToggle(true)} |
||||||
|
onBlur={() => |
||||||
|
setTimeout(() => { |
||||||
|
setPopularsToggle(false); |
||||||
|
}, 250) |
||||||
|
} |
||||||
|
/> |
||||||
|
<img |
||||||
|
src={searchIcon} |
||||||
|
alt={langDetector(lang, "جستجو", "search")} |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"search__icon absolute w-6 h-6 top-1/2 transform -translate-y-1/2", |
||||||
|
langDetector(lang, "left-3", "right-3"), |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
/> |
||||||
|
<div |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"search__populars w-full mt-0 border rounded-md top-12 left-0 absolute z-10 px-4 bg-white", |
||||||
|
popularsToggle ? "flex flex-col" : "hidden", |
||||||
|
"transition", |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
> |
||||||
|
<strong className="py-3"> |
||||||
|
{langDetector(lang, "جستجوهای پرطرفدار", "Popular search")} |
||||||
|
</strong> |
||||||
|
<ul className="divide-y divide-gray-200"> |
||||||
|
{populars?.map((item, i) => ( |
||||||
|
<> |
||||||
|
<li |
||||||
|
key={i} |
||||||
|
className="transition py-3 px-1 hover:bg-blue-100" |
||||||
|
onClick={() => setValue(() => item)} |
||||||
|
> |
||||||
|
{item} |
||||||
|
</li> |
||||||
|
</> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
PopularSearch.defaultProps = { |
||||||
|
lang: "fa", |
||||||
|
theme: "light", |
||||||
|
populars: ["علی", "علیرضا", "محمد", "محمدرضا"], |
||||||
|
searchIcon: "images/SearchWithSuggestionsearch.png", |
||||||
|
}; |
Loading…
Reference in new issue