Skip to content

Commit c8e764a

Browse files
cuilanxincuilanxin
authored
feat(Pagination): Add new component. (#211)
* 编写选项卡组件 * 类型名称请调整，添加组件文档在网站上展示 * #162修复报错 * fix:#162修复报错 * SpeedDial 悬浮标记 * 优化类型 * feat(ActionSheet): Add new component. * fix: ActionSheet 实例优化，组件优化 * feat(SearchInputBar): Add new component. * feat(Pagination): Add new component.
1 parent 6d2f960 commit c8e764a

File tree

10 files changed

+350
-1
lines changed

10 files changed

+350
-1
lines changed

‎example/examples/src/routes.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -419,4 +419,12 @@ export const stackPageData: Routes[] = [
419419
description: '可用于用户输入搜索信息',
420420
},
421421
},
422+
{
423+
name: 'Pagination',
424+
component: require('./routes/Pagination').default,
425+
params: {
426+
title: 'Pagination 分页器',
427+
description: '用于展示页码、请求数据等。',
428+
},
429+
},
422430
];

‎example/examples/src/routes/Pagination/index.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React, { Component } from 'react';
2+
import { StyleSheet, View, } from 'react-native';
3+
import Layout, { Container } from '../../Layout';
4+
import { Pagination } from '@uiw/react-native';
5+
import { ComProps } from '../../routes';
6+
7+
const { Header, Body, Card, Footer } = Layout;
8+
9+
export interface IndexProps extends ComProps { }
10+
export interface IndexState {
11+
current: number,
12+
current1: number
13+
}
14+
15+
export default class Index extends Component<IndexProps, IndexState> {
16+
static state: IndexState;
17+
constructor(props: IndexProps) {
18+
super(props);
19+
this.state = {
20+
current: 1,
21+
current1: 1,
22+
};
23+
}
24+
25+
render() {
26+
const { route } = this.props;
27+
const description = route.params.description;
28+
const title = route.params.title;
29+
return (
30+
<Container>
31+
<Layout>
32+
<Header title={title} description={description} />
33+
<Body style={{ backgroundColor: '#fff' }}>
34+
<Card title="使用文字">
35+
<View style={{ paddingHorizontal: 20 }}>
36+
<Pagination
37+
current={this.state.current}
38+
total={60}
39+
pageSize={8}
40+
onPageChange={(type, current) => {
41+
this.setState({ current })
42+
}}
43+
/>
44+
</View>
45+
</Card>
46+
<Card title="使用icon">
47+
<View style={{ paddingHorizontal: 20 }}>
48+
<Pagination
49+
icon
50+
current={this.state.current1}
51+
total={50}
52+
pageSize={20}
53+
onPageChange={(type, current1) => {
54+
this.setState({ current1 })
55+
}}
56+
/>
57+
</View>
58+
</Card>
59+
</Body>
60+
<Footer />
61+
</Layout>
62+
</Container>
63+
);
64+
}
65+
}
66+
67+
const styles = StyleSheet.create({
68+
card: {
69+
backgroundColor: '#fff',
70+
paddingLeft: 20,
71+
paddingRight: 20,
72+
},
73+
divider: {
74+
marginVertical: 10,
75+
},
76+
});

‎packages/core/src/Pagination/DirText.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React, { useRef, useState, useEffect } from 'react';
2+
import { View, ViewStyle, StyleSheet, Text, TouchableOpacity, Modal, ModalProps, Animated } from 'react-native';
3+
import Icon from '../Icon'
4+
import Button from '../Button'
5+
import { size } from './index'
6+
7+
export enum containerSize {
8+
small = 30,
9+
default = 36,
10+
large = 44,
11+
}
12+
export enum contentSize {
13+
small = 12,
14+
default = 18,
15+
large = 26,
16+
}
17+
export interface DirTextProps {
18+
size: size,
19+
direction: 'left' | 'right',
20+
disabled: boolean,
21+
icon: boolean,
22+
onPageChange: (type: 'prev' | 'next')=>void
23+
}
24+
25+
const DirText = (props: DirTextProps) => {
26+
const { size, direction, disabled, icon,onPageChange } = props;
27+
const dirText: '上一页' | '下一页' = useRef<'上一页' | '下一页'>(direction === 'left' ? '上一页' : '下一页').current
28+
const [disabledStyle, setDisabledStyle] = useState<'#d9d9d9' | '#3d3d3d'>('#3d3d3d')
29+
useEffect(() => {
30+
setDisabledStyle(disabled ? '#d9d9d9' : '#3d3d3d')
31+
}, [disabled])
32+
33+
34+
return (
35+
<View style={[styles.containerStyle, { minWidth: containerSize[size], height: containerSize[size], paddingHorizontal: icon ? 0 : 5 }]}>
36+
<Button bordered={false} disabled={disabled} onPress={()=>{
37+
onPageChange(direction==='left'?'prev':'next')
38+
}}>
39+
{icon ? <Icon name={direction} size={contentSize[size]} color={disabledStyle} /> : <Text style={{ fontSize: contentSize[size], color: disabledStyle }}>
40+
{dirText}
41+
</Text>}
42+
</Button>
43+
</View>
44+
);
45+
}
46+
47+
export const containerStyle: ViewStyle = {
48+
borderStyle: 'solid',
49+
borderWidth: 1,
50+
borderColor: '#d9d9d9',
51+
borderRadius: 2,
52+
display: 'flex',
53+
flexDirection: 'row',
54+
justifyContent: 'center',
55+
alignItems: 'center',
56+
}
57+
const styles = StyleSheet.create({
58+
containerStyle,
59+
});
60+
export default DirText

