funda-ui 1.0.272

package/lib/esm/RangeSlider/index.tsx

@@ -0,0 +1,223 @@
+import React, { useId, useEffect, useState, useRef } from 'react';
+
+import Input from 'rpb-input';
+
+
+type RangeSliderProps = {
+    wrapperClassName?: string;
+    controlClassName?: string;
+    value?: any;
+    label?: React.ReactNode | string;
+    minName?: string;
+    maxName?: string;
+    onlyOne?: boolean;
+    step: number;
+    min: number;
+    max: number;
+    disabled?: any;
+    required?: any;
+    /** -- */
+    id?: string;
+    tabIndex?: number;
+    onChange?: (e: any, param: any) => void;
+};
+
+
+const RangeSlider = (props: RangeSliderProps) => {
+    const {
+        wrapperClassName,
+        controlClassName,
+        disabled,
+        required,
+        value,
+        label,
+        minName,
+        maxName,
+        onlyOne,
+        step,
+        min,
+        max,
+        id,
+        tabIndex,
+        onChange
+    } = props;
+
+
+    const uniqueID = useId();
+    const idRes = id || uniqueID;
+    const rootRef = useRef<any>(null);
+    const valMinRef = useRef<any>(null);
+    const valMaxRef = useRef<any>(null);
+
+    const [minValue, setMinValue] = useState<any>(value ? value.min : min);
+    const [maxValue, setMaxValue] = useState<any>(value ? value.max : max);
+    const [minActive, setMinActive] = useState<boolean>(false);
+    const [maxActive, setMaxActive] = useState<boolean>(false);
+
+    const minPos = ((minValue - min) / (max - min)) * 100;
+    const maxPos = ((maxValue - min) / (max - min)) * 100;
+
+
+    function initDefaultValue(defaultValue: any) {
+
+        // change the value to trigger component rendering
+        if ( typeof defaultValue === 'undefined' || defaultValue === '' ) {
+            setMinValue(min);
+            setMaxValue(max);
+        } else {
+            setMinValue(defaultValue.min);
+            setMaxValue(defaultValue.max);
+        }
+    }
+
+
+    function handleMinEnter(e: any) {
+        setMinActive(true);
+    }
+
+    function handleMinLeave(e: any) {
+        setMinActive(false);
+    }
+
+    function handleMaxEnter(e: any) {
+        setMaxActive(true);
+    }
+
+    function handleMaxLeave(e: any) {
+        setMaxActive(false);
+    }
+
+
+    function handleMinChange(e: any) {
+        e.preventDefault();
+        const newMinVal = Math.min(+e.target.value, (onlyOne ? maxValue : maxValue - step));
+        setMinValue(newMinVal);
+        onChange?.(e, { min: newMinVal, max: maxValue });
+    }
+
+    function handleMaxChange(e: any) {
+        e.preventDefault();
+        const newMaxVal = Math.max(+e.target.value, minValue + step);
+        setMaxValue(newMaxVal);
+        onChange?.(e, { min: minValue, max: newMaxVal });
+    }
+
+
+
+    useEffect(() => {
+
+
+        // update default value
+        //--------------
+        initDefaultValue(value);
+
+        // If you use the dynamic form assignment (such as document.getElementById(xxx).value), 
+        // you need to judge the value of the input obtained by using the macrotask "setInterval()"
+        let timer: any = null;
+        let initTimes: number = 0;
+        let hasValue: boolean = false;
+        timer = setInterval( () => {
+            if ( initTimes > 5 || hasValue ) {
+                clearInterval(timer);
+            } else {
+                if ((typeof value === 'undefined' || value === '')) {
+                    if (valMinRef.current !== null && valMaxRef.current !== null && valMinRef.current.value !== '' && valMaxRef.current.value !== '')
+                        initDefaultValue({ min: valMinRef.current.value, max: valMaxRef.current.value });
+                        hasValue = true;
+                }
+          
+                initTimes++;
+
+            }
+        }, 500);
+
+        return () => {
+            clearInterval(timer);
+        }
+
+
+    }, [value]);
+
+    return (
+        <>
+
+            {label ? <><div className="range-slider__label"><label htmlFor={`label-${idRes}`} className="form-label">{label}</label></div></> : null}
+
+
+            <div className={wrapperClassName || wrapperClassName === '' ? `range-slider__wrapper ${onlyOne ? 'only-one' : ''} ${wrapperClassName}` : `range-slider__wrapper ${onlyOne ? 'only-one' : ''} mb-3 position-relative`} ref={rootRef}>
+
+                {/* The <Input /> component is a placeholder that ensures the same height and alignment as other form components */}
+                <Input
+                    ref={valMinRef}
+                    wrapperClassName={wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative"}
+                    controlClassName={controlClassName || controlClassName === '' ? controlClassName : "form-control"}   
+                    required={required || null}
+                    type="text"
+                    id={idRes + '-min'}
+                    name={minName}
+                    value={minValue.toString()}  //  Convert to a string to ensure that 0 can also be filled
+                />
+
+                <Input
+                    ref={valMaxRef}
+                    wrapperClassName={wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative"}
+                    controlClassName={controlClassName || controlClassName === '' ? controlClassName : "form-control"}   
+                    required={required || null}
+                    type="text"
+                    id={idRes + '-max'}
+                    name={maxName}
+                    value={maxValue.toString()}  //  Convert to a string to ensure that 0 can also be filled
+                />                
+
+
+                <div className={`range-slider__control-wrapper ${disabled ? 'disabled' : ''}`}>
+
+                    <div className="range-slider__input">
+                        <input
+                            type="range"
+                            value={minValue}
+                            min={min}
+                            max={max}
+                            step={step}
+                            tabIndex={tabIndex || 0}
+                            disabled={disabled || null}
+                            onMouseEnter={handleMinEnter}
+                            onMouseLeave={handleMinLeave}
+                            onChange={handleMinChange}
+                        />
+                        <input
+                            type="range"
+                            value={maxValue}
+                            min={min}
+                            max={max}
+                            step={step}
+                            tabIndex={tabIndex || 0}
+                            disabled={onlyOne ? true : (disabled || null)}
+                            onMouseEnter={handleMaxEnter}
+                            onMouseLeave={handleMaxLeave}
+                            onChange={handleMaxChange}
+                        />
+
+                    </div>
+
+                    <div className="range-slider__placeholder">
+                        <div className={`range-slider__placeholder-grab ${minActive ? 'active' : ''}`} style={{ left: `${minPos}%` }} />
+                        <div className="range-slider__placeholder-rail">
+                            <div
+                                className="range-slider__placeholder-inner-rail"
+                                style={{ left: `${minPos}%`, right: `${100 - maxPos}%` }}
+                            />
+                        </div>
+                        <div className={`range-slider__placeholder-grab ${maxActive ? 'active' : ''} ${onlyOne ? 'inactive' : ''}`} style={{ left: `${maxPos}%` }} />
+                    </div>
+
+                </div>
+
+            </div>
+
+        </>
+    )
+};
+
+
+export default RangeSlider;

package/lib/esm/ScrollReveal/index.scss

@@ -0,0 +1,27 @@
+/* ======================================================
+    <!-- Show More Less -->
+/* ====================================================== */
+
+.show-more-less__wrapper {
+	position: relative;
+	height: 8.5rem;
+	overflow: hidden;
+
+	.show-more-less__mask {
+		display: block;
+		content: "...";
+		text-align: right;
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: 2em;
+		overflow: hidden;
+	}
+
+
+	/* Actived status */
+	&.active .show-more-less__mask {
+		display: none;
+	}
+}

package/lib/esm/ScrollReveal/index.tsx

@@ -0,0 +1,146 @@
+import React, { useId, useState, useRef, useEffect } from 'react';
+
+
+interface viewOffsetConfig {
+    x?: string | undefined;
+    y?: string | undefined;
+}
+
+
+type ScrollRevealProps = {
+    root?: any;
+    viewOffset?: viewOffsetConfig;
+    defaultClassName?: string | string[];
+    showClassName?: string | string[];
+    infinite?: boolean;
+    delay?: number;
+    threshold?: number | number[];
+    onChange?: (e: any, data: any) => void;
+    onIntersect?: (e: any, status: boolean) => void;
+    /** -- */
+    id?: string;
+    children: React.ReactNode;
+};
+
+
+const ScrollReveal = (props: ScrollRevealProps) => {
+    const {
+        root,
+        viewOffset,
+        defaultClassName,
+        showClassName,
+        infinite,
+        delay,
+        threshold,
+        onChange,
+        onIntersect,
+        id,
+        children
+    } = props;
+
+
+    const uniqueID = useId();
+    const idRes = id || uniqueID;
+    const _viewOffset = viewOffset ? viewOffset : {
+        y: '0px',
+        x: '0px'
+    };
+    const [isIntersecting, setIsIntersecting] = useState(false);
+    const rootRef = useRef(null);
+    const options = {
+        root: root ? root : document,
+        rootMargin: `${_viewOffset.y} ${_viewOffset.x}`,
+        threshold: threshold ? threshold : [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
+    };
+
+    function intersectionCallback(entries: any[]) {
+        // if has multiple intersect via `observer.observe(obj)`
+
+        const [entry] = entries;
+        /*
+        IntersectionObserverEntry {
+            time: 260.2000000476837, 
+            intersectionRatio: 0,
+            rootBounds: {x: 0, y: 0, width: 1680, height: 540, top: 0, …}, 
+            boundingClientRect: {x: 0, y: 590, width: 1680, height: 540, top: 590, …}, 
+            intersectionRect: {x: 0, y: 0, width: 0, height: 0, top: 0, …}, 
+            isIntersecting: false,
+            isVisible: false,
+            target: main
+        }
+
+        IntersectionObserverEntry {
+            time: 4681.599999964237, 
+            intersectionRatio: 0,
+            rootBounds: {x: 0, y: 0, width: 1680, height: 540, top: 0, …}, 
+            boundingClientRect: {x: 0, y: 530, width: 1680, height: 540, top: 530, …}, 
+            intersectionRect: {x: 0, y: 530, width: 1680, height: 10, top: 530, …}, 
+            isIntersecting: true,
+            isVisible: false,
+            target: main
+        }
+
+        ...
+        */
+        setIsIntersecting(entry.isIntersecting);
+
+        // interaction
+        const box = entry.target;
+        const visiblePct = (Math.floor(entry.intersectionRatio * 100)) + "%";
+
+        //
+        onChange?.(box, visiblePct);
+
+    }
+
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(intersectionCallback, options);
+        if ( rootRef.current ) observer.observe(rootRef.current);
+
+        //default classes
+        if ( rootRef.current ) {
+            const _classesDefault = !Array.isArray(defaultClassName) ? [defaultClassName] : defaultClassName;
+            if (typeof defaultClassName !== 'undefined') _classesDefault.map((item: any) => (rootRef.current as any).classList.add(item));
+        }
+
+        return () => observer.disconnect();
+    }, [rootRef, options]);
+
+    useEffect(() => {
+        if ( rootRef.current ) {
+
+            onIntersect?.(rootRef.current, isIntersecting);
+            const _classes = !Array.isArray(showClassName) ? [showClassName] : showClassName;
+
+            if (isIntersecting) {
+                setTimeout(() => {
+                    if (typeof showClassName !== 'undefined') _classes.map((item: any) => (rootRef.current as any).classList.add(item));
+                }, delay ? Number(delay) : 0);
+            } else {
+                if ( infinite ) setTimeout(() => {
+                    if (typeof showClassName !== 'undefined') _classes.map((item: any) => (rootRef.current as any).classList.remove(item));
+                }, delay ? Number(delay) : 0);
+            }
+        }
+
+    }, [isIntersecting]);
+
+
+    return (
+        <>
+
+            <div
+                ref={rootRef}
+                id={idRes}
+            >
+                {children}
+
+            </div>
+
+        </>
+    )
+};
+
+
+export default ScrollReveal;

package/lib/esm/Scrollbar/index.scss

@@ -0,0 +1,217 @@
+/* ======================================================
+    <!-- Custom Scrollbar -->
+/* ====================================================== */
+
+.custom-scrollbars__wrapper {
+
+    --custom-scrollbar-min-wrapper-height: 50px;
+    --custom-scrollbar-content-min-height: 25px;
+    --custom-scrollbar-columns-gap: 20px;
+    --custom-scrollbar-arrow-gap: .5rem;
+    --custom-scrollbars-border-radius: 12px;
+    --custom-scrollbars-control-size: 5px;
+    --custom-scrollbars-track-bg: #e9e9e9;
+    --custom-scrollbars-thumb-bg: #a6a6a6;
+    --custom-scrollbars-thumb-hover-bg: #878787;
+
+    
+    
+	display: grid;
+	min-height: var(--custom-scrollbar-min-wrapper-height);
+	grid-template-areas: "left1 right" "left2 right";
+	grid-template-rows: auto;
+	grid-template-columns: 1fr var(--custom-scrollbar-columns-gap);
+	overflow: hidden;
+	position: relative;
+
+    &.custom-scrollbars__wrapper--horizontal {
+        grid-template-columns: 1fr;
+    }
+
+
+
+    .custom-scrollbars__content {
+        min-height: var(--custom-scrollbar-content-min-height);
+        overflow: auto;
+        scrollbar-width: none;
+        grid-area: left1;
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+
+    .custom-scrollbars__scrollbar {
+        display: grid;
+        gap: var(--custom-scrollbar-arrow-gap) 0;
+        grid-auto-flow: row;
+        grid-template: auto 1fr auto / 1fr;
+        padding: 0;
+        place-items: center;
+        grid-area: right;
+
+
+        &.disabled {
+            pointer-events: none;
+            opacity: 0;
+            filter: grayscale(100%);
+        }
+
+
+        .custom-scrollbars__button {
+            padding: 0;
+            margin: 0;
+            background: none;
+            outline: none;
+            box-shadow: none;
+            border: none;
+            cursor: pointer;
+
+            &.disabled {
+                opacity: 0;
+                pointer-events: none;
+            }
+
+
+            svg path {
+                stroke: var(--custom-scrollbars-thumb-bg);
+            }
+
+            i {
+                color: var(--custom-scrollbars-thumb-bg);
+            }   
+            &:hover {
+                svg path {
+                    stroke: var(--custom-scrollbars-thumb-hover-bg);
+                }
+    
+                i {
+                    color: var(--custom-scrollbars-thumb-hover-bg);
+                }   
+            }
+    
+
+        }
+        .custom-scrollbars__track-and-thumb {
+            display: block;
+            height: 100%;
+            position: relative;
+            width: var(--custom-scrollbars-control-size);
+            .custom-scrollbars__track {
+                background-color: var(--custom-scrollbars-track-bg);
+                border-radius: var(--custom-scrollbars-border-radius);
+                bottom: 0;
+                cursor: pointer;
+                position: absolute;
+                top: 0;
+                width: var(--custom-scrollbars-control-size);
+            }
+            .custom-scrollbars__thumb {
+                border-radius: var(--custom-scrollbars-border-radius);
+                background-color: var(--custom-scrollbars-thumb-bg);
+                position: absolute;
+                width: var(--custom-scrollbars-control-size);
+
+                &:hover {
+                    background-color: var(--custom-scrollbars-thumb-hover-bg);
+                }
+            }
+        }
+    }
+    
+
+    .custom-scrollbars__scrollbar-horizontal {
+        display: grid;
+        grid-area: left2;
+        gap: 0 var(--custom-scrollbar-arrow-gap);
+        grid-auto-flow: row;
+        grid-template: auto 1fr auto / 1rem 1fr 1rem;
+        padding: 0;
+        place-items: center;
+
+        &.disabled {
+            pointer-events: none;
+            opacity: 0;
+            filter: grayscale(100%);
+        }
+
+
+        .custom-scrollbars__button {
+            padding: 0;
+            margin: 0;
+            background: none;
+            outline: none;
+            box-shadow: none;
+            border: none;
+            cursor: pointer;
+
+            &.disabled {
+                opacity: 0;
+                pointer-events: none;
+            }
+
+            svg path {
+                stroke: var(--custom-scrollbars-thumb-bg);
+            }
+
+            i {
+                color: var(--custom-scrollbars-thumb-bg);
+            }   
+            &:hover {
+                svg path {
+                    stroke: var(--custom-scrollbars-thumb-hover-bg);
+                }
+    
+                i {
+                    color: var(--custom-scrollbars-thumb-hover-bg);
+                }   
+            }
+    
+
+        }
+        .custom-scrollbars__track-and-thumb {
+            display: block;
+            width: 100%;
+            position: relative;
+            height: var(--custom-scrollbars-control-size);
+            .custom-scrollbars__track {
+                background-color: var(--custom-scrollbars-track-bg);
+                border-radius: var(--custom-scrollbars-border-radius);
+                bottom: 0;
+                cursor: pointer;
+                position: absolute;
+                top: 0;
+                height: var(--custom-scrollbars-control-size);
+                width: 100%;
+            }
+            .custom-scrollbars__thumb {
+                border-radius: var(--custom-scrollbars-border-radius);
+                background-color: var(--custom-scrollbars-thumb-bg);
+                position: absolute;
+                height: var(--custom-scrollbars-control-size);
+
+                &:hover {
+                    background-color: var(--custom-scrollbars-thumb-hover-bg);
+                }
+            }
+        }
+    }
+
+    &.arrow-disabled {
+
+        .custom-scrollbars__scrollbar {
+            gap: 0 0 var(--custom-scrollbar-arrow-gap) 0;
+            grid-template: 0 1fr 0 / 1fr;
+
+        }
+
+        .custom-scrollbars__scrollbar-horizontal {
+            gap: 0;
+            grid-template: auto 1fr auto / 0 1fr 0;
+
+        }
+    }
+
+
+}
+