Abstract Popup Window component

src/TestPanel.js

@@ -134,6 +134,40 @@ function PopupWindow(p) {
 	</Modal>
 } 
 
+function SelectorWindow(p) {
+
+  const [itemList,setItemList] = useState([])
+
+  const [tabPage,setTabPage] = useState(1)
+  const [sortSelector,setSortSelector] = useState(p.sortItems[0])
+  const [filter,setFilter] = useState("")
+  
+  useEffect(()=>{
+    setItemList(p.dataFunction())
+  },[p])
+  
+  return <PopupWindow page={tabPage} setPage={setTabPage} modalOpen={p.modalOpen} setModalOpen={p.setModalOpen} showCloseButton={true} title={p.title}
+      pageNames={p.pageNames}
+      filter={true}
+    >
+    <div className="itemBar">
+        <div className="itemBarSort">
+          <select className="itemBarForm" value={sortSelector} onChange={(f)=>{setSortSelector(f.currentTarget.value)}}>
+            {p.sortItems&&p.sortItems.map((item)=><option value={item}>{item}</option>)}
+          </select>
+        </div>
+        <div className="itemBarFilter">
+          {p.filter&&<input className="itemBarForm" type="text" placeholder="Filter" value={filter} onChange={(f)=>{setFilter(f.currentTarget.value)}} />}
+        </div>
+      </div>
+    <div className="modalItemListContainer customScrollbar">
+    <ul className="itemlist">
+    {itemList.filter((item)=>p.filterFunction(tabPage,item)).filter((item)=>p.searchFieldFunction(filter,item)).sort((a,b)=>p.sortOrderFunction(sortSelector,a,b)).map((item)=>p.displayFunction(item))}
+    </ul>
+    </div>
+  </PopupWindow>
+}
+
 function TestPanel(p) {
 const [bpGraphMax,setbpGraphMax] = useState(1000)
 const [hpGraphMax,sethpGraphMax] = useState(1000)
@@ -152,16 +186,7 @@ const [effectPage,setEffectPage] = useState(1)
 const [weaponPage,setWeaponPage] = useState(1)
 const [statPage,setStatPage] = useState(1)
 
-const [modalOpen,setModalOpen] = useState(false)
+const [weaponSelectWindowOpen,setWeaponSelectWindowOpen] = useState(false)
-const [tabPage,setTabPage] = useState(1)
-const [sortSelector,setSortSelector] = useState("Standard Sort")
-const sortItems=[
-  {name:"Standard Sort",value:"id"},
-  {name:"Rarity",value:"rarity"},
-  {name:"Attack",value:"atk"},
-  {name:"Potency",value:"potency"}]
-const [filter,setFilter] = useState("")
-const filterEnabled=true
 
 useEffect(()=>{
   if (p.bp>1000) {
@@ -179,20 +204,6 @@ useEffect(()=>{
   }
 },[p.bp]) 
 
-const [itemList,setItemList] = useState([])
-
-useEffect(()=>{
-  var dat1=p.GetData("weapon_existence_data")
-  if (Array.isArray(dat1)) {
-    setItemList(dat1.map((we)=>{
-      var weapon_type=p.GetData("weapon_type",we.weapon_type_id,undefined,true)
-      var weapon=p.GetData("weapon",we.weapon_id,undefined,true)
-      var potential=p.GetData("potential",weapon.potential_id,undefined,true)
-      return [weapon_type,weapon,potential]
-    }))
-  }
-},[p])
-
 //console.log(p.GetData("class",p.className,"icon"))
 
     return (<>
@@ -264,7 +275,7 @@ useEffect(()=>{
 <div className="boxTitleBar">
 <h1>Equip</h1></div>
 <div className="equipPalette">
-	<div onClick={()=>{setModalOpen(true)}} className="equipPaletteSlot"><h3>Weapons</h3><div className="equipPaletteSlotWrapper"><span>1</span><img alt="" className="r4" src="https://i.imgur.com/Xvx0qvt.png" /></div></div>
+	<div onClick={()=>{setWeaponSelectWindowOpen(true)}} className="equipPaletteSlot"><h3>Weapons</h3><div className="equipPaletteSlotWrapper"><span>1</span><img alt="" className="r4" src="https://i.imgur.com/Xvx0qvt.png" /></div></div>
 	<div className="equipPaletteSlot"><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src="https://i.imgur.com/GtusK2X.png" /></div></div>
 	<div className="equipPaletteSlot"><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src="https://i.imgur.com/GtusK2X.png" /></div></div>
 	<div className="equipPaletteSlot"><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src="https://i.imgur.com/GtusK2X.png" /></div></div>
@@ -423,67 +434,38 @@ useEffect(()=>{
 </div>
 </div>
 
-<PopupWindow page={tabPage} setPage={setTabPage} modalOpen={modalOpen} setModalOpen={setModalOpen} showCloseButton={true} title="Modal Title"
+<SelectorWindow title="Weapon Selection" modalOpen={weaponSelectWindowOpen} setModalOpen={setWeaponSelectWindowOpen} GetData={p.GetData}
   pageNames={["All","Rifle","Launcher","Rod","Talis"]}
-  sortItems={[
+  sortItems={["Standard Sort","Rarity","Attack","Potency"]}
-    {name:"Standard Sort",value:"id"},
-    {name:"Rarity",value:"rarity"},
-    {name:"Attack",value:"atk"},
-    {name:"Potency",value:"potency"}]}
   filter={true}
->
+  dataFunction={()=>{
-  <div className="itemBar">
+    var dat1=p.GetData("weapon_existence_data")
-      <div className="itemBarSort">
+      return Array.isArray(dat1)?dat1.map((we)=>{
-        <select className="itemBarForm" value={sortSelector} onChange={(f)=>{setSortSelector(f.currentTarget.value)}}>
+        var weapon_type=p.GetData("weapon_type",we.weapon_type_id,undefined,true)
-          {sortItems.map((item)=><option value={item.name}>{item.name}</option>)}
+        var weapon=p.GetData("weapon",we.weapon_id,undefined,true)
-        </select>
+        var potential=p.GetData("potential",weapon.potential_id,undefined,true)
-      </div>
+        return [weapon_type,weapon,potential]
-      <div className="itemBarFilter">
+      }):[]
-        {filterEnabled&&<input className="itemBarForm" type="text" placeholder="Filter" value={filter} onChange={(f)=>{setFilter(f.currentTarget.value)}} />}
+  }}
-      </div>
+  filterFunction={(page,item)=>{
-    </div>
+    switch (page) {
-  <div className="modalItemListContainer customScrollbar">
+      case 2:return item[0].name==="Assault Rifle"
-  <ul className="itemlist">
+      case 3:return item[0].name==="Launcher"
-  {itemList.filter((item)=>{
+      case 4:return item[0].name==="Rod"
-    switch (tabPage) {
+      case 5:return item[0].name==="Talis"
-      case 2:{
+      default:return true
-        return item[0].name==="Assault Rifle"
-      }
-      case 3:{
-        return item[0].name==="Launcher"
-      }
-      case 4:{
-        return item[0].name==="Rod"
-      }
-      case 5:{
-        return item[0].name==="Talis"
-      }
-      default:{
-        return true
-      }
     }
-  }).filter((item)=>{
+  }}
-    if (filter.length>0) {
+  searchFieldFunction={(searchText,item)=>searchText.length>0?(item[1].name.toLowerCase()+" "+item[0].name.toLowerCase()).includes(searchText.toLowerCase()):true}
-      return (item[1].name.toLowerCase()+" "+item[0].name.toLowerCase()).includes(filter.toLowerCase())
+  sortOrderFunction={(sort,itemA,itemB)=>{
-    } else {
+    switch (sort) {
-      return true
+      case "Rarity":return itemB[1].rarity-itemA[1].rarity
-    }
+      case "Attack":return itemB[1].atk-itemA[1].atk
-  }).sort((a,b)=>{
+      default:return 0
-    switch (sortSelector) {
+    }  
-      case "Rarity":{
+  }}
-        return b[1].rarity-a[1].rarity
+  displayFunction={(item)=><li className={"itemwep r"+item[1].rarity}><img className="itemimg" alt="" src="64px-NGSUIItemPrimmRifle.png" /><em className="rifle">{item[1].name} {item[0].name}</em><br /><span className="atk">{item[1].atk}</span>					<span className="pot tooltip">{item[2].name}<span>Lv.4: Potency +24%/<br />20% chance of Restasigne not being consumed on use. Effect starts 10 sec after equip</span></span></li>}
-      }
+  />
-      case "Attack":{
-        return b[1].atk-a[1].atk
-      }
-      default:{
-        return 0
-      }
-    }
-  }).map((item)=><li className={"itemwep r"+item[1].rarity}><img className="itemimg" alt="" src="64px-NGSUIItemPrimmRifle.png" /><em className="rifle">{item[1].name} {item[0].name}</em><br /><span className="atk">{item[1].atk}</span>					<span className="pot tooltip">{item[2].name}<span>Lv.4: Potency +24%/<br />20% chance of Restasigne not being consumed on use. Effect starts 10 sec after equip</span></span></li>)}
-  </ul>
-  </div>
-</PopupWindow>
 
 </>
 )