fmihel-windeco-components 2.0.0-beta.6 → 2.0.0-beta.61

package/jsx/NavBar.jsx

@@ -1,81 +1,57 @@
-import React, { useEffect, useState } from 'react';
-import NavItem, { isNavItem } from './NavBar/NavItem.jsx';
-import { isNavMenu } from './NavBar/NavMenu.jsx';
-import onResizeScreen from './Utils/onResizeScreen.js';
-import isCompact from './Utils/isCompact.js';
+/* eslint-disable no-nested-ternary */
+import React, { useEffect, useRef, useState } from 'react';
+import DefaultLogo from './NavBar/NavLogo.jsx';
+import { navbars } from '../utils/navbar.js';
 
-let _collapse = [];
-export const collapse = (p = undefined) => {
-    if (p === undefined) {
-        _collapse.map((close) => close());
-    } else if (p.add) {
-        _collapse.push(p.add);
-    } else if (p.remove) {
-        _collapse = _collapse.filter((it) => it === p.remove);
-    }
-};
+const definingCssClass = 'wd-navbar';
 
 function NavBar({
-    Logo = undefined,
+    id,
     className = NavBar.global.className,
-    addClass = NavBar.global.addClass,
-    style = NavBar.global.style,
+    style = { ...NavBar.global.style },
+    Logo = undefined,
+    attr = {},
     children,
 }) {
-    const [compact, setCompact] = useState(isCompact());
-    const [itemsState, setItemsState] = useState('close');
-    const toggleMenu = () => {
-        setItemsState(itemsState === 'close' ? 'open' : 'close');
-    };
+    const [collapse, setCollapse] = useState(true);
+    const childs = Array.isArray(children) ? children : [children];
+    const ref = useRef();
     useEffect(() => {
-        const close = () => {
-            setItemsState('close');
-        };
-        collapse({ add: close });
-
-        return () => {
-            collapse({ remove: close });
-        };
-    }, []);
-
-    useEffect(() => {
-        const resize = () => {
-            const current = isCompact();
-            if (current !== compact) {
-                setCompact(current);
-                setItemsState('close');
-            }
-        };
-        const removeResizeScreen = onResizeScreen(resize);
-        resize();
-        return () => {
-            removeResizeScreen();
-        };
-    }, [compact]);
-    //console.log('children',children,Array.isArray(children));
-    let childs = Array.isArray(children)?children:[children];
+        if (id) {
+            navbars[`${id}`] = {
+                ref, setCollapse, collapse,
+            };
+        }
+    }, [ref]);
+    const navBtnClick = () => {
+        setCollapse(!collapse);
+    };
+    const typeLogo = typeof Logo;
     return (
         <div
-            it='navbar'
-            state={`${itemsState}`}
-            className={ `${className} ${addClass}`}
+            {...id ? { id } : {}}
+            className={`${definingCssClass}${(className ? ` ${className}` : '')}`}
             style={{ ...NavBar.global.style, ...style }}
+            ref = {ref}
+            {...attr}
         >
-            <div it='nav-panel'>
-                <div it="nav-logo">{Logo && <Logo/>}</div>
-                <div it="nav-btn-close" className="wd-nav-btn" onClick={toggleMenu}>&#8801;</div>
+            <div nav-panel="">
+                {typeLogo === 'string' && <DefaultLogo caption={Logo}/>}
+                {typeLogo !== 'string' && Logo && <Logo/>}
+
+                <div nav-empty=""></div>
+                <div nav-btn="" onClick={navBtnClick}>&#8801;</div>
             </div>
-            <div it={'nav-items'} className="wd-scrollbar">
-                {childs.map((it, key) => ((isNavItem(it.type) || isNavMenu(it.type)) ? it : <NavItem key={key}>{it}</NavItem>))}
+            <div nav-menu="" {...(!collapse ? { expand: '' } : {})}>
+                {childs}
             </div>
         </div>
     );
 }
 
 NavBar.global = {
-    className: 'wd-navbar',
-    addClass: '',
+    className: '',
     style: {},
-
 };
