funda-ui 4.7.620 → 4.7.624

package/publish/lib/esm/DropdownMenu/index.scss

@@ -0,0 +1,205 @@
+/* ======================================================
+   <!-- Dropdown Menu -->
+/* ====================================================== */
+
+/* Do not use <a> tag */
+.dd-menu-default {
+
+	display: inline-block;
+	cursor: pointer;
+	position: relative;
+
+
+    .dd-menu__icon,
+    .dd-menu__trigger {
+        display: inline-block;
+    }
+
+    strong {
+        font-weight: normal;
+        display: inline-block;
+        margin-left: .3rem;
+    }
+    
+
+}
+
+
+
+
+@keyframes dd-menu-display {
+    0%{
+        opacity: 0;
+        transform: scale(0.98) translateY(-0.6em);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+@keyframes dd-menu-icon-display {
+    0%{
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+
+  
+.dd-menu-list__wrapper {
+
+    --dd-menu-ul-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    --dd-menu-ul-bg: #fff;
+
+    --dd-menu-ulbefore-box-shadow: 2px -2px 6px rgba(0, 0, 0, 0.05);
+    --dd-menu-ulbefore-border-color: #fff;
+    
+    --dd-menu-li-bg: #fff;
+    --dd-menu-li-hover-bg: #FAFAFA;
+    
+    --dd-menu-link-border-color: rgba(0, 0, 0, 0.05);
+    --dd-menu-link-color: #333;
+    --dd-menu-link-size: 0.75rem;
+
+    
+
+    display: none;
+    margin-top: 8px;
+    min-width: 50px;
+    position: absolute;
+    z-index: 1055;  /* --bs-modal-zindex */
+
+
+    ul, li {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+
+    .dd-menu-list__icon {
+        display: block;
+        position: absolute;
+        opacity: 0;
+        top: -3px;
+        left: 10px;
+        width: 0;
+        height: 0;
+        transition: .1s ease-in-out;
+        box-shadow: var(--dd-menu-ulbefore-box-shadow);
+        border-top: 4px solid var(--dd-menu-ulbefore-border-color);
+        border-right: 4px solid var(--dd-menu-ulbefore-border-color);
+        border-bottom: 4px solid transparent;
+        border-left: 4px solid transparent;
+        transform: rotate(-45deg);
+
+        &.active {
+            animation-name: dd-menu-icon-display;
+            animation-duration: 0.4s;
+            animation-timing-function: cubic-bezier(0.73, 0.005, 0.22, 1);
+            animation-delay: 0.1s;
+            animation-iteration-count: 1;
+            animation-fill-mode: forwards;
+        }
+    }
+
+
+
+
+	> ul {
+        display: none;
+        white-space: nowrap;
+		border-radius: 4px;
+		text-align: left;
+		box-shadow: var(--dd-menu-ul-box-shadow);
+        background: var(--dd-menu-ul-bg);
+		transition: .1s ease-in-out;
+
+        /* Prevent the hover threshold from failing */
+		&::after {
+			content: '';
+            display: block;
+            background-color: transparent;
+			position: absolute;
+			top: -10px;
+			left: 0;
+			width: 100%;
+			height: 20px;
+		}
+
+		li {
+			z-index: 1;
+			position: relative;
+			background: var(--dd-menu-li-bg);
+			padding: 0 .75rem;
+
+
+            &:hover {
+                background: var(--dd-menu-li-hover-bg);
+            }
+
+			a {
+				display: block;
+				border-bottom: 1px solid var(--dd-menu-link-border-color);
+				padding: .75rem 0;
+				color: var(--dd-menu-link-color);
+				font-size: var(--dd-menu-link-size);
+				text-decoration: none;
+
+                svg,
+                i {
+                    display: none;
+                }
+        
+
+			}
+
+
+			&:first-child {
+				border-radius: 4px 4px 0 0;
+			}
+			&:last-child {
+				border-radius: 0 0 4px 4px;
+
+				a {
+					border-bottom: 0;
+				}
+			}
+		}
+
+	}
+
+    
+    &.pos-top {
+
+        margin-top: auto;
+        margin-bottom: 8px;
+        
+        
+        .dd-menu-list__icon {
+            top: auto;
+            bottom: -3px;
+            border-bottom: 4px solid var(--dd-menu-ulbefore-border-color);
+            border-left: 4px solid var(--dd-menu-ulbefore-border-color);
+            border-top: 4px solid transparent;
+            border-right: 4px solid transparent;
+        }
+    }
+
+
+    &.active {
+        display: block !important;
+
+        > ul {
+            animation: dd-menu-display 0.4s cubic-bezier(0.73, 0.005, 0.22, 1);
+			display: block !important;
+		}
+    }
+
+    
+}

package/publish/lib/esm/DropdownMenu/index.tsx

@@ -0,0 +1,378 @@
+import React, { useEffect, useState, useRef } from 'react';
+
+import RootPortal from 'funda-root-portal';
+
+import useComId from 'funda-utils/dist/cjs/useComId';
+import useClickOutside from 'funda-utils/dist/cjs/useClickOutside';
+import {
+    getAbsolutePositionOfStage
+} from 'funda-utils/dist/cjs/getElementProperty';
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
+import Option from './Option';
+
+
+
+export type OptionChangeFnType = (arg1: any, arg2: any) => void;
+
+export interface OptionConfig {
+    [propName: string]: string | number;
+}
+
+export type DropdownMenuProps = {
+    wrapperClassName?: string;
+    listClassName?: string;
+    hyperlinkClassName?: string;
+    showClassName?: string;
+    exceededSidePosOffset?: number;
+    hoverOn?: boolean;
+    hoverOff?: boolean;
+    hoverDelay?: number;
+    iconLeft?: React.ReactNode | string;
+    iconRight?: React.ReactNode | string;
+    /** Set a name for the form field for this component  */
+    name?: string;
+    /** Whether to use button style, otherwise use "div" */
+    triggerButton?: boolean;
+    /** Specify a class for this Node. */
+    triggerClassName?: string;
+    /** Set a piece of text or HTML code for the trigger */
+    triggerContent?: string;
+    /** When enabled, the corresponding option content will be displayed after selecting an option */
+    triggerSwitchActive?: boolean;
+    /** Specify data of Dropdown Menu as a JSON string format. */
+    options?: OptionConfig[];
+    /** This function is called whenever the data is updated.
+     *  Exposes the JSON format data about the option as an argument.
+     */
+    /** -- */
+    id?: string;
+    tabIndex?: number;
+    onChange?: OptionChangeFnType | null;
+};
+
+const DropdownMenu = (props: DropdownMenuProps) => {
+
+    const {
+        wrapperClassName,
+        listClassName,
+        hyperlinkClassName,
+        showClassName,
+        exceededSidePosOffset,
+        hoverOn,
+        hoverOff,
+        hoverDelay,
+        iconLeft,
+        iconRight,
+        name,
+        triggerButton,
+        triggerClassName,
+        triggerContent,
+        triggerSwitchActive,
+        options,
+        tabIndex,
+        id,
+        onChange
+    } = props;
+
+    const POS_OFFSET = 0;
+    const EXCEEDED_SIDE_POS_OFFSET = Number(exceededSidePosOffset) || 15;
+    const uniqueID = useComId();
+    const idRes = id || uniqueID;
+    const rootRef = useRef<any>(null);
+    const modalRef = useRef<any>(null);
+    const triggerRef = useRef<any>(null);
+    const iconRef = useRef<any>(null);
+    const listRef = useRef<any>(null);
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    const [selected, setSelected] = useState<any>(null);
+    const _hoverDelay = !isNaN(hoverDelay as never) && typeof hoverDelay !== 'undefined' ? hoverDelay : 150;
+        const MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
+
+   
+    const defaultLabel = triggerContent === undefined ? '' : triggerContent;
+    const selectedLabel = triggerSwitchActive ? (selected ? selected.label : defaultLabel) : defaultLabel;
+    const selectOptionsListPresentation = options?.map((selectOption: any, index: number) => {
+        return <Option 
+            key={index} 
+            option={selectOption} 
+            hyperlinkClassName={hyperlinkClassName ? hyperlinkClassName : 'dd-menu-default__item'} 
+            selectEv={(value: any, option: any) => handleSelect(value, option)}
+        />;
+    });
+
+
+    // force display
+    const [initPopRoot, setInitPopRoot] = useState<boolean>(false);
+
+    // click outside
+    useClickOutside({
+        enabled: isOpen && rootRef.current && modalRef.current,
+        isOutside: (event: any) => {
+
+            // close dropdown when other dropdown is opened
+            return (
+                (rootRef.current !== event.target && !rootRef.current.contains(event.target as HTMLElement)) &&
+                modalRef.current !== event.target && !modalRef.current.contains(event.target as HTMLElement)
+            )
+              
+        },
+        handle: (event: any) => {
+            setIsOpen(false);
+            popwinPosHide();
+        }
+    }, [isOpen, rootRef, modalRef]);
+
+
+    
+    function handleClick(event: React.MouseEvent) {
+        if (hoverOn) return;
+
+        setIsOpen(!isOpen);
+        popwinPosInit();
+
+
+    }
+
+
+    function handleHoverOn(event: React.MouseEvent) {
+        if (!hoverOn || typeof hoverOn === 'undefined') return;
+
+        setTimeout(() => {
+            setIsOpen(true);
+            popwinPosInit();
+        }, _hoverDelay);
+        
+    }
+
+    function handleHoverOff(event: React.MouseEvent) {
+        if (!hoverOff || typeof hoverOff === 'undefined') return;
+        setTimeout(() => {
+            setIsOpen(false);
+            popwinPosHide();
+        }, _hoverDelay);
+        
+    }
+
+
+
+    function handleSelect(value: any, option: any) {
+
+        setIsOpen(false);
+        popwinPosHide();
+        setSelected(option);
+
+        // change display text of trigger
+        setTimeout(() => {
+            if (triggerRef.current !== null) {
+                triggerRef.current.querySelector('.dd-menu__trigger').innerHTML = option.label;
+            }
+        }, 0);
+
+        if (typeof (onChange) === 'function') {
+            onChange(value, option);
+        }
+
+    }
+
+
+
+
+    function popwinPosInit() {
+        if (modalRef.current === null || triggerRef.current === null) return;
+
+        setTimeout(() => {
+
+
+            // update modal position
+            const _modalRef: any = document.querySelector(`#dd-menu-list__wrapper-${idRes}`);
+            const _triggerRef: any = triggerRef.current;
+            
+            
+            // console.log(getAbsolutePositionOfStage(_triggerRef));
+
+            const {x, y, width, height} = getAbsolutePositionOfStage(_triggerRef);
+            const _triggerBox = _triggerRef.getBoundingClientRect();
+            let targetPos = '';
+
+
+            // STEP 1:
+            //-----------
+            // display wrapper
+            _modalRef.classList.add('active');
+            
+
+
+
+            // STEP 2:
+            //-----------
+            // Detect position
+            if (window.innerHeight - _triggerBox.top > MIN_SPACE_FOR_DROPDOWN) {
+                targetPos = 'bottom';
+            } else {
+                targetPos = 'top';
+            }
+    
+    
+            // STEP 3:
+            //-----------
+            // Adjust position
+            if (targetPos === 'top') {
+                _modalRef.style.left = x + 'px';
+                //_modalRef.style.top = y - POS_OFFSET - (listRef.current.clientHeight) - 2 + 'px';
+                _modalRef.style.top = 'auto';
+                _modalRef.style.bottom = (window.innerHeight - _triggerBox.top) + POS_OFFSET + 2 + 'px';
+                _modalRef.style.setProperty('position', 'fixed', 'important');
+                _modalRef.classList.add('pos-top');
+            }
+    
+            if (targetPos === 'bottom') {
+                _modalRef.style.left = x + 'px';
+                _modalRef.style.bottom = 'auto';
+                _modalRef.style.top = y + height + POS_OFFSET + 'px';
+                _modalRef.style.setProperty('position', 'absolute', 'important');
+                _modalRef.classList.remove('pos-top');
+            }
+    
+            
+            // STEP 4:
+            //-----------            
+            // Determine whether it exceeds the far right or left side of the screen
+            const _modalContent = modalRef.current;
+            const _modalListContent = modalRef.current.querySelector('.dd-menu-list__inner');
+            const _modalBox = _modalListContent.getBoundingClientRect();
+            const _iconRef: any = iconRef.current;
+
+    
+            // 10 pixels is used to account for some bias in mobile devices
+            if ((_modalBox.right + 10) > window.innerWidth) {
+                const _modalOffsetPosition = _modalBox.right - window.innerWidth + EXCEEDED_SIDE_POS_OFFSET;
+                _modalContent.style.marginLeft = `-${_modalOffsetPosition}px`;
+                _iconRef.style.marginLeft = `${_modalOffsetPosition}px`;
+                // console.log('_modalPosition: ', _modalOffsetPosition)
+            }
+
+
+            if ((_modalBox.left - 10) < 0) {
+                const _modalOffsetPosition = Math.abs(_modalBox.left) + EXCEEDED_SIDE_POS_OFFSET;
+                _modalContent.style.marginLeft = `${_modalOffsetPosition}px`;
+                _iconRef.style.marginLeft = `-${_modalOffsetPosition}px`;
+                // console.log('_modalPosition: ', _modalOffsetPosition)
+            }
+
+
+        }, 0);
+        
+
+    }
+
+
+
+    function popwinPosHide() {
+
+        const _modalRef: any = document.querySelector(`#dd-menu-list__wrapper-${idRes}`);
+        if (_modalRef !== null) {
+            // remove classnames and styles
+            _modalRef.classList.remove('active');
+
+        }
+
+    }
+
+    useEffect(() => {
+        setInitPopRoot(true);
+    }, []);
+
+
+    return (
+        <>
+
+            <div 
+                ref={rootRef}
+                className={combinedCls(
+                    'dd-menu__wrapper',
+                    clsWrite(wrapperClassName, 'dd-menu-default'),
+                    isOpen ? 'active' : undefined
+                )} 
+                onMouseLeave={handleHoverOff} 
+            >
+
+                
+                {triggerButton ? <button 
+                    ref={triggerRef}
+                    tabIndex={tabIndex || -1} 
+                    className={clsWrite(triggerClassName, 'd-block-inline w-auto')} 
+                    type="button" 
+                    data-overlay-id={`dd-menu-list__wrapper-${idRes}`}
+                    onMouseEnter={handleHoverOn} 
+                    onClick={handleClick} 
+                >
+                    {iconLeft ? <><span className="dd-menu__icon">{iconLeft}</span></>: null}
+                    <span className="dd-menu__trigger" dangerouslySetInnerHTML={{ __html: selectedLabel }}></span>
+                    {iconRight ? <><span className="dd-menu__icon">{iconRight}</span></>: null}
+
+                </button> : <div 
+                    ref={triggerRef}
+                    className={clsWrite(triggerClassName, 'd-block-inline w-auto')} 
+                    data-overlay-id={`dd-menu-list__wrapper-${idRes}`}
+                    onMouseEnter={handleHoverOn} 
+                    onClick={handleClick} 
+                >
+                    {iconLeft ? <><span className="dd-menu__icon">{iconLeft}</span></>: null}
+                    <span className="dd-menu__trigger" dangerouslySetInnerHTML={{ __html: selectedLabel }}></span>
+                    {iconRight ? <><span className="dd-menu__icon">{iconRight}</span></>: null}
+                </div>
+                }
+
+                
+
+                {/* INPUT */}
+                <input 
+                    name={name || ''} 
+                    type="hidden" 
+                    tabIndex={-1}
+                    value={selected?.value} 
+                    onChange={() => void(0)}
+                /> {/* // do not use `defaultValue` */}
+                {/* /INPUT */}
+                
+                {/* MENU LIST */}
+                <RootPortal show={initPopRoot} containerClassName="DropdownMenu">
+                    <div
+                        ref={modalRef}
+                        className="dd-menu-list__wrapper"
+                        id={`dd-menu-list__wrapper-${idRes}`}
+                        style={{ display: 'none'}}
+                    >
+                        <span ref={iconRef} className={combinedCls(
+                            'dd-menu-list__icon',
+                            isOpen ? 'active' : undefined
+                        )}></span>
+
+                        <ul
+                            ref={listRef}
+                            className={combinedCls(
+                                'dd-menu-list__inner',
+                                clsWrite(listClassName, 'dd-menu-default__inner'),
+                                isOpen ? clsWrite(showClassName, 'show') : undefined
+                            )}
+                        >
+                            {selectOptionsListPresentation}
+                        </ul>
+                    </div>
+                </RootPortal>
+                
+                {/* /MENU LIST */}
+
+
+            </div>
+
+        </>
+    )
+}
+
+
+
+
+export default DropdownMenu;