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

package/jsx/TableFixed/TD.jsx

@@ -7,7 +7,10 @@ function TD({
     style = {},
     name = '',
     onClick = undefined,
+    onDoubleClick = undefined,
+    onDraw = undefined,
     data = [],
+    attrs,
 }) {
     const click = () => {
         if (onClick) {
@@ -16,8 +19,31 @@ function TD({
             });
         }
     };
+    const doubleClick = () => {
+        if (onDoubleClick) {
+            onDoubleClick({
+                col: name, value, row: rowData, aliasId, data,
+            });
+        }
+    };
     return (
-        <td style={style } onClick={click}>{value}</td>
+        <td
+            style={style}
+            onClick={click}
+            onDoubleClick={doubleClick}
+            id={name}
+            {...(attrs ? { ...attrs } : {})}
+        >
+            {onDraw ? onDraw({
+                sender: 'td',
+                col: name,
+                value,
+                row: rowData,
+                data,
+                aliasId,
+            }) : value}
+
+        </td>
     );
 }
 

package/jsx/TableFixed/TR.jsx

@@ -6,11 +6,19 @@ function TR({
     data = [],
     fields = [], // []
     aliasId = 'ID',
+    aliasAttr = '-attr-',
     select = false,
     onClick = undefined,
+    onDoubleClick = undefined,
+    onDraw = 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}
@@ -24,7 +32,9 @@ function TR({
                         ...('width' in field ? { width: field.width } : {}),
                     }}
                     onClick={onClick}
-
+                    onDoubleClick={onDoubleClick}
+                    onDraw={onDraw}
+                    attrs={{ ...(field[aliasAttr] ? { ...field[aliasAttr] } : {}) }}
                 />))}
         </tr>
     );

package/jsx/TableFixed/utils.js