‎packages/core/src/Pagination/Page.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import { View, StyleSheet, Text } from 'react-native';
3+
import { containerStyle, containerSize, contentSize } from './DirText'
4+
import { size } from './index'
5+
import Button from '../Button'
6+
7+
export interface PageProps {
8+
size: size,
9+
current: number,
10+
currentColor?: string,
11+
totalPage: number
12+
}
13+
14+
const Page = (props: PageProps) => {
15+
const { size, currentColor, current, totalPage } = props
16+
const textSize = size === 'small' ? 1 : 2
17+
18+
return (
19+
<View style={[styles.containerStyle, { minWidth: containerSize[size], height: containerSize[size], borderWidth: 0,flexShrink: 0 }]}>
20+
<Button bordered={false}>
21+
<Text style={{color: currentColor??'#46a6ff', fontSize: contentSize[size], lineHeight: contentSize[size] + textSize }}>{current}</Text>
22+
<Text style={{color: currentColor??'#46a6ff', fontSize: contentSize[size]-1, lineHeight: contentSize[size]-textSize }}>/</Text>
23+
<Text style={{color: '#3d3d3d',fontSize: contentSize[size], lineHeight: contentSize[size] + textSize }}>{totalPage}</Text>
24+
</Button>
25+
</View>
26+
);
27+
}
28+
29+
30+
const styles = StyleSheet.create({
31+
containerStyle
32+
});
33+
export default Page

‎packages/core/src/Pagination/README.md‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
Pagination 分页器
2+
---
3+
4+
用于展示页码、请求数据等。
5+
6+
## 基础示例
7+
8+
```jsx
9+
import { Fragment, useState } from 'react';
10+
import { Pagination } from '@uiw/react-native';
11+
function Demo() {
12+
const [current, setCurrent] = useState(false)
13+
return (
14+
<Fragment>
15+
<Pagination
16+
current={current}
17+
total={60}
18+
pageSize={8}
19+
onPageChange={(type, current) => {
20+
setCurrent(current)
21+
console.log('type, current: ', type, current);
22+
}}
23+
/>
24+
</Fragment>
25+
);
26+
}
27+
```
28+
29+
## 使用icon && 修改大小
30+
31+
```jsx
32+
import { Fragment, useState } from 'react';
33+
import { Pagination } from '@uiw/react-native';
34+
function Demo() {
35+
const [current, setCurrent] = useState(false)
36+
return (
37+
<Fragment>
38+
<Pagination
39+
icon
40+
size='large'
41+
current={current}
42+
total={60}
43+
pageSize={8}
44+
onPageChange={(type, current) => {
45+
setCurrent(current)
46+
console.log('type, current: ', type, current);
47+
}}
48+
/>
49+
</Fragment>
50+
);
51+
}
52+
```
53+
54+
## Props
55+
56+
```ts
57+
export interface PaginationProps {
58+
/** 尺寸 */
59+
size?: 'small' | 'default' | 'large';
60+
/** 当前页 */
61+
current?: number,
62+
/** 当前页的颜色 */
63+
currentColor?: string
64+
/** 数据总量 */
65+
total: number,
66+
/** 每页数据量 */
67+
pageSize?: number,
68+
/** 是否以 icon 形式展示按钮 */
69+
icon?: boolean,
70+
/** 点击页码按钮时触发 */
71+
onPageChange?: (type: 'prev' | 'next', current: number) => void,
72+
}
73+
```