+
 export default NavBar;

package/jsx/OnResize.jsx

@@ -0,0 +1,126 @@
+import React, {
+    useEffect, useRef, useState, forwardRef,
+} from 'react';
+import abs from '../utils/abs';
+
+function Debug({
+    className,
+    currentClass,
+}) {
+    const [width, setWidth] = useState(false);
+    const [left, setLeft] = useState(0);
+    const [top, setTop] = useState(0);
+
+    const ref = useRef();
+    useEffect(() => {
+        const observ = new ResizeObserver(() => {
+            if (ref.current) {
+                const pos = abs(ref.current);
+                setTop(pos.y);
+                setLeft(pos.x);
+                setWidth(ref.current.clientWidth);
+            }
+        });
+        observ.observe(ref.current);
+        return () => {
+            observ.disconnect();
+        };
+    }, [ref]);
+    const style = {
+        fontSize: '0.8rem',
+        color: 'white',
+        backgroundColor: '#993d3c',
+    };
+    return (
+        <>
+            <div
+                ref = {ref}
+                style={{
+                    ...style,
+                    position: 'relative',
+                    textAlign: 'center',
+                    paddingTop: 3,
+                    paddingBottom: 3,
+                    borderRadius: 12,
+
+                }}>
+                w:{width} class:{` ${className} ${currentClass}`}
+            </div>
+
+            <div
+                style={{
+                    ...style,
+                    padding: 10,
+                    left: 10,
+                    top: 10,
+                    position: 'absolute',
+                    zIndex: 1000,
+                }}
+            >
+                <div>w:{width}</div>
+                <div>class:{` ${className} ${currentClass}`}</div>
+            </div>
+        </>
+    );
+}
+const OnResize = forwardRef(({
+    id = false,
+    className = '',
+    rules = [], // [{width,className}] [{width:0,className:'def1'},{width:100,className:'def2}] || (({width})=> { return 'className'} )
+    debug = false,
+    onResize = undefined,
+    children,
+}, fRef) => {
+    const ref = fRef || useRef();
+    const [currentClass, setCurrentClass] = useState('');
+    const [opacity, setOpacity] = useState(0);
+
+    useEffect(() => {
+        const observ = new ResizeObserver(() => {
+            if (ref.current) {
+                const width = ref.current.clientWidth;
+                // setWidth(ref.current.clientWidth);
+                let findClass = false;
+
+                if (typeof rules === 'function') {
+                    findClass = rules({ width });
+                } else {
+                    for (let i = 0; i < rules.length; i++) {
+                        const current = rules[i];
+                        const next = i < rules.length - 1 ? rules[i + 1] : false;
+                        if (current.width <= width && (!next || width < next.width)) {
+                            findClass = current.className;
+                            break;
+                        }
+                    }
+                }
+                if (findClass !== false) {
+                    // console.log('currentClass',  'find', findClass);
+                    setCurrentClass(findClass);
+                }
+                setOpacity(1);
+                if (onResize) {
+                    onResize({ width });
+                }
+            }
+        });
+        observ.observe(ref.current);
+        return () => {
+            observ.disconnect();
+        };
+    }, [ref, onResize]);
+    return (
+        <div
+            {...id ? { id } : {}}
+            ref = {ref}
+            { ...(className || currentClass) ? { className: `${className} ${currentClass}` } : ''}
+            // {...debug ? { style: { border: '1px dashed #993d3c' } } : {}}
+            style={{ opacity, ...(debug ? { border: '1px dashed #993d3c' } : {}) } }
+        >
+            {debug ? <Debug currentClass={currentClass} className={className}/> : undefined}
+            {children}
+        </div>
+    );
+});
+
+export default OnResize;

package/jsx/StaticText.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const definingCssClass = 'wd-static-text';
+
+function StaticText({
+    value = '',
+    className = StaticText.global.className,
+    style = StaticText.global.className,
+    attr = {},
+    children,
+}) {
+    return (
+        <div
+            className={`${definingCssClass}${(className ? ` ${className}` : '')}`}
+            style={{
+                ...StaticText.global.style,
+                ...style,
+            }}
+            {...attr}
+        >
+            {value || children}
+        </div>
+    );
+}
+
+StaticText.global = {
+    className: '',
+    style: {},
+};
+export default StaticText;

package/jsx/Table/TBody.jsx

@@ -5,23 +5,35 @@ function TBody({
     data = [],
     fields = [],
     aliasId = 'ID',
+    aliasAttr = '-attr-',
+    aliasSep = '-sep-',
     noData = 'no data',
     footer = 'end',
     select = [],
     onClick,
+    onDoubleClick,
+    onMouseUp,
+    onDraw,
+    disableContextMenu,
 }) {
     const haveData = (Array.isArray(data) && data.length > 0);
 
     return (
         <tbody>
             {(haveData) && data.map((row, i) => <TR
-                key = {(aliasId in row) ? row[aliasId] : i}
+                key = { aliasId in row ? row[aliasId] : i}
                 data = {data}
                 row={row}
                 fields={fields}
                 select={aliasId in row && select.findIndex((id) => `${id}` === `${row[aliasId]}`) > -1}
                 onClick={onClick}
+                onDoubleClick = {onDoubleClick}
+                onMouseUp={onMouseUp}
+                onDraw={onDraw}
                 aliasId = {aliasId}
+                aliasAttr = {aliasAttr}
+                aliasSep={ aliasSep }
+                disableContextMenu ={disableContextMenu}
             />)}
             {(!haveData && noData !== false) && <tr><td nodata='' colSpan={fields.length}>{noData}</td></tr>}
             {(haveData && footer !== false) && <tr><td footer='' colSpan={fields.length}>{footer}</td></tr>}

package/jsx/Table/TD.jsx

@@ -6,7 +6,13 @@ function TD({
     fieldName,
     value,
     onClick,
+    onDoubleClick,
+    onMouseUp,
+    onDraw,
     aliasId,
+    attrs,
+    width,
+    disableContextMenu,
 }) {
     const click = () => {
         if (onClick) {
@@ -15,9 +21,42 @@ function TD({
             });
         }
     };
+    const doubleClick = () => {
+        if (onDoubleClick) {
+            onDoubleClick({
+                col: fieldName, value, row, data, aliasId,
+            });
+        }
+    };
+    const mouseUp = (event) => {
+        if (onMouseUp) {
+            onMouseUp({
+                col: fieldName, value, row, data, aliasId, event,
+            });
+        }
+    };
+    const contextMenu = (e) => {
+        e.preventDefault();
+        return false;
+    };
     return (
-        <td onClick={click}>
-            {value}
+        <td
+            onClick={click}
+            onMouseUp = {mouseUp}
+            onDoubleClick= {doubleClick}
+            id={fieldName}
+            {...(attrs ? { ...attrs } : {})}
+            {...(width ? { style: { width } } : {})}
+            onContextMenu={disableContextMenu ? contextMenu : undefined}
+        >
+            {onDraw ? onDraw({
+                sender: 'td',
+                col: fieldName,
+                value,
+                row,
+                data,
+                aliasId,
+            }) : value}
         </td>
     );
 }

package/jsx/Table/TH.jsx

@@ -4,7 +4,10 @@ function TH({
     data = [],
     fieldName,
     caption,
+    title,
     onClick,
+    attrs = false,
+    width = undefined,
 }) {
     const click = () => {
         if (onClick) {
@@ -13,7 +16,15 @@ function TH({
             });
         }
     };
-    return (<th onClick={click}>{caption}</th>);
+    return (<th
+        id={fieldName}
+        onClick={click}
+        {...(title ? { title } : {})}
+        {...(attrs ? { ...attrs } : {})}
+        {...(width ? { style: { width } } : {})}
+    >
+        {caption}
+    </th>);
 }
 
 export default TH;

package/jsx/Table/THead.jsx

@@ -6,6 +6,7 @@ function THead({
     fields = [],
     header,
     onClick,
+    aliasAttr = '',
 }) {
     return (
         <thead>
@@ -16,7 +17,10 @@ function THead({
                     data = {data}
                     fieldName = {field.name}
                     caption = {field.caption}
+                    title = {field.title}
                     onClick = {onClick}
+                    attrs={{ ...(field[aliasAttr] ? { ...field[aliasAttr] } : {}) }}
+                    width={field.width}
                 />)}
 
                 {(typeof header === 'string')

package/jsx/Table/TR.jsx

@@ -6,23 +6,50 @@ function TR({
     data = [],
     fields = [],
     onClick,
+    onDoubleClick,
+    onMouseUp,
+    onDraw,
     select = false,
     aliasId,
+    aliasAttr,
+    aliasSep,
+    disableContextMenu,
 }) {
     return (
-        <tr
-            {...(select ? { select: '' } : {})}
-        >
-            {fields.map((field, i) => <TD
-                key = {field.name}
-                data = {data}
-                row = {row}
-                fieldName = {field.name}
-                value = {row[field.name]}
-                onClick = {onClick}
-                aliasId = {aliasId}
-            />)}
-        </tr>
+        <>
+            {(aliasSep in row)
+            && <tr
+                {...(aliasId in row ? { id: row[aliasId] } : {})}
+                {...row[aliasAttr]}
+                sep={''}
+            >
+                <td colSpan={fields.length}>{row[aliasSep]}</td>
+            </tr>
+            }
+            {!(aliasSep in row)
+            && <tr
+
+                {...(aliasId in row ? { id: row[aliasId] } : {})}
+                {...(select ? { select: '' } : {})}
+                {...row[aliasAttr]}
+            >
+                {fields.map((field, i) => <TD
+                    key = {field.name}
+                    data = {data}
+                    row = {row}
+                    fieldName = {field.name}
+                    value = {row[field.name]}
+                    onClick = {onClick}
+                    onDoubleClick={onDoubleClick}
+                    onMouseUp = {onMouseUp}
+                    onDraw = {onDraw}
+                    aliasId = {aliasId}
+                    attrs={{ ...(field[aliasAttr] ? { ...field[aliasAttr] } : {}) }}
+                    width={field.width}
+                    disableContextMenu ={disableContextMenu}
+                />)}
+            </tr>}
+        </>
     );
 }
 

package/jsx/Table.jsx

@@ -1,11 +1,15 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import THead from './Table/THead.jsx';
 import TBody from './Table/TBody.jsx';
 
-function Table({
+export const definingCssClass = 'wd-table';
+
+const Table = forwardRef(({
     id,
     className = Table.global.className,
     aliasId = Table.global.aliasId,
+    aliasAttr = Table.global.aliasAttr,
+    aliasSep = Table.global.aliasSep,
     data = [],
     fields = [],
     header = true, /// / string true false
@@ -14,35 +18,52 @@ function Table({
     select = [],
     style = { ...Table.global.style },
     onClick = undefined,
+    onDoubleClick = undefined,
+    onMouseUp = undefined,
+    onDraw = undefined,
+    disableContextMenu = undefined,
+    attr = {},
+
+}, fRef) => (
+
+    <table
+        ref = {fRef}
+        className={`${definingCssClass}${(className ? ` ${className}` : '')}`}
+        {...(id ? { id } : {})}
+        style={{ ...Table.global.style, ...style }}
+        {...attr}
+    >
+        {(header !== false)
+                && <THead
+                    fields={fields}
+                    header={header}
+                    aliasAttr={aliasAttr}
+                />}
+        {<TBody
+            data={data}
+            fields={fields}
+            aliasId={aliasId}
+            aliasAttr={aliasAttr}
+            aliasSep={aliasSep}
+            noData={noData}
+            footer = {footer}
+            select={select}
+            onClick = {onClick}
+            onDoubleClick = {onDoubleClick}
+            onMouseUp = {onMouseUp}
+            onDraw = {onDraw}
+            disableContextMenu ={disableContextMenu}
+        />}
+
+    </table>
 
-}) {
-    return (
-
-        <table
-            type="table"
-            {...(className ? { className } : {})}
-            {...(id ? { id } : {})}
-            style={{ ...Table.global.style, ...style }}
-        >
-            {(header !== false) && <THead fields={fields} header={header}/>}
-            {<TBody
-                data={data}
-                fields={fields}
-                aliasId={aliasId}
-                noData={noData}
-                footer = {footer}
-                select={select}
-                onClick = {onClick}
-            />}
-
-        </table>
-
-    );
-}
+));
 
 Table.global = {
-    className: 'wd-table',
+    className: '',
     aliasId: 'ID',
+    aliasAttr: '-attr-',
+    aliasSep: '-sep-',
     header: true, // string true false
     noData: 'no data', // string or false
     footer: 'end', // string ot false

package/jsx/TableFixed/Data.jsx

@@ -1,42 +1,48 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import TR from './TR.jsx';
 
-function Data({
+const Data = forwardRef(({
     id,
     data = [],
     aliasId,
+    aliasAttr,
     fields,
     style = {},
     footer = false,
     select = [],
     onClick = undefined,
-}) {
-    return (
-        <>
-            <table
-                id={`table-${id}`}
-                style={{ ...style }}
-                data=''
-            >
-                <tbody>
-                    {data.map((row) => (
-                        <TR
-                            key = {row[aliasId]}
-                            row = {row}
-                            data={data}
-                            fields = {fields}
-                            aliasId={aliasId}
-                            select={(select.findIndex((ID) => row[aliasId] == ID) >= 0)}
-                            onClick={onClick}
-                        />
-                    ))}
-                </tbody>
-            </table>
-            {(footer)
+    onDoubleClick = undefined,
+    onDraw = undefined,
+
+}, ref) => (
+    <>
+        <table
+            id={`table-${id}`}
+            style={{ ...style }}
+            data=''
+            ref = {ref}
+        >
+            <tbody>
+                {data.map((row) => (
+                    <TR
+                        key = {row[aliasId]}
+                        row = {row}
+                        data={data}
+                        fields = {fields}
+                        aliasId={aliasId}
+                        aliasAttr={aliasAttr}
+                        select={(select.findIndex((ID) => row[aliasId] == ID) >= 0)}
+                        onClick={onClick}
+                        onDoubleClick={onDoubleClick}
+                        onDraw={onDraw}
+                    />
+                ))}
+            </tbody>
+        </table>
+        {(footer)
                 && <div footer="true">{footer}</div>
-            }
-        </>
-    );
-}
+        }
+    </>
+));
 
 export default Data;

package/jsx/TableFixed/Header.jsx

@@ -6,6 +6,7 @@ function Header({
     caption,
     fields,
     widths,
+    aliasAttr,
 
 }) {
     return (
@@ -18,9 +19,12 @@ function Header({
                     {(type === 'fields') && fields.map((field, i) => (
                         <th
                             key={field.name}
+                            id={field.name}
                             style={{
                                 ...(i < widths.length ? { width: widths[i], maxWidth: widths[i] } : {}),
                             }}
+                            {...(field.title ? { title: field.title } : {})}
+                            { ...(field[aliasAttr] ? { ...field[aliasAttr] } : {}) }
                         >
                             {field.caption}
                         </th>))