funda-ui 4.7.624 → 4.7.625

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;

package/publish/lib/esm/Pagination/pagination-navigators.tsx

@@ -1,60 +0,0 @@
-
-/*
-* Generate page navigators
-*
-* @param  {Number} visibleNavigators    - The range of pages displayed.
-* @param  {Number} totalPages           - The total number of pages.
-* @param  {Number} activePage           - The currently selected page number.
-* @param  {Boolean} adjustmentEnabled   - Whether to complete the page number range.
-* @param  {Boolean} symmetry            - The activation button is symmetrical on the left and right sides.
-* @return {Array}                       - Return an array.
-*/
-export function paginationNavigators(visibleNavigators: number, totalPages: number, activePage: number, adjustmentEnabled = true, symmetry = false) {
-
-	// Generate a sequence of numbers
-	// Since the array is initialized with `undefined` on each position,
-	// the value of `v` below will be `undefined`
-
-	let result: any[number] = [];
-	if ((activePage + visibleNavigators - 1) < totalPages) {
-		result = Array.from({ length: visibleNavigators }, (v, k) => k + activePage);
-	} else {
-		let diff = totalPages - activePage;
-		if (diff >= 0) {
-			result = Array.from({ length: diff + 1 }, (v, k) => k + activePage);
-		}
-
-	}
-
-	//Shift the elements forward to complete the display range
-	const adjustmentResult = ( arr: any[] ) => {
-		if ( arr.length < totalPages ) {
-			let adjustment = visibleNavigators - arr.length;
-			for (let i = 1; i <= adjustment; i++) {
-				arr.unshift(activePage - i);
-			}
-		}
-		return arr;
-	};
-
-	if ( adjustmentEnabled ) result = adjustmentResult(result);
-
-
-    // symmetrical on the left and right sides
-    if ( symmetry ) {
-        if ( totalPages > activePage ) {
-            const totalDisplayedPages = visibleNavigators + (visibleNavigators - 1);
-            const activedPageIndex = result.indexOf(activePage);
-            const leftSideTotal = (visibleNavigators - 1) - activedPageIndex;
-
-            for (let i = 1; i <= leftSideTotal; i++) {
-                result.unshift(activePage - i - activedPageIndex);
-            }
-        }
-    }
-
-	
-	return result;
-}
-
-export default paginationNavigators;