funda-ui 4.7.615 → 4.7.624

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

@@ -0,0 +1,185 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+import Item from './AccordionItem';
+
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+
+// Adapt the easing parameters of TweenMax
+export enum EasingList {
+    linear = 'linear',
+    ease = 'ease',
+    easeIn = 'ease-in',
+    easeOut = 'ease-out',
+    easeInOut = 'ease-in-out'
+}
+
+
+export type AccordionOptionChangeFnType = (element: HTMLDivElement, index: number) => void;
+
+
+
+export type AccordionProps = {
+    wrapperClassName?: string;
+	/** The index of the item to be displayed by default. Set to -1 to display none, or an array of indices to display multiple items */
+	defaultActiveIndex?: number | number[];
+    /** Whether to expand all items by default */
+    defaultActiveAll?: boolean;
+	/** The number of milliseconds(ms) each iteration of the animation takes to complete */
+	duration?: number;
+    /** Types of easing animation */
+    easing?: string;
+    /**  Mutually exclusive alternate expansion between the levels */
+    alternateCollapse?: boolean;
+    /** Only allow arrow to trigger the accordion */
+    arrowOnly?: boolean;
+    /** This function is called whenever the data is updated.
+     *  Exposes the JSON format data about the option as an argument.
+     */
+    onChange?: AccordionOptionChangeFnType | null;
+	/** -- */
+	children: React.ReactNode;
+};
+
+const Accordion = (props: AccordionProps) => {
+    const {
+        wrapperClassName,
+        defaultActiveIndex,
+        defaultActiveAll = false,
+        duration,
+        easing = 'ease',
+        alternateCollapse = true,
+        arrowOnly = false,
+        onChange,
+        children
+    } = props;
+
+    const animSpeed = duration || 200;
+    const easeType: string = typeof alternateCollapse === 'undefined' ? EasingList['linear'] : EasingList[easing as never];
+    const rootRef = useRef<any>(null);
+    const [heightObserver, setHeightObserver] = useState<number[]>([]);
+    const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());  // Keep track of all expanded items
+    const animationInProgress = useRef<boolean>(false);
+    const initExpanded = useRef<boolean>(false);
+        
+
+    
+    function handleClickItem(e: React.MouseEvent) {
+        if (animationInProgress.current) return;
+        if ((e.target as any).closest('.custom-accordion-header') === null) return;
+        
+        animationInProgress.current = true;
+
+        const reactDomEl: any = arrowOnly ? e.currentTarget.closest('.custom-accordion-item') : e.currentTarget;
+        const curIndex: number = parseInt(reactDomEl.dataset.index);
+        const reactDomWrapperEl: HTMLElement = rootRef.current;
+        const $li = reactDomWrapperEl.querySelectorAll('.custom-accordion-item');
+
+        if (reactDomEl.getAttribute('aria-expanded') === 'false' || reactDomEl.getAttribute('aria-expanded') === null) {
+            if (alternateCollapse) {
+    
+                // Update expanded items state
+                setExpandedItems(new Set([curIndex]));
+            } else {
+                // Add current item to expanded items
+                setExpandedItems(prev => new Set([...(prev as never), curIndex]));
+            }
+
+        } else {
+ 
+            // Remove current item from expanded items
+            setExpandedItems(prev => {
+                const newSet = new Set(prev);
+                newSet.delete(curIndex);
+                return newSet;
+            });
+        }
+
+        // Reset animation flag after transition duration
+        setTimeout(() => {
+            animationInProgress.current = false;
+        }, animSpeed);
+
+        onChange?.(reactDomEl, curIndex);
+    }
+
+
+    //Initialize expanded items based on defaultActiveIndex or defaultActiveAll
+    useEffect(() => {
+
+        // Skip the default height initialization to prevent re-initialization. 
+        // This method is useful when you want to manually control when the accordion should 
+        // skip the automatic height initialization process, especially useful when `children` change frequently.
+        if (initExpanded.current === true) return;
+
+        if (defaultActiveAll && children && rootRef.current) {
+            const allIndices = Array.from({ length: (children as any[]).length }, (_, i) => i);
+            setExpandedItems(new Set(allIndices));
+            // Set heightObserver for all items to enable height monitoring
+            setHeightObserver(allIndices);
+            
+            //
+            initExpanded.current = true;
+        } else if (defaultActiveIndex !== undefined) {
+            const initialExpanded = new Set<number>();
+            const observerIndices: number[] = [];
+            
+            if (Array.isArray(defaultActiveIndex)) {
+                defaultActiveIndex.forEach(index => {
+                    initialExpanded.add(index);
+                    observerIndices.push(index);
+                });
+            } else if (typeof defaultActiveIndex === 'number') {
+                initialExpanded.add(defaultActiveIndex);
+                observerIndices.push(defaultActiveIndex);
+            }
+            
+            setExpandedItems(initialExpanded);
+            // Set heightObserver for default active items to enable height monitoring
+            if (observerIndices.length > 0) {
+                setHeightObserver(observerIndices);
+            }
+
+            //
+            initExpanded.current = true;
+
+        }
+        
+    }, [defaultActiveIndex, defaultActiveAll, children]);
+    
+    
+    return (
+        <>
+            <div className={combinedCls(
+                'custom-accordion-item',
+                clsWrite(wrapperClassName, 'accordion')
+            )} role="tablist" ref={rootRef}>
+                {(children != null) ? (children as any[]).map((item, i) => {
+                    const childProps = { ...item.props };
+                    let _defaultActive = false;
+                    
+                    if (Array.isArray(defaultActiveIndex)) {
+                        _defaultActive = defaultActiveIndex.includes(i);
+                    } else if (typeof defaultActiveIndex === 'number') {
+                        _defaultActive = defaultActiveIndex === i;
+                    }
+                    
+                    return <Item
+                        key={"item" + i}
+                        index={i}
+                        defaultActiveAll={defaultActiveAll}
+                        animSpeed={animSpeed}
+                        easing={easeType}
+                        arrowOnly={arrowOnly}
+                        heightObserver={heightObserver}
+                        activeItem={_defaultActive}
+                        onToggleEv={handleClickItem}
+                        isExpanded={expandedItems.has(i)}   // Both controlled and uncontrolled modes are implemented
+                        {...childProps}
+                    />;
+                }) : null}
+            </div>
+        </>
+    );
+};
+
+export default Accordion;

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

@@ -0,0 +1,248 @@
+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

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

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

@@ -0,0 +1,47 @@
+/* ======================================================
+   <!-- 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

@@ -0,0 +1,177 @@
+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;