@td-design/react-native/lib/module/pagination/index.js

react-native UI组件库

import React, { useMemo } from 'react';
import Flex from '../flex';
import Pressable from '../pressable';
import Text from '../text';
import usePagination from './usePagination';
const Pagination = _ref => {
  let {
    page = 1,
    pageSize = 10,
    total,
    onChange,
    prevButtonText = '上一页',
    nextButtonText = '下一页',
    prevButtonRender,
    nextButtonRender,
    counterRender,
    activeOpacity = 0.6
  } = _ref;
  const {
    current,
    prev,
    next,
    totalPage,
    isFirstPage,
    isLastPage
  } = usePagination({
    page,
    pageSize,
    total,
    onChange
  });

  /** 渲染上一页按钮 */
  const PrevBtn = useMemo(() => {
    if (prevButtonRender) {
      return prevButtonRender(isFirstPage);
    }
    return /*#__PURE__*/React.createElement(Text, {
      variant: "p1",
      color: isFirstPage ? 'disabled' : 'text'
    }, prevButtonText);
  }, [isFirstPage, prevButtonRender, prevButtonText]);

  /** 渲染当前页 */
  const Current = useMemo(() => {
    if (counterRender) {
      return counterRender(current, totalPage);
    }
    return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Text, {
      variant: "p1",
      color: "primary200"
    }, current), /*#__PURE__*/React.createElement(Text, {
      variant: "p1",
      color: "text"
    }, ' ', "/ ", totalPage));
  }, [counterRender, current, totalPage]);

  /** 渲染下一页按钮 */
  const NextBtn = useMemo(() => {
    if (nextButtonRender) {
      return nextButtonRender(isLastPage);
    }
    return /*#__PURE__*/React.createElement(Text, {
      variant: "p1",
      color: isLastPage ? 'disabled' : 'text'
    }, nextButtonText);
  }, [isLastPage, nextButtonRender, nextButtonText]);
  return /*#__PURE__*/React.createElement(Flex, {
    flexDirection: "row",
    justifyContent: "space-between"
  }, /*#__PURE__*/React.createElement(Pressable, {
    activeOpacity: activeOpacity,
    disabled: isFirstPage,
    onPress: prev
  }, PrevBtn), Current, /*#__PURE__*/React.createElement(Pressable, {
    disabled: isLastPage,
    activeOpacity: activeOpacity,
    onPress: next
  }, NextBtn));
};
Pagination.displayName = 'Pagination';
export default Pagination;
//# sourceMappingURL=index.js.map