funda-ui 4.7.615 → 4.7.624

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;

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

@@ -0,0 +1,60 @@
+
+/*
+* 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;