@tapie-kr/inspire-react/dist/esm/components/molecules/Pagination/index.js

React Component Collection for INSPIRE

'use client';
/* eslint-disable */
/*
 * INSPIRE : Creative Kit
 * React Component Collection for INSPIRE
 *
 * This file is generated automatically. Do not modify it manually
 * Generated at : 2025. 3. 4. 오후 6:18:13
 * @tapie-kr/inspire-react version: 0.2.15
 *
 * (c) 2025 TAPIE. All rights reserved.
 * MIT License
*/
import { jsxs, jsx } from 'react/jsx-runtime';
import { spacingVars } from '../../../lib/style/contract/component.css.js';
import { HStack } from '../../miscellaneous/layout/HStack/index.js';
import { useState, useCallback, useEffect } from 'react';
import { ControlButton, Square, PageButton } from './button.js';
import { getCurrentItems } from './shared.js';

function Pagination(props){const[currentPage,setCurrentPage]=useState(props.defaultPage||props.min);const getCurrentVisiblePages=useCallback(()=>getCurrentItems(props.min,props.max,props.visiblePages||10,currentPage),[currentPage,props.max,props.min,props.visiblePages]);const[currentItems,setCurrentItems]=useState(getCurrentVisiblePages());const handleNext=useCallback(()=>{setCurrentPage(prev=>{const newValue=Math.min(prev+1,props.max);props.onPageChange?.(newValue);return newValue});},[props]);const handlePrevious=useCallback(()=>{setCurrentPage(prev=>{const newValue=Math.max(prev-1,props.min);props.onPageChange?.(newValue);return newValue});},[props]);useEffect(()=>{setCurrentItems(getCurrentVisiblePages());},[currentPage,getCurrentVisiblePages,props]);return jsxs(HStack,{fullWidth:true,spacing:spacingVars.moderate,children:[jsx(ControlButton,{type:"previous",onClick:handlePrevious}),jsx(HStack,{spacing:spacingVars.micro,children:currentItems.map(c=>{if(c.type==="ellipsis"){return jsx(Square,{children:"..."},c.type)}if(!c.value)return null;const handleClick=()=>{if(c.value){setCurrentPage(c.value);props.onPageChange?.(c.value);}};return jsx(PageButton,{page:c.value,isActive:currentPage===c.value,onClick:handleClick})})}),jsx(ControlButton,{type:"next",onClick:handleNext})]})}

export { Pagination };