funda-ui 4.7.624 → 4.7.701

package/publish/lib/esm/Accordion/AccordionItem.tsx

@@ -1,248 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-
-export type AccordionItemProps = {
-    heightObserver?: number[];
-    index?: number;
-    arrowOnly?: boolean;
-    animSpeed?: number;
-    easing?: string;
-    /** Class of items */
-    itemClassName?: string;
-    itemContentWrapperClassName?: string;
-    itemContentClassName?: string;
-    itemTriggerClassName?: string;
-    itemHeaderClassName?: string;
-    itemStyle?: React.CSSProperties;
-    itemTriggerIcon?: React.ReactNode;
-	/** Set an item to activate by default */
-	activeItem?: string | boolean | undefined;
-	/** Specify a title */
-	title?: React.ReactNode;
-	/** Handling events for collapsing item */
-	onToggleEv?: React.MouseEventHandler<HTMLElement>;
-	/** Handling events when the animation execution is complete */
-	onTransitionEnd?: React.TransitionEventHandler<HTMLElement>;
-    /** Callback when trigger state changes, provides trigger element and expanded state */
-    onItemCollapse?: (trigger: HTMLElement,  icon: HTMLElement, isExpanded: boolean) => void;
-	/** Control expanded state from parent */
-	isExpanded?: boolean;
-	/** -- */
-	children: React.ReactNode;
-};
-
-
-
-
-const AccordionItem = (props: AccordionItemProps) => {
-    const { 
-        heightObserver,
-        index,
-        animSpeed,
-        easing,
-        arrowOnly,
-        itemClassName,
-        itemContentWrapperClassName,
-        itemContentClassName,
-        itemTriggerClassName,
-        itemHeaderClassName,
-        itemTriggerIcon,
-        itemStyle,
-        activeItem,
-        title,
-        onToggleEv,
-        onTransitionEnd,
-        onItemCollapse,
-        isExpanded: controlledExpanded,
-        children,
-        ...attributes
-    } = props;
-    
-    const [internalExpanded, setInternalExpanded] = useState<boolean>(false);
-    const isFirstRender = useRef<boolean>(true);
-    const initialHeightSet = useRef<boolean>(false);
-
-    // Use controlled or uncontrolled expanded state
-    const isExpanded = controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
-
-    const observer = useRef<ResizeObserver | null>(null);
-    const contentWrapperRef = useRef<HTMLDivElement | null>(null);
-    const contentRef = useRef<HTMLDivElement | null>(null);
-    const triggerRef = useRef<HTMLDivElement | HTMLButtonElement | null>(null);
-    const iconRef = useRef<HTMLSpanElement | null>(null);
-
-    const handleToggle = (e: React.MouseEvent<HTMLElement>) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        if (controlledExpanded === undefined) {
-            setInternalExpanded(prev => !prev);
-        }
-        onToggleEv?.(e);
-    };
-
-
-    // Generate CSS transition style
-    const getTransitionStyle = () => {
-        const transitionDuration = `${animSpeed}ms`;
-        const transitionTiming = easing;
-        
-        return {
-            transition: `max-height ${transitionDuration} ${transitionTiming}`,
-            overflow: 'hidden'
-        };
-    };
-
-
-    useEffect(() => {
-        if (triggerRef.current && typeof onItemCollapse === 'function') {
-            if (isFirstRender.current) {
-                isFirstRender.current = false;
-                return;
-            }
-            onItemCollapse(triggerRef.current, iconRef.current as HTMLElement, isExpanded);
-        }
-    }, [isExpanded]);
-
-    useEffect(() => {
-        if (contentWrapperRef.current && !initialHeightSet.current) {
-            initialHeightSet.current = true;
-            const shouldBeExpanded = typeof activeItem !== 'undefined' && activeItem !== false;
-            if (controlledExpanded === undefined) {
-                setInternalExpanded(shouldBeExpanded);
-            }
-            
-            // Set initial maxHeight when activeItem is true
-            if (shouldBeExpanded && contentRef.current) {
-                const contentHeight = contentRef.current.offsetHeight;
-                contentWrapperRef.current.style.maxHeight = `${contentHeight}px`;
-            }
-        }
-    }, [activeItem, controlledExpanded]);
-
-    useEffect(() => {
-        if (!heightObserver || !Array.isArray(heightObserver) || !heightObserver.includes(index as number)) return;
-
-        // When the content height changes dynamically, change the maxHeight of the wrapper
-        if (contentRef.current && contentWrapperRef.current) {
-            const _contentPadding = window.getComputedStyle(contentRef.current as HTMLDivElement).getPropertyValue('padding-bottom');
-       
-            observer.current = new ResizeObserver(entries => {
-                if (!Array.isArray(entries) || !entries.length) {
-                    return;
-                }
-
-                entries.forEach(entry => {
-                    if (contentWrapperRef.current !== null && isExpanded) {
-                        (contentWrapperRef.current as HTMLDivElement).style.maxHeight = entry.contentRect.bottom + parseFloat(_contentPadding) + 'px';
-                    }
-                });
-            });
-            observer.current.observe(contentRef.current);
-        }
-
-        return () => {
-            if (contentRef.current) observer.current?.unobserve(contentRef.current);
-        };
-
-    }, [heightObserver, isExpanded]);
-
-    // Update maxHeight when expanded state changes
-    useEffect(() => {
-        if (contentWrapperRef.current && contentRef.current) {
-            if (isExpanded) {
-                const contentHeight = contentRef.current.scrollHeight;
-                contentWrapperRef.current.style.maxHeight = `${contentHeight}px`;
-            } else {
-                contentWrapperRef.current.style.maxHeight = '0px';
-            }
-        }
-    }, [isExpanded]);
-
-    return (
-        <>
-            <div
-                {...attributes}
-                data-index={index}
-                className={combinedCls(
-                    'custom-accordion-item',
-                    clsWrite(itemClassName, 'accordion-item'),
-                    isExpanded ? ' active' : ''
-                )}
-                onClick={arrowOnly ? undefined : handleToggle}
-                onTransitionEnd={typeof onTransitionEnd === 'function' ? onTransitionEnd : undefined}
-                aria-expanded={isExpanded ? 'true' : 'false'}
-                style={typeof itemStyle !== 'undefined' ? itemStyle : {}}
-            >
-
-                <div 
-                    className={combinedCls(
-                        'custom-accordion-header',
-                        clsWrite(itemHeaderClassName, 'accordion-header position-relative')
-                    )} 
-                    role="presentation"
-                >
-
-                    {arrowOnly ? (
-                        <div 
-                            ref={triggerRef as React.RefObject<HTMLDivElement>}
-                            tabIndex={-1} 
-                            className={combinedCls(
-                                'custom-accordion-trigger',
-                                clsWrite(itemTriggerClassName, 'accordion-button'),
-                                isExpanded ? 'active' : 'collapsed'
-                            )}  
-                        >
-                            {title}
-                        </div>
-                    ) : (
-                        <button 
-                            ref={triggerRef as React.RefObject<HTMLButtonElement>}
-                            tabIndex={-1} 
-                            className={combinedCls(
-                                'custom-accordion-trigger',
-                                clsWrite(itemTriggerClassName, 'accordion-button'),
-                                isExpanded ? 'active' : 'collapsed'
-                            )}  
-                            type="button"
-                        >
-                            {title}
-                        </button>
-                    )}
-                    
-
-                
-                    <span 
-                        ref={iconRef}
-                        onClick={!arrowOnly ? undefined : handleToggle}
-                        className="custom-accordion-trigger__icon"
-                        style={!arrowOnly ? {pointerEvents: 'none'} : {cursor: 'pointer'}}
-                    >
-                        {itemTriggerIcon}
-                    </span>
-        
-                    
-                </div>
-                <div 
-                    ref={contentWrapperRef} 
-                    className={combinedCls(
-                        'custom-accordion-content__wrapper w-100',
-                        clsWrite(itemContentWrapperClassName, 'accordion-collapse')
-                    )}
-                    role="tabpanel" 
-                    style={getTransitionStyle()}>
-                    <div className={combinedCls(
-                        'custom-accordion-content',
-                        clsWrite(itemContentClassName, 'accordion-body')
-                    )} ref={contentRef} >
-                        {children}
-                    </div>
-                </div>
-            </div>
-        </>
-    )
-}
-
-export default AccordionItem;

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

