koval-ui/dist/src/lib/DataTable/Pagination.cjs.map

React components collection with minimalistic design. Supports theming, layout, and input validation.

{"version":3,"file":"Pagination.cjs","sources":["../../../../src/lib/DataTable/Pagination.tsx"],"sourcesContent":["import {useRef, useState} from 'react';\nimport type {KeyboardEvent, FC, ChangeEvent} from 'react';\nimport {useCallback} from 'react';\nimport classNames from 'classnames';\n\nimport {Pagination as PaginationVanilla} from '@/lib/Pagination';\nimport {IconEnter} from '@/internal/Icons';\nimport {useMatchMedia} from '@/internal/hooks/useMatchMedia.tsx';\n\nimport classes from './DataTable.module.css';\n\nexport type Props = {\n    setCurrentPage: (page: number) => void;\n    onPageSizeChange: (page: number) => void;\n    currentPage: number;\n    pagesAmount: number;\n    pageSize: number;\n    rowsCount: number;\n};\n\nexport const Pagination: FC<Props> = ({\n    setCurrentPage,\n    currentPage,\n    pagesAmount,\n    pageSize: pageSizeProp,\n    onPageSizeChange,\n    rowsCount,\n}) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const [pageSize, setPageSize] = useState(pageSizeProp);\n\n    const checkValidity = useCallback(\n        (nextValue: number) => {\n            return nextValue <= rowsCount;\n        },\n        [rowsCount]\n    );\n\n    const handlePageSizeChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n        const nextValue = parseInt(event.target.value);\n        setPageSize(nextValue);\n    }, []);\n\n    const handlePazeSizeEnter = useCallback(\n        (event: KeyboardEvent<HTMLInputElement>) => {\n            if (event.key === 'Enter' && checkValidity(pageSize)) {\n                onPageSizeChange(pageSize);\n                setCurrentPage(1);\n            }\n        },\n        [checkValidity, onPageSizeChange, pageSize, setCurrentPage]\n    );\n\n    const handlePageSizeSubmit = useCallback(() => {\n        if (checkValidity(pageSize)) {\n            onPageSizeChange(pageSize);\n            setCurrentPage(1);\n        }\n    }, [checkValidity, onPageSizeChange, pageSize, setCurrentPage]);\n\n    const isBigScreen = useMatchMedia('(width >= 768px)');\n\n    const displayPageButtons = isBigScreen || pagesAmount <= 7;\n    const displayPageNavigation = isBigScreen || pagesAmount > 7;\n\n    return (\n        <div className={classes.paginationWrapper}>\n            <PaginationVanilla\n                showPageButtons={displayPageButtons}\n                showNavigation={displayPageNavigation}\n                onPageSelect={setCurrentPage}\n                selectedPage={currentPage}\n                totalPages={pagesAmount}\n            />\n            <div className={classes.paginationFieldset}>\n                <label htmlFor=\"input\" className={classes.paginationLabel}>\n                    Rows per page:\n                </label>\n                <input\n                    min={1}\n                    max={rowsCount}\n                    ref={inputRef}\n                    onKeyUp={handlePazeSizeEnter}\n                    onChange={handlePageSizeChange}\n                    value={pageSize}\n                    id=\"input\"\n                    type=\"number\"\n                    className={classNames(classes.paginationInput, {\n                        [classes.error]: !checkValidity(pageSize),\n                    })}\n                />\n                <button\n                    disabled={!checkValidity(pageSize)}\n                    className={classes.paginationButton}\n                    onClick={handlePageSizeSubmit}>\n                    <IconEnter className={classes.icon} />\n                </button>\n            </div>\n        </div>\n    );\n};\n"],"names":["Pagination","setCurrentPage","currentPage","pagesAmount","pageSizeProp","onPageSizeChange","rowsCount","inputRef","useRef","pageSize","setPageSize","useState","checkValidity","useCallback","nextValue","handlePageSizeChange","event","handlePazeSizeEnter","handlePageSizeSubmit","isBigScreen","useMatchMedia","displayPageButtons","displayPageNavigation","jsxs","classes","jsx","PaginationVanilla","classNames","IconEnter"],"mappings":"mWAoBaA,EAAwB,CAAC,CAClC,eAAAC,EACA,YAAAC,EACA,YAAAC,EACA,SAAUC,EACV,iBAAAC,EACA,UAAAC,CACJ,IAAM,CACI,MAAAC,EAAWC,SAAyB,IAAI,EAExC,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAASP,CAAY,EAE/CQ,EAAgBC,EAAA,YACjBC,GACUA,GAAaR,EAExB,CAACA,CAAS,CACd,EAEMS,EAAuBF,cAAaG,GAAyC,CAC/E,MAAMF,EAAY,SAASE,EAAM,OAAO,KAAK,EAC7CN,EAAYI,CAAS,CACzB,EAAG,EAAE,EAECG,EAAsBJ,EAAA,YACvBG,GAA2C,CACpCA,EAAM,MAAQ,SAAWJ,EAAcH,CAAQ,IAC/CJ,EAAiBI,CAAQ,EACzBR,EAAe,CAAC,EAExB,EACA,CAACW,EAAeP,EAAkBI,EAAUR,CAAc,CAC9D,EAEMiB,EAAuBL,EAAAA,YAAY,IAAM,CACvCD,EAAcH,CAAQ,IACtBJ,EAAiBI,CAAQ,EACzBR,EAAe,CAAC,IAErB,CAACW,EAAeP,EAAkBI,EAAUR,CAAc,CAAC,EAExDkB,EAAcC,gBAAc,kBAAkB,EAE9CC,EAAqBF,GAAehB,GAAe,EACnDmB,EAAwBH,GAAehB,EAAc,EAE3D,OACKoB,EAAAA,KAAA,MAAA,CAAI,UAAWC,EAAA,QAAQ,kBACpB,SAAA,CAAAC,EAAA,IAACC,EAAA,WAAA,CACG,gBAAiBL,EACjB,eAAgBC,EAChB,aAAcrB,EACd,aAAcC,EACd,WAAYC,CAAA,CAChB,EACCoB,EAAA,KAAA,MAAA,CAAI,UAAWC,EAAAA,QAAQ,mBACpB,SAAA,CAAAC,MAAC,SAAM,QAAQ,QAAQ,UAAWD,EAAAA,QAAQ,gBAAiB,SAE3D,iBAAA,EACAC,EAAA,IAAC,QAAA,CACG,IAAK,EACL,IAAKnB,EACL,IAAKC,EACL,QAASU,EACT,SAAUF,EACV,MAAON,EACP,GAAG,QACH,KAAK,SACL,UAAWkB,EAAWH,EAAA,QAAQ,gBAAiB,CAC3C,CAACA,UAAQ,KAAK,EAAG,CAACZ,EAAcH,CAAQ,CAC3C,CAAA,CAAA,CACL,EACAgB,EAAA,IAAC,SAAA,CACG,SAAU,CAACb,EAAcH,CAAQ,EACjC,UAAWe,EAAQ,QAAA,iBACnB,QAASN,EACT,SAACO,EAAA,IAAAG,EAAA,UAAA,CAAU,UAAWJ,EAAAA,QAAQ,IAAM,CAAA,CAAA,CAAA,CACxC,CACJ,CAAA,CAAA,EACJ,CAER"}