Sub and main class are now selectable in the popup

src/TestPanel.js

@@ -43,13 +43,13 @@ function EditBoxInput(p) {
 }
 
 function PageControlButton(p) {
-	return <li onClick={()=>{p.setCurrentPage(p.page)}} className={(p.currentPage===p.page)?"selected":"unselected"}>{p.pageName?p.pageName:p.page}</li>
+	return <li onClick={()=>{if (p.onPageChange) {p.onPageChange(p.pageName)} p.setCurrentPage(p.page)}} className={(p.currentPage===p.page)?"selected":"unselected"}>{p.pageName?p.pageName:p.page}</li>
 }
 
 function PageControl(p) {
 	var pages = []
 	for (var i=0;i<p.pages;i++) {
-		pages.push(<PageControlButton pageName={p.pageNames?p.pageNames[i]:undefined} currentPage={p.currentPage} setCurrentPage={p.setCurrentPage} page={i+1}/>)
+		pages.push(<PageControlButton onPageChange={p.onPageChange} pageName={p.pageNames?p.pageNames[i]:undefined} currentPage={p.currentPage} setCurrentPage={p.setCurrentPage} page={i+1}/>)
 	}
   if (p.children!==undefined) {
       pages.push(<li className="pageControlDetails">{p.children}</li>)
@@ -80,7 +80,7 @@ function PopupWindow(p) {
     <h1>{p.title}</h1>
     {p.showCloseButton&&<div className="boxExit" onClick={()=>{p.setModalOpen(false)}}></div>}
     </div>
-    <PageControl  pages={p.pageNames?p.pageNames.length:0} pageNames={p.pageNames}  currentPage={p.page} setCurrentPage={p.setPage}/>
+    <PageControl onPageChange={p.onPageChange} pages={p.pageNames?p.pageNames.length:0} pageNames={p.pageNames}  currentPage={p.page} setCurrentPage={p.setPage}/>
     
     {p.children}
   </div>
@@ -100,10 +100,17 @@ function SelectorWindow(p) {
       setItemList(p.dataFunction())
     }
   },[p])
+
+  useEffect(()=>{
+    if (p.onModalOpen) {
+      p.onModalOpen(setTabPage)
+    }
+  },[p.modalOpen])
   
   return <PopupWindow page={tabPage} setPage={setTabPage} modalOpen={p.modalOpen} setModalOpen={p.setModalOpen} showCloseButton={true} title={p.title}
       pageNames={p.pageNames}
       filter={true}
+      onPageChange={p.onPageChange}
     >
     {(p.sortItems||p.filter)&&<div className="itemBar">
         <div className="itemBarSort">
@@ -126,7 +133,22 @@ function SelectorWindow(p) {
 }
 
 function ClassSelectorWindow(p) {
-  return <SelectorWindow title={(p.editClass)?"Select Sub Class":"Select Main Class"} modalOpen={p.modalOpen} setModalOpen={p.setModalOpen} GetData={p.GetData}
+  const [title,setTitle] = useState("Select Main Class")
+  useEffect(()=>{
+    setTitle((p.editClass)?"Select Sub Class":"Select Main Class")
+  },[p.editClass])
+  return <SelectorWindow title={title} modalOpen={p.modalOpen} setModalOpen={p.setModalOpen} GetData={p.GetData}
+  pageNames={["Main Class","Sub-Class"]}
+  onPageChange={(page)=>{
+    if (page==="Main Class") {
+      p.setEditClass(0)
+    } else {
+      p.setEditClass(1)
+    }
+  }}
+  onModalOpen={(pageSetter)=>{
+    pageSetter((p.editClass)?2:1)
+  }}
   dataFunction={() => {
     var dat1 = p.GetData("class")
     return Object.keys(dat1)
@@ -514,7 +536,7 @@ AUGMENT
   </div>
 </div>
 
-<ClassSelectorWindow class={className} subClass={subclassName} setClassName={setClassName} editClass={classNameSetter} setSubClassName={setSubClassName} modalOpen={classSelectWindowOpen} setModalOpen={setClassSelectWindowOpen} GetData={p.GetData}/>
+<ClassSelectorWindow class={className} subClass={subclassName} setClassName={setClassName} setEditClass={setClassNameSetter} editClass={classNameSetter} setSubClassName={setSubClassName} modalOpen={classSelectWindowOpen} setModalOpen={setClassSelectWindowOpen} GetData={p.GetData}/>