funda-ui 4.5.711 → 4.5.713

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

@@ -1,374 +0,0 @@
-import React, { useEffect, useState, useRef, useCallback } from 'react';
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-
-import RootPortal from 'funda-root-portal';
-
-
-import Item from './Item';
-
-
-
-export type ToastProps = {
-    /** The class name of the toast wrapper. */
-    wrapperClassName?: string;
-    /** Specify data of toasts as a JSON string format. */
-    data: any[any];
-    /** Automatically hide multiple items */
-    autoHideMultiple?: boolean;
-    /** The direction of the toast. */
-    direction?: string;
-    /** Set an automatic closing time, multiple items will be accumulated in order. 
-     * Amount of time measured in milliseconds. If false or without this attribute, Auto-Close will be disabled.
-     */
-    autoCloseTime?: boolean | number;
-    /** You can not close pop-win when it is enabled */
-    lock?: boolean;
-    /** Whether to use cascading styles */
-    cascading?: boolean;
-    /** Self-defined class name for body*/
-    schemeBody?: string;
-    /** Self-defined class name for header */
-    schemeHeader?: string;
-    /** Set the color of the close button */
-    closeBtnColor?: string;
-    /** Disable the close button. */
-    closeDisabled?: boolean;
-    /**  */
-    async?: boolean;
-    /** -- */
-    id?: string;
-    onClose?: (e: HTMLDivElement, currentIndex: number, data: HTMLDivElement[]) => void;
-};
-
-
-const Toast = (props: ToastProps) => {
-    const {
-        wrapperClassName,
-        async,
-        autoHideMultiple,
-        direction,
-        autoCloseTime,
-        lock,
-        cascading,
-        data,
-        schemeBody,
-        schemeHeader,
-        closeBtnColor,
-        closeDisabled,
-        id,
-        onClose
-    } = props;
-
-
-    const ANIM_SPEED = 300;
-    const DEFAULT_AUTO_CLOSE_TIME = 3000;
-    const uniqueID = useComId();
-    const idRes = id || uniqueID;
-    const rootRef = useRef<any>(null);
-    const depth: number = autoHideMultiple ? data.slice(-2).length + 1 : data.length + 1;
-    const cascadingEnabled = typeof cascading === 'undefined' ? true : cascading;
-
-
-    // force display
-    const [initPopRoot, setInitPopRoot] = useState<boolean>(false);
-
-    // auto close
-    const AUTO_CLOSE_TIME: any = typeof (autoCloseTime) === 'undefined' || autoCloseTime === false ? false : autoCloseTime;
-
-    // progress animation
-    const PROGRESS_TRANSITION_TIME: any = typeof (autoCloseTime) === 'undefined' || autoCloseTime === false ? DEFAULT_AUTO_CLOSE_TIME : autoCloseTime;
-
-
-    const progressPausedRef = useRef<any[]>(data.map((v: any) => false));
-    const progressObjRef = useRef<any[]>([]);
-    const progressIntervalRef = useRef<any[]>(data.map((v: any) => null));
-    const startProgressTimer = useCallback((el: any, i: number) => {
-
-        // init progress
-        let progressCurrentChunk = 100 / (PROGRESS_TRANSITION_TIME / 100);
-        el.firstChild.style.width = 100 + '%';
-        el.firstChild.ariaValueNow = 100;      
-
-
-        // animation
-        progressIntervalRef.current[i] = setInterval(() => {
-            // console.log('toast setInterval');
-            
-            if (!progressPausedRef.current[i]) {
-                
-                const progPercent = 100 - progressCurrentChunk;
-        
-
-                el.firstChild.style.width = progPercent + '%';
-                el.firstChild.ariaValueNow = progPercent;
-                progressCurrentChunk++; 
-                
-        
-                //
-                if (progPercent === 0 || progPercent < 1) {  // may be 0.xxx
-                    el.classList.add('complete');
-
-                    // stop current animation
-                    stopProgressTimer(i);
-
-                    // hide toast item
-                    const currentItem = el.closest('.toast-container');
-                    handleClose(null, i as never, currentItem as never);
-                }
-            }
-
-        }, PROGRESS_TRANSITION_TIME / 100);
-
-
-    }, []);
-
-
-    
-    const clearAllProgressTimer = useCallback((curIndex: number | undefined = undefined) => {
-        if (typeof curIndex === 'undefined') {
-            data.forEach((item: any, i: number) => {
-                clearInterval(progressIntervalRef.current[i]);
-                progressIntervalRef.current[i] = null;
-            });
-        } else {
-            data.forEach((item: any, i: number) => {
-                if (i === curIndex) {
-                    clearInterval(progressIntervalRef.current[i]);
-                    progressIntervalRef.current[i] = null;
-                }
-            });
-        }
-
-    }, [data]);
-    
-
-
-    const stopProgressTimer = useCallback((index: number) => {
-        clearInterval(progressIntervalRef.current[index]);
-        progressIntervalRef.current[index] = null;
-
-    }, [data]);
-    
-
-    function progressAnimBegin() {
-        data.forEach((item: any, i: number) => {
-            const el = progressObjRef.current[i];
-            if (el !== null && typeof el !== 'undefined') startProgressTimer(el, i);
-        });
-    }
-
-
-    function handleProgressPaused(e: any) {
-        const _currentIndex = e.currentTarget.dataset.index;
-        progressPausedRef.current[_currentIndex] = true;
-    }
-
-    function handleProgressStart(e: any) {
-        const _currentIndex = e.currentTarget.dataset.index;
-        progressPausedRef.current[_currentIndex] = false;
-    }
-
-    //
-    function init() {
-        if (rootRef.current === null) return;
-
-        const $toast = rootRef.current;
-
-        // Automatically hide multiple items
-        // It creates a transition animation effect with multiple records and only one displayed.
-        //------------------------------------------
-        if (autoHideMultiple) {
-
-            const _list: HTMLDivElement[] = [].slice.call($toast.querySelectorAll('.toast-container'));
-
-            
-            if (_list.length === 2) {
-                _list.forEach((node: any, i: number) => {
-                    node.classList.remove('auto-anim-switch', 'auto-anim-switch--initfirst', 'auto-anim-switch--first');
-
-                    if (i !== _list.length - 1) {
-                        node.classList.add('auto-anim-switch--initfirst'); // top element of source code
-                    } else {
-                        node.classList.add('auto-anim-switch--initfirst');   // bottom element of source code
-                    }
-                    
-                });
-
-
-                setTimeout(() => {
-                    _list.forEach((node: any, i: number) => {
-                        if (i !== _list.length - 1) {
-                            node.classList.add('auto-anim-switch');
-                        } else {
-                            node.classList.add('auto-anim-switch--initfirst', 'auto-anim-switch--first');
-                        }
-                    });
-                }, ANIM_SPEED/2);
-            } else {
-
-                _list.forEach((node: any, i: number) => {
-                    if (i !== _list.length - 1) {
-                        node.classList.add('auto-anim-switch');
-                    } else {
-                        node.classList.add('auto-anim-switch--initfirst', 'auto-anim-switch--first');
-                    }
-                });
-            }
-
-
-        }
-
-        
-        // Initialize data
-        //--------------
-        if ( $toast.dataset.async == 'true' ) {
-            const _list: HTMLDivElement[] = [].slice.call($toast.querySelectorAll('.toast-container'));
-            _list.forEach((node: any, i: number) => {
-                node.classList.remove('hide-end');
-                // rearrange
-                if (cascadingEnabled) node.style.transform = `perspective(100px) translateZ(-${2 * i}px) translateY(${35 * i}px)`;
-
-            });
-
-        }
-
-    }
-
-
-    function autoClose() {
-
-        // Auto hide
-        //--------------
-        if (AUTO_CLOSE_TIME !== false) {
-
-            // start animation
-            progressAnimBegin();
-        }
-
-    }
-
-    function handleClose(e: any, index: number, currentItem: HTMLDivElement) {
-        if (typeof e !== 'undefined' && e !== null) e.preventDefault();
-        if (rootRef.current === null) return;
-
-        const curIndex = Number(index);
-        
-        const _list: HTMLDivElement[] = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
-        currentItem.classList.add('hide-start');
-
-        //Let the removed animation show
-        setTimeout(() => {
-
-            _list.forEach((node: any, i: number) => {
-                node.classList.remove('hide-start');
-            });
-
-            // remove current
-            currentItem.classList.add('hide-end');
-
-            // rearrange
-            if (cascadingEnabled) {
-                _list.filter((node: any) => !node.classList.contains('hide-end')).forEach((node: any, k: number) => {
-                    node.style.transform = `perspective(100px) translateZ(-${2 * k}px) translateY(${35 * k}px)`;
-                });
-            }
-
-            // stop all animations or current animation
-            if (_list.length === 1 || autoHideMultiple) {
-                clearAllProgressTimer();
-            } else {
-                clearAllProgressTimer(curIndex);
-            }
-            
-
-            //
-            onClose?.(rootRef.current, curIndex, _list.filter((node: HTMLDivElement) => !node.classList.contains('hide-end') ));          
-
-        }, ANIM_SPEED);
-
-        
-    }
-
-
-    useEffect(() => {
-
-        if (initPopRoot) {
-
-            // Initialize Toast Item
-            //------------------------------------------
-            init();
-
-
-            // Initialize Progress
-            //------------------------------------------
-            autoClose();
-
-
-            // Remove the global list of events, especially as scroll and interval.
-            //--------------
-            return () => {
-
-                // Stop all animations
-                clearAllProgressTimer();
-
-            }
-        }
-
-
-    }, [data, initPopRoot]);
-
-
-    useEffect(() => {
-        setInitPopRoot(true);
-    }, []);
-
-    
-
-    return (
-        <>
-            <RootPortal show={initPopRoot} containerClassName="Toast">
-
-                <div 
-                    id={`toasts__wrapper-${idRes}`} 
-                    data-async={async ? async : false} 
-                    className={`toasts__wrapper toasts__wrapper--${direction ? direction : 'bottom-center'} ${cascadingEnabled ? 'toasts__wrapper--cascading' : ''} ${wrapperClassName || ''}`} 
-                    ref={rootRef}
-                >
-                    <div className="toasts">
-                        {(autoHideMultiple ? data.slice(-2) : data).map((item: any, i: number) => {
-                            return <Item
-                                ref={el => progressObjRef.current[i] = el}
-                                onlyOne={data.length === 1 ? true : false}
-                                depth={depth - i}
-                                key={i}
-                                index={i}
-                                title={item.title}
-                                note={item.note}
-                                theme={item.theme}
-                                lock={lock}
-                                cascading={cascadingEnabled}
-                                schemeBody={schemeBody}
-                                schemeHeader={schemeHeader}
-                                closeBtnColor={closeBtnColor}
-                                closeDisabled={closeDisabled}
-                                message={item.message}
-                                autoCloseTime={AUTO_CLOSE_TIME}
-                                evStart={handleProgressStart}
-                                evPause={handleProgressPaused}
-                                evClose={handleClose}
-                            />
-
-                        })}
-                    </div>
-
-                </div>
-            </RootPortal>
-
-
-        </>
-    )
-};
-
-
-export default Toast;

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