@@ -1,2 +0,0 @@
-export { default as Accordion } from './Accordion';
-export { default as AccordionItem } from './AccordionItem';

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

@@ -1,47 +0,0 @@
-/* ======================================================
-   <!-- Back to Top -->
-/* ====================================================== */
-
-.back-to-top {
-	button {
-		transform: scale(0);
-		position: fixed;
-		bottom: 12px;
-		right: 12px;
-		width: 50px;
-		height: 50px;
-		z-index: 99;
-		text-align: center;
-        transition: .1s ease-in-out;
-
-		display: block;
-		outline: none;
-		border: none;
-		background-color: transparent;
-        cursor: pointer;
-
-        svg {
-            transition: .1s ease-in-out;
-        }
-
-        &:hover {
-            svg {
-                opacity: .7;
-            }
-        }
-
-		&.active {
-			transform: scale(1);
-		}
-
-		&:active,
-		&:focus {
-			outline: none;
-		}	
-
-		i {
-			font-size: 1.5rem;
-		}	
-	}
-
-}

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

@@ -1,177 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-
-
-import useWindowScroll from 'funda-utils/dist/cjs/useWindowScroll';
-import {
-    easeLinear,
-    easeInQuad,
-    easeOutQuad,
-    easeInOutQuad
-} from 'funda-utils/dist/cjs/easing';
-
-
-// Adapt the easing parameters of TweenMax
-export enum EasingList {
-    linear = 'linear',
-    easeIn = 'ease-in',
-    easeOut = 'ease-out',
-    easeInOut = 'ease-in-out'
-}
-
-
-export type BackToTopProps = {
-    /** Speed of scrolling up. Amount of time measured in milliseconds. */
-    speed?: number;
-    /** Types of easing animation */
-    easing: string;
-    /** Button Icon */
-    btnIcon?: React.ReactNode;
-};
-
-
-const BackToTop = (props: BackToTopProps) => {
-
-
-    const {
-        btnIcon,
-    } = props;
-
-    const easeType: string = EasingList[props.easing as never];
-    const speed: number = props.speed ? props.speed : 500;
-
-
-    const btnRef = useRef<any>(null);
-    const [isAtRange, setIsAtRange] = useState<boolean>(false);
-
-
-    // Add function to the element that should be used as the scrollable area.
-    const [scrollData, windowScrollUpdate] = useWindowScroll({
-        performance: ['throttle', 5],   // "['debounce', 500]" or "['throttle', 500]"
-        handle: (scrollData: any) => {
-            const scrollTop = scrollData.y;
-
-            if (scrollTop < window.innerHeight / 2) {
-                setIsAtRange(false);
-            } else {
-                setIsAtRange(true);
-            }
-        }
-    });
-
-
-
-    function moveToTop() {
-
-        const duration = speed;
-
-        const scrollToTarget = function (target: HTMLElement) {
-
-            const top = target.getBoundingClientRect().top;
-            const startPos = window.pageYOffset;
-            const diff = top;
-
-
-            const start = new Date().getTime();
-            const from = 0;
-            const to = 100;
-            let requestId: any;
-
-            const loop = function () {
-
-                //easing
-                const time = new Date().getTime() - start;
-                let val;
-
-                switch (easeType) {
-                    case "linear":
-                        val = easeLinear(time, from, to - from, duration);
-                        break;
-                    case "ease-in":
-                        val = easeInQuad(time, from, to - from, duration);
-                        break;
-                    case "ease-out":
-                        val = easeOutQuad(time, from, to - from, duration);
-                        break;
-                    case "ease-in-out":
-                        val = easeInOutQuad(time, from, to - from, duration);
-                        break;
-
-                    default:
-                        val = easeLinear(time, from, to - from, duration);
-                }
-
-                // Elapsed time in miliseconds
-                const percent = val / 100;
-
-                window.scrollTo(0, startPos + diff * percent);
-
-                if (time < duration) {
-                    // Continue moving
-                    requestId = window.requestAnimationFrame(loop);
-                } else {
-                    window.cancelAnimationFrame(requestId);
-                }
-            };
-            requestId = window.requestAnimationFrame(loop);
-        };
-
-        scrollToTarget(document.body);
-
-    }
-
-
-    function handleClick(e: any) {
-        e.preventDefault();
-        moveToTop();
-    }
-
-
-    useEffect(() => {
-
-
-        //Hide other pages button of back-to-top
-        btnRef.current?.classList.remove('active');
-
-
-        //
-        btnRef.current?.removeEventListener('pointerdown', handleClick);
-        btnRef.current?.addEventListener('pointerdown', handleClick);
-
-
-        return () => {
-            btnRef.current?.removeEventListener('pointerdown', handleClick);
-
-            //Hide other pages button of back-to-top
-            btnRef.current?.classList.remove('active');
-
-        }
-
-
-    }, []);
-
-    return (
-        <>
-            <div className="back-to-top" ref={btnRef}>
-                <button type="button" className={isAtRange ? 'active' : ''}>
-                    {btnIcon || <>
-                        <svg width="40px" fill="#000000" viewBox="0 0 96.522 96.522">
-                            <g>
-                                <path d="M74.692,65.181l-9.044-7.321c1.319-5.557,1.988-11.532,1.988-17.761c0-19.963-14.052-38.367-18.719-39.988
-		c-0.426-0.147-0.887-0.147-1.313,0c-4.667,1.621-18.719,20.025-18.719,39.988c0,6.229,0.669,12.205,1.99,17.761l-9.045,7.321
-		c-0.541,0.438-0.815,1.127-0.724,1.817l3.69,27.787c0.104,0.787,0.663,1.438,1.425,1.658c0.765,0.22,1.582-0.029,2.092-0.638
-		l14.413-17.225c3.543,2.163,7.527,2.163,11.07,0l14.411,17.225c0.387,0.461,0.951,0.717,1.534,0.717
-		c0.186,0,0.373-0.026,0.558-0.079c0.762-0.221,1.32-0.871,1.425-1.658l3.69-27.787C75.507,66.309,75.233,65.619,74.692,65.181z
-		 M48.262,39.619c-4.418,0-8-3.582-8-8s3.582-8,8-8s8,3.582,8,8S52.68,39.619,48.262,39.619z"/>
-                            </g>
-                        </svg>
-                    </>}
-                </button>
-            </div>
-
-        </>
-    )
-}
-
-
-
-export default BackToTop;

