working for all os

pepfar-datim · Sep 27, 2022 · d827614 · d827614
1 parent 43afb3f
commit d827614
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 27 deletions.
diff --git a/src/modules/nestedMenu/components/nestedMenu.component.tsx b/src/modules/nestedMenu/components/nestedMenu.component.tsx
@@ -11,14 +11,23 @@ const styles = {
     }
 }
 
+function getBrowserStyle(){
+    let style = `background: linear-gradient(0deg, rgb(44, 102, 147) 0%, rgb(44, 102, 147) 100%)!important`;
+    if (window.navigator.appVersion.includes('Mac')) style = `outline: 1px solid  rgb(44, 102, 147);`
+    return `select:focus option:checked{
+      ${style}  
+    }`
+}
+
 export function NestedMenu({menuJson}:{menuJson:NestedMenuObject}):ReactElement{
     let rand = randomInteger();
     return <>
         <Box style={styles.root} id={`nestedMenu_${rand}`} className={'nestedMenu'}>
-            <NestedSubMenu menuJson={menuJson.content}/>
+            <NestedSubMenu menuJson={menuJson.content} order={0}/>
         </Box>
         <style>
             {`#nestedMenu_${rand}{${menuJson.style}}`}
+            {getBrowserStyle()}
         </style>
     </>
 }
diff --git a/src/modules/nestedMenu/components/nestedMenu.css b/src/modules/nestedMenu/components/nestedMenu.css
@@ -3,16 +3,16 @@
 }
 
 option.analyticsLink::after {
-    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
+    content: "↗";
     position: relative;
-    left: 5px;
+    left: 3px;
 }
 
 option:checked{
     background: linear-gradient(0deg, #B7C8D9  0%, #B7C8D9  100%)!important;
 }
 
 select:focus option:checked{
-    background: linear-gradient(0deg, rgb(44, 102, 147) 0%, rgb(44, 102, 147) 100%)!important;
-    color: white!important;
-}
+    /*background: linear-gradient(0deg, rgb(44, 102, 147) 0%, rgb(44, 102, 147) 100%)!important;*/
+    /*outline: 1px solid  rgb(44, 102, 147);*/
+}
diff --git a/src/modules/nestedMenu/components/nestedSubMenu.component.tsx b/src/modules/nestedMenu/components/nestedSubMenu.component.tsx
@@ -2,7 +2,7 @@ import React, {CSSProperties, ReactElement, useState} from "react";
 import {ListItem, styled} from "@mui/material";
 import {NestedMenuContent} from "../../shared/services/content.service";
 import {randomInteger} from "../services/randomInteger";
-import {createStyleElement} from "../services/createStyleElement";
+import {createStyleElement, checkStyle, removeStyle} from "../services/createStyleElement";
 
 const styles = {
     subMenu: {
@@ -24,29 +24,21 @@ const generateLink = (link:string)=>{
 }
 
 const AnalyticsLink = ({link,name}:{link:string, name:string})=>{
+    let id = `nestedMenuItem_${randomInteger()}`
+    checkStyle(id,name);
+    name = removeStyle(name)
     return <option onClick={()=>{
         let newTab = window.open(generateLink(link), '_blank')
         newTab&&newTab.focus()
-    }} style={styles.menuItem} className={'analyticsLink'}>
+    }} style={styles.menuItem} className={'analyticsLink'} id={id}>
         {name}
     </option>
 }
 
-function Item({category, selected, onClick}:{category:string, selected:boolean, onClick: ()=>void}){
+function Item({category, onClick}:{category:string, onClick: ()=>void}){
     let id = `nestedMenuItem_${randomInteger()}`
-    if (/\{.+\}/.test(category)) {
-        try {
-            let r = category.match(/\{.+\}/);
-            let css = r&&r[0]
-                ?.replace(/(\{|\})/g,"")
-                ?.replace(/\|/g,":")
-                ?.replace(/\$/g,"#")
-                createStyleElement(id,css);
-        }catch(e){
-
-        }
-        category = category.replace(/\{.+\}/, '')
-    }
+    checkStyle(id,category);
+    category = removeStyle(category)
     return <><option
         onClick={onClick}
         style={styles.menuItem}
@@ -55,20 +47,52 @@ function Item({category, selected, onClick}:{category:string, selected:boolean,
     </option></>
 }
 
-export function NestedSubMenu({menuJson}:{menuJson:NestedMenuContent}):ReactElement|null{
+enum TablePosition {
+    middle='middle',
+    first='first',
+    last='last',
+    onlyOne='onlyOne'
+}
+
+function getBorderRadius(position:TablePosition):any{
+    let borderRadius;
+    let borderRight:string|null = '0px';
+    switch(position){
+        case TablePosition.middle:
+            borderRadius = 0;
+            break;
+        case TablePosition.last:
+            borderRadius = '0px 5px 5px 0px'
+            borderRight = null;
+            break;
+        case TablePosition.onlyOne:
+            borderRadius = 5;
+            borderRight = null;
+            break;
+        case TablePosition.first:
+            borderRadius = '5px 0px 0px 5px'
+            break;
+    }
+    return {borderRadius, borderRight};
+}
+
+export function NestedSubMenu({menuJson, order}:{menuJson:NestedMenuContent,order:number}):ReactElement|null{
     let [selectedKey,setSelectedKey] = useState<string|null>(null)
     if (selectedKey&&!menuJson[selectedKey]) {
         setSelectedKey(null);
         return null;
     }
-    let id = Math.floor(Math.random()*1e7).toString();
+    let position:TablePosition=TablePosition.middle;
+    if (order===0&&selectedKey) position = TablePosition.first;
+    if (order>0&&!selectedKey) position = TablePosition.last;
+    if (order===0&&!selectedKey) position = TablePosition.onlyOne;
     return <React.Fragment>
-        <select id={id} style={styles.subMenu} multiple={true} defaultValue={[selectedKey||'']}>
+        <select style={Object.assign({},styles.subMenu,getBorderRadius(position))} multiple={true} defaultValue={[selectedKey||'']}>
             {Object.keys(menuJson).map((category,index)=>{
                 if (typeof menuJson[category]==='string') return <AnalyticsLink link={menuJson[category] as string} name={category} key={index}/>
-                else return <Item onClick={()=>setSelectedKey(category)} category={category} selected={selectedKey===category} key={index}/>
+                else return <Item onClick={()=>setSelectedKey(category)} category={category} key={index}/>
             })}
         </select>
-        {selectedKey&&<NestedSubMenu menuJson={menuJson[selectedKey] as NestedMenuContent}/>}
+        {selectedKey&&<NestedSubMenu menuJson={menuJson[selectedKey] as NestedMenuContent} order={order+1}/>}
     </React.Fragment>
 }
diff --git a/src/modules/nestedMenu/services/createStyleElement.tsx b/src/modules/nestedMenu/services/createStyleElement.tsx
@@ -4,4 +4,24 @@ export function createStyleElement(id, style){
     let css = document.createElement('style');
     css.appendChild(document.createTextNode(stylesSheet));
     document.getElementsByTagName("head")[0].appendChild(css);
+}
+
+export function removeStyle(category:string):string{
+    return category.replace(/\{.+\}/, '')
+}
+
+export function checkStyle(id:string, category:string){
+    if (/\{.+\}/.test(category)) {
+        try {
+            let r = category.match(/\{.+\}/);
+            let css = r&&r[0]
+                ?.replace(/(\{|\})/g,"")
+                ?.replace(/\|/g,":")
+                ?.replace(/\$/g,"#")
+            createStyleElement(id,css);
+        }catch(e){
+
+        }
+
+    }
 }