funda-ui 1.0.272

package/lib/esm/DropdownMenu/index.scss

@@ -0,0 +1,180 @@
+/* ======================================================
+   <!-- Dropdown Menu -->
+/* ====================================================== */
+
+/* Do not use <a> tag */
+.dropdown-default {
+
+   
+    --dropdown-ul-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    --dropdown-ul-bg: #fff;
+
+    --dropdown-ulbefore-box-shadow: 2px -2px 6px rgba(0, 0, 0, 0.05);
+    --dropdown-ulbefore-border-color: #fff;
+    
+    --dropdown-li-bg: #fff;
+    --dropdown-li-hover-bg: #FAFAFA;
+    
+    --dropdown-link-border-color: rgba(0, 0, 0, 0.05);
+    --dropdown-link-color: #333;
+
+    
+
+	display: inline-block;
+	cursor: pointer;
+	position: relative;
+    
+    ul, li {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    strong {
+        font-weight: normal;
+        display: inline-block;
+        margin-left: .3rem;
+    }
+    
+	> ul {
+		display: none;
+		position: absolute;
+		top: 100%;
+        left: 0;
+		margin-top: 8px;
+		min-width: 50px;
+        white-space: nowrap;
+		border-radius: 4px;
+		text-align: left;
+		box-shadow: var(--dropdown-ul-box-shadow);
+        background: var(--dropdown-ul-bg);
+		transition: .1s ease-in-out;
+
+
+		&::before {
+			content: '';
+			position: absolute;
+			top: -3px;
+			left: 10px;
+			width: 0;
+			height: 0;
+			box-shadow: var(--dropdown-ulbefore-box-shadow);
+			border-top: 4px solid var(--dropdown-ulbefore-border-color);
+			border-right: 4px solid var(--dropdown-ulbefore-border-color);
+			border-bottom: 4px solid transparent;
+			border-left: 4px solid transparent;
+			transform: rotate(-45deg);
+		}
+
+        /* 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(--dropdown-li-bg);
+			padding: 0 .75rem;
+
+
+            &:hover {
+                background: var(--dropdown-li-hover-bg);
+            }
+
+			a {
+				display: block;
+				border-bottom: 1px solid var(--dropdown-link-border-color);
+				padding: .75rem 0;
+				color: var(--dropdown-link-color);
+				font-size: 0.75rem;
+				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;
+				}
+			}
+		}
+
+	}
+
+    &.dropdown-default--start {
+        // default
+    }
+
+    &.dropdown-default--center {
+        > ul {
+            left: 50%;
+            transform: translateX(-50%);
+
+            &::before {
+                left: 50%;
+                transform: translateX(-50%) rotate(-45deg);
+            }
+
+        }
+    }
+
+    &.dropdown-default--end {
+        > ul {
+            left: auto;
+            right: 0;
+
+            &::before {
+                left: auto;
+                right: 10px;
+            }
+    
+        }
+
+    }
+
+    &.active {
+		> ul {
+            animation: dropdown-display 0.4s cubic-bezier(0.73, 0.005, 0.22, 1);
+			display: block !important;
+		}
+    }
+  
+
+}
+
+
+
+
+@keyframes dropdown-display {
+    0%{
+        opacity: 0;
+        transform: scale(0.98) translateY(-0.6em);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+  
+  

package/lib/esm/DropdownMenu/index.tsx

@@ -0,0 +1,148 @@
+import React, { useEffect, useState } from 'react';
+
+import Option from './Option';
+
+type OptionChangeFnType = (arg1: any) => void;
+
+interface OptionConfig {
+    value?: string | undefined;
+    label?: string | undefined;
+}
+
+type DropdownMenuProps = {
+    wrapperClassName?: string;
+    listClassName?: string;
+    hyperlinkClassName?: string;
+    showClassName?: string;
+    hoverOn?: boolean;
+    hoverOff?: boolean;
+    hoverDelay?: number;
+    /** 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;
+    /** Center align the options layer in a drop-down field. By default it is left aligned "start". */
+    alignOptionsLayer?: string;
+    /** 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.
+     */
+    /** -- */
+    tabIndex?: number;
+    onChange?: OptionChangeFnType | null;
+};
+
+const DropdownMenu = (props: DropdownMenuProps) => {
+
+    const {
+        wrapperClassName,
+        listClassName,
+        hyperlinkClassName,
+        showClassName,
+        hoverOn,
+        hoverOff,
+        hoverDelay,
+        name,
+        triggerButton,
+        triggerClassName,
+        triggerContent,
+        triggerSwitchActive,
+        alignOptionsLayer,
+        options,
+        tabIndex,
+        onChange
+    } = props;
+
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    const [selected, setSelected] = useState<any>(null);
+    const _hoverDelay = !isNaN(hoverDelay as never) && typeof hoverDelay !== 'undefined' ? hoverDelay : 150;
+
+   
+    const defaultLabel = triggerContent === undefined ? '' : triggerContent;
+    const selectedLabel = triggerSwitchActive ? (selected ? selected.label : defaultLabel) : defaultLabel;
+    const selectOptionsListPresentation = options?.map((selectOption, index) => {
+        return <Option key={index} option={selectOption} onSelect={handleSelect} hyperlinkClassName={hyperlinkClassName ? hyperlinkClassName : 'dropdown-item-default'} />;
+    });
+
+
+    function handleClick(event: any) {
+        if (hoverOn) return;
+        setIsOpen(!isOpen);
+    }
+
+
+    function handleHoverOn(event: any) {
+        if (!hoverOn || typeof hoverOn === 'undefined') return;
+        setTimeout(() => {
+            setIsOpen(true);
+        }, _hoverDelay);
+        
+    }
+
+    function handleHoverOff(event: any) {
+        if (!hoverOff || typeof hoverOff === 'undefined') return;
+        setTimeout(() => {
+            setIsOpen(false);
+        }, _hoverDelay);
+        
+    }
+
+
+
+    function handleClose(event: any) {
+        if (event.target.closest(`.${wrapperClassName || wrapperClassName === '' ? wrapperClassName : 'dropdown__wrapper'}`) === null) {
+            setIsOpen(false);
+        }
+    }
+
+
+    function handleSelect(option) {
+        setIsOpen(false);
+        setSelected(option);
+
+        if (typeof (onChange) === 'function') {
+            onChange(option);
+        }
+
+    }
+
+    useEffect(() => {
+
+        document.removeEventListener('pointerdown', handleClose);
+        document.addEventListener('pointerdown', handleClose);
+
+        return () => {
+            document.removeEventListener('pointerdown', handleClose);
+        }
+
+    }, [options]);
+    
+
+    return (
+        <>
+
+            <div className={`dropdown__wrapper ${wrapperClassName || wrapperClassName === '' ? wrapperClassName : `dropdown-default dropdown-default--${alignOptionsLayer ? alignOptionsLayer : 'center'}`} ${isOpen ? 'active' : ''}`} onMouseLeave={handleHoverOff} >
+
+                {triggerButton ? <button tabIndex={tabIndex || -1} className={triggerClassName ? `${triggerClassName}` : `d-inline w-auto`} type="button" onMouseEnter={handleHoverOn} onClick={handleClick} dangerouslySetInnerHTML={{ __html: selectedLabel }}></button> : <div className={triggerClassName ? `${triggerClassName}` : `d-inline w-auto`} onMouseEnter={handleHoverOn} onClick={handleClick} dangerouslySetInnerHTML={{ __html: selectedLabel }}></div>}
+
+                <input name={name || ''} type="hidden" value={selected?.value} />
+                <ul className={isOpen ? `${listClassName ? listClassName : 'dropdown-menu-default'} ${showClassName ? showClassName : 'show'}` : `${listClassName ? listClassName : 'dropdown-menu-default'}`}>
+                    {selectOptionsListPresentation}
+                </ul>
+            </div>
+
+        </>
+    )
+}
+
+
+
+
+export default DropdownMenu;

package/lib/esm/DynamicFields/index.tsx

@@ -0,0 +1,386 @@
+import React, { useId, useState, useEffect, useRef } from 'react';
+
+declare module 'react' {
+    interface ReactI18NextChildren<T> {
+        children?: any;
+    }
+}
+
+type DynamicFieldsProps = {
+    wrapperClassName?: string;
+    value?: string;
+    label?: React.ReactNode | string;
+    tempHtmlString?: any;
+    maxFields?: any;
+    confirmText?: string;
+    iconAddBefore?: React.ReactNode | string;
+    iconAddAfter?: React.ReactNode | string;
+    iconAdd?: React.ReactNode | string;
+    iconRemove?: React.ReactNode | string;
+    startFromZero?: boolean;
+    /** -- */
+    id?: string;
+    onAdd?: () => void;
+    onRemove?: () => void;
+    onComplete?: () => void;
+    
+};
+
+const DynamicFields = (props: DynamicFieldsProps) => {
+    const {
+        wrapperClassName,
+        value,
+        label,
+        tempHtmlString,
+        maxFields,
+        iconAddBefore,
+        iconAddAfter,
+        iconAdd,
+        iconRemove,
+        startFromZero,
+        id,
+        confirmText,
+        onAdd,
+        onRemove,
+        onComplete
+    } = props;
+
+    const uniqueID = useId().replace(/\:/g, "-");
+    const idRes = id || uniqueID;
+    const rootRef = useRef<any>(null);
+    const fieldsRef = useRef<any>(null);
+    const addBtnRef = useRef<any>(null);
+    const [data, setData] = useState<any[]>([]);
+    const controlRefreshValDelay = 1000;
+
+    //timer
+    const timeoutIdRef = useRef<any>(null);
+    const startTimer = () => {
+
+        return new Promise(function (resolve, reject) {
+          
+            //
+            timeoutIdRef.current = setTimeout(() => {
+
+                if ( fieldsRef.current !== null ) {
+                    const _val: any[] = value ? JSON.parse( '[' + value + ']' ) : [];
+                    const controls: HTMLFormElement[] = [].slice.call(document.querySelectorAll( `#${fieldsRef.current.id} > .dynamic-fields__append [name]` ));
+                    const integratedControls: HTMLFormElement[] = [];
+    
+                    let hasRadio: boolean = false;
+                    controls.forEach((node: any, i: number) => {
+    
+    
+                        let controlType = '';
+                        if (node.tagName == "INPUT" || node.tagName == "TEXTARTA") {
+            
+                            //not `radio`, `checkbox`
+                            if (node.type != 'checkbox' && node.type != 'radio') {
+                                controlType = 'input-textarea';
+                            }
+            
+                            //`checkbox`
+                            if (node.type == 'checkbox') {
+                                controlType = 'checkbox';
+                            }
+            
+                            //`radio`
+                            if (node.type == 'radio') {
+                                controlType = 'radio';
+                            }
+            
+                        }
+            
+                        //`select`
+                        if (node.tagName == "SELECT") {
+                            controlType = 'select';
+                        }
+    
+                        //
+                        if ( controlType === 'radio' ) {
+                            hasRadio = true;
+                        }
+    
+                        integratedControls.push({
+                            target: node,
+                            type: controlType
+                        } as never);
+    
+                        // replace placeholder string
+                        replacePlaceholderStr(node);
+                    });
+    
+                    
+    
+                    if ( hasRadio ) {
+                        console.error('<DynamicFields /> cannot use the "radio" type, because it will have multiple duplicate names! \nThe following components are recommended: <Input />, <Textarea />, <Checkbox />, <Switch />, <MultiFuncSelect />, <Select />, <CascadingSelectE2E />, <CascadingSelect />, <TagInput />, <RangeSlider />.');
+                        return false;
+                    }
+                    
+                    const resControls: any = groupByNum(integratedControls, Math.floor(integratedControls.length / _val.length));
+    
+                    _val.forEach((row: string[], i: number) => {
+                        row.forEach((val: any, j: number) => {
+                            
+                            if ( typeof resControls[i] !== 'undefined' && typeof resControls[i][j] !== 'undefined' ) {
+                                const _control: any = resControls[i][j];
+
+                                // set default value
+                                // It is generally used for `<CascadingSelect />` and cascading `<Select />`
+                                _control.target.dataset.value = val;
+
+                                switch (_control.type) {
+                                    case "input-textarea":
+
+                                        // normal
+                                        _control.target.value = val;
+    
+                                        // if it is checkbox
+                                        if ( val === true ) {
+                                            const _checkbox = _control.target.parentElement.querySelector('[data-checkbox]');
+                                            _checkbox.checked = val == true ? true : false;
+                                            _control.target.value = _checkbox.value;
+                                        }
+
+    
+                                        break;
+                                    case "checkbox":
+                                        _control.target.checked = val == true ? true : false;
+                                        break;
+                                    case "select":
+                                        _control.target.value = val;
+                                        _control.target.dispatchEvent(new Event('change'));
+                                        
+                                        break;
+                                    default:
+                                        _control.target.value = val;
+                
+                                }//end switch  
+                            }
+    
+                            
+                        })	
+    
+                    });
+    
+                    //button status
+                    checkMaxStatus(); 
+
+                    //
+                    resolve(timeoutIdRef.current);
+    
+                }
+                
+
+            }, controlRefreshValDelay);
+
+            
+
+        });
+    };
+
+    const stopTimer = () => {
+        clearTimeout(timeoutIdRef.current);
+        timeoutIdRef.current = null;
+    };
+
+
+    //timer add
+    const timeoutAddIdRef = useRef<any>(null);
+    const startTimerAdd = () => {
+        timeoutAddIdRef.current = setTimeout(() => {
+
+            if ( fieldsRef.current !== null ) {
+                const controls: HTMLFormElement[] = [].slice.call(document.querySelectorAll( `#${fieldsRef.current.id} > .dynamic-fields__append [name]` ));
+                controls.forEach((node: any, i: number) => {
+                    // replace placeholder string
+                    replacePlaceholderStr(node);
+                });
+
+            }
+        }, controlRefreshValDelay);
+    };
+
+    const stopTimerAdd = () => {
+        clearTimeout(timeoutAddIdRef.current);
+        timeoutAddIdRef.current = null;
+    };
+
+
+    //timer onComplete
+    const timeoutHandleCompleteIdRef = useRef<any>(null);
+    const startTimerHandleComplete = () => {
+        timeoutHandleCompleteIdRef.current = setTimeout(() => {
+
+            // Call a function when all dynamic components are rendered. 
+            // It is usually used for cascading asynchronous components (can be triggered by routing updates)
+            onComplete?.();
+
+        }, 500);
+    };
+
+    const stopTimerHandleComplete = () => {
+        clearTimeout(timeoutHandleCompleteIdRef.current);
+        timeoutHandleCompleteIdRef.current = null;
+    };
+
+
+
+
+    //
+    function replacePlaceholderStr(node: any) {
+        const _wapper = node.closest('.dynamic-fields__tmpl__wrapper');
+        if ( _wapper === null ) return;
+
+        const perKey = _wapper.dataset.key;
+        if (typeof node.id !== 'undefined' ) node.id = node.id.replace('%i%', perKey);
+        if (typeof node.name !== 'undefined' ) node.name = node.name.replace('%i%', perKey);
+        if (typeof node.dataset.id !== 'undefined' ) node.dataset.id = node.dataset.id.replace('%i%', perKey);
+        if (typeof node.dataset.name !== 'undefined' ) node.dataset.name = node.dataset.name.replace('%i%', perKey);
+    }
+
+    function groupByNum(arr: any[], n: number) {
+        if ( n === 0 || n === Infinity ) return false;
+
+        let result: any[] = [];
+        for (let i = 0; i < arr.length; i += n) result.push(arr.slice(i, i + n) as never);
+        return result;
+    }
+
+
+    function checkMaxStatus() {
+        //button status
+        if (rootRef.current.querySelector('.dynamic-fields__append').children.length+1 >= parseFloat(maxFields)) {
+            addBtnRef.current.style.setProperty('display', 'none', 'important');
+        }
+    }
+    
+
+    function handleClickAdd(event: any){
+        event.preventDefault();
+
+        //button status
+        checkMaxStatus();
+
+        //
+        setData((prevState: any[]) => {
+            return [...prevState, [""]];
+        });
+
+        //
+        onAdd?.();
+
+
+        // update placeholder string
+        startTimerAdd();
+
+
+    }
+
+
+    function handleClickRemove(param: any) { // param is the argument you passed to the function
+        return (e: any) => { // e is the event object that returned
+            e.preventDefault();
+
+            if ( confirm(confirmText || '') ) {
+
+                //button status
+                if (rootRef.current.querySelector('.dynamic-fields__append').children.length <= parseFloat(maxFields)) {
+                    addBtnRef.current.style.setProperty('display', 'inline', 'important');
+                }
+    
+
+                //
+                let newData = [...data];
+                newData.splice(param, 1);
+                //console.log(newData); //[[""],[""],[""],[""]]
+                setData(newData);
+
+                //
+                onRemove?.();  
+            }
+
+        };
+
+    }
+
+    function updateDisplayedControls() {
+
+		// update values for all displayed controls
+        // You need to wait for the asynchronous component to render
+        startTimer().then(() => {
+            startTimerHandleComplete();
+        });
+
+    }
+
+    function generateList() {
+
+        return data.map((el: any, i: number) =>
+            <div key={i} className="dynamic-fields__tmpl__wrapper position-relative" data-key={i}>
+
+                {el.map((data: any, index: number) => {
+                    return (
+                        <React.Fragment key={index}>
+                            {tempHtmlString}
+                        </React.Fragment>
+                    )
+                })
+                }
+
+                <a href="#" tabIndex={-1} className="dynamic-fields__removebtn align-middle" onClick={handleClickRemove(i)}>
+                    {iconRemove ? <>{iconRemove}</> : <><svg width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path fillRule="evenodd" clipRule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10ZM8 11a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Z" fill="#000" /></svg></>}
+                </a>
+
+            </div>
+        );
+
+    }
+
+    useEffect(() => {
+
+        setData(value ? [...Array(JSON.parse('[' + value + ']').length - (!startFromZero ? 1 : 0))].map(() => [""]) : []);
+        updateDisplayedControls();
+
+        return () => {
+            stopTimer();
+            stopTimerAdd();
+            stopTimerHandleComplete();
+        };
+
+  
+    }, [value]);
+
+
+    return (
+        <>
+
+
+            <div className={wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative"} ref={rootRef}>
+                {label ? <><label className="form-label">{label}</label></> : null}
+
+                <div ref={fieldsRef} className="dynamic-fields-container" data-max-fields={maxFields || 10} id={idRes}>
+                    <div className="dynamic-fields__append">
+                        {!startFromZero ? tempHtmlString : null}
+                        {generateList()}
+                    </div>
+                    
+                    <div className="dynamic-fields__btns">
+                        {iconAddBefore ? iconAddBefore : null}
+                        <a ref={addBtnRef} href="#" tabIndex={-1} className="dynamic-fields__addbtn align-middle" onClick={handleClickAdd}>
+                            {iconAdd ? <>{iconAdd}</> : <><svg width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16 12.75H12.75V16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16V12.75H8C7.59 12.75 7.25 12.41 7.25 12C7.25 11.59 7.59 11.25 8 11.25H11.25V8C11.25 7.59 11.59 7.25 12 7.25C12.41 7.25 12.75 7.59 12.75 8V11.25H16C16.41 11.25 16.75 11.59 16.75 12C16.75 12.41 16.41 12.75 16 12.75Z" fill="#000" /></svg></>}
+                        </a>
+                        {iconAddAfter ? iconAddAfter : null}
+                    </div>
+                    
+                </div>
+
+            </div>
+
+
+
+        </>
+    )
+};
+
+export default DynamicFields;