feat(Pagination): 增加页码跳转功能 & 更新文档 (#319)

Amber-Nan · 杨楠 · web-flow · commit 00428b9cd9b0 · 2021-11-03T10:40:20.000+08:00
* fix:发布 iOS 应用商店:一. 创建AppID * fix:发布 iOS 应用商店优化排版 * fix:ios应用商店文档更新及排版优化 * fix:修改环境安装文档语法错误及部分内容优化 * fix:更新ios应用发布流程 * fix:ios应用商店发布更新 * fix:更新ios及安卓应用商店发布 * fix:安卓上架更新 * fix:增加button自定义文本实例 * fix:增加checkBox复选框size调整及文档描述效果展示 * doc:更新文档导入图片 * doc(website): Update Readme.md * fix:修复SpeedDial Android 点击事件失效及拖拽失效问题 #286 * fix:解决SelectCascader 在安卓端不能选择问题 #289 * fix:修复Modal 弹出动画底层延迟收起问题 * feat:NoticeBar 通告栏增加文字样式修改及页面demo展示 * doc(website): Update NoticeBar Readme.md * fix:解决 MenuDropdown 安卓下拉菜单被遮挡问题 * feat:Progress 新增进度图标 * doc(website): Update Progress Readme.md * style:删除多余代码 * feat:Progress 增加进度提示字展示 及 doc(website): Update Progress Readme.md * feat:Ellipsis 增加弹出展示全部文本内容 * fix:解决 Ellipsis 报错问题 * style:Update local code * fix:解决 NoticeBar首次渲染报错问题 * fix:SwipeAction 增加key * doc(website): Update Readme.md * doc(website): Update Readme.md * feat:Pagination 增加页码跳转功能 * feat:Pagination 增加页码跳转功能 及 doc(website): Update Pagination Readme.md Co-authored-by: 杨楠 <yangnan@nihaosi.com>
diff --git a/example/examples/src/routes/Pagination/index.tsx b/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
diff --git a/packages/core/src/Pagination/MoreDir.tsx b/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;
diff --git a/packages/core/src/Pagination/README.md b/packages/core/src/Pagination/README.md
@@ -3,7 +3,7 @@ Pagination 分页器
 
 用于展示页码、请求数据等。
 
-<img src='https://user-images.githubusercontent.com/66067296/139399708-239e65f9-565e-4be2-9497-c8e5b836cef6.png' alt='Pagination' style='zoom:33%;' />
+<img src='https://user-images.githubusercontent.com/66067296/140001996-ff0fe66c-0482-4576-9f19-11be3a6b7ada.png' alt='Pagination' style='zoom:33%;' />
 
 ### 基础示例
 
@@ -43,6 +43,31 @@ function Demo() {
         current={current}
         total={60}
         pageSize={8}
+        jumpBtn={true}
+        onPageChange={(type, current) => {
+          setCurrent(current)
+          console.log('type, current: ', type, current);
+        }}
+      />
+    </Fragment>
+  );
+}
+```
+
+### 页码跳转
+
+```jsx
+import { Fragment, useState } from 'react';
+import { Pagination } from '@uiw/react-native';
+function Demo() {
+  const [current, setCurrent] = useState(false)
+  return (
+    <Fragment>
+      <Pagination
+        current={current}
+        total={60}
+        pageSize={8}
+        jumpBtn={true}
         onPageChange={(type, current) => {
           setCurrent(current)
           console.log('type, current: ', type, current);
@@ -79,5 +104,7 @@ export interface PaginationProps {
   borderColor?: string
   /** 按钮中的颜色 */
   color?: string
+  /** 页码跳转 */
+  jumpBtn?: boolean;
 }
 ```
diff --git a/packages/core/src/Pagination/index.tsx b/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>
   );
 };