package/publish/lib/esm/CascadingSelect/Group.tsx

@@ -1,83 +0,0 @@
-import React from 'react';
-
-import { combinedCls } from 'funda-utils/dist/cjs/cls';
-
-export type GroupFnType = (arg1: any, arg2: any, arg3: number) => void;
-
-export type GroupProps = {
-    perColumnHeadersShow?: boolean;
-    level: number;
-    columnTitle: any[];
-    data?: any[any];
-    cleanNodeBtnClassName?: string;
-    cleanNodeBtnContent?: React.ReactNode;
-    selectEv?: React.MouseEventHandler<HTMLElement> | GroupFnType | null;
-};
-
-export default function Group(props: GroupProps) {
-
-    const {
-        perColumnHeadersShow,
-        level,
-        columnTitle,
-        data,
-        cleanNodeBtnClassName,
-        cleanNodeBtnContent,
-        selectEv
-    } = props;
-
-    return (
-        <>
-            {data.map((item: any, index: number) => {
-                if ( item.id.toString().indexOf('$EMPTY_ID_') < 0 ) {
-                    return <div 
-                        key={index} 
-                        data-opt="true"
-                        data-index={index} 
-                        data-id={item.id} 
-                        data-value={JSON.stringify(item)} 
-                        data-level={level}
-                        className={combinedCls(
-                            'casc-menu__opt',
-                            {
-                                'active': item.current
-                            }
-                        )} 
-                        dangerouslySetInnerHTML={{
-                            __html: typeof item.label !== 'undefined' ? item.label : item.name // "item.label" usually uses hierarchical style
-                        }}
-                        onClick={(e) => selectEv?.(e, item, index)} 
-                    ></div>
-                } else {
-                    return columnTitle[level] === '' || perColumnHeadersShow === false ? null : <h3 
-                    key={index} 
-                    className="casc-menu__opt-header" 
-                    >
-                        <span dangerouslySetInnerHTML={{
-                        __html: columnTitle[level]
-                    }}></span>
-                        <div className="casc-menu__opt-header__clean">
-                            <a 
-                                tabIndex={-1} 
-                                href="#" 
-                                className={cleanNodeBtnClassName || 'btn btn-link p-0 m-0 text-decoration-none'} 
-                                data-opt="true"
-                                data-opt-header="true"
-                                data-index={index} 
-                                data-id={item.id} 
-                                data-value={JSON.stringify(item)} 
-                                data-level={level}
-                                onClick={(e) => selectEv?.(e, item, index)} 
-                            >
-                                {cleanNodeBtnContent || <svg width="12px" height="12px" viewBox="0 0 16 16"><path fill="inherit" d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z" fillRule="evenodd"></path></svg>}
-                            </a>
-                        </div>
-                    </h3>
-                }
-                
-            })}
-        </>
-    )
-}
-
-