sigonasr2/ngsplanner
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Componentizing the popup window.

Browse Source 
Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>
This commit is contained in:
Joshua Sigona 2021-08-08 00:38:39 +09:00
parent d3cfb8f01d
commit d4bb7508f2
1 changed files with 32 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/TestPanel.js
View File

@ -127,6 +127,17 @@ function PopupWindow(p) {
<h1>{p.title}</h1> <h1>{p.title}</h1>
{p.showCloseButton&&<div className="boxExit" onClick={()=>{p.setModalOpen(false)}}></div>} {p.showCloseButton&&<div className="boxExit" onClick={()=>{p.setModalOpen(false)}}></div>}
</div> </div>
<PageControl pages={p.pageNames.length} pageNames={p.pageNames}/>
<div className="itemBar">
<div className="itemBarSort">
<select className="itemBarForm">
{p.sortItems.map((item)=><option>{item.name}</option>)}
</select>
</div>
<div className="itemBarFilter">
{p.filter&&<input className="itemBarForm" type="text" placeholder="Filter" />}
</div>
</div>
{p.children} {p.children}
</div> </div>
</Modal> </Modal>
@ -410,26 +421,15 @@ useEffect(()=>{
</div> </div>
</div> </div>
<PopupWindow modalOpen={modalOpen} setModalOpen={setModalOpen} showCloseButton={true} title="Modal Title"> <PopupWindow modalOpen={modalOpen} setModalOpen={setModalOpen} showCloseButton={true} title="Modal Title"
<ul className="boxmenu"> pageNames={["All","Rifle","Launcher","Rod","Talis"]}
<li>Rifle</li> sortItems={[
<li>Launcher</li> {name:"Standard Sort",value:"id"},
<li>Rod</li> {name:"Rarity",value:"rarity"},
<li>Talis</li> {name:"Attack",value:"atk"},
</ul> {name:"Potency",value:"potency"}]}
<div className="itemBar"> filter={true}
<div className="itemBarSort"> >
<select className="itemBarForm">
<option>Standard Sort</option>
<option>Rarity</option>
<option>Attack</option>
<option>Potency</option>
</select>
</div>
<div className="itemBarFilter">
<input className="itemBarForm" type="text" placeholder="Filter" />
</div>
</div>
<div className="modalItemListContainer customScrollbar"> <div className="modalItemListContainer customScrollbar">
<ul className="itemlist"> <ul className="itemlist">
<li className="itemwep r1"><img className="itemimg" alt="" src="64px-NGSUIItemPrimmRifle.png" /><em className="rifle">Primm Rifle</em><br /><span className="atk">177</span> <span className="pot tooltip">Recycler Unit<span>Lv.4: Potency +24%/<br />20% chance of Restasigne not being consumed on use. Effect starts 10 sec after equip</span></span></li> <li className="itemwep r1"><img className="itemimg" alt="" src="64px-NGSUIItemPrimmRifle.png" /><em className="rifle">Primm Rifle</em><br /><span className="atk">177</span> <span className="pot tooltip">Recycler Unit<span>Lv.4: Potency +24%/<br />20% chance of Restasigne not being consumed on use. Effect starts 10 sec after equip</span></span></li>