parent
							
								
									3c4708278a
								
							
						
					
					
						commit
						1fce85d49d
					
				
				 5 changed files with 207 additions and 0 deletions
			
			
		| After Width: | Height: | Size: 229 B | 
| @ -0,0 +1,171 @@ | ||||
| import React, { useState, useEffect } from "react"; | ||||
| import _ from "lodash"; | ||||
| 
 | ||||
| import Checkbox from "../../Checkbox"; | ||||
| 
 | ||||
| import arrowIcon from "./arrow-top.png"; | ||||
| import searchIcon from "./search.png"; | ||||
| 
 | ||||
| const langDetector = (lang = "fa", option1, option2) => { | ||||
|   return lang === "fa" ? option1 : option2; | ||||
| }; | ||||
| 
 | ||||
| export default function VerticalExpandableProductFilter(props) { | ||||
|   const [text, setText] = useState(""); | ||||
|   const [searchResult, setSearchResult] = useState([]); | ||||
|   useEffect(() => { | ||||
|     let fakeSearchResult; | ||||
|     fakeSearchResult = props.list.filter( | ||||
|       (item1) => item1.name.indexOf(text) !== -1 | ||||
|     ); | ||||
|     setSearchResult(fakeSearchResult); | ||||
|   }, [text]); | ||||
| 
 | ||||
|   return ( | ||||
|     <div className="w-full max-h-screen flex flex-col my-2 pt-6 bg-white border rounded-md"> | ||||
|       <strong className="w-full mb-3 px-3 text-sm text-gray-500"> | ||||
|         دسته بندی | ||||
|       </strong> | ||||
|       <form className="relative w-full px-4 mb-4"> | ||||
|         <input | ||||
|           type="text" | ||||
|           placeholder={_.join( | ||||
|             [langDetector(props.lang, "جستجو...", "Search...")], | ||||
|             " " | ||||
|           )} | ||||
|           className="w-full py-1 px-2 text-gray-500 border rounded-md placeholder-gray-300 outline-none" | ||||
|           onChange={(e) => setText(e.target.value)} | ||||
|         /> | ||||
|         <span | ||||
|           className={_.join( | ||||
|             [ | ||||
|               " flex items-center absolute inset-y-0", | ||||
|               langDetector(props.lang, "left-4", "right-4"), | ||||
|             ], | ||||
|             " " | ||||
|           )} | ||||
|         > | ||||
|           <button | ||||
|             type="submit" | ||||
|             className="p-1 focus:outline-none focus:shadow-outline" | ||||
|           > | ||||
|             <img src={searchIcon} className="w-5 h-5" alt="" /> | ||||
|           </button> | ||||
|         </span> | ||||
|       </form> | ||||
|       <ul className="w-full  flex flex-col list-none divide-y divide-gray-200"> | ||||
|         {(searchResult.length > 0 ? searchResult : props.list)?.map( | ||||
|           (item1, i) => ( | ||||
|             <li | ||||
|               key={i} | ||||
|               className="hover:bg-gray-100 px-3 flex flex-row items-center justify-between py-2" | ||||
|             > | ||||
|               <div className="flex flex-row items-center"> | ||||
|                 <Checkbox /> | ||||
|                 <strong className="text-xs text-gray-500 mr-2"> | ||||
|                   {item1.name} | ||||
|                 </strong> | ||||
|               </div> | ||||
|               {item1.subList?.length > 0 && ( | ||||
|                 <img | ||||
|                   src={arrowIcon} | ||||
|                   alt="" | ||||
|                   className={_.join( | ||||
|                     [ | ||||
|                       "cursor-pointer w-5 transform transition-all duration-300", | ||||
|                       item1.expaneded ? "" : "rotate-180", | ||||
|                     ], | ||||
|                     " " | ||||
|                   )} | ||||
|                 /> | ||||
|               )} | ||||
|             </li> | ||||
|           ) | ||||
|         )} | ||||
|       </ul> | ||||
|     </div> | ||||
|   ); | ||||
| } | ||||
| 
 | ||||
| VerticalExpandableProductFilter.defaultProps = { | ||||
|   list: [ | ||||
|     { | ||||
|       id: 0, | ||||
|       name: "وسایل آشپزخانه", | ||||
|       expaneded: false, | ||||
|       subList: [], | ||||
|     }, | ||||
|     { | ||||
|       id: 3, | ||||
|       name: "ماشین و موتور سیکلت", | ||||
|       expaneded: false, | ||||
|       subList: [ | ||||
|         { | ||||
|           id: 4, | ||||
|           name: "ماشین", | ||||
|         }, | ||||
|         { | ||||
|           id: 5, | ||||
|           name: "موتور", | ||||
|         }, | ||||
|       ], | ||||
|     }, | ||||
|     { | ||||
|       id: 6, | ||||
|       name: "اتاق خواب", | ||||
|       expaneded: false, | ||||
|       subList: [ | ||||
|         { | ||||
|           id: 7, | ||||
|           name: "کمد", | ||||
|         }, | ||||
|         { | ||||
|           id: 8, | ||||
|           name: "تخت خواب", | ||||
|         }, | ||||
|       ], | ||||
|     }, | ||||
|     { | ||||
|       id: 9, | ||||
|       name: "دکوراسیون و چیدمان", | ||||
|       expaneded: false, | ||||
|       subList: [], | ||||
|     }, | ||||
|     { | ||||
|       id: 10, | ||||
|       name: "وسایل بهداشت شخصی", | ||||
|       expaneded: false, | ||||
|       subList: [ | ||||
|         { | ||||
|           id: 11, | ||||
|           name: "مسواک", | ||||
|         }, | ||||
|         { | ||||
|           id: 12, | ||||
|           name: "حوله", | ||||
|         }, | ||||
|       ], | ||||
|     }, | ||||
|     { | ||||
|       id: 13, | ||||
|       name: "وسایل بهداشت شخصی", | ||||
|       expaneded: false, | ||||
|       subList: [ | ||||
|         { | ||||
|           id: 14, | ||||
|           name: "مسواک", | ||||
|         }, | ||||
|         { | ||||
|           id: 15, | ||||
|           name: "حوله", | ||||
|         }, | ||||
|       ], | ||||
|     }, | ||||
|     { | ||||
|       id: 16, | ||||
|       name: "وسایل بهداشت شخصی", | ||||
|       expaneded: false, | ||||
|       subList: [], | ||||
|     }, | ||||
|   ], | ||||
| }; | ||||
| After Width: | Height: | Size: 857 B | 
| @ -0,0 +1,25 @@ | ||||
| import React, { useState } from "react"; | ||||
| 
 | ||||
| import VerticalExpandableProductFilter from "./VerticalExpandableProductFilter"; | ||||
| 
 | ||||
| function ProductFilter() { | ||||
|   const list = { | ||||
|     1: <VerticalExpandableProductFilter />, | ||||
|   }; | ||||
|   const [type, setType] = useState(1); | ||||
|   return ( | ||||
|     <div className="w-full flex flex-col items-center"> | ||||
|       <select | ||||
|         className="mb-10 w-20 bg-gray-200" | ||||
|         onChange={(e) => setType(e.target.value)} | ||||
|       > | ||||
|         {Object.keys(list).map((option, index) => ( | ||||
|           <option key={index}>{option}</option> | ||||
|         ))} | ||||
|       </select> | ||||
|       {list[type]} | ||||
|     </div> | ||||
|   ); | ||||
| } | ||||
| 
 | ||||
| export default ProductFilter; | ||||
					Loading…
					
					
				
		Reference in new issue