funda-ui 4.5.711 → 4.5.713

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

@@ -1,184 +0,0 @@
-import React, { useState, useRef } from 'react';
-
-import Item from './AccordionItem';
-
-import animateStyles from 'funda-utils/dist/cjs/anim';
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-
-// Adapt the easing parameters of TweenMax
-export enum EasingList {
-    linear = 'linear',
-    easeIn = 'ease-in',
-    easeOut = 'ease-out',
-    easeInOut = 'ease-in-out'
-}
-
-
-export type AccordionOptionChangeFnType = (arg1: any, arg2: any) => void;
-
-
-export type AccordionProps = {
-    wrapperClassName?: string;
-	/** One event type, such as `click` or `mouseover` */
-	triggerType?: string;
-	/** Display the only first item of a list */
-	displayTheFirstItem?: boolean;
-	/** Display all items */
-	displayAllItems?: 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;
-    /** 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,
-        triggerType,
-        displayTheFirstItem,
-        displayAllItems,
-        duration,
-        easing,
-        alternateCollapse,
-        onChange,
-        children
-    } = props;
-
-
-    const easeType: string = typeof alternateCollapse === 'undefined' ? EasingList['linear'] : EasingList[easing as never];
-    const ALTER = typeof alternateCollapse === 'undefined' ? true : alternateCollapse;
-    const rootRef = useRef<any>(null);
-    const [animOK, setAnimOK] = useState<boolean>(false);
-    const [heightObserver, setHeightObserver] = useState<number>(-1);
-
-    
-    function handleClickItem(e: React.MouseEvent) {
-        if ((e.target as any).closest('.custom-accordion-header') === null) return;
-		if ( animOK ) return;
-
-        // DO NOT place it before the above code, otherwise it will cause the checkbox and radio controls to fail.
-        e.preventDefault();
-
-		//Prevents further propagation of the current event in the capturing and bubbling phases(if use `e.target`).
-		e.stopPropagation();
-
-
-		//
-        const reactDomEl: any = e.currentTarget;
-        const curIndex: any = reactDomEl.dataset.index;
-		const reactDomWrapperEl: HTMLElement = rootRef.current;
-		const animSpeed = duration || 200;
-		const $li = reactDomWrapperEl.querySelectorAll( '.custom-accordion-item' );
-		const $allContent = reactDomWrapperEl.querySelectorAll( '.custom-accordion-content__wrapper' );
-		const $curContent = reactDomEl.querySelector( '.custom-accordion-content__wrapper' );
-		
-
-		if ( reactDomEl.getAttribute( 'aria-expanded' ) === 'false' || reactDomEl.getAttribute( 'aria-expanded' ) === null  ) {
-
-            setAnimOK(true);
-			setTimeout( () => {
-                setAnimOK(false);
-			}, animSpeed);
-
-            if (ALTER) {
-                //Hide other all sibling <dt> of the selected element
-                Array.prototype.forEach.call($allContent, (node) => {
-                    if ( node.clientHeight > 0 ) {
-                        animateStyles(node, {
-                            startHeight  : node.scrollHeight,
-                            endHeight    : 0,
-                            speed        : animSpeed
-                        } as  never, easeType);				
-                    }
-
-                });
-
-                //to open
-                Array.prototype.forEach.call($li, (node) => {
-                    node.classList.remove('active');
-                    node.querySelector('.custom-accordion-trigger')?.classList.remove('active');
-                    node.querySelector('.custom-accordion-trigger')?.classList.add('collapsed');
-                    node.setAttribute( 'aria-expanded', false );
-                });
-
-
-            }
-
-			reactDomEl.classList.add('active');
-            reactDomEl.querySelector('.custom-accordion-trigger')?.classList.add('active');
-            reactDomEl.querySelector('.custom-accordion-trigger')?.classList.remove('collapsed');
-			reactDomEl.setAttribute( 'aria-expanded', true );
-			// When the height of the element is 0, the value of `offsetHeight` and `clientHeight` will be 0
-			animateStyles($curContent, {
-				startHeight  : 0,
-				endHeight    : $curContent.scrollHeight,
-				speed        : animSpeed
-			} as  never, easeType, () => {
-                // content height observer
-                setHeightObserver(curIndex);
-            });
-			
-		} else {
-			
-			if ( e.type == 'click' ) {
-
-				//to close
-				reactDomEl.classList.remove('active');
-                reactDomEl.querySelector('.custom-accordion-trigger')?.classList.remove('active');
-                reactDomEl.querySelector('.custom-accordion-trigger')?.classList.add('collapsed');
-				reactDomEl.setAttribute( 'aria-expanded', false );
-				animateStyles($curContent, {
-					startHeight  : $curContent.scrollHeight,
-					endHeight    : 0,
-					speed        : animSpeed
-				} as  never, easeType);
-			}
-			
-		}
-
-        if (typeof (onChange) === 'function') {
-            onChange(reactDomEl, Number(curIndex));
-        }
-
-
-	}
-
-    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 };
-                    const _defaultActive = i === 0 && displayTheFirstItem ? true : false;
-                    return <Item
-                        key={"item" + i}
-                        index={i}
-                        heightObserver={heightObserver}
-                        defaultActive={typeof displayAllItems === 'undefined' ? _defaultActive : displayAllItems}
-                        triggerType={triggerType || 'click'}
-                        onToggleEv={handleClickItem}
-                        {...childProps}
-                    />;
-
-                }) : null}
-
-            </div>
-
-
-        </>
-    )
-};
-
-export default Accordion;

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

@@ -1,143 +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;
-    /** 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 */
-	defaultActive?: 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>;
-	/** One event type, such as `click` or `mouseover` */
-	triggerType?: string;
-	/** -- */
-	children: React.ReactNode;
-};
-
-
-
-
-const AccordionItem = (props: AccordionItemProps) => {
-	
-    const { 
-        heightObserver,
-        index,
-        itemClassName,
-        itemContentWrapperClassName,
-        itemContentClassName,
-        itemTriggerClassName,
-        itemHeaderClassName,
-        itemTriggerIcon,
-        itemStyle,
-        defaultActive,
-        title,
-        onToggleEv,
-        onTransitionEnd,
-        triggerType,
-        children
-    } = props;
-    
-
-    
-    const activedClassName = typeof(defaultActive) !== 'undefined' && defaultActive !== false ? ' active' : '';
-    const observer = useRef<ResizeObserver | null>(null);
-    const contentWrapperRef = useRef<HTMLDivElement | null>(null);
-    const contentRef = useRef<HTMLDivElement | null>(null);
-    
-
-    useEffect(() => {
-
-        if (parseFloat(heightObserver as never) !== index) return;
-
-        // When the content height changes dynamically, change the height 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) (contentWrapperRef.current as HTMLDivElement).style.height = entry.contentRect.bottom + parseFloat(_contentPadding) + 'px';
-                });
-            });
-            observer.current.observe(contentRef.current);
-
-        }
-
-        return () => {
-            if (contentRef.current) observer.current?.unobserve(contentRef.current);
-        };
-
-
-    }, [heightObserver]);
-
-    return (
-        <>
-
-            <div
-                data-index={index}
-                className={combinedCls(
-                    'custom-accordion-item',
-                    clsWrite(itemClassName, 'accordion-item'),
-                    activedClassName
-                )}
-                onClick={triggerType === 'click' ? onToggleEv : () => {}}
-                onMouseOver={triggerType === 'click' ? () => {} : onToggleEv} 
-                onTransitionEnd={typeof onTransitionEnd === 'function' ? onTransitionEnd : () => {}}
-                aria-expanded={defaultActive ? 'true' : 'false'}
-                style={typeof itemStyle !== 'undefined' ? itemStyle : {}}
-                >
-
-                <div className={combinedCls(
-                    'custom-accordion-header',
-                    clsWrite(itemHeaderClassName, 'accordion-header position-relative')
-                )} role="presentation">
-                    <button tabIndex={-1} className={combinedCls(
-                        'custom-accordion-trigger',
-                        clsWrite(itemTriggerClassName, 'accordion-button'),
-                        activedClassName === '' ? 'collapsed' : 'active'
-                    )}  type="button">
-                        {title}
-                    </button>
-
-                    {itemTriggerIcon}
-                </div>
-                <div ref={contentWrapperRef} className={combinedCls(
-                    'custom-accordion-content__wrapper w-100',
-                    clsWrite(itemContentWrapperClassName, 'accordion-collapse')
-                )}
-                    role="tabpanel" style={{
-                        height: defaultActive ? 'auto' : '0px',
-                        overflow: 'hidden'   // “overflow” affects the width, so add `w-100` to `custom-accordion-content__wrapper`
-                    }}>
-                    <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,82 +0,0 @@
-import React from 'react';
-
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-
-export type GroupFnType = (arg1: any, arg2: any, arg3: number) => void;
-
-export type GroupProps = {
-    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 {
-        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(
-                            'cas-select__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] === '' ? null : <h3 
-                    key={index} 
-                    className="cas-select__opt-header" 
-                    >
-                        <span dangerouslySetInnerHTML={{
-                        __html: columnTitle[level]
-                    }}></span>
-                        <div className="cas-select__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>
-                }
-                
-            })}
-        </>
-    )
-}
-
-