‎packages/core/src/Pagination/index.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React, { useState, useEffect } from 'react';
2+
import { View, StyleSheet, } from 'react-native';
3+
import DirText from './DirText'
4+
import Page from './Page'
5+
6+
export type size = 'small' | 'default' | 'large';
7+
8+
export interface PaginationProps {
9+
/** 尺寸 */
10+
size?: size;
11+
/** 当前页 */
12+
current?: number,
13+
/** 当前页的颜色 */
14+
currentColor?: string
15+
/** 数据总量 */
16+
total: number,
17+
/** 每页数据量 */
18+
pageSize?: number,
19+
/** 是否以 icon 形式展示按钮 */
20+
icon?: boolean,
21+
/** 点击页码按钮时触发 */
22+
onPageChange?: (type: 'prev' | 'next', current: number) => void,
23+
}
24+
25+
26+
const Pagination = (props: PaginationProps) => {
27+
const { size = 'default', icon = false, currentColor, total, pageSize = 10 } = props
28+
const [current, setCurrent] = useState<number>(1)
29+
useEffect(() => {
30+
setCurrent(props.current || 1)
31+
}, [props.current])
32+
/** 页码 */
33+
const onPageChange = (type: 'prev' | 'next',) => {
34+
if (current === 1 && type === 'prev') {
35+
return false
36+
}
37+
if (current === Math.ceil(total / pageSize) && type === 'next') {
38+
return false
39+
}
40+
const present: number = type === 'prev' ? current - 1 : current + 1
41+
if(typeof props.onPageChange === 'function') {
42+
props.onPageChange(type, present)
43+
}else {
44+
setCurrent(present)
45+
}
46+
}
47+
48+
return (
49+
<View style={styles.pagination}>
50+
<DirText
51+
size={size}
52+
direction='left'
53+
disabled={current === 1}
54+
icon={icon}
55+
onPageChange={onPageChange}
56+
/>
57+
<Page
58+
size={size}
59+
current={current}
60+
totalPage={Math.ceil(total / pageSize)}
61+
currentColor={currentColor}
62+
/>
63+
<DirText
64+
onPageChange={onPageChange}
65+
size={size}
66+
direction='right'
67+
disabled={current === Math.ceil(total / pageSize)}
68+
icon={icon}
69+
/>
70+
</View>
71+
);
72+
}
73+
74+
75+
const styles = StyleSheet.create({
76+
pagination: {
77+
display: 'flex',
78+
justifyContent: 'space-between',
79+
alignItems: 'center',
80+
flexDirection: 'row',
81+
}
82+
});
83+
export default Pagination

‎packages/core/src/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,8 @@ export { default as ActionSheet } from './ActionSheet';
9999
export * from './ActionSheet';
100100
export { default as SearchInputBar } from './SearchInputBar';
101101
export * from './SearchInputBar';
102-
102+
export { default as Pagination } from './Pagination';
103+
export * from './Pagination';
103104

104105
/**
105106
* Typography

‎website/src/pages/components/pagination/index.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Markdown, { importAll } from '../../../component/Markdown';
2+
3+
export default class Page extends Markdown {
4+
path = '/packages/core/src/Pagination/README.md';
5+
getMarkdown = async () => {
6+
const md = await import('@uiw/react-native/lib/Pagination/README.md');
7+
// 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
8+
importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
9+
return md.default || md;
10+
};
11+
}

‎website/src/routes/menus.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export const componentMenus: MenuData[] = [
5656
{ path: '/components/tooltip', name: 'Tooltip 工具提示' },
5757
{ path: '/components/actionSheet', name: 'ActionSheet 动作面板' },
5858
{ path: '/components/search-input-bar', name: 'SearchInputBar 搜索栏' },
59+
{ path: '/components/pagination', name: 'Pagination 分页器' },
5960
{ divider: true, name: '其它' },
6061
{ href: 'https://github.com/uiwjs/react-native-alipay', name: 'Alipay 支付宝', target: '__blank' },
6162
{

‎website/src/routes/router.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,4 +217,7 @@ export const getRouterData = {
217217
'/components/search-input-bar': {
218218
component: dynamicWrapper([], () => import('../pages/components/search-input-bar')),
219219
},
220+
'/components/pagination': {
221+
component: dynamicWrapper([], () => import('../pages/components/pagination')),
222+
},
220223
};

0 commit comments

Comments
 (0)