@@ -1,4 +1,4 @@
-import size from '../Utils/size';
+import size from '../../utils/size';
 
 export const culcWidths = (tableDOM, sizeTable) => {
     const tds = tableDOM.childNodes[0].childNodes[0].childNodes;

package/jsx/TableFixed.jsx

@@ -4,22 +4,28 @@ import React, { useEffect, useState, useRef } from 'react';
 import Header from './TableFixed/Header.jsx';
 import Data from './TableFixed/Data.jsx';
 import { culcWidths, haveScrollBar, isWidthsEmpty } from './TableFixed/utils.js';
-import DOM from './Utils/DOM.js';
-import getSize from './Utils/size.js';
+import DOM from '../utils/DOM.js';
+import getSize from '../utils/size.js';
 import Error from './Error/Error.jsx';
 
+const definingCssClass = 'wd-table-fixed';
+
 function TableFixed({
     id = undefined,
     className = TableFixed.global.className,
 
     aliasId = TableFixed.global.aliasId,
+    aliasAttr = TableFixed.global.aliasAttr,
     data = [],
     fields = [],
     header = true, /// / string true false
     noData = TableFixed.global.noData,
     footer = TableFixed.global.footer,
-    select = [],
+    select = false,
     onClick = undefined,
+    onDoubleClick = undefined,
+    onDraw = undefined,
+    attr = {},
 
 }) {
     if (id === undefined) {
@@ -28,13 +34,17 @@ function TableFixed({
     const [size, setSize] = useState({ width: 0, height: 0 });
     const [widths, setWidths] = useState([]);
     const [border, setBorder] = useState('');
+
     const ref = useRef(null);
+    const refTable = useRef(null);
 
     useEffect(() => {
-        const tableDOM = DOM(`#table-${id}`);
-        if (tableDOM) {
+        if (refTable.current) {
+            const tableDOM = refTable.current;
+
             if (header === true) {
                 const newWidths = culcWidths(tableDOM, size);
+
                 if (!isWidthsEmpty(newWidths)) {
                     setWidths(newWidths);
                 }
@@ -44,52 +54,53 @@ function TableFixed({
         } else if (typeof header === 'string') {
             setWidths([size.width]);
         } else {
-            const newWidths = fields.map(() => size.width / fields.length);
+            const midWidth = size.width / fields.length;
+            const newWidths = fields.map(() => midWidth);
             setWidths(newWidths);
         }
-    }, [data, fields, ref, id, size, header]);
+    }, [refTable, size, header, data, fields, select]);
 
     useEffect(() => {
-        const tableDOM = DOM(`#table-${id}`);
-        if (tableDOM) {
+        if (refTable.current) {
+            const tableDOM = refTable.current;
             setBorder((data.length && haveScrollBar(tableDOM, tableDOM.parentNode)) ? 'right bottom' : '');
         } else if (data.length === 0) {
             setBorder('right bottom left');
         } else {
             setBorder('');
         }
-    }, [size, data]);
+    }, [size, data, refTable]);
 
     useEffect(() => {
-        let throttle = false;
-        const resize = () => {
-            if (!throttle) {
-                throttle = true;
-                setTimeout(() => {
-                    if (ref && ref.current) {
-                        setSize(getSize(ref.current));
-                    }
-                    throttle = false;
-                }, 50);
+        const observ = new ResizeObserver(() => {
+            if (ref && ref.current) {
+                setSize(getSize(ref.current));
             }
-        };
-        const newObserv = new ResizeObserver(() => {
-            resize();
-            resize();
         });
-        newObserv.observe(ref.current);
-        resize();
+        observ.observe(ref.current);
+
         return () => {
-            newObserv.disconnect();
+            observ.disconnect();
         };
     }, [ref, header, data]);
+
+    const click = (o) => {
+        if (onClick) {
+            onClick(o);
+        }
+    };
+    const dblclick = (o) => {
+        if (onDoubleClick) {
+            onDoubleClick(o);
+        }
+    };
     return (
         <div
             id = {id}
-            type='table-fixed'
             container = 'horiz'
-            {...(className ? { className } : {})}
+            className={`${definingCssClass}${(className ? ` ${className}` : '')}`}
             ref = {ref}
+            {...attr}
         >
             {(header)
                 && <Header
@@ -98,6 +109,7 @@ function TableFixed({
                     caption={header}
                     fields = {fields}
                     widths = {widths}
+                    aliasAttr={aliasAttr}
                 />
             }
             <div
@@ -108,11 +120,15 @@ function TableFixed({
                 && <Data
                     id={id}
                     aliasId={aliasId}
+                    aliasAttr={aliasAttr}
                     data={data}
                     fields={fields}
                     footer={footer}
-                    select={select}
-                    onClick={onClick}
+                    select={select || []}
+                    onClick={click}
+                    onDoubleClick={dblclick}
+                    onDraw={onDraw}
+                    ref = {refTable}
                 />
                 }
                 {(data.length === 0 && noData)
@@ -127,8 +143,9 @@ function TableFixed({
 }
 
 TableFixed.global = {
-    className: 'wd-table-fixed',
+    className: '',
     aliasId: 'ID',
+    aliasAttr: '-attr-',
     header: true, // string true false
     noData: 'no data', // string or false
     footer: 'end', // string ot false

package/jsx/Text.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 
+const definingCssClass = 'wd-text';
+
 function Text({
     id,
-    value = '',
+    value = undefined,
     className = Text.global.className,
-    addClass = '',
+    attr = {},
     style = Text.global.style,
     placeholder = Text.global.placeholder,
     disabled = false,
@@ -16,12 +18,7 @@ function Text({
     rows = 0,
     cols = 0,
     onChange = undefined,
-
 }) {
-    if (addClass!=='')
-        console.warn(`Text.addClass is deprecated, use className = ${addClass}`);
-
-
     const prepare = (aText, dom) => {
         if (rows > 0 && aText.length > 0 && cols > 0) {
             // console.log('at', { selectionStart: dom.selectionStart });
@@ -58,15 +55,16 @@ function Text({
     const change = ({ currentTarget }) => {
         if (onChange) {
             onChange({ id, value: prepare(currentTarget.value, currentTarget) });
-        }else{
+        } else {
             console.warn('Text.onChange not set, define it.');
         }
     };
+
     return (
         <textarea
-            type='memo'
-            {...(id ? {id}:{})}
-            {...(className || addClass ? {className:`${className} ${addClass}`}:{})}            
+            {...(id ? { id } : {})}
+            className={`${definingCssClass}${(className ? ` ${className}` : '')}`}
+
             style={{
                 ...Text.global.style,
                 ...(resize ? {} : { resize: 'none' }),
@@ -75,10 +73,11 @@ function Text({
             value={value}
             {...(disabled ? { disabled: true } : { })}
             {...(readonly ? { readOnly: true } : { })}
-            {...((required && !value) ? { required: true } : { })}
+            {...((required && `${value}`.trim().length === 0) ? { required: true } : { })}
             {...(title ? { title } : { })}
             {...(maxLength > 0 ? { maxLength } : { })}
             {...(placeholder ? { placeholder } : {})}
+            {...attr}
             onChange={change}
         />
     );

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/{NavBar → arch/NavBar}/NavMenu.jsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 import ModalDialog from '../ModalDialog.jsx';
-import onResizeScreen from '../Utils/onResizeScreen.js';
+import onResizeScreen from '../../utils/onResizeScreen.js';
 import NavItem, { isNavItem } from './NavItem.jsx';
 import Collapse from '../Collapse.jsx';
-import size from '../Utils/size';
-import isCompact from '../Utils/isCompact';
+import size from '../../utils/size';
+import isCompact from '../../utils/isCompact';
 import global from '../global';
 
 let menuCloseRoutines = [];

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));
+    const 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/jsx/index.js

@@ -1,43 +1,52 @@
 import REdit from './Edit.jsx';
 import RBtn from './Btn.jsx';
+import RBtnIcon from './BtnIcon.jsx';
 import RCheckBox from './CheckBox.jsx';
 import RLabel from './Label.jsx';
-import RModalDialog from './ModalDialog.jsx';
-import RTableFixed from './TableFixed.jsx';
-import RModal from './Modal.jsx';
-import RComboBox from './ComboBox.jsx';
-import RBtnIcon from './BtnIcon.jsx';
 import RText from './Text.jsx';
+import RComboBox from './ComboBox.jsx';
+import RModal from './Modal.jsx';
+import RModalDialog from './ModalDialog.jsx';
 import RIcon from './Icon.jsx';
-import RList from './List/List.jsx';
+import RTable from './Table.jsx';
 import RGroup from './Group.jsx';
+import RStaticText from './StaticText.jsx';
+import ROnResize from './OnResize.jsx';
+import RList from './List.jsx';
+import RContainer from './Container.jsx';
 
 export default {
     Edit: REdit,
     Btn: RBtn,
+    BtnIcon: RBtnIcon,
     CheckBox: RCheckBox,
     Label: RLabel,
+    Text: RText,
     ComboBox: RComboBox,
-    ModalDialog: RModalDialog,
     Modal: RModal,
-    TableFixed: RTableFixed,
-    BtnIcon: RBtnIcon,
-    Text: RText,
+    ModalDialog: RModalDialog,
     Icon: RIcon,
-    List: RList,
+    Table: RTable,
     Group: RGroup,
+    StaticText: RStaticText,
+    OnResize: ROnResize,
+    List: RList,
+    Container: RContainer,
 };
 
-export const ComboBox = RComboBox;
+export const Edit = REdit;
 export const Btn = RBtn;
+export const BtnIcon = RBtnIcon;
 export const CheckBox = RCheckBox;
-export const Edit = REdit;
 export const Label = RLabel;
-export const ModalDialog = RModalDialog;
-export const Modal = RModal;
-export const TableFixed = RTableFixed;
-export const BtnIcon = RBtnIcon;
 export const Text = RText;
+export const ComboBox = RComboBox;
+export const Modal = RModal;
+export const ModalDialog = RModalDialog;
 export const Icon = RIcon;
-export const List = RList;
+export const Table = RTable;
 export const Group = RGroup;
+export const StaticText = RStaticText;
+export const OnResize = ROnResize;
+export const List = RList;
+export const Container = RContainer;

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "fmihel-windeco-components",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.60",
   "description": "components for orders windeco",
   "main": "dist/windeco-components.js",
   "scripts": {
     "run-dev-server": "webpack-dev-server --config webpack.config.dev.js",
     "run-bs-server": "webpack-dev-server --config webpack.config.bs.js",
     "build-dist": "webpack --config webpack.config.dist.js",
-    "build": "rm -rf dist && webpack --prod",
+    "build": "rm -rf dist && webpack",
+    "copy-to": "npm run build && bash copy-to",
     "git-push-main": "git checkout main && git push origin main && git push origin main --tag",
     "npm-publish-patch": "npm run build && npm version patch && npm publish",
     "npm-publish-minor": "npm run build && npm version minor && npm publish",
@@ -78,11 +79,11 @@
     "redux": "^4.2.0",
     "redux-thunk": "^2.4.2",
     "replace-in-file-webpack-plugin": "^1.0.6",
-    "sass": "^1.49.7",
-    "sass-loader": "^9.0.3",
+    "sass": "^1.89.1",
+    "sass-loader": "^16.0.5",
     "style-loader": "^1.2.1",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.3"
+    "webpack": "^5.99.9",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.1"
   }
 }

package/style/Btn.scss

@@ -1,33 +1,26 @@
 @use "sass:meta";
-@import './vars.scss';
+@use './utils/transition.scss' as *;
 
 @mixin define(){
-    $themes:$wd-themes;
-    $hovers:$wd-high;
-    $hovers-color:$wd-color;
-
-    @each $theme in $themes{
-        #{getThemingRootClass($theme)}{
-            --btn-bg-hover:#{meta.inspect(blendColors($colors:$hovers,$theme:$theme,$level:-5%))};
-            --btn-color-hover:#{meta.inspect(blendColors($colors:$hovers-color,$theme:$theme,$level:-20%))};
-        }   
-    }
-
+    
 
-    $size:var(--wd-size);
-    $bg:var(--wd-high);
-    $color:var(--wd-color);
-    $border:var(--wd-border);
-    $outline:var(--wd-outline);
-    $margin:var(--wd-margin);
-    $font-size:var(--wd-font-size);
-    $margin:var(--wd-margin);
-    $radius:var(--wd-radius);
+    $size:var(--v2-wd-size);
+    $bg:var(--v2-wd-high);
+    $color:var(--v2-wd-color);
+    
+    $border:var(--v2-wd-border);
+    $outline:var(--v2-wd-outline);
+    $margin:var(--v2-wd-margin);
+    $font-size:var(--v2-wd-font-size);
+    $margin:var(--v2-wd-margin);
+    $radius:var(--v2-wd-radius);
 
-    [type="button"]{
+    //input[type=button]{
+    .wd-btn{
         min-height: $size;
         height:$size;
         cursor: pointer;
+
         background-color: $bg;
         color: $color;
         border:1px solid $border;
@@ -48,12 +41,31 @@
             outline: 2px solid $outline;
         }
         &:hover{
-            background-color:var(--btn-bg-hover);
-            color:var(--btn-color-hover);
+            filter: brightness(var(--v2-wd-hovering));
+        }
+
+        &.wd-flat{
+            background: rgba(0,0,0,0) ;
+            &:hover{
+                background-color: $bg ;
+                filter: brightness(var(--v2-wd-hovering));
+            }
+        }
+        &.only-text{
+            background-color: $bg;
+        }
+        &[disabled]{
+            opacity: 0.6;
+            &:hover{
+                filter: none;
+            }
         }
 
+        
+        
     }
 
+
 }
 
 @include define();