funda-ui 4.5.711 → 4.5.713

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

@@ -1,385 +0,0 @@
-import React, { useState, useEffect, useRef, forwardRef, ChangeEvent, FocusEvent, useImperativeHandle } from 'react';
-
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-import {
-    calcAdd,
-    calcSub,
-    isNumeric,
-    truncateDecimals,
-    exceedDecimalPlaces,
-    formatNumber
-} from 'funda-utils/dist/cjs/math';
-
-export type NumberInputProps = {
-    contentRef?: React.ForwardedRef<any>;
-    wrapperClassName?: string;
-    controlClassName?: string;
-    controlGroupWrapperClassName?: string;
-    controlGroupTextClassName?: string;
-    arrowBtnClassName?: string[];
-    arrowBtnContainerClassName?: string;
-    increaseIcon?: React.ReactNode | string;
-    decreaseIcon?: React.ReactNode | string;
-    hideArrowButton?: boolean;
-    defaultValue?: string;
-    value?: string;
-    requiredLabel?: React.ReactNode | string;
-    label?: React.ReactNode | string;
-    units?: React.ReactNode | string;
-    name?: string;
-    step?: any;
-	min?: any;
-	max?: any;
-    decimalPlaces?: number;
-    alt?: any;
-    disabled?: any;
-    required?: any;
-    readOnly?: any;
-    placeholder?: string;
-    iconLeft?: React.ReactNode | string;
-    iconRight?: React.ReactNode | string;
-    /** -- */
-    id?: string;
-    style?: React.CSSProperties;
-    tabIndex?: number;
-    [key: `data-${string}`]: string | undefined;
-    onChange?: (e: any, el: any, val: number) => void;
-    onBlur?: (e: any, el: any) => void;
-    onFocus?: (e: any, el: any) => void;
-
-};
-
-
-const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
-    const {
-        contentRef,
-        wrapperClassName,
-        controlClassName,
-        controlGroupWrapperClassName,
-        controlGroupTextClassName,
-        arrowBtnClassName,
-        arrowBtnContainerClassName,
-        increaseIcon,
-        decreaseIcon,
-        hideArrowButton,
-        requiredLabel,
-        disabled,
-        required,
-        placeholder,
-        readOnly,
-        defaultValue,
-        value,
-        label,
-        units,
-        name,
-        step = 1,
-        min = Number.MIN_SAFE_INTEGER,
-        max = Number.MAX_SAFE_INTEGER,
-        decimalPlaces = 0,
-        alt,
-        id,
-        iconLeft,
-        iconRight,
-        style,
-        tabIndex,
-        onChange,
-        onBlur,
-        onFocus,
-        ...attributes
-    } = props;
-
-
-    const uniqueID = useComId();
-    const idRes = id || uniqueID;
-    const HIDE_ARROW = typeof hideArrowButton === 'undefined' ? false : hideArrowButton;
-    const rootRef = useRef<any>(null);
-    const valRef = useRef<any>(null);
-    const [changedVal, setChangedVal] = useState<string>(value || '');
-
-    // exposes the following methods
-    useImperativeHandle(
-        contentRef,
-        () => ({
-            control: () => {
-                return valRef.current;
-            },
-            clear: (cb?: any) => {
-                setChangedVal('');
-                cb?.();
-            },
-            set: (value: string, cb?: any) => {
-                setChangedVal(`${value}`);
-                cb?.();
-            },
-            increment: (cb?: any) => {
-                handleIncrement(null);
-                cb?.();
-            },
-            decrement: (cb?: any) => {
-                handleDecrement(null);
-                cb?.();
-            }
-
-        }),
-        [contentRef],
-    );
-
-    const propExist = (p: any) => {
-        return typeof p !== 'undefined' && p !== null && p !== '';
-    };
-
-    // Formalized digits, supporting decimal places
-    const formatValue = (inputValue: any) => {
-        return formatNumber(inputValue, decimalPlaces, min, max);
-    };
-
-    const checkResValue = (inputValue: number | string) => {
-        // Check whether the number of decimal places exceeds the specified value
-        if (exceedDecimalPlaces(inputValue, decimalPlaces)) {
-            inputValue = truncateDecimals(Number(inputValue), decimalPlaces);
-        }
-    
-        // check min or max value
-        if ( Number(inputValue) > max ) inputValue = max;
-        if ( Number(inputValue) < min ) inputValue = min;
-
-        return inputValue;
-    };
-
-    const handleIncrement = (e: React.MouseEvent<HTMLButtonElement> | null) => {
-        if (e) e.preventDefault();
-  
-        setChangedVal((prevValue: string) => {
-            const newValue = calcAdd(parseFloat(prevValue), step);
-            onChange?.(e, valRef.current, Number(formatValue(newValue)));
-            return formatValue(newValue);
-        });
-        
-    };
-
-    const handleDecrement = (e: React.MouseEvent<HTMLButtonElement> | null) => {
-        if (e) e.preventDefault();
-
-        setChangedVal((prevValue: string) => {
-            const newValue = calcSub(parseFloat(prevValue), step);
-            onChange?.(e, valRef.current, Number(formatValue(newValue)));
-            return formatValue(newValue);
-        });
-        
-    };
-
-
-    
-    function handleFocus(event: FocusEvent<HTMLInputElement>) {
-        rootRef.current?.classList.add('focus');
-
-        //
-        onFocus?.(event, valRef.current);    
-    }
-
-    function handleChange(event: ChangeEvent<HTMLInputElement>) {
-        const val = event.target.value;
-        let newVal: number | string = parseFloat(event.target.value);
-        
-        if (!isNumeric(newVal)) newVal = val;
-
-        // Determine whether it is a null or negative symbol
-        if (val === '-') {
-            newVal = '-';
-
-        // Determine whether to enter a decimal
-        } else if (val.startsWith('-0') && decimalPlaces > 0) {
-            newVal = val;
-
-        //
-        } else if (val.includes('.') && decimalPlaces > 0) {
-            newVal = val;
-
-        }else {
-            newVal = formatValue(newVal);
-        }
-
-        // Check result
-        newVal = checkResValue(newVal);
-        
-
-        //
-        const resToInput = String(newVal) === 'NaN' ? '0' : String(newVal);
-        setChangedVal(resToInput);
-
-
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-        
-        //
-        onChange?.(event, valRef.current, Number(!isNumeric(newVal) ? '0' : resToInput));
-        
-
-    }
-
-    function handleBlur(event: FocusEvent<HTMLInputElement>) {
-        const el = event.target;
-        const val = event.target.value;
-
-
-        // Determine whether to enter a decimal
-        if (val.includes('.') && decimalPlaces > 0) {
-            setChangedVal(formatValue(val));
-        }
-
-        // Determine whether it is a null or negative symbol
-        if (val === '' || val === '-') {
-            setChangedVal('0');
-        }
-
-
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
-        //
-        onBlur?.(event, valRef.current);
-
-    }
-   
-
-    useEffect(() => {
-        
-        // update default value
-        //--------------
-        if (typeof value !== 'undefined') {
-            setChangedVal(`${formatValue(value)}`);   // Avoid displaying the number 0
-        }
-        
-
-    }, [value]);
-
-
-    useEffect(() => {
-
-        // update default value (It does not re-render the component because the incoming value changes.)
-        //--------------
-        if (typeof defaultValue !== 'undefined') { //REQUIRED
-            setChangedVal(`${formatValue(defaultValue)}`);   // Avoid displaying the number 0
-        }
-
-    }, []);
-
-
-    return (
-        <>
-
-            <div className={clsWrite(wrapperClassName, 'mb-3 position-relative')} ref={rootRef}>
-                {label ? <>{typeof label === 'string' ? <label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{__html: `${label}`}}></label> : <label htmlFor={idRes} className="form-label">{label}</label>}</> : null}
-
-                <div className="position-relative">
-
-                    {/* INPUT GROUP*/}
-                    <div className={combinedCls(
-                        clsWrite(controlGroupWrapperClassName, 'input-group position-relative z-1'),
-                        {
-                            'has-left-content': propExist(iconLeft),
-                            'has-right-content': propExist(iconRight) || propExist(units)
-                        }
-                    )}>
-                        {propExist(iconLeft) ? <><span className={clsWrite(controlGroupTextClassName, 'input-group-text')}>{iconLeft}</span></> : null}
-
-                        <input
-                            ref={(node) => {
-                                valRef.current = node;
-                                if (typeof externalRef === 'function') {
-                                    externalRef(node);
-                                } else if (externalRef) {
-                                    externalRef.current = node;
-                                }
-                            }}
-
-                            tabIndex={tabIndex || 0}
-                            type="text"
-                            inputMode={decimalPlaces > 0 ? 'decimal' : 'numeric' }   // numeric | decimal
-                            className={combinedCls(
-                                clsWrite(controlClassName, 'form-control'),
-                                {
-                                    'rounded': !propExist(iconLeft) && !propExist(iconRight) && !propExist(units)
-                                }
-                            )}
-                            id={idRes}
-                            name={name}
-                            min={min || null}
-                            max={max || null}
-                            alt={alt || null}
-                            placeholder={placeholder || ''}
-                            value={changedVal}
-                            autoComplete={'off'}
-                            spellCheck={false}
-                            onFocus={handleFocus}
-                            onBlur={handleBlur}
-                            onChange={handleChange}
-                            disabled={disabled || null}
-                            required={required || null}
-                            readOnly={readOnly || null}
-                            style={style}
-                            {...attributes}
-                        />
-                        {propExist(units) ? <><span className={clsWrite(controlGroupTextClassName, 'input-group-text')}>{units}</span></> : null}
-                        {propExist(iconRight) ? <><span className={clsWrite(controlGroupTextClassName, 'input-group-text')}>{iconRight}</span></> : null}
-
-                        {required ? <>{requiredLabel || requiredLabel === '' ? requiredLabel : <span className="position-absolute end-0 top-0 my-2 mx-2 me-3 pe-3"><span className="text-danger">*</span></span>}</> : ''}
-
-                    </div>
-                    
-                    {/* /INPUT GROUP*/}
-
-                    
-                    
-                    {/* ARROW GROUP*/}
-                    {HIDE_ARROW ? null : <>
-                        <span className={clsWrite(arrowBtnContainerClassName, 'btn-group-vertical position-absolute top-0 end-0 h-100 z-3 border-start')} role="group">
-                            <button
-                                type="button"
-                                className={clsWrite(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[0] : undefined, 'btn btn-sm border-0 border-bottom py-0 lh-1 flex-fill')}
-                                tabIndex={-1}
-                                onClick={handleIncrement}
-                                disabled={disabled || null}
-                            >
-                                <span>{increaseIcon || <svg width={13} fill="#000000" viewBox="0 0 24 24">
-                                    <path d="M18.5,15.5l-6-7l-6,7H18.5z" />
-                                    <rect fill="none" width="24" height="24" />
-                                    <rect fill="none" width="24" height="24" />
-                                </svg>}</span>
-                            </button>
-
-                            <button
-                                type="button"
-                                className={clsWrite(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[1] : undefined, 'btn btn-sm border-0 py-0 lh-1 flex-fill')}
-                                tabIndex={-1}
-                                onClick={handleDecrement}
-                                disabled={disabled || null}
-                            >
-                                <span>{decreaseIcon || <svg width={13} fill="#000000" viewBox="0 0 24 24">
-                                    <path d="M6.5,8.5l6,7l6-7H6.5z"/>
-                                    <rect fill="none" width="24" height="24" />
-                                    <rect fill="none" width="24" height="24" />
-                                </svg>}</span>
-                            </button>
-                        </span>
-                    </>}
-                    {/* /ARROW GROUP*/}
-                </div>
-
-
-            </div>
-
-
-        </>
-    )
-});
-
-export default NumberInput;

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

