@uiw/react-native/lib/Pagination/DirText.js

UIW for React Native

import React, { useRef, useState, useEffect } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import Icon from '../Icon';
import Button from '../Button';
export let containerSize;
(function (containerSize) {
  containerSize[containerSize["small"] = 30] = "small";
  containerSize[containerSize["default"] = 36] = "default";
  containerSize[containerSize["large"] = 44] = "large";
})(containerSize || (containerSize = {}));
export let contentSize;
(function (contentSize) {
  contentSize[contentSize["small"] = 12] = "small";
  contentSize[contentSize["default"] = 18] = "default";
  contentSize[contentSize["large"] = 26] = "large";
})(contentSize || (contentSize = {}));
const DirText = props => {
  const {
    size,
    direction,
    disabled,
    icon,
    onPageChange,
    borderColor = '#8d8d8d',
    color
  } = props;
  const dirText = useRef(direction === 'left' ? '上一页' : '下一页').current;
  const [disabledStyle, setDisabledStyle] = useState(1);
  useEffect(() => {
    setDisabledStyle(disabled ? 0.4 : 1);
  }, [disabled]);
  return <View style={[styles.containerStyle, {
    minWidth: containerSize[size],
    borderColor: borderColor,
    backgroundColor: '#fff',
    paddingHorizontal: icon ? 0 : 5,
    opacity: disabled ? disabledStyle : disabledStyle - 0.2
  }]}>
      <Button bordered={false} disabled={disabled} size={props.size} onPress={() => {
      onPageChange(direction === 'left' ? 'prev' : 'next');
    }}>
        {icon ? <Icon name={direction} size={contentSize[size]} color={color || '#3d3d3d'} /> : <Text style={{
        color: color || '#3d3d3d'
      }}>{dirText}</Text>}
      </Button>
    </View>;
};
export const containerStyle = {
  borderStyle: 'solid',
  borderWidth: 1,
  borderRadius: 2,
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center'
};
const styles = StyleSheet.create({
  containerStyle
});
export default DirText;