funda-ui 4.5.711 → 4.5.713

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

@@ -1,552 +0,0 @@
-import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
-
-import RootPortal from 'funda-root-portal';
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-import useDraggable from 'funda-utils/dist/cjs/useDraggable';
-
-// Destroys body scroll locking
-import {
-    clearAllBodyScrollLocks, 
-    disableBodyScroll, 
-    enableBodyScroll,
-} from 'funda-utils/dist/cjs/bodyScrollLock';
-
-
-declare global {
-    interface Window {
-        curVideo?: any;
-        setCloseModalDialog?: any;
-    }
-}
-
-export interface PreventOutsideScreenProps {
-    xAxis: boolean;
-    yAxis: boolean;
-}
-
-
-export interface ModalDialogRef {
-    open: () => void;
-    close: () => void;
-}
-
-
-
-export type ModalDialogProps = {
-    /** Extended class name */
-    modalContentClassName?: string;
-    modalHeaderClassName?: string;
-    modalTitleClassName?: string;
-    modalBodyClassName?: string;
-    modalFooterClassName?: string;
-    modalFooterExpandedContentClassName?: string;
-    /** Allows you to disable scrolling on your page. */
-    lockBodyScroll?: boolean;
-    /** Pop-ups that can be dragged */
-    draggable?: boolean;
-    draggedPreventOutsideScreen?: PreventOutsideScreenProps;
-    /** Set the depth value of the control to control the display of the pop-up layer appear above. Please set it when multiple controls are used at the same time. */
-    depth?: number;
-    /** Whether the modal dialog is visible or not, you can use it with the `autoClose` property at the same time */
-    show: boolean;
-    /** Custom modal max-width whick need a unit string. */
-    maxWidth?: number | string | Function;
-    /** Custom modal max-height whick need a unit string. */
-    minHeight?: number | string | Function;
-    /** Adapt the video to the window */
-    enableVideo?: boolean;
-    /** Enable fullscreen modal */
-    fullscreen?: boolean;
-    /** Set a window title */
-    heading?: React.ReactNode;
-    /** Set footer content */
-    footerExpandedContent?: React.ReactNode;
-    /** Specify a class for this Node. */
-    triggerClassName?: string;
-    /** Set a piece of text or HTML code for the trigger */
-    triggerContent?: React.ReactNode;
-    /** set close button */
-    closeBtnClassName?: string;
-    closeBtnLabel?: string | React.ReactNode;
-    /** set submit button */
-    submitBtnClassName?: string;
-    submitBtnLabel?: string | React.ReactNode;
-    /** Specify auto-close time. This function is not enabled when this value is false. If the value is 2000, it will automatically close after 2 seconds. */
-    autoClose?: number | boolean;
-    /** Disable mask */
-    maskDisabled?: boolean;
-    /** Mask opacity */
-    maskOpacity?: string | number;
-    /** Disable mask to close the window */
-    closeOnlyBtn?: boolean;
-    /** Disable the close button. */
-    closeDisabled?: boolean;
-    /** Incoming data, you can set the third parameter of `onSubmit` */
-    data?: any;
-    /** -- */
-    id?: string;
-    children: React.ReactNode;
-    /** This function is called whenever the data is updated.
-     *  Exposes the JSON format data about the option as an argument.
-     */
-    onLoad?: (openFunc: any, closeFunc: any) => void;
-    onOpen?: (e: any, callback: any) => void;
-    onClose?: (e: any) => void;
-    onSubmit?: (e: any, callback: any, incomingData: string | null | undefined) => void;
-};
-
-const ModalDialog = forwardRef((props: ModalDialogProps, externalRef: React.ForwardedRef<ModalDialogRef>) => {
-    const {
-        modalContentClassName,
-        modalHeaderClassName,
-        modalTitleClassName,
-        modalBodyClassName,
-        modalFooterClassName,
-        modalFooterExpandedContentClassName,
-        lockBodyScroll,
-        draggable,
-        draggedPreventOutsideScreen,
-        depth,
-        show,
-        maxWidth,
-        minHeight,
-        fullscreen,
-        enableVideo,
-        heading,
-        footerExpandedContent,
-        triggerClassName,
-        triggerContent,
-        closeBtnClassName,
-        closeBtnLabel,
-        submitBtnClassName,
-        submitBtnLabel,
-        autoClose,
-        maskDisabled,
-        maskOpacity,
-        closeOnlyBtn,
-        closeDisabled,
-        data,
-        onLoad,
-        onOpen,
-        onClose,
-        onSubmit,
-        id,
-        children
-    } = props;
-
-
-    
-    const DEPTH = depth || 1055;  // the default value same as bootstrap
-    const M_WIDTH = fullscreen ? undefined : (typeof maxWidth === 'function' ? maxWidth() : maxWidth ? maxWidth : undefined);
-    const M_HEIGHT = typeof minHeight === 'function' ? minHeight() : minHeight ? minHeight : undefined;
-    const LOCK_BODY_SCROLL = typeof lockBodyScroll === 'undefined' ? false : lockBodyScroll;
-
-    const uniqueID = useComId();
-    const modalRef = useRef<any>(null);
-    const triggerRef = useRef<any>(null);
-    const idRes = id || uniqueID;
-
-    const [modalShow, setModalShow] = useState<boolean>(false);
-    const [incomingData, setIncomingData] = useState<string | null | undefined>(null);
-
-    // drag and drop
-    const [isDragging, setIsDragging] = useState<boolean>(false);
-    const {
-        dragContentHandle, 
-        dragHandle,
-        resetPosition
-    }: any = useDraggable({
-        enabled: draggable, 
-        preventOutsideScreen: draggedPreventOutsideScreen,
-        onStart: (coordinates: Record<string, number>, handleEl: HTMLElement | null, contentEl: HTMLElement | null) => {
-            setIsDragging(true);
-        },
-        onDrag: (coordinates: Record<string, number>, handleEl: HTMLElement | null, contentEl: HTMLElement | null) => {
-           
-        },
-        onStop: (coordinates: Record<string, number>, handleEl: HTMLElement | null, contentEl: HTMLElement | null) => {
-            setIsDragging(false);
-        }
-    });
-
-    // exposes the following methods
-    useImperativeHandle(
-        externalRef,
-        () => ({
-            open: () => {
-                handleOpenWin(null);
-            },
-            close: () => {
-                handleCloseWin(null);
-            },
-        }),
-        [externalRef],
-    );
-
-
-    //
-    function handleCloseWin(e: any) {
-        if (typeof e !== 'undefined' && e !== null) {
-            e.preventDefault();
-
-            // Prevent click events of parent nested Modal
-            e.stopPropagation();
-        }
-
-        closeAction();
-
-        // reset modal coordinates
-        setTimeout(() => {
-            resetPosition?.();
-        }, 300);
-
-        //
-        onClose?.(e);
-    }
-
-
-    function handleOpenWin(e: any) {
-        if (typeof e !== 'undefined' && e !== null) {
-            e.preventDefault();
-
-            // Prevent click events of parent nested Modal
-            e.stopPropagation();
-        }
-
-        openAction();
-
-        //
-        const callback = (e: any) => {
-            return () => {
-                handleCloseWin(e);
-            }
-        };
-        onOpen?.(e, callback(e));
-    }
-
-    function closeAction() {
-        
-        // pause video without controls
-        //------------------------------------------
-        if (window.curVideo !== null && typeof window.curVideo !== 'undefined') window.curVideo.pause();
-
-
-        // close Modal Dialog
-        //------------------------------------------
-        const $mask: HTMLElement | null = document.querySelector(`#mask-${idRes} > .modal-backdrop`);
-        setModalShow(false);
-        if ($mask !== null) $mask.classList.remove('show');
-
-        setTimeout(() => {
-            if (modalRef.current !== null) modalRef.current.style.display = 'none';
-            if ($mask !== null) $mask.style.display = 'none';
-        }, 300);
-
-
-
-        // Unlocks the page
-        //------------------------------------------
-        if (LOCK_BODY_SCROLL) enableBodyScroll(document.querySelector('body'));
-
-
-        // Cancels a timeout previously established by calling setTimeout().
-        //------------------------------------------
-        clearTimeout(window.setCloseModalDialog);
-
-
-    }
-
-
-    function openAction() {
-
-        if (modalRef.current === null) return;
-
-
-        // Video PopUp Interaction
-        //------------------------------------------
-        const hasVideo = modalRef.current.classList.contains('is-video') ? true : false;
-
-        if (hasVideo) {
-
-            const windowWidth = window.innerWidth;
-            const windowHeight = window.innerHeight;
-            const $videoWrapper = modalRef.current.querySelector('.modal-dialog__video');
-            const isIframe = $videoWrapper.getElementsByTagName('iframe').length > 0 ? true : false;
-            let $video: any = isIframe ? $videoWrapper.getElementsByTagName('iframe')[0] : $videoWrapper.getElementsByTagName('video')[0];
-
-            //
-            const setVideo = function (currentWidth: number, currentHeight: number, obj: any) {
-
-                const newMaxW = windowWidth - 80,
-                    newMaxH = windowHeight - 80;
-
-                let newW = currentWidth,
-                    newH = currentHeight;
-
-
-                if (currentHeight > newMaxH) {
-                    newH = newMaxH;
-
-                    //Scaled/Proportional Content 
-                    newW = currentWidth * (newH / currentHeight);
-
-                }
-
-                if (newW > newMaxW) {
-                    newW = newMaxW;
-
-                    //Scaled/Proportional Content 
-                    newH = currentHeight * (newW / currentWidth);
-                }
-
-                obj.height = newH + 'px';
-                obj.width = newW + 'px';
-
-                //
-                modalRef.current.querySelector('.modal-dialog').style.width = newW + 'px';
-
-            };
-
-
-            if (isIframe) {
-                let _w = parseFloat(modalRef.current.querySelector('.modal-dialog').style.maxWidth);
-                if (isNaN(_w)) _w = 500;
-                const _h = _w * 0.5625;
-
-                setVideo(_w, _h, $video);
-            } else {
-
-                const _sources = $video.getElementsByTagName('source');
-                const _src = _sources.length > 0 ? _sources[0].src : $video.src;
-
-                getVideoDimensions(_src).then(function (res: any): void {
-                    setVideo(res.width, res.height, $video);
-                });
-            }
-
-            //Set current video when the tag is <video>
-            window.curVideo = $video.tagName === 'VIDEO' ? $video : null;
-
-        }
-
-
-        // fire Modal Dialog
-        //------------------------------------------
-        const $mask: HTMLElement | null = document.querySelector(`#mask-${idRes} > .modal-backdrop`);
-        modalRef.current.style.display = 'block';
-        if ($mask !== null) $mask.style.display = 'block';
-        setTimeout(() => {
-            setModalShow(true);
-            if ($mask !== null) $mask.classList.add('show');
-        }, 0);
-
-
-
-        // Locks the page
-        //------------------------------------------
-        //
-        // Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
-        // Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
-        // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
-        if (LOCK_BODY_SCROLL) disableBodyScroll(document.querySelector('body'));
-
-
-
-        //auto close
-        //------------------------------------------
-        if (autoClose && !isNaN(autoClose as number)) {
-
-            //
-            window.setCloseModalDialog = setTimeout(function () {
-                closeAction();
-                //
-                onClose?.(null);
-            }, autoClose as number);
-        }
-
-    }
-
-
-
-
-    //Returns the dimensions of a video asynchrounsly.
-    function getVideoDimensions(url: string) {
-        return new Promise(function (resolve) {
-            // create the video element
-            let video = document.createElement('video');
-
-            // place a listener on it
-            video.addEventListener("loadedmetadata", function () {
-                // retrieve dimensions
-                let height = this.videoHeight;
-                let width = this.videoWidth;
-                // send back result
-                resolve({
-                    height: height,
-                    width: width
-                });
-            }, false);
-
-            // start download meta-datas
-            video.src = url;
-        });
-    }
-
-
-    useEffect(() => {
-
-  
-        // update incoming data
-        //--------------
-        setIncomingData(data);
-
-
-        // show (ONLY, DO NOT USE `if ... else ...`)
-        //--------------
-        if (show) {
-            handleOpenWin(null);
-        }
-
-
-        // Pass the function to be called
-        //--------------
-        onLoad?.(() => handleOpenWin, () => handleCloseWin);
-
-
-        // Remove the global list of events, especially as scroll and interval.
-        //--------------
-        return () => {
-    
-            if (LOCK_BODY_SCROLL) clearAllBodyScrollLocks();
-
-            // Cancels a timeout previously established by calling setTimeout().
-            clearTimeout(window.setCloseModalDialog);
-            
-        }
-
-
-    }, [show, data, modalRef.current]);   // When show`` defaults to true, `modalRef.current` will be null
-
-    return (
-        <>
-            {triggerContent ? <>
-                <div className={triggerClassName ? triggerClassName : 'd-inline w-auto'} ref={triggerRef} onClick={handleOpenWin}>{triggerContent}</div>
-            </> : null}
-
-     
-            {/* Modal */}
-            <RootPortal show={true} containerClassName="ModalDialog">
-
-                <div 
-                    ref={modalRef} 
-                    className={enableVideo ? `modal fade is-video ${modalShow ? 'show' : ''}` : `modal fade ${modalShow ? 'show' : ''}`} 
-                    tabIndex={-1} 
-                    aria-hidden="true" 
-                    style={{ 
-                        pointerEvents: 'none',
-                        zIndex: DEPTH
-                    }} 
-                    data-mask={`mask-${idRes}`}
-                >
-                    <div className={`modal-dialog modal-dialog-centered modal-dialog-scrollable ${fullscreen ? 'modal-fullscreen' : ''}`} style={M_WIDTH ? { maxWidth: `${M_WIDTH}` } : {}}>
-                        <div 
-                            ref={dragContentHandle} 
-                            className={`${enableVideo ? 'modal-content bg-transparent shadow-none border-0' : 'modal-content'} ${modalContentClassName || ''} ${isDragging ? 'dragging' : ''}`} 
-                            style={{ 
-                                overflow: 'inherit', 
-                                minHeight: M_HEIGHT ? M_HEIGHT : 'auto' 
-                            }}
-                        >
-                            {(!heading || heading === '') && closeDisabled ? null : <>
-
-                                <div 
-                                    ref={dragHandle} 
-                                    className={`${enableVideo ? 'modal-header border-0 px-0' : 'modal-header'} ${modalHeaderClassName || ''}`}
-                                    style={{ 
-                                        cursor: draggable ? 'move' : 'default'
-                                    }}
-                                >
-                                    <h5 className={`modal-title ${modalTitleClassName || ''}`}>{heading || ''}</h5>
-                                    {!closeDisabled ? <button type="button" className={enableVideo ? 'btn-close btn-close-white' : 'btn-close'} data-close="1" onClick={handleCloseWin}></button> : null}
-
-                                </div>
-                            </>}
-
-                            <div className={`${enableVideo ? 'modal-body m-0 p-0' : 'modal-body'} ${modalBodyClassName || ''}`}>
-                                {/*<!-- ////////  content  begin //////// -->*/}
-                                {enableVideo ? <>
-                                    <div className="modal-dialog__video">
-                                        <div className="ratio ratio-16x9">
-                                            {children}
-                                        </div>
-                                    </div>
-                                </> : children}
-                                {/*<!-- ////////  content  end //////// -->*/}
-                            </div>
-
-
-
-                            {/* FOOTER CONTENT */}
-                            {footerExpandedContent ? <>
-                                <div className={`modal-footer modal-expanded-footer ${modalFooterExpandedContentClassName || ''}`}>
-                                    {footerExpandedContent}
-                                </div>
-                            </> : null}
-                            {/* /FOOTER CONTENT */}
-
-
-                            {/* SUBMIT & CANCEL */}
-                            {closeBtnLabel || submitBtnLabel ? <>
-                                <div className={`modal-footer ${modalFooterClassName || ''}`}>
-
-                                    {!closeDisabled ? <>{closeBtnLabel ? <button data-close="1" onClick={handleCloseWin} type="button" className={closeBtnClassName ? closeBtnClassName : 'btn btn-secondary'}>{closeBtnLabel}</button> : null}</> : null}
-
-                                    {submitBtnLabel ? <button data-confirm="1" data-incoming-data={`${incomingData}`} onClick={(e: any) => {
-                                        const callback = (e: any) => {
-                                            return () => {
-                                                handleCloseWin(e);
-                                            }
-                                        };
-                                        onSubmit?.(e, callback(e), incomingData);
-                                    }} type="button" className={submitBtnClassName ? submitBtnClassName : 'btn btn-primary'}>{submitBtnLabel}</button> : null}
-                                </div>
-                            </> : null}
-                            {/* /SUBMIT & CANCEL */}
-
-                        </div>
-                    </div>
-                </div>
-
-                {/* MASK */}
-                {!maskDisabled ? <div id={`mask-${idRes}`}>
-                    <div
-                        id={`mask-${idRes}`}
-                        className={modalShow ? 'modal-backdrop fade show' : 'modal-backdrop fade'}
-                        style={maskOpacity ? {
-                            display: modalShow ? 'block' : 'none',
-                            opacity: maskOpacity,
-                            zIndex: DEPTH - 5
-                        } : {
-                            display: modalShow ? 'block' : 'none',
-                            zIndex: DEPTH - 5
-                        }}
-                        onClick={(e: any) => {
-                            if ((typeof closeDisabled === 'undefined' || closeDisabled === false) && (typeof closeOnlyBtn === 'undefined' || closeOnlyBtn === false)) {
-                                handleCloseWin(null);
-                            }
-                        }}
-                    ></div>
-                </div> : null}
-                {/* /MASK */}
-
-                
-            </RootPortal>
-
-
-
-        </>
-    )
-});
-
-export default ModalDialog;

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

