feat:Pagination 增加页码跳转功能

Author: 杨楠

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

@@ -43,6 +43,20 @@ export default class Index extends Component<IndexProps, IndexState> {
                 />
               </View>
             </Card>
+            <Card title="使用跳转页码">
+              <View style={{paddingHorizontal: 20}}>
+                <Pagination
+                  icon
+                  jumpBtn={true}
+                  current={this.state.current1}
+                  total={50}
+                  pageSize={20}
+                  onPageChange={(type, current1) => {
+                    this.setState({current1});
+                  }}
+                />
+              </View>
+            </Card>
             <Card title="使用icon">
               <View style={{paddingHorizontal: 20}}>
                 <Pagination

packages/core/src/Pagination/MoreDir.tsx

@@ -0,0 +1,76 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { View, ViewStyle, TextStyle, StyleSheet, Text, TextInput } from 'react-native';
+import Icon from '../Icon';
+import Button from '../Button';
+import { size } from './index';
+import { number } from 'prop-types';
+
+export enum containerSize {
+  small = 30,
+  default = 36,
+  large = 44,
+}
+export enum contentSize {
+  small = 12,
+  default = 18,
+  large = 26,
+}
+export interface MoreDirProps {
+  size: size;
+  borderColor?: string;
+  color?: string;
+  setCurrent: React.Dispatch<React.SetStateAction<number>>;
+  current: number;
+}
+
+const MoreDir = (props: MoreDirProps) => {
+  const { size, borderColor = '#8d8d8d', color, setCurrent, current } = props;
+  const [jumpCurrent, setJumpCurrent] = useState(1);
+
+  return (
+    <View style={styles.containerStyle}>
+      <Text>跳至</Text>
+      <TextInput
+        keyboardType="numeric"
+        onSubmitEditing={() => {
+          setCurrent(Number(jumpCurrent));
+        }}
+        onBlur={() => {
+          setCurrent(Number(jumpCurrent));
+        }}
+        blurOnSubmit={true}
+        onChangeText={(text) => {
+          let textCurrent: number = Number(text);
+          if (textCurrent >= current) {
+            setJumpCurrent(current);
+          } else if (textCurrent < current) {
+            setJumpCurrent(textCurrent);
+          }
+        }}
+        style={styles.inputStyle}
+      />
+      <Text>页</Text>
+    </View>
+  );
+};
+
+export const containerStyle: ViewStyle = {
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginLeft: 5,
+};
+export const inputStyle: ViewStyle | TextStyle = {
+  height: 27,
+  width: 33,
+  borderColor: 'gray',
+  borderWidth: 0.5,
+  textAlign: 'center',
+  padding: 2,
+  marginHorizontal: 3,
+};
+const styles = StyleSheet.create({
+  containerStyle,
+  inputStyle,
+});
+export default MoreDir;

packages/core/src/Pagination/README.md

@@ -28,7 +28,7 @@ function Demo() {
 }
 ```
 
-### 使用icon && 修改大小
+### 使用icon && 修改大小 && 页码跳转
 
 ```jsx
 import { Fragment, useState } from 'react';
@@ -43,6 +43,7 @@ function Demo() {
         current={current}
         total={60}
         pageSize={8}
+        jumpBtn={true}
         onPageChange={(type, current) => {
           setCurrent(current)
           console.log('type, current: ', type, current);
@@ -79,5 +80,7 @@ export interface PaginationProps {
   borderColor?: string
   /** 按钮中的颜色 */
   color?: string
+  /** 页码跳转 */
+  jumpBtn?: boolean;
 }
 ```

packages/core/src/Pagination/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { View, StyleSheet } from 'react-native';
 import DirText from './DirText';
+import MoreDir from './MoreDir';
 import Page from './Page';
 
 export type size = 'small' | 'default' | 'large';
@@ -28,12 +29,15 @@ export interface PaginationProps {
   borderColor?: string;
   /** 按钮中的颜色 */
   color?: string;
+  /** 页码跳转 */
+  jumpBtn?: boolean;
 }
 
 const Pagination = (props: PaginationProps) => {
   const {
     size = 'default',
     icon = false,
+    jumpBtn = false,
     currentColor,
     total,
     pageSize = 10,
@@ -81,15 +85,26 @@ const Pagination = (props: PaginationProps) => {
         totalPage={Math.ceil(total / pageSize)}
         currentColor={currentColor}
       />
-      <DirText
-        onPageChange={onPageChange}
-        size={size}
-        direction="right"
-        disabled={current === Math.ceil(total / pageSize)}
-        icon={icon}
-        borderColor={borderColor}
-        color={color}
-      />
+      <View style={{ flexDirection: 'row' }}>
+        <DirText
+          onPageChange={onPageChange}
+          size={size}
+          direction="right"
+          disabled={current === Math.ceil(total / pageSize)}
+          icon={icon}
+          borderColor={borderColor}
+          color={color}
+        />
+        {jumpBtn === true && (
+          <MoreDir
+            setCurrent={setCurrent}
+            size={size}
+            current={Math.ceil(total / pageSize)}
+            borderColor={borderColor}
+            color={color}
+          />
+        )}
+      </View>
     </View>
   );
 };