react-graph-grid 0.1.3 → 0.1.5

package/src/Dropdown.jsx

@@ -1,339 +0,0 @@
-import { useState, useEffect } from 'react';
-import { BaseComponent } from './Base';
-import { Images } from './Themes/Images';
-import { ModalClass } from './Modal';
-// ==================================================================================================================================================================
-export function Dropdown(props) {
-    let dd = null;
-
-    const [ddState, setState] = useState({ dd: dd, ind: 0 });
-
-    if (ddState.dd) {
-        dd = ddState.dd;
-    }
-    else {
-        dd = new DropdownClass(props);
-    }
-
-    if (props.init && !ModalClass._isFake) {
-        props.init(dd);
-    }
-
-    dd.refreshState = function () {
-        setState({ dd: dd, ind: dd.stateind++ });
-    }
-
-    useEffect(() => {
-        dd.setupEvents();
-
-        return () => {
-            dd.clearEvents();
-        }
-    }, [dd])
-
-    return (dd.render());
-}
-// -------------------------------------------------------------------------------------------------------------------------------------------------------------
-export class DropdownClass extends ModalClass {
-    constructor(props) {
-        super(props);
-
-        const dd = this;
-
-        dd.getItems = props.getItems || function () { return new Promise(function (resolve) { resolve([]) }); };
-
-        window._dropdownSeq = window._dropdownSeq || 0;
-
-        dd.id = window._dropdownSeq++;
-
-        dd.pageNumber = 1;
-        dd.pageSize = props.pageSize || 20;
-        dd.items = props.items || [];
-
-        dd.menuItemClass = props.menuItemClass || BaseComponent.theme.menuItemClass;
-        dd.menuClass = props.menuClass || BaseComponent.theme.menuClass;
-
-        dd.stateind = 0;
-
-        dd.opt.onItemClick = props.onItemClick;
-        dd.opt.onClose = props.onClose;
-
-        dd.opt.parentRect = props.parentRect;
-
-        dd.maxW = props.maxW;
-
-        dd.opt.closeWhenEscape = true;
-        dd.opt.noHeader = true;
-        dd.opt.noFooter = true;
-        dd.opt.resizable = false;
-        dd.opt.noPadding = true;
-        dd.opt.hiddenOverlay = true;
-
-        dd.opt.onItemMouseEnter = props.onItemMouseEnter;
-        dd.opt.onItemMouseLeave = props.onItemMouseLeave;
-
-        dd.renderContent = dd.renderDropdownContent;
-
-        dd.visible = dd.items.length > 0;
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    appendItems() {
-        const dd = this;
-
-        dd.pageNumber++;
-
-        dd.getItems({ filter: dd.filter }).then(
-            items => {
-                dd.items = items;
-
-                dd.refreshState();
-            }
-        );
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    render() {
-        return super.render();
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    renderDropdownContent() {
-        const dd = this;
-
-        if (!dd.items || dd.waitingItems) {
-            return dd.Spinner(dd.id);
-        }
-
-        return (
-            <>
-                {
-                    dd.allowUserFilter ? <></> : <></>
-                }
-                <ul
-                    key={`dropdown_${dd.id}_`}
-                    className={`dropdown-ul ${dd.menuClass || ''}`}
-                    style={{ overflowX: 'hidden', padding: '0', margin: '0' }}
-                >
-                    {
-                        dd.items.map((item, ind) => {
-                            return (
-                                <li
-                                    dropdown-item={`${dd.id}_${item.id}_`}
-                                    key={`dropdownitem_${dd.id}_${item.id}_${ind}_`}
-                                    title={dd.translate(item.title || item.text)}
-                                    className={dd.menuItemClass + (dd.activeItem === item ? ' active' : '')}
-                                    style={{
-                                        listStyleType: 'none',
-                                        display: 'flex',
-                                        justifyContent: 'start',
-                                        flexWrap: 'nowrap',
-                                        alignItems: 'center',
-                                        paddingRight: item.items && item.items.length > 0 ? '' : '1em',
-                                        height: '1.5em',
-                                    }}
-                                    onClick={(e) => dd.onItemClick(e, item.id)}
-                                    onMouseEnter={(e) => {
-                                        if (!dd.opt.onItemMouseEnter) return;
-                                        dd.opt.onItemMouseEnter(e, item);
-                                    }}
-                                    onMouseLeave={(e) => {
-                                        if (!dd.opt.onItemMouseLeave) return;
-                                        dd.opt.onItemMouseLeave(e, item);
-                                    }}
-                                >
-                                    <div style={{ width: '2em' }}>
-                                        {item.img ? item.img() : ''}
-                                    </div>
-                                    <div
-                                        style={{
-                                            display: 'flex',
-                                            justifyContent: 'space-between',
-                                            flexWrap: 'nowrap',
-                                            alignItems: 'center',
-                                            width: '100%',
-                                        }}
-                                    >
-                                        <span>{dd.translate(item.text)}</span>
-                                        {item.items && item.items.length > 0 ? Images.images.submenu(20, 10) : ''}
-                                    </div>
-                                </li>
-                            );
-                        })
-                    }
-                    {
-                        dd.allowUpload && dd.pageSize > 0 && dd.items.length === dd.pageSize * dd.pageNumber ?
-                            <ul className={`dropdown-ul ${dd.menuClass || ''}`}
-                                key={`dropdownadd_${dd.id}_`}
-                            >
-                                <li dropdown-item={`${dd.id}_append_`}
-                                    key={`dropdownitem_$${dd.id}_append_`}
-                                    title={dd.translate('load more records')}
-                                    className={dd.menuItemClass}
-                                    style={{ listStyleType: 'none', display: 'flex', flexWrap: 'nowrap' }}
-                                    onClick={(e) => dd.onItemClick(e, 'append')}
-                                >
-                                    ${dd.translate('more') + '...'}
-                                </li>
-                            </ul>
-                            : <></>
-                    }
-                </ul>
-            </>
-        );
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    calcPos(e) {
-        const dd = this;
-
-        const rect = dd.getDimensionsByContent();
-        const parentRect = dd.opt.parentRect ? dd.opt.parentRect : { x: e.clientX, y: e.clientY, width: e.width || 0, height: e.height || 0 };
-
-        dd.opt.pos = {
-            x: parentRect.x,
-            y: parentRect.y + parseInt(parentRect.height),
-            w: Math.max(rect.w, parentRect.width),
-            h: rect.h
-        };
-
-        if (dd.maxW != null) {
-            dd.opt.pos.w = Math.min(dd.opt.pos.w, dd.maxW);
-        }
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    popup(e) {
-        const dd = this;
-
-        function afterGetItems(newItems) {
-            dd.waitingItems = false;
-
-            if (newItems && newItems.length > 0) {
-                dd.items.push(...newItems);
-            }
-
-            dd.lastPageNumber = dd.pageNumber;
-
-            dd.visible = dd.items.length > 0;
-
-            if (dd.items.length <= 0 && !dd.opt.allowUserFilter) return;
-
-            dd.calcPos(e);
-            //log(' DropdownPos w = ' + dd.pos.w + ', h = ' + dd.pos.h);
-
-            dd.refreshState();
-        }
-
-        if (!dd.lastPageNumber || dd.lastPageNumber !== dd.pageNumber || dd.items.length <= 0) {
-            dd.waitingItems = true;
-            dd.visible = true;
-            dd.calcPos(e);
-
-            dd.refreshState();
-
-            dd.getItems({ self: dd, filter: dd.filter, pageSize: dd.pageSize, pageNumber: dd.pageNumber }).then(
-                items => {
-                    afterGetItems(items);
-                }
-            ).finally(() => {
-                dd.waitingItems = false;
-                dd.refreshState();
-            });
-        }
-        else {
-            afterGetItems();
-        }
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    close() {
-        const dd = this;
-
-        dd.items = [];
-        delete dd.activeItem;
-        delete dd.lastPageNumber;
-
-        super.close();
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    onItemClick(e, itemId) {
-        const dd = this;
-
-        if (itemId === 'append') {
-            dd.appendItems();
-        }
-        else {
-            if (dd.opt.onItemClick) {
-                dd.opt.onItemClick({ owner: dd.opt.owner, itemId: itemId, self: dd, clientX: e.clientX, clientY: e.clientY, target: e.target });
-            }
-
-            const clickedItem = dd.items.find(function (item) {
-                return item.id === itemId;
-            });
-
-            if (!clickedItem || !clickedItem.noClose) {
-                dd.close();
-            }
-        }
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    setupEvents() {
-        const dd = this;
-
-        super.setupEvents();
-
-        function onKeyDown(e) {
-            const key = e && e.key ? e.key.toLowerCase() : '';
-
-            let ind;
-
-            switch (key) {
-                case 'enter':
-                    if (!dd.activeItem) return;
-
-                    dd.opt.onItemClick({ owner: dd.opt.owner, itemId: dd.activeItem.id, self: dd });
-                    dd.close();
-                    break;
-                case 'down':
-                case 'arrowdown':
-                    if (dd.activeItem) {
-                        ind = dd.items.indexOf(dd.activeItem);
-
-                        if (ind < 0 || ind === dd.items.length - 1) return;
-
-                        dd.activeItem = dd.items[ind + 1];
-                    }
-                    else if (dd.items.length > 0) {
-                        dd.activeItem = dd.items[0];
-                    }
-
-                    dd.refreshState();
-                    break;
-                case 'up':
-                case 'arrowup':
-                    if (dd.activeItem) {
-                        ind = dd.items.indexOf(dd.activeItem);
-
-                        if (ind <= 0) return;
-
-                        dd.activeItem = dd.items[ind - 1];
-                    }
-                    else if (dd.items.length > 0) {
-                        dd.activeItem = dd.items[0];
-                    }
-
-                    dd.refreshState();
-                    break;
-                case 'tab':
-                    dd.close();
-                    break;
-                default:
-                    break;
-            }
-        }
-
-        document.addEventListener('keydown', onKeyDown);
-
-        const remClearEvents = dd.clearEvents;
-        dd.clearEvents = function () {
-            remClearEvents();
-            document.removeEventListener('keydown', onKeyDown);
-        }
-    }
-}
-// ==================================================================================================================================================================