funda-ui 4.7.615 → 4.7.624

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

@@ -0,0 +1,186 @@
+/* ======================================================
+    <!-- Range Slider -->
+/* ====================================================== */
+
+$thumb-size: 16px;
+$control-height: 0.75rem;
+
+@mixin track-styles {
+    appearance: none;
+    background: transparent;
+    border: transparent;
+}
+
+@mixin thumb-styles {
+    appearance: none;
+    pointer-events: all;
+    width: $thumb-size;
+    height: $thumb-size;
+    border-radius: 0px;
+    border: 0 none;
+    cursor: grab;
+
+    &:active {
+        cursor: grabbing;
+    }
+}
+
+.range-slider__wrapper {
+
+    --range-slider-grab: #0b5ed7;
+    --range-slider-active-grab-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
+    --range-slider-active-grab-border-color: #86b7fe;
+    --range-slider-rail: #e9ecef;
+    --range-slider-inner-rail: #0d6efd;
+    
+    position: relative; /* Required */
+
+    
+    > div:not(.range-slider__control-wrapper) {
+        width: 49% !important;
+        display: inline-block !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        margin-block-start: 0 !important;
+        margin-block-end: 0 !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        padding-block-start: 0 !important;
+        padding-block-end: 0 !important;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    .range-slider__control-wrapper {
+        width: calc(100% - $thumb-size);
+
+        .range-slider__input {
+            width: calc(100% + #{$thumb-size});
+            margin: 0 calc(#{$thumb-size} / -2);
+            position: absolute;
+            height: $thumb-size;
+            
+            [type=range] {
+                position: absolute;
+                width: 100%;
+                pointer-events: none;
+                appearance: none;
+                height: 100%;
+                opacity: 0;
+                z-index: 3;
+                padding: 0;
+
+
+                &:disabled {
+                    display: none;
+                }
+
+                &::-ms-track {
+                    @include track-styles;
+                }
+
+                &::-moz-range-track {
+                    @include track-styles;
+                }
+
+                &:focus::-webkit-slider-runnable-track {
+                    @include track-styles;
+                }
+
+                &::-ms-thumb {
+                    @include thumb-styles;
+                }
+
+                &::-moz-range-thumb {
+                    @include thumb-styles;
+                }
+
+                &::-webkit-slider-thumb {
+                    @include thumb-styles;
+                }
+            }
+        }
+
+
+        .range-slider__placeholder {
+            width: 100%;
+            position: absolute;
+            height: $thumb-size;
+
+            .range-slider__placeholder-grab {
+                width: $thumb-size;
+                height: $thumb-size;
+                border-radius: 50%;
+                position: absolute;
+                background: var(--range-slider-grab);
+                top: 50%;
+                margin-left: calc(#{$thumb-size} / -2);
+                transform: translate3d(0, -50%, 0);
+                z-index: 2;
+                transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+                &.active {
+                    box-shadow: var(--range-slider-active-grab-box-shadow);
+                    border-color: var(--range-slider-active-grab-border-color);
+                }
+
+                &.inactive {
+                    display: none;
+                }
+            }
+
+            .range-slider__placeholder-rail {
+                position: absolute;
+                width: 100%;
+                top: 50%;
+                transform: translateY(-50%);
+                height: 6px;
+                border-radius: 3px;
+                background: var(--range-slider-rail);
+
+                .range-slider__placeholder-inner-rail {
+                    position: absolute;
+                    height: 100%;
+                    background: var(--range-slider-inner-rail);
+                    opacity: 0.5;
+                }
+
+
+            }
+
+        }
+
+        .range-slider__input,
+        .range-slider__placeholder {
+            top: $control-height;
+        }   
+
+
+        &.disabled .range-slider__placeholder {
+            filter: grayscale(1);
+        }
+
+
+
+    }
+
+    &.only-one {
+        .range-slider__control-wrapper {
+ 
+            .range-slider__placeholder {
+             
+                .range-slider__placeholder-rail {
+                    background: var(--range-slider-rail);
+    
+                    .range-slider__placeholder-inner-rail {
+                        background: var(--range-slider-rail);
+                    }
+    
+                }
+    
+            }
+        }
+
+    }
+
+}

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

@@ -0,0 +1,241 @@
+import React, { useEffect, useState, useRef } from 'react';
+
+
+import useComId from 'funda-utils/dist/cjs/useComId';
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
+import Input from 'funda-input';
+
+export type RangeSliderProps = {
+    wrapperClassName?: string;
+    controlClassName?: string;
+    controlExClassName?: 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,
+        controlExClassName,
+        disabled,
+        required,
+        value,
+        label,
+        minName,
+        maxName,
+        onlyOne,
+        step,
+        min,
+        max,
+        id,
+        tabIndex,
+        onChange
+    } = props;
+
+
+    const uniqueID = useComId();
+    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
+        //--------------
+        if (value && (typeof value.min === 'undefined' || typeof value.max === 'undefined')) {
+            initDefaultValue({
+                min,
+                max
+            });
+        } else {
+            initDefaultValue(value);
+        }
+
+    }, [value]);
+
+    return (
+        <>
+
+            {label ? <><div className="range-slider__label">{typeof label === 'string' ? <label htmlFor={`label-${idRes}`} className="form-label" dangerouslySetInnerHTML={{__html: `${label}`}}></label> : <label htmlFor={`label-${idRes}`} className="form-label">{label}</label>}</div></> : null}
+
+
+            <div className={combinedCls(
+                'range-slider__wrapper',
+                clsWrite(wrapperClassName, 'mb-3 position-relative'),
+                {
+                    'only-one': onlyOne
+                }
+            )} ref={rootRef}>
+
+                {/* The <Input /> component is a placeholder that ensures the same height and alignment as other form components */}
+                <Input
+                    ref={valMinRef}
+                    wrapperClassName={clsWrite(wrapperClassName, 'mb-3 position-relative')}
+                    controlClassName={combinedCls(
+                        clsWrite(controlClassName, 'form-control'),
+                        controlExClassName
+                    )} 
+                    required={required || null}
+                    type="text"
+                    id={idRes + '-min'}
+                    name={minName}
+                    value={typeof minValue !== 'undefined' ? minValue.toString() : min}  //  Convert to a string to ensure that 0 can also be filled
+                />
+
+                <Input
+                    ref={valMaxRef}
+                    wrapperClassName={clsWrite(wrapperClassName, 'mb-3 position-relative')}
+                    controlClassName={combinedCls(
+                        clsWrite(controlClassName, 'form-control'),
+                        controlExClassName
+                    )} 
+                    required={required || null}
+                    type="text"
+                    id={idRes + '-max'}
+                    name={maxName}
+                    value={typeof maxValue !== 'undefined' ? maxValue.toString() : max}  //  Convert to a string to ensure that 0 can also be filled
+                />                
+
+
+                <div className={combinedCls(
+                    '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={combinedCls(
+                            'range-slider__placeholder-grab',
+                            {
+                                'active': minActive
+                            }
+                        )} 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={combinedCls(
+                            'range-slider__placeholder-grab',
+                            {
+                                'active': maxActive,
+                                'inactive': onlyOne
+                            }
+
+                        )} style={{ left: `${maxPos}%` }} />
+                    </div>
+
+                </div>
+
+            </div>
+
+        </>
+    )
+};
+
+
+export default RangeSlider;

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

@@ -0,0 +1,121 @@
+import React, { useState, useRef } from 'react';
+
+import useIsMobile from 'funda-utils/dist/cjs/useIsMobile';
+
+
+interface RefresherProps {
+    /** Pulling text */
+    pullingText?: React.ReactNode;
+    /**  Text when reaching the threshold */
+    readyToRefreshText?: React.ReactNode;
+    /** Refreshing text */
+    refreshingText?: React.ReactNode;
+    /** The pull distance (px) that triggers the refresh */
+    threshold?: number;
+    /** The height of the trigger area */
+    triggerHeight?: number;
+    /** The styles of the trigger area */
+    triggerAreaStyle?: React.CSSProperties;
+    /** Pull-down is only allowed when the scroll bar of this element is at the top. You can only fire certain actions when the scrollbar is at the top by listening to the scroll event of a given DOM element and determining if its scrollTop is 0. */
+    scrollableElementClassName?: string;
+    /** Refresh action is async */
+    onRefresh: () => Promise<void>;
+    children: React.ReactNode;
+}
+
+const Refresher = (prpps: RefresherProps) => {
+    const {
+        onRefresh,
+        children,
+        pullingText = 'Pull down to refresh',
+        readyToRefreshText = 'Release to refresh',
+        refreshingText = 'Refreshing...',
+        threshold = 100,
+        triggerHeight = 50,
+        triggerAreaStyle,
+        scrollableElementClassName,
+    } = prpps;
+
+    const isMobile = useIsMobile();
+    const [pullDistance, setPullDistance] = useState<number>(0);
+    const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
+    const startY = useRef<number | null>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const handleTouchStart = (e: React.TouchEvent) => {
+        if (isRefreshing) return;
+        // Pull-down is only allowed when the scroll bar is at the top
+        const targetScrollableDiv = scrollableElementClassName === null || typeof scrollableElementClassName === 'undefined' ? containerRef.current : document.querySelector(scrollableElementClassName as string);
+
+
+        if (targetScrollableDiv && targetScrollableDiv.scrollTop > 0) return;
+        startY.current = e.touches[0].clientY;
+    };
+
+    const handleTouchMove = (e: React.TouchEvent) => {
+        if (startY.current === null || isRefreshing) return;
+        const distance = e.touches[0].clientY - startY.current;
+        if (distance > 0) {
+            setPullDistance(distance > threshold ? threshold : distance); // The maximum pull should not exceed "threshold" value
+        }
+    };
+
+    const handleTouchEnd = async () => {
+        if (isRefreshing) return;
+        if (pullDistance >= threshold) {
+            setIsRefreshing(true);
+            await onRefresh();
+            setIsRefreshing(false);
+        }
+        setPullDistance(0);
+        startY.current = null;
+    };
+
+    return (
+        <>
+            {!isMobile ? <React.Fragment>
+                {/** CONTENT */}
+                {children}
+            </React.Fragment> : <div
+                ref={containerRef}
+                style={{
+                    overflow: 'hidden',
+                    touchAction: 'pan-y',
+                    marginTop: `-${triggerHeight}px`,
+                }}
+                onTouchStart={handleTouchStart}
+                onTouchMove={handleTouchMove}
+                onTouchEnd={handleTouchEnd}
+            >
+                <div
+                    style={{
+                        transform: `translateY(${isRefreshing ? triggerHeight : pullDistance}px)`,
+                        transition: isRefreshing ? 'transform 0.2s' : 'transform 0.3s',
+                    }}
+                >
+
+                     {/** TRIGGER */}
+                    <div style={{
+                        ...triggerAreaStyle,
+                        height: `${triggerHeight}px`,
+                        textAlign: 'center',
+                        lineHeight: '50px'
+                    }}
+                    >
+                        {isRefreshing
+                            ? refreshingText
+                            : pullDistance >= threshold
+                                ? readyToRefreshText
+                                : pullingText}
+                    </div>
+
+                    {/** CONTENT */}
+                    {children}
+                </div>
+            </div>
+            }
+        </>
+    );
+};
+
+export default Refresher;

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

@@ -0,0 +1,59 @@
+import React, { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+
+
+export type RootPortalProps = {
+    containerClassName?: string;
+    children?: React.ReactNode;
+    show?: boolean;
+    usePortal?: boolean;
+};
+
+const RootPortal = (props: RootPortalProps) => {
+    const {
+        containerClassName,
+        show,
+        children,
+        usePortal = true
+    } = props;
+
+    const containerRef = useRef<HTMLElement>();
+
+    // Move HTML templates to tag end body </body>
+    // render() don't use "Fragment", in order to avoid error "Failed to execute 'insertBefore' on 'Node'"
+    // prevent "transform", "filter", "perspective" attribute destruction fixed viewport orientation
+    // ###
+    // ###
+    // Use `containerRef.current` to ensure the correctness of the nextjs framework. It may report an error document as undefined
+
+    useEffect(() => {
+        if (usePortal) {
+            containerRef.current = document.createElement('div');
+            containerRef.current.className = `root-portal-container ${containerClassName || ''}`;
+            document.body.appendChild(containerRef.current);
+        }
+
+        return () => {
+            if (usePortal && containerRef.current) {
+                containerRef.current.remove();
+            }
+        };
+    }, [usePortal]);
+
+    if (!usePortal) {
+        return show ? <>{children}</> : null;
+    }
+    
+    return (
+        <>
+            {containerRef.current && show && createPortal(
+                children,
+                containerRef.current as HTMLElement
+            )}
+        </>
+    );
+
+
+};
+
+export default RootPortal;