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

package/jsx/Btn.jsx

@@ -1,29 +1,31 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 
+const definingCssClass = 'wd-btn';
+
 export default function Btn({
     id = undefined,
     value,
     onClick = undefined,
     className = Btn.global.className,
-    addClass = '',// deprecated
     style = { ...Btn.global.style },
     hint = false,
     title = false,
+    disabled = false,
+    attr = {},
     children,
 }) {
-    if (addClass!=='')
-        console.warn(`Btn.addClass is deprecated, use className = ${addClass}`);
     return (
         <input
             type="button"
-            {...(id ? {id}:{})}
-            {...(className || addClass ? {className:`${className} ${addClass}`}:{})}
+            {...(id ? { id } : {})}
+            className={`${definingCssClass}${(className ? ` ${className}` : '')}`}
             value={value || children || ''}
             onClick={onClick}
-            {...(title || hint ? {title:title || hint}:{})}
+            {...(title || hint ? { title: title || hint } : {})}
             style={{ ...Btn.global.style, ...style }}
-
+            disabled = {disabled}
+            {...attr}
         />
     );
 }

package/jsx/BtnIcon.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
+const definingCssClass = 'wd-btn-icon';
 function BtnIcon({
     id,
     value,
     onClick = undefined,
-    addClass = '',
     className = BtnIcon.global.className,
     iconClass = BtnIcon.global.iconClass,
     IconComponent = BtnIcon.global.IconComponent,
@@ -12,27 +12,47 @@ function BtnIcon({
     hint = '',
     title = '',
     style = {},
+    disabled = false,
+    between = true,
+    attr = {},
+
     children,
-}) {
-    if (addClass!=='')
-        console.warn(`BtnIcon.addClass is deprecated, use className = "${addClass}"`);
 
+}) {
+    const doClick = (o) => {
+        if (!disabled && !attr.disabled && onClick) {
+            onClick(o);
+        }
+    };
+    const doKeyDown = (o) => {
+        if (o.key === 'Enter') {
+            doClick(o);
+        }
+    };
+    const showIcon = (iconClass || (IconComponent && icon));
+    const showText = (value || children);
     return (
         <div
             type="btn-icon"
-            {...(id ? {id}:{})}
-            {...(className || addClass ? {className:`${className} ${addClass}`}:{})}
-            onClick={onClick}
-            tabIndex={0}
-            {...(title || hint ? {title:title || hint}:{})}
+            {...(id ? { id } : {})}
+            className={`${definingCssClass}${(className ? ` ${className}` : '')}`}
+            onClick={doClick}
+            onKeyDown={doKeyDown}
+            {...(!disabled && !attr.disabled ? { tabIndex: 0 } : {})}
+            {...(title || hint ? { title: title || hint } : {})}
             style={{ ...BtnIcon.global.style, ...style }}
+            disabled = {disabled}
+            {...attr}
         >
-
-            <div style = {{ display: (iconClass || (IconComponent && icon)) ? 'block' : 'none' }}className={`${iconClass ? ` ${iconClass}` : ''}`}>
-                {IconComponent && icon && <IconComponent icon={icon}/>}
-            </div>
-
-            <div style={{ display: (value || children) ? 'block' : 'none' }}>{value || children}</div>
+            {(showIcon)
+                && <div icon='' {...(iconClass ? { className: iconClass } : {})}>
+                    {IconComponent && icon && <IconComponent icon={icon}/>}
+                </div>
+            }
+            {(between && showIcon && showText) && <div between=''></div>}
+            {(showText)
+                && <div value=''>{value || children}</div>
+            }
         </div>
     );
 }
@@ -41,6 +61,7 @@ BtnIcon.global = {
     IconComponent: undefined,
     style: {},
     className: '',
+    iconClass: '',
 
 };
 

package/jsx/CheckBox.jsx

@@ -1,19 +1,19 @@
 import React from 'react';
 
+const definingCssClass = 'wd-checkbox';
+
 function CheckBox({
     id,
     checked = false,
     className = CheckBox.global.className,
-    addClass = '',//! deprecated 
     onChange = undefined,
     style = CheckBox.global.style,
     hint = false,
     title = false,
     disabled = false,
+    attr = {},
     visible = true,
 }) {
-    if (addClass!=='')
-        console.warn(`CheckBox.addClass is deprecated, use className = ${addClass}`); 
     const change = ({ target }) => {
         if (!disabled) {
             if (onChange) {
@@ -23,10 +23,10 @@ function CheckBox({
     };
     return (
         <input
-            type="checkbox"    
-            {...(id ? {id}:{})}
-            {...(className || addClass ? {className:`${className} ${addClass}`}:{})}
-            
+            type="checkbox"
+            {...(id ? { id } : {})}
+            className={`${definingCssClass}${(className ? ` ${className}` : '')}`}
+
             onChange = {change}
             checked = {checked}
             style={{
@@ -34,7 +34,8 @@ function CheckBox({
                 ...style,
                 ...(visible ? {} : { display: 'none' }),
             }}
-            {...(title || hint ? {title:title || hint}:{})}
+            {...(title || hint ? { title: title || hint } : {})}
+            {...attr}
         />
     );
 }

package/jsx/Collapse.jsx

@@ -1,21 +1,16 @@
 import React, {
     useEffect, useRef, useState,
 } from 'react';
-import collapse from './Collapse/collapse';
+import collapse from '../utils/collapse';
 
 export default function Collapse({
     className = Collapse.global.className,
-    addClass = '',
     style = Collapse.global.style,
     expand = true,
     delay = Collapse.global.delay,
     attr = {},
     children,
 }) {
-    if (addClass !== '') {
-        console.warn(`Collapse.addClass is deprecated, use className = ${addClass}`);
-    }
-
     const dom = useRef(null);
     const [position, setPosition] = useState('fixed');
     const [show, setShow] = useState(false);
@@ -45,7 +40,7 @@ export default function Collapse({
             }
         }
     }, [expand, dom, delay]);
-    const css = `${className} ${addClass}`.trim();
+    const css = `${className}`;
 
     return (
         <>{(expand || show)

package/jsx/ComboBox/ComboItem.jsx

@@ -9,22 +9,25 @@ function ComboItem({
     onGetItemClass = undefined,
     style = {},
     attr = {},
+    active = false,
     children,
 }) {
     const click = () => {
-        if (!disabled && onClick) {
+        if (!disabled && !active && onClick) {
             onClick(data);
         }
     };
     return (
         <div
-            type='combo-item'
+            combo-item=''
+
             className={`${className} ${onGetItemClass ? onGetItemClass(data) : ''}`}
             onClick={click}
             title={title || ''}
             style={style}
             {...attr}
             {...(disabled ? { disabled: true } : {})}
+            {...(active ? { active: '' } : {})}
         >
             {children}
         </div>

package/jsx/ComboBox/ComboList.jsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import screen from '../Utils/screen';
+import screen from '../../utils/screen';
 import ComboItem from './ComboItem.jsx';
-import global from '../global';
 import ModalDialogAPI from '../ModalDialog/ModalDialogAPI';
-import isMobile from '../Utils/isMobile';
+import isMobile from '../../utils/isMobile';
 
 function listPos({
-    left, top, width, height, mobile,
+    left, top, width, height, mobile, itemsCount, itemHeight,
 }) {
     const scr = screen();
     if (mobile) {
@@ -19,9 +18,16 @@ function listPos({
     const out = {
         left, top, width, height,
     };
-    out.height = 150;
+    out.height = Math.max(Math.min(scr.height, (itemsCount) * (itemHeight + 1) + itemHeight / 2), height);
+
     if (out.top + height + out.height > scr.height) {
-        out.top -= out.height + 3;
+        if (out.top > scr.height / 2) {
+            out.height = Math.min(out.height, out.top) - 2;
+            out.top -= (out.height + 2);
+        } else {
+            out.top = top + height + 1;
+            out.height = scr.height - out.top;
+        }
     } else {
         out.top = top + height + 1;
     }
@@ -35,7 +41,6 @@ function ComboList({
     width = 100,
     height = 100,
     className = '',
-    addClass = '',
     styleItem = {},
     aliasId = 'id',
     aliasCaption = 'caption',
@@ -43,14 +48,12 @@ function ComboList({
     ItemComponent = ComboItem,
     onGetItemClass = undefined,
     onClick = undefined,
+    select = false,
 }) {
-    if (addClass!=='')
-        console.warn(`ComboList.addClass is deprecated, use className = ${addClass}`);
-
     return (
         <div
-            type='combo-list'
-            className={`${className} ${addClass}`}
+            combo-list=''
+            className={`${className}`}
             style = {{
                 ...listPos({
                     left,
@@ -58,6 +61,8 @@ function ComboList({
                     width,
                     height,
                     mobile: isMobile(),
+                    itemsCount: list.length,
+                    itemHeight: 32,
                 }),
             }}
         >
@@ -71,6 +76,7 @@ function ComboList({
                         onGetItemClass={onGetItemClass}
                         disabled={aliasDisabled in item ? item[aliasDisabled] : false}
                         style={styleItem}
+                        active={select !== false && `${select}` === `${item[aliasId]}`}
                     >
                         {item[aliasCaption]}
                     </ItemComponent>

package/jsx/ComboBox.jsx

@@ -1,13 +1,15 @@
 import React, { useState, useRef, useEffect } from 'react';
-import abs from './Utils/abs';
+import abs from '../utils/abs';
 import Modal from './Modal.jsx';
 import ComboList from './ComboBox/ComboList.jsx';
 import ComboItem from './ComboBox/ComboItem.jsx';
+import screen from '../utils/screen';
+
+const definingCssClass = 'wd-combo';
 
 function ComboBox({
     id,
     className = ComboBox.global.className,
-    addClass = '',
     classList = ComboBox.global.classList,
     style = ComboBox.global.style,
     styleOuter = {},
@@ -27,14 +29,11 @@ function ComboBox({
     aliasCaption = ComboBox.global.aliasCaption,
     aliasDisabled = ComboBox.global.aliasDisabled,
     ItemComponent = ComboBox.global.ItemComponent,
+    attr = {},
 
 }) {
-    if (addClass!=='')
-        console.warn(`ComboBox.addClass is deprecated, use className = ${addClass}`);
-
-    const selected = list.find((item) => (item[aliasId] == select));
-    const selectCaption = selected ? selected[aliasCaption] : false;
-
+    const [selected, setSelected] = useState(undefined);
+    const [selectCaption, setSelectCaption] = useState(false);
     const [open, setOpen] = useState(false);
     const [btnOpenShow, setBtnOpenShow] = useState(!hideBtnOnSelect);
     const [focused, setFocused] = useState(false);
@@ -42,6 +41,17 @@ function ComboBox({
     const [size, setSize] = useState({
         left: 0, top: 0, width: 0, height: 0,
     });
+
+    useEffect(() => {
+        if (list && list.length && select !== false) {
+            const sel = list.find((item) => (item[aliasId] == select));
+            setSelected(sel);
+            setSelectCaption(sel ? sel[aliasCaption] : false);
+        } else {
+            setSelected(undefined);
+            setSelectCaption(false);
+        }
+    }, [list, select, aliasId]);
     /*
     useEffect(() => {
         const resize = () => {
@@ -68,6 +78,20 @@ function ComboBox({
             out.top = area.y;
             out.width = area.w;
             out.height = area.h;
+            const scr = screen();
+
+            if (out.width > scr.width) {
+                out.left = 1;
+                out.width = scr.width - 2;
+            } else {
+                if (out.left + out.width > scr.width) {
+                    out.left -= (out.left + out.width - scr.width);
+                }
+                if (out.left < 0) {
+                    out.left = 0;
+                }
+            }
+
             setSize(out);
         }
     }, [open]);
@@ -82,8 +106,8 @@ function ComboBox({
         setOpen(false);
         if (onChange) {
             onChange({ id, data });
-        }else{
-            console.warn('ComboBox.onChange not set, define it..')
+        } else {
+            console.warn('ComboBox.onChange not set, define it..');
         }
     };
     const getItemClass = () => {
@@ -125,9 +149,9 @@ function ComboBox({
     return (
         <>
             <div
-                type='combo'
-                {...(id ? {id}:{})}
-                {...(className || addClass ? {className:`${className} ${addClass}`}:{})}
+                combo=''
+                {...(id ? { id } : {})}
+                className={`${definingCssClass}${(className ? ` ${className}` : '')}`}
                 style={{ ...ComboBox.global.style, ...style }}
                 onClick = {click}
                 ref = {ref}
@@ -139,17 +163,19 @@ function ComboBox({
                 onFocus={focus}
                 onBlur={focusOut}
                 onKeyDown={keyDown}
-
+                {...attr}
             >
                 <ItemComponent
                     title={selectCaption || ''}
                     onGetItemClass = {getItemClass}
                     attr={{ state: (selected ? 'select' : 'no-select') }}
                     style={styleOuter}
+                    data={selected}
                 >
                     {selectCaption || placeholder || ''}
+
                 </ItemComponent>
-                <div style={ { ...((btnOpenShow || focused) ? {} : { display: 'none' }) }} />
+                <div style={ { ...((btnOpenShow || focused || !selected) ? {} : { display: 'none' }) }} />
             </div>
             {(!disabled) && <Modal
                 visible = {open}
@@ -167,6 +193,7 @@ function ComboBox({
                     onClick={change}
                     onGetItemClass = {onGetItemClass}
                     ItemComponent={ItemComponent}
+                    select={select}
                 />
             </Modal>}
         </>

package/jsx/Container/Cols.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Cols({ cols = [] }) {
+    return (
+        <>
+            {cols.map((col, key) => <React.Fragment key={key}>{col}</React.Fragment>)}
+        </>
+    );
+}
+
+export default Cols;

package/jsx/Container/Row.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Cols from './Cols.jsx';
+
+function Row({
+    row,
+    // first = false, last = false,
+}) {
+    return (
+        <div
+            // {...(first ? { first: '' } : {})}
+            // {...(last ? { last: '' } : {})}
+        >
+            <Cols cols={row}/>
+        </div>
+    );
+}
+
+export default Row;

package/jsx/Container.jsx

@@ -1,17 +1,37 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import Row from './Container/Row.jsx';
 
 function Container({
-    className = Container.global.className,
-    addClass = Container.global.addClass,
+    maxCol = 3,
+    RowComponent = Row,
+    className = '',
     style = { ...Container.global.style },
+    attr = {},
     children,
 }) {
+    const [rows, setRows] = useState([]);
+    useEffect(() => {
+        if (children) {
+            const out = [];
+            (children.map ? children : [children]).map((child, i) => {
+                if (i % maxCol === 0) {
+                    out.push([]);
+                }
+                out[out.length - 1].push(child);
+            });
+            setRows(out);
+        }
+    }, [children]);
     return (
         <div
-            className={ `${className} ${addClass}`}
+            className={ `${Container.global.className} ${className}`}
             style={{ ...Container.global.style, ...style }}
+            {...attr}
         >
-            {children}
+            {rows.map((row, key) => (<RowComponent
+                key={key}
+                row={row}
+            />))}
         </div>
     );
 }

package/jsx/Edit.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 
+const definingCssClass = 'wd-edit';
+
 function Edit({
     id,
     value,
@@ -10,13 +12,13 @@ function Edit({
     onKeyDown = undefined,
 
     className = Edit.global.className,
-    addClass = '',
     style = Edit.global.style,
 
     placeholder = '',
     readonly = undefined,
     disabled = undefined,
     required = undefined,
+    error = undefined, // true or text for show error text
     title = '',
     hint = '',
     visible = true,
@@ -25,12 +27,9 @@ function Edit({
     step = undefined, // for type = range or number
     minLength = 0,
     maxLength = 0,
-
+    attr = {},
     children,
 }) {
-    if (addClass !== '') {
-        console.warn(`Edit.addClass is deprecated, use className = ${addClass}`);
-    }
     const [focused, setFocused] = useState(false);
 
     const change = (o) => {
@@ -77,32 +76,36 @@ function Edit({
         _type = focused ? type : 'text';
     }
     return (
-        <input
-            type={_type}
-            {...(id ? { id } : {})}
-            {...(className || addClass ? { className: `${className} ${addClass}` } : {})}
-
-            value={val}
-            onChange={change}
-            onKeyUp={keyup}
-            onKeyDown={keydn}
-            // onKeyPress={keypress} deprected
-            onFocus={focus}
-            onBlur = {unfocus}
-            style={{
-                ...Edit.global.style,
-                ...style,
-                ...(visible ? {} : { display: 'none' }),
-            }}
-            {...(placeholder ? { placeholder } : {})}
-            {...(disabled ? { disabled: true } : {})}
-            {...(readonly ? { readOnly: 'readonly' } : {})}
-            {...((required && `${val}`.length === 0) ? { required: true } : {})}
+        <>
+            <input
+                type={_type}
+                {...(id ? { id } : {})}
+                className={`${definingCssClass}${(className ? ` ${className}` : '')}`}
 
-            {...props}
-            {...(title || hint ? { title: title || hint } : {})}
+                value={val}
+                onChange={change}
+                onKeyUp={keyup}
+                onKeyDown={keydn}
+                // onKeyPress={keypress} deprected
+                onFocus={focus}
+                onBlur = {unfocus}
+                style={{
+                    ...Edit.global.style,
+                    ...style,
+                    ...(visible ? {} : { display: 'none' }),
+                }}
+                {...(placeholder ? { placeholder } : {})}
+                {...(disabled ? { disabled: true } : {})}
+                {...(readonly ? { readOnly: 'readonly' } : {})}
+                {...((required && `${val}`.length === 0) ? { required: true } : {})}
 
-        />
+                {...props}
+                {...(title || hint ? { title: title || hint } : {})}
+                {...attr}
+                {...error ? { error: '' } : {}}
+            />
+            {(typeof error === 'string') && <div className="error-edit-msg" dangerouslySetInnerHTML = {{ __html: error }}></div>}
+        </>
     );
 }
 

package/jsx/Gap/Gap.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 function Gap({
     count,
     className = Gap.global.className,
-    addClass = Gap.global.addClass,
     style = Gap.global.style,
     attr = {},
     onClick = undefined,
@@ -11,11 +10,11 @@ function Gap({
     children,
 
 }) {
-    // console.log('level', count, Array(count).fill('').map(() => 's'));
     return (
         <div
-            it={'wd-gap'}
-            className={`${className} ${addClass}`}
+            gap=''
+            {...(className ? { className: `${className}` } : {})}
+
             style={{
                 ...Gap.global.style,
                 ...style,
@@ -24,14 +23,13 @@ function Gap({
             onClick={onClick}
             onDoubleClick={onDoubleClick}
         >
-            {Array(count).fill('').map((it, i) => <div key={i} gap={'gap'}></div>)}
+            {Array(count).fill('').map((it, i) => <div key={i} gap='' ></div>)}
             {children}
         </div>);
 }
 
 Gap.global = {
     className: '',
-    addClass: '',
     style: {},
 
 };

package/jsx/Group.jsx

@@ -1,27 +1,26 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 
+const definingCssClass = 'wd-group';
+
 function Group({
     id,
     className = Group.global.className,
-    addClass = '',
     style = Group.global.style,
     caption = '',
+    attr = {},
     children,
-
 }) {
-    if (addClass!=='')
-        console.warn(`Group.addClass is deprecated, use className = ${addClass}`);
-
     return (
         <div
-            type='group'
+            group=''
             {...(id ? { id } : {})}
-            {...(className || addClass ? {className:`${className} ${addClass}`}:{})}
+            className={`${definingCssClass}${(className ? ` ${className}` : '')}`}
             style={{ ...Group.global.style, ...style }}
+            {...attr}
         >
-            { (caption) && <div><span>{caption}</span></div>}
-            <div>{children}</div>
+            { (caption) && <div caption='' >{caption}</div>}
+            <div content='' >{children}</div>
         </div>
     );
 }