Merge pull request #321 from Amber-Nan/master

cuilanxin · web-flow · commit b0366c089ba4 · 2021-11-04T09:21:17.000+08:00
feat(Pagination): 增加简洁版本 &amp; 更新文档
diff --git a/example/examples/src/routes/Pagination/index.tsx b/example/examples/src/routes/Pagination/index.tsx
@@ -19,6 +19,7 @@ export default class Index extends Component<IndexProps, IndexState> {
     this.state = {
       current: 1,
       current1: 1,
+      current2: 2,
     };
   }
 
@@ -31,18 +32,6 @@ export default class Index extends Component<IndexProps, IndexState> {
         <Layout>
           <Header title={title} description={description} />
           <Body style={{backgroundColor: '#fff'}}>
-            <Card title="使用文字">
-              <View style={{paddingHorizontal: 20}}>
-                <Pagination
-                  current={this.state.current}
-                  total={60}
-                  pageSize={8}
-                  onPageChange={(type, current) => {
-                    this.setState({current});
-                  }}
-                />
-              </View>
-            </Card>
             <Card title="使用跳转页码">
               <View style={{paddingHorizontal: 20}}>
                 <Pagination
@@ -57,6 +46,32 @@ export default class Index extends Component<IndexProps, IndexState> {
                 />
               </View>
             </Card>
+            <Card title="简单跳转">
+              <View style={{paddingHorizontal: 20}}>
+                <Pagination
+                  simple
+                  icon
+                  current={this.state.current2}
+                  total={100}
+                  pageSize={10}
+                  onPageChange={(type, current2) => {
+                    this.setState({current2});
+                  }}
+                />
+              </View>
+            </Card>
+            <Card title="使用文字">
+              <View style={{paddingHorizontal: 20}}>
+                <Pagination
+                  current={this.state.current}
+                  total={60}
+                  pageSize={8}
+                  onPageChange={(type, current) => {
+                    this.setState({current});
+                  }}
+                />
+              </View>
+            </Card>
             <Card title="使用icon">
               <View style={{paddingHorizontal: 20}}>
                 <Pagination
diff --git a/packages/core/src/Pagination/Page.tsx b/packages/core/src/Pagination/Page.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { View, StyleSheet, Text, TouchableHighlight } from 'react-native';
+import React, { useState, useEffect } from 'react';
+import { View, ViewStyle, TextStyle, StyleSheet, Text, TouchableHighlight, TextInput } from 'react-native';
 import { containerStyle, containerSize, contentSize } from './DirText';
 import { size } from './index';
 import Button from '../Button';
@@ -11,10 +11,19 @@ export interface PageProps {
   totalPage: number;
   renderPages?: (current: number, totalPage: number) => React.ReactNode;
   onCurrent?: (current: number, totalPage?: number) => unknown;
+  setCurrent: React.Dispatch<React.SetStateAction<number>>;
+  simple?: boolean;
 }
 
 const Page = (props: PageProps) => {
-  const { size, currentColor, current, totalPage, renderPages, onCurrent } = props;
+  const { size, currentColor, current, totalPage, renderPages, onCurrent, setCurrent, simple } = props;
+
+  useEffect(() => {
+    setJumpCurrent(String(current));
+  }, [current]);
+  const [jumpCurrent, setJumpCurrent] = useState('1');
+  const [currentType, setJumpCurrentType] = useState(true);
+
   const textSize = size === 'small' ? 1 : 2;
   if (renderPages) {
     return (
@@ -30,7 +39,35 @@ const Page = (props: PageProps) => {
         { minWidth: containerSize[size], height: containerSize[size], borderWidth: 0, flexShrink: 0 },
       ]}
     >
-      <Button bordered={false}>
+      {simple === true ? (
+        <TextInput
+          keyboardType="number-pad"
+          onBlur={() => {
+            let newJumpCurrent = Number(jumpCurrent);
+            if (newJumpCurrent >= totalPage) {
+              setCurrent(totalPage);
+            } else {
+              setCurrent(newJumpCurrent);
+            }
+          }}
+          onFocus={() => {
+            setJumpCurrent('');
+          }}
+          blurOnSubmit={true}
+          onChangeText={(text) => {
+            setJumpCurrent(text);
+          }}
+          value={jumpCurrent}
+          style={[
+            styles.inputStyle,
+            {
+              color: currentColor ?? '#46a6ff',
+              fontSize: contentSize[size],
+              lineHeight: contentSize[size] + textSize,
+            },
+          ]}
+        />
+      ) : (
         <Text
           style={{
             color: currentColor ?? '#46a6ff',
@@ -40,24 +77,34 @@ const Page = (props: PageProps) => {
         >
           {current}
         </Text>
-        <Text
-          style={{
-            color: currentColor ?? '#46a6ff',
-            fontSize: contentSize[size] - 1,
-            lineHeight: contentSize[size] - textSize,
-          }}
-        >
-          /
-        </Text>
-        <Text style={{ color: '#3d3d3d', fontSize: contentSize[size], lineHeight: contentSize[size] + textSize }}>
-          {totalPage}
-        </Text>
-      </Button>
+      )}
+      <Text
+        style={{
+          color: currentColor ?? '#46a6ff',
+          fontSize: contentSize[size] - 1,
+          lineHeight: contentSize[size] - textSize,
+        }}
+      >
+        /
+      </Text>
+      <Text style={{ color: '#3d3d3d', fontSize: contentSize[size], lineHeight: contentSize[size] + textSize }}>
+        {totalPage}
+      </Text>
     </View>
   );
 };
 
+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 Page;
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/140001996-ff0fe66c-0482-4576-9f19-11be3a6b7ada.png' alt='Pagination' style='zoom:33%;' />
+<img src='https://user-images.githubusercontent.com/66067296/140044665-d27bccd1-24ba-4eaf-949b-89b6dc9f0dad.png' alt='Pagination' style='zoom:33%;' />
 
 ### 基础示例
 
@@ -78,6 +78,30 @@ function Demo() {
 }
 ```
 
+### 简单版本
+
+```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}
+        simple
+        onPageChange={(type, current) => {
+          setCurrent(current)
+          console.log('type, current: ', type, current);
+        }}
+      />
+    </Fragment>
+  );
+}
+```
+
 ### Props
 
 ```ts
@@ -106,5 +130,7 @@ export interface PaginationProps {
   color?: string
   /** 页码跳转 */
   jumpBtn?: boolean;
+    /** 简洁版本 */
+  simple?: boolean;
 }
 ```
diff --git a/packages/core/src/Pagination/index.tsx b/packages/core/src/Pagination/index.tsx
@@ -31,13 +31,16 @@ export interface PaginationProps {
   color?: string;
   /** 页码跳转 */
   jumpBtn?: boolean;
+  /** 简洁版本 */
+  simple?: boolean;
 }
 
 const Pagination = (props: PaginationProps) => {
   const {
     size = 'default',
     icon = false,
     jumpBtn = false,
+    simple = false,
     currentColor,
     total,
     pageSize = 10,
@@ -78,6 +81,8 @@ const Pagination = (props: PaginationProps) => {
         color={color}
       />
       <Page
+        simple={simple}
+        setCurrent={setCurrent}
         renderPages={renderPages}
         onCurrent={onCurrent}
         size={size}
