@zuzjs/ui 0.3.0 → 0.3.2

package/src/comps/input.tsx

@@ -1,13 +1,16 @@
 import {
     FC,
+    Ref,
     LegacyRef,
     forwardRef,
     useRef,
     SyntheticEvent,
+    useEffect,
+    memo,
 } from 'react';
 import { ClassNames } from '@emotion/react'
 import { nanoid } from 'nanoid';
-import { buildCSS } from '../core'
+import { cleanProps, buildCSS } from '../core'
 import { STORE_FORM_KEY } from '../context/AppProvider'
 import useDispatch from '../hooks/useDispatch'
 import useStore from '../hooks/useStore'
@@ -15,7 +18,102 @@ import {
     UPDATE_FORM_FIELD
 } from '../actions'
 
-const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLHeadingElement>) => {
+const SIZING_STYLE = [
+    'borderBottomWidth',
+    'borderLeftWidth',
+    'borderRightWidth',
+    'borderTopWidth',
+    'boxSizing',
+    'fontFamily',
+    'fontSize',
+    'fontStyle',
+    'fontWeight',
+    'letterSpacing',
+    'lineHeight',
+    'paddingBottom',
+    'paddingLeft',
+    'paddingRight',
+    'paddingTop',
+    // non-standard
+    'tabSize',
+    'textIndent',
+    // non-standard
+    'textRendering',
+    'textTransform',
+    'width',
+    'wordBreak',
+] as const;
+type SizingProps = Extract<
+  (typeof SIZING_STYLE)[number],
+  keyof CSSStyleDeclaration
+>;
+
+export const noop = () => {};
+
+const pick = <Obj extends { [key: string]: any }, Key extends keyof Obj>(
+  props: Key[],
+  obj: Obj,
+): Pick<Obj, Key> =>
+  props.reduce((acc, prop) => {
+    acc[prop] = obj[prop];
+    return acc;
+}, {} as Pick<Obj, Key>);
+
+type SizingStyle = Pick<CSSStyleDeclaration, SizingProps>;
+
+export type SizingData = {
+    sizingStyle: SizingStyle;
+    paddingSize: number;
+    borderSize: number;
+};
+
+const isIE = !!(document.documentElement as any).currentStyle
+
+const getSizingData = (node: HTMLElement): SizingData | null => {
+    
+    const style = window.getComputedStyle(node);
+
+    if (style === null) {
+        return null;
+    }
+
+    const sizingStyle = pick(SIZING_STYLE as unknown as SizingProps[], style);
+    const { boxSizing } = sizingStyle;
+
+    // probably node is detached from DOM, can't read computed dimensions
+    if (boxSizing === '') {
+        return null;
+    }
+
+    // IE (Edge has already correct behaviour) returns content width as computed width
+    // so we need to add manually padding and border widths
+    if (isIE && boxSizing === 'border-box') {
+        sizingStyle.width =
+        parseFloat(sizingStyle.width!) +
+        parseFloat(sizingStyle.borderRightWidth!) +
+        parseFloat(sizingStyle.borderLeftWidth!) +
+        parseFloat(sizingStyle.paddingRight!) +
+        parseFloat(sizingStyle.paddingLeft!) +
+        'px';
+    }
+
+    const paddingSize =
+        parseFloat(sizingStyle.paddingBottom!) +
+        parseFloat(sizingStyle.paddingTop!);
+
+    const borderSize =
+        parseFloat(sizingStyle.borderBottomWidth!) +
+        parseFloat(sizingStyle.borderTopWidth!);
+
+    return {
+        sizingStyle,
+        paddingSize,
+        borderSize,
+    };
+
+}
+
+const Input = forwardRef((props : { [ key: string ] : any }, ref : Ref<HTMLTextAreaElement|HTMLInputElement>) => {
 
     const {
         as,
@@ -24,6 +122,8 @@ const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTM
         onChange,
         onKeyUp,
         onClick,
+        onBlur,
+        onFocus,
         readOnly,
         type,
         tag,
@@ -34,7 +134,11 @@ const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTM
         onSubmit,
         value,
         defaultValue,
-        fref
+        fref,
+        autoComplete,
+        elastic,
+        minRows,
+        maxRows
     } = props;
 
     const dispatch = useDispatch(STORE_FORM_KEY)
@@ -46,11 +150,36 @@ const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTM
 
     const _defaultCSS = `width: 100%;border-radius: var(--radius-base);padding-left: 4px;padding-right: 4px;border-style: solid;border-width: 1px;border-color: var(--colors-gray-200);`;
 
+    const isControlled = props.value !== undefined;
+    const measurementsCacheRef = useRef<SizingData>();
+
+    const handleElastic = () => {
+        const node = _ref.current!
+        const nodeSizingData = measurementsCacheRef.current
+        ? measurementsCacheRef.current : getSizingData(node)
+        if (!nodeSizingData) {
+            return;
+        }
+        measurementsCacheRef.current = nodeSizingData;
+
+        // const [height, rowHeight] = calculateNodeHeight(
+        //     nodeSizingData,
+        //     node.value || node.placeholder || 'x',
+        //     minRows || 6,
+        //     maxRows || 6,
+        // );
+
+    }
+
+    useEffect(() => {}, [])
+
     return (
         <ClassNames>
             {({ css, cx }) => <El
+                {...cleanProps(props)}
                 type={type || `text`} 
                 placeholder={placeholder || undefined}
+                autoComplete={autoComplete || undefined}
                 name={name || nanoid()}
                 multiple={type == 'file' ? multiple : undefined}
                 accept={accept || `*`}
@@ -60,27 +189,36 @@ const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTM
                 defaultValue={defaultValue || ``}
                 onKeyUp={(e : SyntheticEvent) => {
                     let k = e['keyCode'] || ['which'];
-                    if(El != 'textarea' && k == 13 && form && onSubmit){
+                    if(form && onSubmit && El != 'textarea' && k == 13){
                         onSubmit(forms[form]);
+                    }else{
+                        if(onKeyUp) onKeyUp(e)
                     }
+                    
                 }}
                 onChange={e => {
                     let val = type == 'file' ? 
                         e.currentTarget.files
                         : e.currentTarget.value;
-                    dispatch( dispatch( UPDATE_FORM_FIELD( form || 'orphan', name, val == "" ? null : val, forms ) ) );
+                    if(form) dispatch( dispatch( UPDATE_FORM_FIELD( form || 'orphan', name, val == "" ? null : val, forms ) ) );
+                    // if(El == `textarea` && elastic) handleElastic()
                     onChange && onChange(val == "" ? null : val)
                 }}
                 onClick={onClick ? onClick : () => {}}
                 readOnly={readOnly || false}
                 onBlur={e => {
+                    if(onBlur) onBlur(e)
                     if(touched){}
                 }}
-                onFocus={ e => touched == false && dispatch( UPDATE_FORM_FIELD( form || 'orphan', `touched`, true, forms ) ) }
+                onFocus={ e => {
+                    if(touched == false)dispatch( UPDATE_FORM_FIELD( form || 'orphan', `touched`, true, forms ) ) 
+                    if(onFocus) onFocus(e)
+                }}
             />}
         </ClassNames>
     )
-
+    
+    
 })
 
 export default Input

package/src/comps/mediaplayer.tsx

@@ -0,0 +1,12 @@
+import {
+    forwardRef,
+    LegacyRef
+} from 'react'
+import { ClassNames } from '@emotion/react'
+import { buildCSS } from '../core'
+
+const MediaPlayer = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLImageElement>) => {
+
+})
+
+export default MediaPlayer;