@@ -1,286 +0,0 @@
-import React, { useRef, forwardRef, useImperativeHandle } from 'react';
-import { paginationNavigators } from './pagination-navigators';
-
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-export type PaginationProps = {
-    /** The class name of the navigation wrapper */
-    wrapperClassName?: string;
-    /** The class name of the navigation */
-    navClassName?: string;
-    /** The class name of each item */
-    navItemClassName?: string;
-    /** An API URL Path. Use `{page}` characters to place a placeholder. such as `/mypage/{page}` */
-    apiUrl: string;
-    /** The range of pages displayed */
-    pageRangeDisplayed: number;
-    /**  The currently selected page number. */
-    activePage: number;
-    /** The total number of pages. */
-    totalPages: number;
-    /** Label for the previous button. */
-    previousLabel?: React.ReactNode;
-    /** Label for the next button. */
-    nextLabel?: React.ReactNode;
-    /** Label for the first button. */
-    firstLabel?: React.ReactNode;
-    /** Label for the last button. */
-    lastLabel?: React.ReactNode;
-    /** Label for ellipsis */
-    breakLabel?: React.ReactNode;
-    /** Set the alignment of the control */
-    align?: string | null;
-    /** Only display the previous and next buttons. */
-    onlyPrevNext?: boolean;
-    /** The classname for the active page */
-    activeClassName?: string;
-    /** The classname on tag li of the previous button */
-    previousClassName?: string;
-    /** The classname on tag li of the next button */
-    nextClassName?: string;
-    /** The classname on tag li of the first button */
-    firstClassName?: string;
-    /** The classname on tag li of the last button */
-    lastClassName?: string;
-    /** The classname for disabled buttons */
-    disabledClassName?: string;
-    /** The activation button is symmetrical on the left and right sides. */
-    symmetry?: boolean;
-    /** -- */
-    style?: React.CSSProperties;
-    /** The method to call when a page is clicked. Exposes the current page number as an argument. */
-    onChange?: (page: number, total: number) => void;
-
-
-};
-
-
-const Pagination = forwardRef((props: PaginationProps, externalRef: any) => {
-    const {
-        wrapperClassName,
-        navClassName,
-        navItemClassName,
-        apiUrl,
-        pageRangeDisplayed,
-        activePage,
-        totalPages,
-        previousLabel,
-        nextLabel,
-        firstLabel,
-        lastLabel,
-        breakLabel,
-        align,
-        onlyPrevNext,
-        activeClassName,
-        previousClassName,
-        nextClassName,
-        firstClassName,
-        lastClassName,
-        disabledClassName,
-        symmetry,
-        style,
-        onChange
-    } = props;
-
-
-    const rootRef = useRef<any>(null);
-    const visibleNavigators = pageRangeDisplayed ? pageRangeDisplayed : 3;
-
-
-
-
-    // exposes the following methods
-    useImperativeHandle(
-        externalRef,
-        () => ({
-            next: (cb: any) => {
-                handleClick('next', (p: number) => {
-                    cb?.(p);
-                });
-            },
-            prev: (cb: any) => {
-                handleClick('prev', (p: number) => {
-                    cb?.(p);
-                });
-            },
-            first: (cb: any) => {
-                handleClick('first', (p: number) => {
-                    cb?.(p);
-                });
-            },
-            last: (cb: any) => {
-                handleClick('last', (p: number) => {
-                    cb?.(p);
-                });
-            }
-        }),
-        [externalRef, totalPages, activePage],
-    );
-
-
-
-    let alignClassName = '';
-    switch (align) {
-        case 'left':
-            alignClassName = ' justify-content-start';
-            break;
-        case 'right':
-            alignClassName = ' justify-content-end';
-            break;
-        case 'center':
-            alignClassName = ' justify-content-center';
-            break;
-    }
-
-    const _activeClassName = activeClassName || 'active',
-        _previousClassName = previousClassName || 'prev',
-        _nextClassName = nextClassName || 'next',
-        _firstClassName = firstClassName || 'first',
-        _lastClassName = lastClassName || 'last',
-        _disabledClassName = disabledClassName || 'disabled',
-        _itemClassName = navItemClassName || 'page-item',
-        _onlyPrevNextButtons = typeof (onlyPrevNext) === 'undefined' ? false : onlyPrevNext,
-        _symmetry = typeof (symmetry) === 'undefined' ? false : symmetry;
-
-
-    //get navigation array
-    //------------------------------------------
-    const navArr = paginationNavigators(visibleNavigators, totalPages, activePage, true, _symmetry);
-
-
-    // Use ellipsis to extend page numbers
-    //------------------------------------------
-    let _ellipsis = breakLabel ? breakLabel : '';
-    let _ellipsisArr: any[any] = [];
-    let _ellipsisEnabled = false;
-
-    if (_ellipsis !== '') _ellipsisArr = [totalPages - 1, totalPages];
-    if (activePage + 2 >= totalPages) {
-        _ellipsisArr = [];
-        _ellipsis = '';
-    }
-
-    const _ellipsisElements = _ellipsisArr.map((item: any, i: number) => {
-        if (item > 0 && item <= totalPages && !_onlyPrevNextButtons) {
-            //Delete values whose display range is more than the total
-            if (navArr.indexOf(item) === -1) {
-                _ellipsisEnabled = true;
-
-                return (
-                    <li key={i} className={activePage === item ? `${_itemClassName} ${_activeClassName}` : `${_itemClassName}`}>
-                        <a className="page-link" data-page={item} href={apiUrl?.replace('{page}', item)} onClick={(e) => {
-                            e.preventDefault();
-                            onChange?.(Number(item), Number(totalPages));
-                        }}>{item}</a>
-                    </li>
-                );
-            }
-        }
-    });
-
-
-
-
-    function handleClick(parameter: any, cb?: any) {
-
-        switch (parameter) {
-            case "prev":
-                onChange?.(activePage - 1, Number(totalPages));
-                cb?.(activePage - 1);
-                break;
-            case "next":
-                onChange?.(activePage + 1, Number(totalPages));
-                cb?.(activePage + 1);
-                break;
-            case "first":
-                onChange?.(1, Number(totalPages));
-                cb?.(1);
-                break;
-            case "last":
-                onChange?.(totalPages, Number(totalPages));
-                cb?.(totalPages);
-                break;
-            default:
-                onChange?.(1, Number(totalPages));
-                cb?.(1);
-                break;
-        }
-    }
-
-
-    return (
-        <>
-
-            <nav
-                ref={rootRef}
-                className={clsWrite(wrapperClassName, 'mb-3 position-relative')}
-                style={style}
-            >
-                <ul className={combinedCls(
-                    alignClassName,
-                    clsWrite(navClassName, 'pagination')
-                )}>
-                    {firstLabel ? (
-                        <li className={activePage > 1 ? `${_itemClassName} ${_firstClassName}` : `${_itemClassName} ${_firstClassName} ${_disabledClassName}`}>
-                            <a tabIndex={activePage > 1 ? 0 : -1} aria-disabled={activePage > 1 ? 'false' : 'true'} className="page-link" data-page={1} href={apiUrl?.replace('{page}', '1')} onClick={(e) => { e.preventDefault(); handleClick('first'); }}>
-                                {firstLabel || null}
-                            </a>
-                        </li>
-                    ) : ''}
-
-                    {previousLabel ? (
-                        <li className={activePage > 1 ? `${_itemClassName} ${_previousClassName}` : `${_itemClassName} ${_previousClassName} ${_disabledClassName}`}>
-                            <a tabIndex={activePage > 1 ? 0 : -1} aria-disabled={activePage > 1 ? 'false' : 'true'} className="page-link" data-page={activePage - 1} href={apiUrl?.replace('{page}', (activePage - 1) as any)} onClick={(e) => { e.preventDefault(); handleClick('prev'); }}>
-                                {previousLabel || null}
-                            </a>
-                        </li>
-                    ) : ''}
-
-
-                    {
-                        navArr.map((item: any, i: number) => {
-                            if (item > 0 && item <= totalPages && !_onlyPrevNextButtons) {
-                                return (
-                                    <li key={i} className={activePage === item ? `${_itemClassName} ${_activeClassName}` : `${_itemClassName}`}>
-                                        <a className="page-link" data-page={item} href={apiUrl?.replace('{page}', item)} onClick={(e) => {
-                                            e.preventDefault();
-                                            onChange?.(Number(item), Number(totalPages));
-                                        }}>{item}</a>
-                                    </li>
-                                );
-                            }
-
-                        })
-                    }
-
-
-                    {_ellipsis !== '' && _ellipsisEnabled ? <><li className={_itemClassName}><span className="page-link">{_ellipsis}</span></li></> : ''}
-                    {_ellipsisElements}
-
-                    {nextLabel ? (
-                        <li className={activePage < totalPages ? `${_itemClassName} ${_nextClassName}` : `${_itemClassName} ${_nextClassName} ${_disabledClassName}`}>
-                            <a tabIndex={activePage < totalPages ? 0 : -1} aria-disabled={activePage < totalPages ? 'false' : 'true'} className="page-link" data-page={activePage + 1} href={apiUrl?.replace('{page}', (activePage + 1) as any)} onClick={(e) => { e.preventDefault(); handleClick('next'); }}>
-                                {nextLabel || null}
-                            </a>
-                        </li>
-                    ) : ''}
-
-
-                    {lastLabel ? (
-                        <li className={activePage < totalPages ? `${_itemClassName} ${_lastClassName}` : `${_itemClassName} ${_lastClassName} ${_disabledClassName}`}>
-                            <a tabIndex={activePage < totalPages ? 0 : -1} aria-disabled={activePage < totalPages ? 'false' : 'true'} className="page-link" data-page={totalPages} href={apiUrl?.replace('{page}', totalPages as any)} onClick={(e) => { e.preventDefault(); handleClick('last'); }}>
-                                {lastLabel || null}
-                            </a>
-                        </li>
-                    ) : ''}
-
-                </ul>
-
-            </nav>
-
-
-        </>
-    )
-});
-
-export default Pagination;