feat: add reusable PaginationLoader component with TDD
Add minimal PaginationLoader component for infinite scroll/pagination scenarios. Displays small ActivityIndicator with optional text, supports theme colors, and is designed for use in FlatList ListFooterComponent. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
9084075482
commit
3bc6789660
|
|
@ -0,0 +1,41 @@
|
||||||
|
import React from 'react'
|
||||||
|
import { render } from '@testing-library/react-native'
|
||||||
|
import PaginationLoader from './PaginationLoader'
|
||||||
|
|
||||||
|
describe('PaginationLoader Component', () => {
|
||||||
|
describe('Basic Rendering', () => {
|
||||||
|
it('should render ActivityIndicator', () => {
|
||||||
|
const { UNSAFE_root } = render(<PaginationLoader />)
|
||||||
|
expect(UNSAFE_root).toBeTruthy()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render with optional text', () => {
|
||||||
|
const { getByText } = render(<PaginationLoader text="加载更多..." />)
|
||||||
|
expect(getByText('加载更多...')).toBeTruthy()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render without text when not provided', () => {
|
||||||
|
const { queryByText } = render(<PaginationLoader />)
|
||||||
|
expect(queryByText(/./)).toBeNull()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('Theme Support', () => {
|
||||||
|
it('should use default color', () => {
|
||||||
|
const { UNSAFE_root } = render(<PaginationLoader />)
|
||||||
|
expect(UNSAFE_root).toBeTruthy()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should accept custom color', () => {
|
||||||
|
const { UNSAFE_root } = render(<PaginationLoader color="#FF0000" />)
|
||||||
|
expect(UNSAFE_root).toBeTruthy()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('Props', () => {
|
||||||
|
it('should accept testID prop', () => {
|
||||||
|
const { getByTestId } = render(<PaginationLoader testID="pagination-loader" />)
|
||||||
|
expect(getByTestId('pagination-loader')).toBeTruthy()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import React from 'react'
|
||||||
|
import { View, ActivityIndicator, ViewProps } from 'react-native'
|
||||||
|
import Text from './ui/Text'
|
||||||
|
|
||||||
|
interface PaginationLoaderProps extends ViewProps {
|
||||||
|
text?: string
|
||||||
|
color?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PaginationLoader({ text, color = '#F5F5F5', testID, ...props }: PaginationLoaderProps) {
|
||||||
|
return (
|
||||||
|
<View testID={testID} className="py-4 items-center" {...props}>
|
||||||
|
<ActivityIndicator size="small" color={color} />
|
||||||
|
{text && <Text className="mt-2 text-xs">{text}</Text>}
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue