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

package/jsx/NavBar.jsx

@@ -1,72 +1,38 @@
-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';
-
-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);
-    }
-};
+/* eslint-disable no-nested-ternary */
+import React, { useState } from 'react';
+import Collapse from './Collapse.jsx';
+import getId from './Utils/getId.js';
+import DefaultLogo from './NavBar/NavLogo.jsx';
 
 function NavBar({
-    Logo = undefined,
+    id = getId('navbar'),
     className = NavBar.global.className,
-    addClass = NavBar.global.addClass,
-    style = NavBar.global.style,
+    style = { ...NavBar.global.style },
+    Logo = undefined,
     children,
 }) {
-    const [compact, setCompact] = useState(isCompact());
-    const [itemsState, setItemsState] = useState('close');
-    const toggleMenu = () => {
-        setItemsState(itemsState === 'close' ? 'open' : 'close');
-    };
-    useEffect(() => {
-        const close = () => {
-            setItemsState('close');
-        };
-        collapse({ add: close });
+    const [collapse, setCollapse] = useState(true);
+    const childs = Array.isArray(children) ? children : [children];
 
-        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];
+    const navBtnClick = () => {
+        setCollapse(!collapse);
+    };
+    const typeLogo = typeof Logo;
     return (
-        <div
-            it='navbar'
-            state={`${itemsState}`}
-            className={ `${className} ${addClass}`}
+        <div navbar=""
+            id={id}
+            {...className ? { className } : {}}
             style={{ ...NavBar.global.style, ...style }}
         >
-            <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>
     );
@@ -74,8 +40,7 @@ function NavBar({
 
 NavBar.global = {
     className: 'wd-navbar',
-    addClass: '',
     style: {},
-
 };
+
 export default NavBar;

package/jsx/Table/TBody.jsx

@@ -5,6 +5,7 @@ function TBody({
     data = [],
     fields = [],
     aliasId = 'ID',
+    aliasAttr = '-attr-',
     noData = 'no data',
     footer = 'end',
     select = [],
@@ -22,6 +23,7 @@ function TBody({
                 select={aliasId in row && select.findIndex((id) => `${id}` === `${row[aliasId]}`) > -1}
                 onClick={onClick}
                 aliasId = {aliasId}
+                aliasAttr = {aliasAttr}
             />)}
             {(!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

@@ -16,7 +16,10 @@ function TD({
         }
     };
     return (
-        <td onClick={click}>
+        <td
+            onClick={click}
+            id={fieldName}
+        >
             {value}
         </td>
     );

package/jsx/Table/TH.jsx

@@ -4,6 +4,7 @@ function TH({
     data = [],
     fieldName,
     caption,
+    title,
     onClick,
 }) {
     const click = () => {
@@ -13,7 +14,7 @@ function TH({
             });
         }
     };
-    return (<th onClick={click}>{caption}</th>);
+    return (<th id={fieldName} onClick={click} {...(title ? { title } : {})}>{caption}</th>);
 }
 
 export default TH;

package/jsx/Table/THead.jsx

@@ -16,6 +16,7 @@ function THead({
                     data = {data}
                     fieldName = {field.name}
                     caption = {field.caption}
+                    title = {field.title}
                     onClick = {onClick}
                 />)}
 

package/jsx/Table/TR.jsx

@@ -8,10 +8,12 @@ function TR({
     onClick,
     select = false,
     aliasId,
+    aliasAttr,
 }) {
     return (
         <tr
             {...(select ? { select: '' } : {})}
+            {...row[aliasAttr]}
         >
             {fields.map((field, i) => <TD
                 key = {field.name}
@@ -21,6 +23,7 @@ function TR({
                 value = {row[field.name]}
                 onClick = {onClick}
                 aliasId = {aliasId}
+
             />)}
         </tr>
     );

package/jsx/Table.jsx

@@ -6,6 +6,7 @@ function Table({
     id,
     className = Table.global.className,
     aliasId = Table.global.aliasId,
+    aliasAttr = Table.global.aliasAttr,
     data = [],
     fields = [],
     header = true, /// / string true false
@@ -29,6 +30,7 @@ function Table({
                 data={data}
                 fields={fields}
                 aliasId={aliasId}
+                aliasAttr={aliasAttr}
                 noData={noData}
                 footer = {footer}
                 select={select}
@@ -43,6 +45,7 @@ function Table({
 Table.global = {
     className: 'wd-table',
     aliasId: 'ID',
+    aliasAttr: '-attr-',
     header: true, // string true false
     noData: 'no data', // string or false
     footer: 'end', // string ot false

package/jsx/TableFixed/Data.jsx

@@ -5,6 +5,7 @@ function Data({
     id,
     data = [],
     aliasId,
+    aliasAttr,
     fields,
     style = {},
     footer = false,
@@ -26,6 +27,7 @@ function Data({
                             data={data}
                             fields = {fields}
                             aliasId={aliasId}
+                            aliasAttr={aliasAttr}
                             select={(select.findIndex((ID) => row[aliasId] == ID) >= 0)}
                             onClick={onClick}
                         />

package/jsx/TableFixed/Header.jsx

@@ -18,9 +18,11 @@ 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.caption}
                         </th>))

package/jsx/TableFixed/TD.jsx

@@ -17,7 +17,7 @@ function TD({
         }
     };
     return (
-        <td style={style } onClick={click}>{value}</td>
+        <td style={style } onClick={click} id={name}>{value}</td>
     );
 }
 

package/jsx/TableFixed/TR.jsx

@@ -6,11 +6,16 @@ function TR({
     data = [],
     fields = [], // []
     aliasId = 'ID',
+    aliasAttr = '-attr-',
     select = false,
     onClick = undefined,
 }) {
     return (
-        <tr id={row[aliasId]} {...(select ? { select: 'true' } : {})}>
+        <tr
+            id={row[aliasId]}
+            {...(select ? { select: 'true' } : {})}
+            {...row[aliasAttr]}
+        >
             {fields.map((field) => (
                 <TD
                     key = {field.name}

package/jsx/TableFixed.jsx

@@ -13,6 +13,7 @@ function TableFixed({
     className = TableFixed.global.className,
 
     aliasId = TableFixed.global.aliasId,
+    aliasAttr = TableFixed.global.aliasAttr,
     data = [],
     fields = [],
     header = true, /// / string true false
@@ -108,6 +109,7 @@ function TableFixed({
                 && <Data
                     id={id}
                     aliasId={aliasId}
+                    aliasAttr={aliasAttr}
                     data={data}
                     fields={fields}
                     footer={footer}
@@ -129,6 +131,7 @@ function TableFixed({
 TableFixed.global = {
     className: 'wd-table-fixed',
     aliasId: 'ID',
+    aliasAttr: '-attr-',
     header: true, // string true false
     noData: 'no data', // string or false
     footer: 'end', // string ot false

package/jsx/arch/NavBar/NavItem.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+export function isNavItem(o) {
+    return typeof o === 'function' && (o.name === 'NavItem' || o._originalClass === 'NavItem');
+}
+function NavItem({
+    caption = undefined,
+    link,
+    className = NavItem.global.className,
+    addClass = NavItem.global.addClass,
+    style = NavItem.global.style,
+    onClick = undefined,
+    children,
+
+}) {
+    const click = () => {
+        if (onClick) onClick({ link });
+    };
+    const text = () => {
+        if (caption) {
+            return typeof caption === 'string' ? <span it="cap">{caption}</span> : caption;
+        } if (children) {
+            return typeof children === 'string' ? <span it="cap">{children}</span> : children;
+        }
+        return '';
+    };
+    return (
+        <div
+            className={ `${className} ${addClass}`}
+            style={{ ...NavItem.global.style, ...style }}
+            onClick={click}
+        >
+            {text()}
+        </div>
+    );
+}
+NavItem._originalClass = 'NavItem';
+
+NavItem.global = {
+    className: 'wd-nav-item',
+    addClass: '',
+    style: {},
+
+};
+export default NavItem;

package/jsx/arch/NavBar/NavLogo.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+function NavLogo({
+    className = NavLogo.global.className,
+    addClass = NavLogo.global.addClass,
+    style = NavLogo.global.style,
+    children,
+}) {
+    return (
+        <div className={ `${className} ${addClass}`}
+            style={{ ...NavLogo.global.style, ...style }}
+        >
+            {children}
+        </div>
+    );
+}
+
+NavLogo.global = {
+    className: 'wd-nav-logo',
+    style: {},
+};
+
+export default NavLogo;

package/jsx/arch/NavBar.jsx

@@ -0,0 +1,81 @@
+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';
+
+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);
+    }
+};
+
+function NavBar({
+    Logo = undefined,
+    className = NavBar.global.className,
+    addClass = NavBar.global.addClass,
+    style = NavBar.global.style,
+    children,
+}) {
+    const [compact, setCompact] = useState(isCompact());
+    const [itemsState, setItemsState] = useState('close');
+    const toggleMenu = () => {
+        setItemsState(itemsState === 'close' ? 'open' : 'close');
+    };
+    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];
+    return (
+        <div
+            it='navbar'
+            state={`${itemsState}`}
+            className={ `${className} ${addClass}`}
+            style={{ ...NavBar.global.style, ...style }}
+        >
+            <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>
+            <div it={'nav-items'} className="wd-scrollbar">
+                {childs.map((it, key) => ((isNavItem(it.type) || isNavMenu(it.type)) ? it : <NavItem key={key}>{it}</NavItem>))}
+            </div>
+        </div>
+    );
+}
+
+NavBar.global = {
+    className: 'wd-navbar',
+    addClass: '',
+    style: {},
+
+};
+export default NavBar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fmihel-windeco-components",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.8",
   "description": "components for orders windeco",
   "main": "dist/windeco-components.js",
   "scripts": {

package/style/Container.scss

@@ -10,7 +10,7 @@
     align-items: stretch;    
 
     flex-direction: row;    
-    @include on-small{
+    @include less-small{
         flex-direction: column;
     }
 }