package/src/context/store/theme.tsx

@@ -8,7 +8,7 @@ class AppTheme {
     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.#mode = conf.mode || conf.theme.mode || "auto";
         this.#lightTheme = {
             //CORE
             tag: "light",

package/src/core/index.ts

@@ -38,6 +38,18 @@ const makeCSSValue = (k : any, v : any, o : any) => {
     return `${k}:${v}${unit};`;
 }
 
+const cleanProps = (props : any) => {
+    let _props = { ...props }
+    Object.keys(_props).map(k => {
+        if(k in cssProps){
+            delete _props[k]
+        }
+    });
+    let _extras = [`as`,`hover`,`bref`,`tag`]
+    _extras.map(x => x in _props && delete _props[x])
+    return _props
+}
+
 const buildCSS = (props : any) => {
     let css = ``;
     Object.keys(props).map(k => {
@@ -216,7 +228,7 @@ const filterHTMLProps = (props : any) => {
     return filter;
 }
 
-const uuid = () => nanoid()
+const uuid = (len=21) => nanoid(len)
 
 const addScript = (src: string, callback: () => any) => {
     var s = document.createElement('script')
@@ -278,10 +290,112 @@ const imgPromiseFactory = ({decode = true, crossOrigin = ''}) =>
   })
 }
 
+const parseFilename = nm => {
+    var re = /(?:\.([^.]+))?$/;
+    return {
+        name: nm.split('.').slice(0, -1).join('.'),
+        ext: re.exec(nm)[1]
+    }
+}
+
+const camelCase = str => str.replace(":", "-").replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+
+const getMousePosition = e => {
+    const pos = {
+      x: (e as MouseEvent).clientX,
+      y: (e as MouseEvent).clientY,
+    };
+  
+    const touch = (e as TouchEvent).changedTouches;
+  
+    if (touch) {
+      pos.x = touch[0].clientX;
+      pos.y = touch[0].clientY;
+    }
+  
+    if (!pos.x || pos.x < 0) pos.x = 0;
+  
+    if (!pos.y || pos.y < 0) pos.y = 0;
+  
+    return pos;
+}
+
+const copyToClipboard = (str : string, callback: Function) => {
+	const el = document.createElement('textarea');
+	let storeContentEditable = el.contentEditable;
+	let storeReadOnly = el.readOnly;
+	el.value = str;
+	el.contentEditable = `true`;
+	el.readOnly = false;
+	el.setAttribute('readonly', `false`);
+	el.setAttribute('contenteditable', `true`);
+	el.style.position = 'absolute';
+	el.style.left = '-999999999px';
+	document.body.appendChild(el);
+	const selected =
+		document.getSelection().rangeCount > 0
+			? document.getSelection().getRangeAt(0)
+			: false;
+	el.select();
+	el.setSelectionRange(0, 999999);
+	document.execCommand('copy');
+	document.body.removeChild(el);
+	if (selected) {
+		document.getSelection().removeAllRanges();
+		document.getSelection().addRange(selected);
+	}
+	el.contentEditable = storeContentEditable;
+	el.readOnly = storeReadOnly;
+	if(callback) callback()
+}
+
+/**
+ * Format bytes as human-readable text.
+ * 
+ * @param bytes Number of bytes.
+ * @param si True to use metric (SI) units, aka powers of 1000. False to use 
+ *           binary (IEC), aka powers of 1024.
+ * @param dp Number of decimal places to display.
+ * 
+ * @return Formatted string.
+ */
+const formatSize = (bytes, si=false, dp=1) => {
+    const thresh = si ? 1000 : 1024;
+  
+    if (Math.abs(bytes) < thresh) {
+      return bytes + ' B';
+    }
+  
+    const units = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] 
+    let u = -1;
+    const r = 10**dp;
+  
+    do {
+      bytes /= thresh;
+      ++u;
+    } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+  
+  
+    return bytes.toFixed(dp) + ' ' + units[u];
+}
+
+const slugify = (...args: (string | number)[]): string => {
+    const value = args.join(' ')
+
+    return value
+        .normalize('NFD') // split an accented letter in the base letter and the acent
+        .replace(/[\u0300-\u036f]/g, '') // remove all previously split accents
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9 ]/g, '') // remove all chars not letters, numbers and spaces (to be replaced)
+        .replace(/\s+/g, '-') // separator
+}
+
 export {
     addProps,
     addScript,
     buildCSS,
+    cleanProps,
     buildFormData,
     byName,
     byId,
@@ -306,6 +420,12 @@ export {
     generateModalRoutes, 
     generatePreservedRoutes, 
     generateRegularRoutes,
-    getHostname
+    getHostname,
+    parseFilename,
+    camelCase,
+    getMousePosition,
+    formatSize,
+    copyToClipboard,
+    slugify
 }
 

package/src/core/styles.ts

@@ -3,6 +3,10 @@ const cssProps : { [key: string] : any } = {
     "alignContent": "align-content",
     
     "aic": "aic",
+    "ais": "ais",
+    "aie": "aie",
+    "nous": "nous",
+    "nope": "nope",
     "ai": "align-items",
     "alignItems": "align-items",
     
@@ -278,6 +282,7 @@ const cssProps : { [key: string] : any } = {
     "wordBreak": "word-break",
     "wordSpacing": "word-spacing",
     "wrap": "wrap",
+    "textWrap": "textWrap",
     "wordWrap": "word-wrap",
     "writingMode": "writing-mode",
     "zIndex": "z-index",
@@ -317,6 +322,8 @@ const cssPropsDirect : { [key : string] : any } = {
     'flex' : 'display: flex;',
     'fwrap' : 'flex-wrap: wrap;',
     'aic' : 'align-items: center;',
+    'ais' : 'align-items: flex-start;',
+    'aie' : 'align-items: flex-end;',
     'ass' : 'align-self: flex-start;',
     'asc' : 'align-self: center;',
     'ase' : 'align-self: flex-end;',
@@ -329,13 +336,17 @@ const cssPropsDirect : { [key : string] : any } = {
     'block' : 'display: block;',
     'bold' : "font-weight: bold;",
     'wrap' : "word-wrap: break-word;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 99%;",
+    'textWrap' : "word-wrap: break-word;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 99%;",
     'pointer' : "cursor: pointer;",
     'fb' : 'font-family: var(--primary-font-bold);',
     'ph' : 'padding-left: __VALUE__;padding-right: __VALUE__;',
     'pv' : 'padding-bottom: __VALUE__;padding-top: __VALUE__;',
     'mv' : 'margin-bottom: __VALUE__;margin-top: __VALUE__;',
     'mh' : 'margin-left: __VALUE__;margin-right: __VALUE__;',
-    'anim' : 'transition:all __VALUE__s linear 0s;'
+    'anim' : 'transition:all __VALUE__s linear 0s;',
+    'nous' : 'user-select: none;',
+    'nope' : 'pointer-events: none;',
+    'tdn' : 'text-decoration: none;',
 }
 
 const cssPropsIgnore : string[] = [

package/src/hooks/index.tsx

@@ -5,4 +5,6 @@ export { default as useDispatch } from './useDispatch'
 export { default as useResizeObserver } from './useResizeObserver'
 export { default as useDevice } from './useDevice'
 export { default as useToast } from './useToast'
-export { default as useLang } from './useLang'
+export { default as useLang } from './useLang'
+export { default as useContextMenu } from './useContextMenu'
+export { default as useRender } from './useRender'

package/src/hooks/useContextMenu.tsx

@@ -0,0 +1,123 @@
+import { SyntheticEvent, useEffect, useState, useRef } from "react"
+import ReactDOM from 'react-dom/client'
+import Box from '../comps/box'
+import { getMousePosition } from "../core"
+
+const Menu = ({ ID, hide, e, items, width }) => {
+
+    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 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)
+        }
+    }
+
+    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 hide = () => {
+        _hide()
+        hideAll()
+    }
+
+    const show = (e : MouseEvent, items : Array<any>) => {
+        e.preventDefault(); e.stopPropagation();   
+        hideAll()
+        root.render(<Menu e={e} width={contextWidth || 220} items={items} ID={ID} hide={hide} />)
+    }
+
+    useEffect(() => {
+        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,
+        hideAll
+    }
+
+}
+
+export default useContextMenu

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

@@ -25,7 +25,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

@@ -103,4 +103,31 @@
           left: 20px;
         }
     }
+}
+
+.zuz-contextmenu{
+    width: 220px;
+    border-radius: 5px;
+    padding: 4px;
+    background: rgba(34,34,34,0.5);
+    border: 1px rgba(255,255,255,0.25) solid;
+    box-shadow: 0px 1px 3px rgba(0, 0, 0, .45);
+    backdrop-filter: blur(20px);
+    button{
+        border: 0px;
+        text-align: left;
+        padding: 4px 6px;
+        background: rgba(0, 0, 0, 0);
+        cursor: pointer;
+        color: #fff;
+        border-radius: 4px;
+        &:hover{
+            background: #5183ff;
+        }
+    }
+    .line{
+        height: 1px;
+        background: rgba(255,255,255,0.25);
+        margin: 4px 6px;
+    }
 }