funda-ui 4.5.682 → 4.5.711

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

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

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