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

package/jsx/Icon.jsx

@@ -1,30 +1,29 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import React from 'react';
 
+const definingCssClass = 'wd-icon';
+
 export default function Icon({
     src, icon, path,
     className = Icon.global.className,
-    addClass = '',
     onClick = undefined,
     style = Icon.global.style,
     icons = Icon.global.icons,
+    attr = {},
 }) {
-    if (addClass!=='')
-        console.warn(`Icon.addClass is deprecated, use className = ${addClass}`);
-
     return (
         <img
-            type="icon"
             src={src || path || ((icons[icon] && icons[icon].src) ? icons[icon].src : false) || (icons[icon] && icons[icon].path ? icons[icon].path : false) || ''}
-            className={className + (addClass ? ` ${addClass}` : '') + ((icons[icon] && icons[icon].addClass) ? ` ${icons[icon].addClass}` : '')}
+            className={definingCssClass + (className ? ` ${className}` : '') + ((icons[icon] && icons[icon].className) ? ` ${icons[icon].className}` : '')}
             onClick={onClick}
             style={ { ...style } }
+            {...attr}
         />
     );
 }
 
 Icon.global = {
     icons: {}, // {name1:{src,addClass?},name2:{src,addClass?}...}
-    className: 'wd-icon',
+    className: '',
     style: {},
 };

package/jsx/Label.jsx

@@ -1,30 +1,32 @@
 import React from 'react';
 
+const definingCssClass = 'wd-label';
+
 function Label({
     id,
-    labelName,
     caption = 'label',
     className = Label.global.className,
-    addClass = '',
     style = Label.global.style,
+    attr = {},
     children,
-
 }) {
-    if (addClass!=='')
-        console.warn(`Label.addClass is deprecated, use className = ${addClass}`);
-
     return (
         <div
-            type='label'
-            {...(className || addClass ? {className:`${className} ${addClass}`}:{})}
+            label=''
+            style={{ ...Label.global.style, ...style }}
+            className={`${definingCssClass}${(className ? ` ${className}` : '')}`}
+            {...id ? { id: `label-${id}` } : {}}
+
         >
             <label
-                htmlFor={id || labelName}
-                style={{ ...Label.global.style, ...style }}
+                htmlFor={id}
+                {...attr}
             >
                 {caption}
             </label>
-            {children}
+            <div labeled=''>
+                {children}
+            </div>
         </div>
     );
 }

package/jsx/List/ListItem.jsx

