chore(Pagination): Add renderPages, onCurrent, borderColor, color of Pagination

cuilanxin · cuilanxin · commit bc75ea95dd28 · 2021-10-17T21:44:14.000+08:00
diff --git a/example/examples/src/routes/Pagination/index.tsx b/example/examples/src/routes/Pagination/index.tsx
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, View, Text} from 'react-native';
 import Layout, {Container} from '../../Layout';
 import {Pagination} from '@uiw/react-native';
 import {ComProps} from '../../routes';
@@ -47,6 +47,8 @@ export default class Index extends Component<IndexProps, IndexState> {
               <View style={{paddingHorizontal: 20}}>
                 <Pagination
                   icon
+                  borderColor="red"
+                  color="red"
                   current={this.state.current1}
                   total={50}
                   pageSize={20}
diff --git a/packages/core/src/Pagination/DirText.tsx b/packages/core/src/Pagination/DirText.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { View, ViewStyle, StyleSheet, Text, TouchableOpacity, Modal, ModalProps, Animated } from 'react-native';
+import { View, ViewStyle, StyleSheet, Text } from 'react-native';
 import Icon from '../Icon';
 import Button from '../Button';
 import { size } from './index';
@@ -20,18 +20,29 @@ export interface DirTextProps {
   disabled: boolean;
   icon: boolean;
   onPageChange: (type: 'prev' | 'next') => void;
+  borderColor?: string;
+  color?: string;
 }
 
 const DirText = (props: DirTextProps) => {
-  const { size, direction, disabled, icon, onPageChange } = props;
+  const { size, direction, disabled, icon, onPageChange, borderColor = '#8d8d8d', color } = props;
   const dirText: '上一页' | '下一页' = useRef<'上一页' | '下一页'>(direction === 'left' ? '上一页' : '下一页').current;
-  const [disabledStyle, setDisabledStyle] = useState<'#d9d9d9' | '#3d3d3d'>('#3d3d3d');
+  const [disabledStyle, setDisabledStyle] = useState(1);
   useEffect(() => {
-    setDisabledStyle(disabled ? '#d9d9d9' : '#3d3d3d');
+    setDisabledStyle(disabled ? 0.4 : 1);
   }, [disabled]);
-
   return (
-    <View style={[styles.containerStyle, { minWidth: containerSize[size], paddingHorizontal: icon ? 0 : 5 }]}>
+    <View
+      style={[
+        styles.containerStyle,
+        {
+          minWidth: containerSize[size],
+          borderColor: borderColor,
+          paddingHorizontal: icon ? 0 : 5,
+          opacity: disabled ? disabledStyle : disabledStyle - 0.2,
+        },
+      ]}
+    >
       <Button
         bordered={false}
         disabled={disabled}
@@ -41,9 +52,9 @@ const DirText = (props: DirTextProps) => {
         }}
       >
         {icon ? (
-          <Icon name={direction} size={contentSize[size]} color={disabledStyle} />
+          <Icon name={direction} size={contentSize[size]} color={color || '#3d3d3d'} />
         ) : (
-          <Text style={{ color: disabledStyle }}>{dirText}</Text>
+          <Text style={{ color: color || '#3d3d3d' }}>{dirText}</Text>
         )}
       </Button>
     </View>
@@ -53,7 +64,6 @@ const DirText = (props: DirTextProps) => {
 export const containerStyle: ViewStyle = {
   borderStyle: 'solid',
   borderWidth: 1,
-  borderColor: '#d9d9d9',
   borderRadius: 2,
   display: 'flex',
   flexDirection: 'row',
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 } from 'react-native';
+import { View, StyleSheet, Text, TouchableHighlight } from 'react-native';
 import { containerStyle, containerSize, contentSize } from './DirText';
 import { size } from './index';
 import Button from '../Button';
@@ -9,12 +9,20 @@ export interface PageProps {
   current: number;
   currentColor?: string;
   totalPage: number;
+  renderPages?: (current: number, totalPage: number) => React.ReactNode;
+  onCurrent?: (current: number, totalPage?: number) => unknown;
 }
 
 const Page = (props: PageProps) => {
-  const { size, currentColor, current, totalPage } = props;
+  const { size, currentColor, current, totalPage, renderPages, onCurrent } = props;
   const textSize = size === 'small' ? 1 : 2;
-
+  if (renderPages) {
+    return (
+      <TouchableHighlight activeOpacity={1} underlayColor="#f1f1f1" onPress={() => onCurrent?.(current)}>
+        {renderPages(current, totalPage)}
+      </TouchableHighlight>
+    );
+  }
   return (
     <View
       style={[
diff --git a/packages/core/src/Pagination/README.md b/packages/core/src/Pagination/README.md
@@ -56,18 +56,26 @@ function Demo() {
 ```ts
 export interface PaginationProps {
   /** 尺寸 */
-  size?: 'small' | 'default' | 'large';
+  size?: size;
   /** 当前页	 */
-  current?: number,
+  current?: number;
   /** 当前页的颜色 */
-  currentColor?: string
-  /** 数据总量	 */
-  total: number,
+  currentColor?: string;
+  /** 自定义当前页与总页数元素 */
+  renderPages?: (current: number,totalPage: number)=>React.ReactNode;
+  /** 点击当前页触发 */
+  onCurrent?: (current: number,totalPage?: number)=>unknown;
+  /** 数据总量 */
+  total: number;
   /** 每页数据量	 */
-  pageSize?: number,
+  pageSize?: number;
   /** 是否以 icon 形式展示按钮 */
-  icon?: boolean,
+  icon?: boolean;
   /** 点击页码按钮时触发 */
-  onPageChange?: (type: 'prev' | 'next', current: number) => void,
+  onPageChange?: (type: 'prev' | 'next', current: number) => void;
+  /** 边框颜色 */
+  borderColor?: string
+  /** 按钮中的颜色 */
+  color?: string
 }
 ```
diff --git a/packages/core/src/Pagination/index.tsx b/packages/core/src/Pagination/index.tsx
@@ -12,18 +12,36 @@ export interface PaginationProps {
   current?: number;
   /** 当前页的颜色 */
   currentColor?: string;
-  /** 数据总量	 */
+  /** 自定义当前页与总页数元素 */
+  renderPages?: (current: number, totalPage: number) => React.ReactNode;
+  /** 点击当前页触发 */
+  onCurrent?: (current: number, totalPage?: number) => unknown;
+  /** 数据总量 */
   total: number;
   /** 每页数据量	 */
   pageSize?: number;
   /** 是否以 icon 形式展示按钮 */
   icon?: boolean;
   /** 点击页码按钮时触发 */
   onPageChange?: (type: 'prev' | 'next', current: number) => void;
+  /** 边框颜色 */
+  borderColor?: string;
+  /** 按钮中的颜色 */
+  color?: string;
 }
 
 const Pagination = (props: PaginationProps) => {
-  const { size = 'default', icon = false, currentColor, total, pageSize = 10 } = props;
+  const {
+    size = 'default',
+    icon = false,
+    currentColor,
+    total,
+    pageSize = 10,
+    borderColor,
+    color,
+    renderPages,
+    onCurrent,
+  } = props;
   const [current, setCurrent] = useState<number>(1);
   useEffect(() => {
     setCurrent(props.current || 1);
@@ -46,14 +64,31 @@ const Pagination = (props: PaginationProps) => {
 
   return (
     <View style={styles.pagination}>
-      <DirText size={size} direction="left" disabled={current === 1} icon={icon} onPageChange={onPageChange} />
-      <Page size={size} current={current} totalPage={Math.ceil(total / pageSize)} currentColor={currentColor} />
+      <DirText
+        size={size}
+        direction="left"
+        disabled={current === 1}
+        icon={icon}
+        onPageChange={onPageChange}
+        borderColor={borderColor}
+        color={color}
+      />
+      <Page
+        renderPages={renderPages}
+        onCurrent={onCurrent}
+        size={size}
+        current={current}
+        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>
   );
