funda-ui 4.5.682 → 4.5.711

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

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

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

@@ -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;

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

@@ -0,0 +1,82 @@
+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>
+                }
+                
+            })}
+        </>
+    )
+}
+
+