@@ -1,82 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-
-
-export type ModeSwitchProps = {
-    triggerClassName?: string;
-    /** The name of the local storage */
-    localStorageName?: string;
-    /** Style name for dark mode */
-    darkClassName?: string;
-    /** Set the light icon */
-    lightIcon?: React.ReactNode | string;
-    /** Set the dark icon */
-    darkIcon?: React.ReactNode | string;
-    /** -- */
-    tabIndex?: number;
-    onChange?: (e: any, param: boolean) => void;
-};
-
-
-const ModeSwitch = (props: ModeSwitchProps) => {
-    const {
-        triggerClassName,
-        localStorageName,
-        darkClassName,
-        lightIcon,
-        darkIcon,
-        tabIndex,
-        onChange
-    } = props;
-
-    const darkBtnRef = useRef<any>(null);
-    const lightBtnRef = useRef<any>(null);
-    const [isDark, setIsDark] = useState<boolean>(false);
-    const _darkClassName = darkClassName ? darkClassName : 'dark-mode';
-    const _localStorageName = localStorageName ? localStorageName : 'SITE_THEME_MODE';
-
-    function handleClick(e) {
-        e.preventDefault();
-        setIsDark(!isDark);
-
-        if (!isDark) {
-            document.body.classList.add(_darkClassName);
-            localStorage.setItem(_localStorageName, _darkClassName);
-
-        } else {
-            document.body.classList.remove(_darkClassName);
-            localStorage.removeItem(_localStorageName);
-        }
-
-        //
-        onChange?.(e, !isDark);
-
-    }
-
-    useEffect(() => {
-
-        const modeName = localStorage.getItem(_localStorageName);
-        if (modeName !== null) {
-            document.body.classList.add(modeName);
-            setIsDark(true);
-        }
-
-    }, []);
-
-    return (
-        <>
-
-            <a className={triggerClassName ? triggerClassName : ''} tabIndex={tabIndex || -1} href="#" onClick={handleClick} >
-                <span ref={darkBtnRef} style={{ display: !isDark ? 'inline-block' : 'none' }}>{darkIcon || <>
-                    <svg fill="#fff" width="26px" height="26px" viewBox="0 0 35 35"><path stroke="#000" strokeWidth="2" d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path></svg>
-                </>}</span>
-                <span ref={lightBtnRef} style={{ display: isDark ? 'inline-block' : 'none' }}>{lightIcon || <>
-                    <svg fill="#fff" height="26px" width="26px" viewBox="0 0 207.628 207.628"><circle cx="103.814" cy="103.814" r="45.868"/><path d="M103.814,157.183c-29.427,0-53.368-23.941-53.368-53.368s23.941-53.368,53.368-53.368s53.368,23.941,53.368,53.368S133.241,157.183,103.814,157.183z M103.814,65.446c-21.156,0-38.368,17.212-38.368,38.368s17.212,38.368,38.368,38.368s38.368-17.212,38.368-38.368S124.97,65.446,103.814,65.446z"/><path d="M103.814,39.385c-4.142,0-7.5-3.358-7.5-7.5V7.5c0-4.142,3.358-7.5,7.5-7.5s7.5,3.358,7.5,7.5v24.385C111.314,36.027,107.956,39.385,103.814,39.385z"/><path d="M103.814,207.628c-4.142,0-7.5-3.358-7.5-7.5v-24.385c0-4.142,3.358-7.5,7.5-7.5s7.5,3.358,7.5,7.5v24.385C111.314,204.271,107.956,207.628,103.814,207.628z"/><path d="M200.128,111.314h-24.385c-4.142,0-7.5-3.358-7.5-7.5s3.358-7.5,7.5-7.5h24.385c4.142,0,7.5,3.358,7.5,7.5S204.271,111.314,200.128,111.314z"/><path d="M31.885,111.314H7.5c-4.142,0-7.5-3.358-7.5-7.5s3.358-7.5,7.5-7.5h24.385c4.142,0,7.5,3.358,7.5,7.5S36.027,111.314,31.885,111.314z"/><path d="M154.676,60.452c-1.919,0-3.839-0.732-5.303-2.197c-2.929-2.929-2.929-7.678,0-10.606l17.243-17.242c2.929-2.929,7.678-2.93,10.606,0c2.929,2.929,2.929,7.678,0,10.606l-17.243,17.242C158.515,59.72,156.595,60.452,154.676,60.452z"/><path d="M35.709,179.419c-1.919,0-3.839-0.732-5.303-2.197c-2.929-2.929-2.929-7.678,0-10.606l17.243-17.243c2.929-2.929,7.678-2.929,10.606,0c2.929,2.929,2.929,7.678,0,10.606l-17.243,17.243C39.548,178.687,37.629,179.419,35.709,179.419z"/><path d="M171.918,179.419c-1.919,0-3.839-0.732-5.303-2.197l-17.243-17.243c-2.929-2.929-2.929-7.678,0-10.606c2.929-2.929,7.678-2.929,10.606,0l17.243,17.243c2.929,2.929,2.929,7.678,0,10.606C175.757,178.687,173.838,179.419,171.918,179.419z"/><path d="M52.952,60.452c-1.919,0-3.839-0.732-5.303-2.197L30.406,41.013c-2.929-2.929-2.929-7.677,0-10.606c2.929-2.929,7.678-2.93,10.606,0l17.243,17.242c2.929,2.929,2.929,7.677,0,10.606C56.791,59.72,54.872,60.452,52.952,60.452z"/></svg>
-                </>}</span>
-            </a>
-
-        </>
-    )
-};
-
-
-export default ModeSwitch;