@zuzjs/ui 0.3.1 → 0.3.3

package/src/hooks/useContextMenu.tsx

@@ -3,84 +3,119 @@ import ReactDOM from 'react-dom/client'
 import Box from '../comps/box'
 import { getMousePosition } from "../core"
 
-const useContextMenu = (contextID : string) => {
+const Menu = ({ ID, hide, e, items, width }) => {
 
-    const ID = `context-${contextID}`
+    const nodeRef = useRef(null);
+    const [p, setP] = useState(getMousePosition(e as MouseEvent));
+    const [visible, setVisible] = useState(false);
+    
+
+    const checkBoundaries = (x: number, y: number) => {
+        if (nodeRef.current) {
+          const { innerWidth, innerHeight } = window;
+          const { offsetWidth, offsetHeight } = nodeRef.current;    
+          if(x + offsetWidth > innerWidth) x -= offsetWidth //x + offsetWidth - innerWidth;
+          if (y + offsetHeight > innerHeight) y -= offsetHeight;
+        }
+        setP({ x, y })
+        setVisible(true)
+    }
+    
+    useEffect(() => {
+        checkBoundaries(p.x, p.y);
+    }, [e])
+
+    return (
+        <Box 
+            bref={nodeRef}
+            flex dir={`cols`}
+            fixed
+            top={p.y}
+            left={p.x}
+            w={width || 220}
+            opacity={visible ? 1 : 0}
+            as={`zuz-contextmenu ${ID}`}>
+            {(items as Array<any>).map((m, i) => m.id == `line` ? <Box as={`line`} key={`line-${i}-${m.id}`} /> : <button 
+                key={`cm-${i}-${m.id}`} 
+                onClick={ev => {
+                    if(m.onClick){
+                        m.onClick(ev, m)
+                    }else{
+                        console.log(`No onClick eventFound`)
+                    }
+                    hide()
+                }}>{m.label}</button>)}
+        </Box>
+    )
+}
+
+const useContextMenu = (
+    contextID : string, 
+    contextWidth: number,
+    contextToken = `____uchides`
+) => {
+
+    const ID = `contextmenu-${contextID}`
     const [visible, setVisible] = useState(false)
     const [root, setRoot] = useState(null)
-    const nodeRef = useRef<HTMLDivElement>(null);
 
     const el = (e : string) => window.document.createElement(e)
 
-    function checkBoundaries(x: number, y: number) {
-        if (nodeRef.current) {
-          const { innerWidth, innerHeight } = window;
-          const { offsetWidth, offsetHeight } = nodeRef.current;
     
-          if (x + offsetWidth > innerWidth) x -= x + offsetWidth - innerWidth;
-    
-          if (y + offsetHeight > innerHeight) y -= y + offsetHeight - innerHeight;
+    const createRoot = () => {
+        if(!window.document.querySelector(`#${ID}`)){
+            let div = el(`div`)
+            div.id = ID
+            window.document.body.appendChild(div)
         }
-    
-        return { x, y };
     }
 
-    const hide = () => {
+    const hideAll = () => {
+        if(window[contextToken]){
+            window[contextToken].map((h : Object) => h['ID'] != ID && h['fnc']())
+        }
+    }
+
+    const _hide = () => {
         try{
             root?.unmount()
+            document.querySelector(`#${ID}`).parentNode.removeChild(document.querySelector(`#${ID}`))
             setRoot(null)
         }catch(e){}
     }
 
-    const Menu = (e: MouseEvent, items : Array<any>) => {
-
-        const p = getMousePosition(e);
-        const { x, y } = checkBoundaries(p.x, p.y);
-
-        return (
-            <Box 
-                bref={nodeRef}
-                flex dir={`cols`}
-                fixed
-                top={y}
-                left={x}
-                as={`zuz-contextmenu ${ID}`}>
-                {items && items.map((m, i) => m.id == `line` ? <Box as={`line`} key={`line-${i}-${m.id}`} /> : <button 
-                    key={`cm-${i}-${m.id}`} 
-                    onClick={ev => {
-                        if(m.onClick){
-                            m.onClick(ev, m)
-                        }else{
-                            console.log(`No onClick eventFound`)
-                        }
-                        hide()
-                    }}>{m.label}</button>)}
-            </Box>
-        )
+    const hide = () => {
+        _hide()
+        hideAll()
     }
 
     const show = (e : MouseEvent, items : Array<any>) => {
-        e.preventDefault(); e.stopPropagation();
-        if(!window.document.querySelector(`#context-${contextID}`)){
-            let div = el(`div`)
-            div.id = ID
-            window.document.body.appendChild(div)
-        }
-        root.render(Menu(e, items))        
+        e.preventDefault(); e.stopPropagation();   
+        hideAll()
+        root.render(<Menu e={e} width={contextWidth || 220} items={items} ID={ID} hide={hide} />)
     }
 
     useEffect(() => {
-        if(!window.document.querySelector(`#context-${contextID}`)){
-            let div = el(`div`)
-            div.id = ID
-            window.document.body.appendChild(div)
-        }
+        createRoot()
         if(!root) setRoot(ReactDOM.createRoot(document.getElementById(ID)))
     }, [root])
 
+    useEffect(() => {
+        if(contextToken in window == false){
+            window[contextToken] = []    
+        }
+        if(window[contextToken].findIndex(x => x.ID == ID) == -1){
+            window[contextToken].push({ ID: ID, fnc: _hide })
+            if(window[contextToken].length > document.querySelectorAll('div[id^="contextmenu-"]').length){
+                window[contextToken].shift()
+            }
+        }
+    }, [])
+
     return {
         show,
-        hide
+        hide,
+        hideAll
     }
 
 }

package/src/hooks/useDevice.tsx

@@ -30,6 +30,8 @@ type Return<C extends Config, D> = D extends undefined
   ? Breakpoint<C>
   : never
 
+const isBrowser = typeof window !== 'undefined'
+
 const useDevice = <C extends Config, D extends keyof C | undefined>(
   config: C,
   defaultBreakpoint?: D,
@@ -89,7 +91,7 @@ const useDevice = <C extends Config, D extends keyof C | undefined>(
         typeof window !== 'undefined' &&
         !(defaultBreakpoint && hydrateInitial)
       ) {
-        const mediaQuery = window.matchMedia(query)
+        const mediaQuery = window?.matchMedia(query)
         if (mediaQuery.matches) {
           return breakpoint as Breakpoint<C>
         }
@@ -117,35 +119,37 @@ const useDevice = <C extends Config, D extends keyof C | undefined>(
 
   /** On changes to mediaQueries, subscribe to changes using window.matchMedia */
   useChooseEffect(() => {
-    const unsubscribers = mediaQueries.map(({ query, ...breakpoint }) => {
-      const list = window.matchMedia(query)
-      updateBreakpoint(list, breakpoint as Breakpoint<C>)
-
-      const handleChange = (event: MediaQueryListEvent) => {
-        updateBreakpoint(event, breakpoint as Breakpoint<C>)
-      }
+    if (isBrowser) {
+      const unsubscribers = mediaQueries.map(({ query, ...breakpoint }) => {
+        const list = window.matchMedia(query)
+        updateBreakpoint(list, breakpoint as Breakpoint<C>)
 
-      const supportsNewEventListeners =
-        'addEventListener' in list && 'removeEventListener' in list
+        const handleChange = (event: MediaQueryListEvent) => {
+          updateBreakpoint(event, breakpoint as Breakpoint<C>)
+        }
 
-      if (supportsNewEventListeners) {
-        list.addEventListener('change', handleChange)
-      } else {
-        ;(list as MediaQueryList).addListener(handleChange)
-      }
+        const supportsNewEventListeners =
+          'addEventListener' in list && 'removeEventListener' in list
 
-      /** Map the unsubscribers array to a list of unsubscriber methods */
-      return () => {
         if (supportsNewEventListeners) {
-          list.removeEventListener('change', handleChange)
+          list.addEventListener('change', handleChange)
         } else {
-          ;(list as MediaQueryList).removeListener(handleChange)
+          ;(list as MediaQueryList).addListener(handleChange)
         }
-      }
-    })
 
-    /** Return a function that when called, will call all unsubscribers */
-    return () => unsubscribers.forEach((unsubscriber) => unsubscriber())
+        /** Map the unsubscribers array to a list of unsubscriber methods */
+        return () => {
+          if (supportsNewEventListeners) {
+            list.removeEventListener('change', handleChange)
+          } else {
+            ;(list as MediaQueryList).removeListener(handleChange)
+          }
+        }
+      })
+
+      /** Return a function that when called, will call all unsubscribers */
+      return () => unsubscribers.forEach((unsubscriber) => unsubscriber())
+    }
   }, [mediaQueries, updateBreakpoint])
 
   /** Print a nice debug value for React Devtools */

package/src/hooks/useMediaPlayer.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useMemo } from "react"
+import { uuid } from "../core"
+
+const useMediaPlayer = (
+    playerID? : string
+) => {
+
+    const pid = useMemo(() => playerID || uuid(), [playerID])
+    const ID = `media-player-${pid}`
+
+    const el = (e : string) => window.document.createElement(e)
+    
+    const createRoot = () => {
+        if(!window.document.querySelector(`#${ID}`)){
+            let div = el(`div`)
+            div.id = ID
+            window.document.body.appendChild(div)
+        }
+    }
+
+    useEffect(() => {
+
+    }, [])
+
+}
+
+export default useMediaPlayer

package/src/hooks/useNavigator.tsx

@@ -0,0 +1,6 @@
+const useNavigator = () => {
+
+    
+
+    return []
+}

package/src/hooks/useRender.tsx

@@ -0,0 +1,29 @@
+import { useState, useEffect } from "react"
+
+const useRender = (isMounted: boolean, delay: number) => {
+    
+    const [canRender, setCanRender] = useState(false)
+
+    // console.log(
+    //     `isMounted:`, isMounted,
+    //     `canRender:`, canRender,
+    // )
+
+    useEffect(() => {
+        let outID : any
+        if(isMounted && !canRender){
+            setCanRender(true)
+        }else if(isMounted && canRender){
+            outID = setTimeout(
+                () => setCanRender(false), 
+                delay * 1000
+            )
+        }
+        return () => clearTimeout(outID);
+    }, [isMounted, delay])
+
+    return canRender;
+
+}
+
+export default useRender

package/src/index.tsx

@@ -4,8 +4,6 @@ import { Provider, createSlice } from './context'
 export * from './core/index';
 export * from './hooks/index';
 
-export { Link } from "react-router-dom"
-
 export { default as App } from './comps/app'
 export { default as Box } from './comps/box'
 export { default as Button } from './comps/button'
@@ -25,7 +23,7 @@ export { default as Spacer } from './comps/spacer'
 export { default as Spinner } from './comps/spinner'
 export { default as Text } from './comps/text'
 export { default as Tweet } from './comps/tweet'
-export { default as ContextMenu } from './comps/contextmenu'
+// export { default as ContextMenu } from './comps/contextmenu'
 
 export { default as Header } from './kit/Header'
 

package/src/scss/style.scss

@@ -106,7 +106,7 @@
 }
 
 .zuz-contextmenu{
-    min-width: 220px;
+    width: 220px;
     border-radius: 5px;
     padding: 4px;
     background: rgba(34,34,34,0.5);
@@ -122,7 +122,7 @@
         color: #fff;
         border-radius: 4px;
         &:hover{
-            background: #385fd2;
+            background: #5183ff;
         }
     }
     .line{

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+    "compilerOptions": {
+      "target": "es2017",
+      "jsx": "react-jsx",
+      "allowJs": true,
+      "esModuleInterop": true,
+      "allowSyntheticDefaultImports": true,
+      "moduleResolution":"node",
+      "module": "ESNext",
+    },
+    "files": [],
+    "include": [],
+    "references": [
+      {
+        "path": "./tsconfig.lib.json"
+      },
+      {
+        "path": "./tsconfig.spec.json"
+      }
+    ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,9 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+      "outDir": "./dist/out-tsc",
+      "types": ["node","vite/client"]
+    },
+    "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "node_modules"],
+    "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,21 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+      "outDir": "./dist/out-tsc",
+      "module": "commonjs",
+      "types": [
+        "jest",
+        "node"
+      ]
+    },
+    "include": [
+      "**/*.spec.ts",
+      "**/*.spec.tsx",
+      "**/*.spec.js",
+      "**/*.spec.jsx",
+      "**/*.d.ts"
+    ],
+    "exclude": [
+      "node_modules"
+    ]
+}

package/src/core/defaultTheme.ts

@@ -1,90 +0,0 @@
-class AppTheme {
-
-    #mode;
-    #listen;
-    #lightTheme;
-    #darkTheme;
-
-    constructor(_conf){
-        const conf = _conf || {}
-        this.#listen = "listen" in conf ? conf.listen : (mod) => { console.log(`Theme switched to ${mod}`); };
-        this.#mode = conf.mode || "auto";
-        this.#lightTheme = {
-            //CORE
-            tag: "light",
-            dark: false,
-            color: "#3a43ac",
-            primary: '#edeef5',
-            secondary: '#e8e9f0',
-            textColor: '#111111',
-            borderColor: '#dcdce1',
-            //APP
-            app: {
-                action: 'rgba(0,0,0,0.1)',
-                actionHover: 'rgba(255,255,255,0.1)',
-                actionActive: 'rgba(0,0,0,0.8)',
-                actionDisabled: 'rgba(255,255,255,0.01)',
-                shimmerBG: '#383a48',
-                shimmerFrom: '#383a48',
-                shimmerTo: '#4a4c5b',
-                iconBG: '#4a4c5b',
-                icon: '#111111',
-                sidebarHover: 'rgba(255,255,255,0.2)',
-                sidebarActive: 'rgba(255,255,255,1)',
-                toolbar: '#d5d6dc',
-                tool: 'transparent',
-                toolActive: 'rgba(255,255,255,0.75)',
-                toolHover: 'rgba(255,255,255,0.5)',
-            }
-        };
-        this.#darkTheme = {
-            //CORE
-            tag: "dark",
-            dark: true,
-            color: "#3a43ac",
-            primary: '#21222d',
-            secondary: '#282a37',
-            textColor: '#f9f9f9',
-            borderColor: '#353640',
-            //APP
-            app: {
-                action: 'rgba(255,255,255,0.05)',
-                actionHover: 'rgba(255,255,255,0.1)',
-                actionActive: 'rgba(255,255,255,0.2)',
-                actionDisabled: 'rgba(255,255,255,0.01)',
-                shimmerBG: '#383a48',
-                shimmerFrom: '#383a48',
-                shimmerTo: '#4a4c5b',
-                iconBG: '#4a4c5b',
-                icon: '#ffffff',
-                toolbar: '#21222d',
-                tool: 'transparent',
-                toolHover: '#2f3144',
-                toolActive: '#2f3144',                
-            }
-        };
-    }
-
-    get = () => {
-        let self = this;
-        if(self.#mode === "auto"){
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-                self.#mode = event.matches ? "dark" : "light";
-                self.#listen(self.#mode);
-            });
-            return window.matchMedia && 
-                window.matchMedia('(prefers-color-scheme: dark)').matches ? 
-                self.#darkTheme : self.#lightTheme;
-        }else{ 
-            if(self.#mode === "light"){
-                return self.#lightTheme;
-            }else if(self.#mode === "dark"){
-                return self.#darkTheme;
-            }
-        }
-    }
-
-
-}
-
-export default AppTheme

package/src/redux/slices/app.js

@@ -1,26 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit'
-
-export const appSlice = createSlice({
-    name: `app`,
-    initialState: {
-        debug: true,
-        loading: true,
-        theme: null,
-        _tmp: Math.random()
-    },
-    reducers: {
-        setLoading: (state, action) => {
-            state.loading = action.payload || false;
-        },
-        setTheme: (state, action) => { state.theme = action.payload },
-        forceUpdate: (state, action) => { state._tmp = Math.random() }
-    }
-});
-
-export const {
-    setLoading,
-    setTheme,
-    forceUpdate
-} = appSlice.actions;
-
-export default appSlice.reducer;

package/src/redux/slices/form.js

@@ -1,46 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit'
-
-export const formSlice = createSlice({
-    name: `form`,
-    initialState: {
-        forms: {}
-    },
-    reducers: {
-        addForm: (state, action) => {
-            state.forms[action.payload] = { touched: false, loading: false }
-        },
-        updateForm: (state, action) => {
-            // console.log(action.payload)
-            const { name, k, v } = action.payload;
-            if(state.forms[name]) state.forms[name][k] = v;
-        },
-        addFields: (state, action) => {
-            const { form, fields } = action.payload;
-            if(state.forms[form]) state.forms[form] = { ...state.forms[form], ...fields };
-        },
-        addField: (state, action) => {
-            // console.log('addField', action.payload)
-            // state.forms[action.payload.form][action.payload.name] = action.payload.value
-            // if(
-            //     state.forms[action.payload.form] &&
-            //     !state.forms[action.payload.form][action.payload.name]
-            // ){
-            //     state.forms[action.payload.form][action.payload.name] = action.payload.value
-            // }
-        },
-        updateField: (state, action) => {
-            const { form, name, value } = action.payload;
-            // console.log(`updatingField: ${form} = ${name} => ${value}`, state.forms[form])
-            state.forms[form][name] = value;
-        }
-    }
-});
-
-export const { 
-    addForm,
-    updateForm,
-    addField,
-    addFields,
-    updateField 
-} = formSlice.actions;
-export default formSlice.reducer;

package/src/redux/store.js

@@ -1,33 +0,0 @@
-import { 
-    configureStore, 
-    combineReducers
-} from '@reduxjs/toolkit'
-import appReducer from './slices/app'
-import formReducer from './slices/form'
-
-const staticReducers = {
-    app: appReducer,
-    form: formReducer
-}
-
-const appstore = configureStore({
-    reducer: staticReducers,
-    middleware: getDefaultMiddleware => getDefaultMiddleware({
-        serializableCheck: false
-    })
-})
-
-appstore.asyncReducers = {}
-appstore.injectReducer = (k, asyncReducer) => {
-    appstore.asyncReducers[k] = asyncReducer;
-    appstore.replaceReducer(createReducer(appstore.asyncReducers))
-}
-
-const createReducer = asyncReducers => {
-    return combineReducers({
-        ...staticReducers,
-        ...asyncReducers
-    })
-}
-
-export default appstore;