@@ -1,269 +0,0 @@
-/* ======================================================
-    <!-- Tooltip -->
-/* ====================================================== */
-
-
-/*
- * 1. Base Styles
- * 2. Position Modifiers - Top
- * 3. Position Modifiers - Top Left
- * 4. Position Modifiers - Top Right
- * 5. Position Modifiers - Bottom
- * 6. Position Modifiers - Bottom Left
- * 7. Position Modifiers - Bottom Right
- * 8. Position Modifiers - Left
- * 9. Position Modifiers - Right
- * 10. Size
-*/
-
-.tooltip__wrapper {
-
-    --tooltip-box-shadow: 0 5px 15px 0 rgba(0,0,0,.07), 0 15px 35px 0 rgba(50,50,93,.1);
-    --tooltip-content-bg: rgba(17, 17, 17, 0.9);
-    --tooltip-content-color: #fff;
-    --tooltip-content-font-size: 0.75em;
-    --tooltip-content-padding-x: 1em;
-    --tooltip-content-padding-y: .5em;
-    --tooltip-content-line-height: 1.5;
-    --tooltip-arrow-bg-top: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-    --tooltip-arrow-bg-bottom: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-    --tooltip-arrow-bg-left: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-    --tooltip-arrow-bg-right: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-
-    --tooltip-arrow-width: 18px;
-    --tooltip-arrow-height: 6px;
-    
-
-    position: absolute;
-    z-index: 1055;  /* --bs-modal-zindex */
-    pointer-events: none;
-    display: none;
-    margin-top: -.2rem;
-
-    &::before {
-        background-size: 100% auto !important;
-        content: "";
-        position: absolute;
-    }
-
-    &.active {
-        display: block !important;
-
-        &::before,
-        > .tooltip__content {
-            opacity: 1;
-        }
-    }
-
-    &:focus {
-
-        &::before,
-        > .tooltip__content {
-            opacity: 1;
-        }
-    }
-
-
-    &::before,
-    > .tooltip__content {
-        backface-visibility: hidden;
-        will-change: transform;
-        opacity: 0;
-        box-sizing: border-box;
-        z-index: 10;
-        transform-origin: top;
-        box-shadow: var(--tooltip-box-shadow);
-        transition: none !important;  /* Don't use transition if position is outside window */
-    }
-
-
-
-    /*
-	---------------------------
-	1. Base Styles
-	---------------------------
-	*/
-
-    > .tooltip__content {
-        background: var(--tooltip-content-bg);
-        border-radius: 4px;
-        color: var(--tooltip-content-color);
-        content: attr(aria-label);
-        font-size: var(--tooltip-content-font-size);
-        font-weight: normal;
-        text-transform: none;
-        padding: var(--tooltip-content-padding-y) var(--tooltip-content-padding-x);
-        white-space: nowrap;
-        box-sizing: content-box;
-        line-height: var(--tooltip-content-line-height);
-        
-
-        img {
-            height: auto !important;
-            margin: .5rem 0;
-        }
-
-    }
-
-
-
-    /*
-    ---------------------------
-    2. Position Modifiers - Top
-    ---------------------------
-    */
-
-    &[data-microtip-position|="top"] {
-        &::before {
-            background: var(--tooltip-arrow-bg-top);
-            height: var(--tooltip-arrow-height);
-            width: var(--tooltip-arrow-width);
-        }
-
-        > .tooltip__content {
-            margin-bottom: var(--tooltip-arrow-height);
-        }
-
-        &::before {
-            top: calc(100% - var(--tooltip-arrow-height));
-            left: calc(var(--tooltip-arrow-width)/2 * -1);
-        }
-
-        > .tooltip__content {
-            bottom: calc(100% + var(--tooltip-arrow-height));
-            left: 50%;
-            transform: translateX(-50%);
-        }
-    }
-
-
-    /*
-    ---------------------------
-    3. Position Modifiers - Top Left
-    ---------------------------
-    */
-
-    &[data-microtip-position="top-left"] {
-        > .tooltip__content {
-            bottom: calc(100% + var(--tooltip-arrow-height));
-            left: 50%;
-            transform: translateX(calc(-100% + var(--tooltip-arrow-width)));
-        }
-
-    }
-
-
-
-    /*
-    ---------------------------
-    4. Position Modifiers - Top Right
-    ---------------------------
-    */
-
-    &[data-microtip-position="top-right"] {
-        > .tooltip__content {
-            bottom: calc(100% + var(--tooltip-arrow-height));
-            left: 50%;
-            transform: translateX(calc(0% - var(--tooltip-arrow-width)));
-        }
-    }
-
-    /*
-    ---------------------------
-    5. Position Modifiers - Bottom
-    ---------------------------
-    */
-
-
-    &[data-microtip-position|="bottom"] {
-        &::before {
-            background: var(--tooltip-arrow-bg-bottom);
-            height: var(--tooltip-arrow-height);
-            width: var(--tooltip-arrow-width);
-            margin-top: 5px;
-            margin-bottom: 0;
-        }
-
-        > .tooltip__content {
-            margin-top: var(--tooltip-arrow-height);
-        }
-
-        &::before {
-            bottom: calc(100% - var(--tooltip-arrow-height));
-            left: calc(var(--tooltip-arrow-width)/2 * -1);
-        }
-
-        > .tooltip__content {
-            bottom: auto;
-            top: calc(100% + var(--tooltip-arrow-height));
-            left: 50%;
-            transform: translateX(-50%);
-        }
-    }
-
-
-    /*
-    ---------------------------
-    6. Position Modifiers - Bottom Left
-    ---------------------------
-    */
-
-
-    &[data-microtip-position="bottom-left"] {
-        > .tooltip__content {
-            bottom: auto;
-            top: calc(100% + var(--tooltip-arrow-height));
-            left: 50%;
-            transform: translateX(calc(-100% + var(--tooltip-arrow-width)));
-        }
-    }
-
-    /*
-    ---------------------------
-    7. Position Modifiers - Bottom Right
-    ---------------------------
-    */
-
-
-    &[data-microtip-position="bottom-right"] {
-        > .tooltip__content {
-            bottom: auto;
-            top: calc(100% + var(--tooltip-arrow-height));
-            left: 50%;
-            transform: translateX(calc(0% - var(--tooltip-arrow-width)));
-        }
-    }
-
-
-
-
-    /*
-    ---------------------------
-    10. Size
-    ---------------------------
-    */
-    &[data-microtip-size="auto"].tooltip__content {
-        white-space: nowrap;
-        width: auto;
-        max-width: 530px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    &[data-microtip-size="small"].tooltip__content {
-        white-space: initial;
-        width: 80px;
-    }
-
-    &[data-microtip-size="medium"].tooltip__content {
-        white-space: initial;
-        width: 150px;
-    }
-
-    &[data-microtip-size="large"].tooltip__content {
-        white-space: initial;
-        width: 260px;
-    }
-
-}
-