@@ -2,13 +2,10 @@ import React from 'react';
 import Gap from '../Gap/Gap.jsx';
 
 export default function ListItem({
-    id,
     caption,
-    data,
     level,
     childs,
     className = ListItem.global.className,
-    addClass = ListItem.global.addClass,
     active = false,
     expand = false,
     onClick = undefined,
@@ -18,23 +15,22 @@ export default function ListItem({
     return (
         <Gap
             count ={level}
-            addClass={`${className} ${addClass}`}
+            className={`${className} `}
             attr={{
-                ...(active ? { active: 'true' } : {}),
-                ...(expand ? { expand: 'true' } : {}),
+                ...(active ? { active: '' } : {}),
+                ...(expand ? { expand: '' } : {}),
             }}
             onClick={onClick}
             onDoubleClick={onDoubleClick}
         >
-            <div is='caption'>
+            <div caption=''>
                 {caption}
             </div>
-            {(childs && childs.length > 0) && <div is='icon'></div>}
+            {(childs && childs.length > 0) && <div icon=''></div>}
         </Gap>
     );
 }
 
 ListItem.global = {
     className: 'wd-list-item',
-    addClass: '',
 };

package/jsx/List/ListNode.jsx

@@ -2,13 +2,6 @@ import React from 'react';
 import Collapse from '../Collapse.jsx';
 
 export default function ListNode({
-    className = ListNode.global.className,
-    addClass = ListNode.global.addClass,
-    style = ListNode.global.style,
-
-    classNameList,
-    addClassList,
-    styleList,
 
     list,
     aliasChilds,
@@ -31,13 +24,9 @@ export default function ListNode({
 
                 return (
                     <div
+                        list-node = {''}
                         key={aid}
                         id={aid}
-                        className={`${className} ${addClass}`}
-                        style={{
-                            ...ListNode.global.style,
-                            ...style,
-                        }}
                     >
                         <ItemComponent
                             id={aid}
@@ -53,20 +42,12 @@ export default function ListNode({
                         {(childs.length > 0)
                         && <Collapse
                             expand = {expand}
-                            className = {classNameList}
-                            addClass = {addClassList}
-                            style={styleList}
+                            attr = {{ list: '' }}
 
                         >
                             <ListNode
+                                list-node = {''}
                                 level={level + 1}
-                                className = {className}
-                                addClass = {addClass}
-                                style={style}
-
-                                classNameList = {classNameList}
-                                addClassList = {addClassList}
-                                styleList={styleList}
 
                                 list = {childs}
                                 ItemComponent ={ItemComponent}
@@ -89,7 +70,4 @@ export default function ListNode({
 }
 
 ListNode.global = {
-    className: 'wd-node',
-    addClass: '',
-    style: {},
 };

package/jsx/{List/List.jsx → List.jsx}

@@ -1,24 +1,21 @@
 import React from 'react';
-import ListItem from './ListItem.jsx';
-import ListNode from './ListNode.jsx';
+import ListItem from './List/ListItem.jsx';
+import ListNode from './List/ListNode.jsx';
+
+const definingCssClass = 'wd-list';
 
 function List({
     id = undefined,
     className = List.global.className,
-    addClass = List.global.addClass,
     style = List.global.style,
 
-    classNameNode = ListNode.global.className,
-    addClassNode = ListNode.global.addClass,
-    styleNode = ListNode.global.style,
-
     list = [],
     ItemComponent = List.global.ItemComponent,
 
     aliasId = List.global.aliasId,
     aliasCaption = List.global.aliasCaption,
     aliasChilds = List.global.aliasChilds,
-
+    attr = {},
     setup = {},
     onClick = undefined,
     onDoubleClick = undefined,
@@ -26,24 +23,14 @@ function List({
     return (
         <div
             {...(id ? { id } : {})}
-            className={`${className} ${addClass}`}
+            className={`${definingCssClass}${(className ? ` ${className}` : '')}`}
             style={{
                 ...List.global.style,
                 ...style,
             }}
+            {...attr}
         >
             <ListNode
-                className = {classNameNode}
-                addClass = {addClassNode}
-                style = {styleNode}
-
-                classNameList = {className}
-                addClassList = {addClass}
-                styleList={{
-                    ...List.global.style,
-                    ...style,
-                }}
-
                 list = {list}
                 aliasChilds = {aliasChilds}
                 aliasId = {aliasId}
@@ -58,8 +45,7 @@ function List({
     );
 }
 List.global = {
-    className: 'wd-list',
-    addClass: '',
+    className: '',
     style: {},
 
     ItemComponent: ListItem,

package/jsx/Modal.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import scr from './Utils/screen';
+import scr from '../utils/screen';
 
 let _root;
 function getRoot() {
@@ -16,7 +16,6 @@ function Modal({
     enableShadow = true,
     classShadow = Modal.global.classShadow,
     onClickShadow = undefined,
-    opacityShadow = Modal.global.opacityShadow,
     attr = {},
     children,
 }) {
@@ -50,6 +49,11 @@ function Modal({
         };
     }, [visible]);
 
+    const hideContextMenu = (e) => {
+        e.preventDefault();
+        return false;
+    };
+
     return ReactDOM.createPortal(
         <div
             id = {id}
@@ -63,6 +67,7 @@ function Modal({
 
             }}
             {...attr}
+            onContextMenu={ hideContextMenu }
         >
             {enableShadow
             && <div
@@ -72,9 +77,10 @@ function Modal({
                     left: -1,
                     top: -1,
                     ...screen,
-                    ...(opacityShadow === false ? {} : { opacity: opacityShadow }),
+                    // ...(opacityShadow === false ? {} : { opacity: opacityShadow }),
                 }}
-                onClick={onClickShadow}
+                onMouseUp={onClickShadow}
+                onContextMenu={ hideContextMenu }
             />}
             {children}
         </div>,
@@ -86,7 +92,6 @@ Modal.global = {
     idRoot: 'wd-modal',
     className: 'wd-modal',
     classShadow: 'wd-shadow',
-    opacityShadow: 0.4,
 };
 
 export default Modal;

package/jsx/ModalDialog/ModalDialogAPI.js

@@ -1,7 +1,7 @@
-import absPos from '../Utils/abs';
-import screen from '../Utils/screen';
-import DOM from '../Utils/DOM';
-import isMobile from '../Utils/isMobile';
+import absPos from '../../utils/abs';
+import screen from '../../utils/screen';
+import DOM from '../../utils/DOM';
+import isMobile from '../../utils/isMobile';
 import global from '../global';
 
 class ModalDialogAPI {
@@ -97,6 +97,13 @@ class ModalDialogAPI {
             }
 
             return out;
+        } if (align === 'center') {
+            return {
+                left: (scr.width - width) / 2,
+                top: (scr.height - height) / 2,
+                width,
+                height,
+            };
         }
 
         return {
@@ -110,13 +117,15 @@ class ModalDialogAPI {
      *  @returns { {pos,size,width} }
      */
     static mobileToObject(mobile) {
+        const scr = screen();
         if (mobile === 'large') {
             return { pos: 'center', size: 100, width: 100 };
         } if (mobile === 'middle') {
             return { pos: 'center', size: 60, width: 100 };
         } if (mobile === 'small') {
-            return { pos: 'center', size: 30, width: 80 };
-        } if (mobile === false) {
+            return { pos: 'center', size: 40, width: 80 };
+        }
+        if (mobile === false) {
             return { pos: false, size: false, width: false };
         }
         const pos = Object.keys(mobile).find((it) => ['center', 'top', 'bottom'].indexOf(it) !== -1);

package/jsx/ModalDialog.jsx

@@ -1,11 +1,14 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 
 import Modal from './Modal.jsx';
 import api from './ModalDialog/ModalDialogAPI.js';
 import Btn from './Btn.jsx';
-import mousePos from './Utils/mouse.js';
-import onResizeScreen from './Utils/onResizeScreen.js';
-import isCompact from './Utils/isCompact.js';
+import mousePos from '../utils/mouse.js';
+import onResizeScreen from '../utils/onResizeScreen.js';
+import isCompact from '../utils/isCompact.js';
+import abs from '../utils/abs.js';
+
+const definingCssClass = 'wd-modal-dialog';
 
 function ModalDialog({
     id,
@@ -15,7 +18,7 @@ function ModalDialog({
     onClickFooterBtn = undefined,
     header = false,
     footer = undefined,
-    align = 'stretch', // stretch, custom,stickTo
+    align = 'stretch', // stretch, custom,stickTo,center
     stickTo = undefined, // DOM  | string
     stickAlign = 'bottom', // bottom | left | screen-right-all
     stickOffX = 0,
@@ -25,20 +28,17 @@ function ModalDialog({
     top = ModalDialog.global.top, // for align = custom
     width = ModalDialog.global.width, // for align = custom,stickTo
     height = ModalDialog.global.height, // for align = custom,stickTo
-    mobile = { top: 30 }, // false,large,middle,small,{center||top||bottom:<percent size>}
+    mobile = 'small', // false,large,middle,small,{center||top||bottom:<percent size>}
     classShadow = Modal.global.classShadow,
-    opacityShadow = Modal.global.opacityShadow,
     enableShadow = true,
     draggable = true, // work with align = custom || stickTo
     resizable = false,
     className = ModalDialog.global.className,
-    addClass = '',
     style = { ...ModalDialog.global.style },
+    attr = {},
     children,
 
 }) {
-    if (addClass !== '') console.warn(`ModalDialog.addClass is deprecated, use className = ${addClass}`);
-
     const [pos, setPos] = useState({
         left, top,
     });
@@ -50,13 +50,16 @@ function ModalDialog({
     const [off, setOff] = useState({ x: 0, y: 0 });
     const [userModif, setUserModif] = useState(false);
     const [compact, setCompact] = useState(isCompact());
-
+    const [visibility, setVisibility] = useState('hidden');
+    // onst [visibility, setVisibility] = useState('visible');
+    const refHeader = useRef();
     let footers = [];
     if (Array.isArray(footer)) {
         footers = footer;
     } else if (typeof footer === 'object') {
         footers = Object.keys(footer);
     }
+
     useEffect(() => {
         const resize = (first = false) => {
             const iscompact = isCompact();
@@ -126,13 +129,30 @@ function ModalDialog({
         };
     }, [visible, mouseState, off]);
 
+    useEffect(() => {
+        if (visible) {
+            if (visibility === 'hidden') {
+                setVisibility('visible');
+            }
+        } else if (visibility === 'visible') { setVisibility('hidden'); }
+    }, [visible, pos]);
     const mouseDown = ({ button }) => {
         if ((align === 'custom' || align === 'stickTo')
         && draggable && button === 0) {
             const mouse = mousePos();
-            setOff({ x: mouse.x - pos.left, y: mouse.y - pos.top });
-            setMouseState('move');
-            if (!userModif) setUserModif(true);
+            let need = true;
+            if (draggable === 'header') {
+                if (refHeader.current) {
+                    const areaHeader = abs(refHeader.current);
+                    need = ((mouse.x >= areaHeader.x && mouse.x <= areaHeader.x + areaHeader.w)
+                            && (mouse.y >= areaHeader.y && mouse.y <= areaHeader.y + areaHeader.h));
+                } else need = false;
+            }
+            if (need) {
+                setOff({ x: mouse.x - pos.left, y: mouse.y - pos.top });
+                setMouseState('move');
+                if (!userModif) setUserModif(true);
+            }
         }
     };
     const mouseDownResize = () => {
@@ -155,36 +175,36 @@ function ModalDialog({
             id={id}
             visible={visible}
             classShadow= {classShadow}
-            opacityShadow={opacityShadow}
             enableShadow={enableShadow}
             onClickShadow={onClickShadow}
 
         ><>
                 <div
-                    type="dialog"
+
                     style={{
-                        ...ModalDialog.global.style, ...style, ...pos, ...size,
+                        ...ModalDialog.global.style, ...style, ...pos, ...size, visibility,
                     }}
-                    {...(className || addClass ? { className: `${className} ${addClass}` } : {})}
+                    className={`${definingCssClass}${(className ? ` ${className}` : '')}`}
                     onMouseDown={mouseDown}
+                    {...attr}
                 >
                     {(header)
-                    && <div type="dialog-header">
-                        <div type="dialog-caption">
+                    && <div dialog-header='' ref= {refHeader}>
+                        <div dialog-caption=''>
                             {header}
                         </div>
                         {(onClickHeaderClose)
-                        && <div type="dialog-close-btn" onClick={onClickHeaderClose}>
+                        && <div dialog-close-btn='' onClick={onClickHeaderClose}>
                         &#10006;
                         </div>}
 
                     </div>
                     }
-                    <div type="dialog-content">
+                    <div dialog-content=''>
                         {children}
                     </div>
                     {(footers.length > 0)
-                        && <div type="dialog-footer">
+                        && <div dialog-footer=''>
                             {footers.map((key) => <Btn
                                 id={api.getFooterParam(key, 'id', footer)}
                                 key={key} onClick={() => clickFooterBtn(key)}
@@ -197,7 +217,7 @@ function ModalDialog({
                     }
                 </div>
                 {resizable && !compact
-                && <div type="dialog-resize"
+                && <div dialog-resize=''
                     style={{
                         left: pos.left + size.width,
                         top: pos.top + size.height,
@@ -214,14 +234,13 @@ function ModalDialog({
 }
 
 ModalDialog.global = {
-    className: 'wd-dialog-scale',
+    className: 'wd-dialog-slide-from-top',
+    classShadow: 'wd-shadow',
     style: {},
     left: 0,
     top: 0,
-    width: 300,
+    width: 400,
     height: 100,
-    classShadow: 'wd-shadow',
-    opacityShadow: false,
 
 };
 export default ModalDialog;

package/jsx/NavBar/NavItem.jsx

@@ -1,44 +1,55 @@
-import React from 'react';
+import React, { useState } from 'react';
+import Collapse from '../Collapse.jsx';
 
-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,
+    id,
+    caption,
     children,
+    active = false,
+    open = false,
+    style = { ...NavItem.global.style },
+    className = NavItem.global.className,
+    onClick = NavItem.global.onClick,
 
 }) {
+    const [opened, setOpened] = useState(open);
     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;
+        let current = opened;
+        if (children) {
+            current = !opened;
+            setOpened(current);
+        }
+        if (onClick) {
+            onClick({
+                id, open: current, caption, active,
+            });
         }
-        return '';
     };
+
     return (
         <div
-            className={ `${className} ${addClass}`}
-            style={{ ...NavItem.global.style, ...style }}
-            onClick={click}
+            {...className ? { className } : {}}
+            style = {{ ...NavItem.global.style, ...style }}
+            nav-item=""
+            {...(opened ? { opened: '' } : {})}
+            {...(active ? { active: '' } : {})}
         >
-            {text()}
+            <div caption="" onClick={click}>
+                <div text="" >{caption || 'item'}</div>
+                {(children) && <div img=""/>}
+            </div>
+            {(children) && <Collapse expand={opened} attr={{ childs: '' }}>
+                {children}
+            </Collapse>
+            }
         </div>
     );
 }
-NavItem._originalClass = 'NavItem';
 
+// NavItem._className='NavItem';
 NavItem.global = {
-    className: 'wd-nav-item',
-    addClass: '',
+    onClick: undefined,
+    className: '',
     style: {},
 
 };

package/jsx/NavBar/NavLogo.jsx

@@ -2,15 +2,16 @@ import React from 'react';
 
 function NavLogo({
     className = NavLogo.global.className,
-    addClass = NavLogo.global.addClass,
     style = NavLogo.global.style,
-
+    caption = NavLogo.global.caption,
     children,
 }) {
     return (
-        <div className={ `${className} ${addClass}`}
+        <div
+            {...className ? { className } : {}}
             style={{ ...NavLogo.global.style, ...style }}
         >
+            {(caption) && caption }
             {children}
         </div>
     );
@@ -20,6 +21,7 @@ NavLogo.global = {
     className: 'wd-nav-logo',
     addClass: '',
     style: {},
+    caption: 'logo',
 
 };