Skip to content

Commit b0366c0

Browse files
cuilanxincuilanxin
authored
Merge pull request #321 from Amber-Nan/master
feat(Pagination): 增加简洁版本 & 更新文档
2 parents 79bcbfd + ef6277e commit b0366c0

File tree

4 files changed

+123
-30
lines changed

4 files changed

+123
-30
lines changed

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

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default class Index extends Component<IndexProps, IndexState> {
1919
this.state = {
2020
current: 1,
2121
current1: 1,
22+
current2: 2,
2223
};
2324
}
2425

@@ -31,18 +32,6 @@ export default class Index extends Component<IndexProps, IndexState> {
3132
<Layout>
3233
<Header title={title} description={description} />
3334
<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>
4635
<Card title="使用跳转页码">
4736
<View style={{paddingHorizontal: 20}}>
4837
<Pagination
@@ -57,6 +46,32 @@ export default class Index extends Component<IndexProps, IndexState> {
5746
/>
5847
</View>
5948
</Card>
49+
<Card title="简单跳转">
50+
<View style={{paddingHorizontal: 20}}>
51+
<Pagination
52+
simple
53+
icon
54+
current={this.state.current2}
55+
total={100}
56+
pageSize={10}
57+
onPageChange={(type, current2) => {
58+
this.setState({current2});
59+
}}
60+
/>
61+
</View>
62+
</Card>
63+
<Card title="使用文字">
64+
<View style={{paddingHorizontal: 20}}>
65+
<Pagination
66+
current={this.state.current}
67+
total={60}
68+
pageSize={8}
69+
onPageChange={(type, current) => {
70+
this.setState({current});
71+
}}
72+
/>
73+
</View>
74+
</Card>
6075
<Card title="使用icon">
6176
<View style={{paddingHorizontal: 20}}>
6277
<Pagination

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

Lines changed: 64 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from 'react';
2-
import { View, StyleSheet, Text, TouchableHighlight } from 'react-native';
1+
import React, { useState, useEffect } from 'react';
2+
import { View, ViewStyle, TextStyle, StyleSheet, Text, TouchableHighlight, TextInput } from 'react-native';
33
import { containerStyle, containerSize, contentSize } from './DirText';
44
import { size } from './index';
55
import Button from '../Button';
@@ -11,10 +11,19 @@ export interface PageProps {
1111
totalPage: number;
1212
renderPages?: (current: number, totalPage: number) => React.ReactNode;
1313
onCurrent?: (current: number, totalPage?: number) => unknown;
14+
setCurrent: React.Dispatch<React.SetStateAction<number>>;
15+
simple?: boolean;
1416
}
1517

1618
const Page = (props: PageProps) => {
17-
const { size, currentColor, current, totalPage, renderPages, onCurrent } = props;
19+
const { size, currentColor, current, totalPage, renderPages, onCurrent, setCurrent, simple } = props;
20+
21+
useEffect(() => {
22+
setJumpCurrent(String(current));
23+
}, [current]);
24+
const [jumpCurrent, setJumpCurrent] = useState('1');
25+
const [currentType, setJumpCurrentType] = useState(true);
26+
1827
const textSize = size === 'small' ? 1 : 2;
1928
if (renderPages) {
2029
return (
@@ -30,7 +39,35 @@ const Page = (props: PageProps) => {
3039
{ minWidth: containerSize[size], height: containerSize[size], borderWidth: 0, flexShrink: 0 },
3140
]}
3241
>
33-
<Button bordered={false}>
42+
{simple === true ? (
43+
<TextInput
44+
keyboardType="number-pad"
45+
onBlur={() => {
46+
let newJumpCurrent = Number(jumpCurrent);
47+
if (newJumpCurrent >= totalPage) {
48+
setCurrent(totalPage);
49+
} else {
50+
setCurrent(newJumpCurrent);
51+
}
52+
}}
53+
onFocus={() => {
54+
setJumpCurrent('');
55+
}}
56+
blurOnSubmit={true}
57+
onChangeText={(text) => {
58+
setJumpCurrent(text);
59+
}}
60+
value={jumpCurrent}
61+
style={[
62+
styles.inputStyle,
63+
{
64+
color: currentColor ?? '#46a6ff',
65+
fontSize: contentSize[size],
66+
lineHeight: contentSize[size] + textSize,
67+
},
68+
]}
69+
/>
70+
) : (
3471
<Text
3572
style={{
3673
color: currentColor ?? '#46a6ff',
@@ -40,24 +77,34 @@ const Page = (props: PageProps) => {
4077
>
4178
{current}
4279
</Text>
43-
<Text
44-
style={{
45-
color: currentColor ?? '#46a6ff',
46-
fontSize: contentSize[size] - 1,
47-
lineHeight: contentSize[size] - textSize,
48-
}}
49-
>
50-
/
51-
</Text>
52-
<Text style={{ color: '#3d3d3d', fontSize: contentSize[size], lineHeight: contentSize[size] + textSize }}>
53-
{totalPage}
54-
</Text>
55-
</Button>
80+
)}
81+
<Text
82+
style={{
83+
color: currentColor ?? '#46a6ff',
84+
fontSize: contentSize[size] - 1,
85+
lineHeight: contentSize[size] - textSize,
86+
}}
87+
>
88+
/
89+
</Text>
90+
<Text style={{ color: '#3d3d3d', fontSize: contentSize[size], lineHeight: contentSize[size] + textSize }}>
91+
{totalPage}
92+
</Text>
5693
</View>
5794
);
5895
};
5996

97+
export const inputStyle: ViewStyle | TextStyle = {
98+
height: 27,
99+
width: 33,
100+
borderColor: 'gray',
101+
borderWidth: 0.5,
102+
textAlign: 'center',
103+
padding: 2,
104+
marginHorizontal: 3,
105+
};
60106
const styles = StyleSheet.create({
61107
containerStyle,
108+
inputStyle,
62109
});
63110
export default Page;

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

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ Pagination 分页器
33

44
用于展示页码、请求数据等。
55

6-
<img src='https://user-images.githubusercontent.com/66067296/140001996-ff0fe66c-0482-4576-9f19-11be3a6b7ada.png' alt='Pagination' style='zoom:33%;' />
6+
<img src='https://user-images.githubusercontent.com/66067296/140044665-d27bccd1-24ba-4eaf-949b-89b6dc9f0dad.png' alt='Pagination' style='zoom:33%;' />
77

88
### 基础示例
99

@@ -78,6 +78,30 @@ function Demo() {
7878
}
7979
```
8080

81+
### 简单版本
82+
83+
```jsx
84+
import { Fragment, useState } from 'react';
85+
import { Pagination } from '@uiw/react-native';
86+
function Demo() {
87+
const [current, setCurrent] = useState(false)
88+
return (
89+
<Fragment>
90+
<Pagination
91+
current={current}
92+
total={60}
93+
pageSize={8}
94+
simple
95+
onPageChange={(type, current) => {
96+
setCurrent(current)
97+
console.log('type, current: ', type, current);
98+
}}
99+
/>
100+
</Fragment>
101+
);
102+
}
103+
```
104+
81105
### Props
82106

83107
```ts
@@ -106,5 +130,7 @@ export interface PaginationProps {
106130
color?: string
107131
/** 页码跳转 */
108132
jumpBtn?: boolean;
133+
/** 简洁版本 */
134+
simple?: boolean;
109135
}
110136
```

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,16 @@ export interface PaginationProps {
3131
color?: string;
3232
/** 页码跳转 */
3333
jumpBtn?: boolean;
34+
/** 简洁版本 */
35+
simple?: boolean;
3436
}
3537

3638
const Pagination = (props: PaginationProps) => {
3739
const {
3840
size = 'default',
3941
icon = false,
4042
jumpBtn = false,
43+
simple = false,
4144
currentColor,
4245
total,
4346
pageSize = 10,
@@ -78,6 +81,8 @@ const Pagination = (props: PaginationProps) => {
7881
color={color}
7982
/>
8083
<Page
84+
simple={simple}
85+
setCurrent={setCurrent}
8186
renderPages={renderPages}
8287
onCurrent={onCurrent}
8388
size={size}

0 commit comments

Comments
 (0)