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

UIW for React Native

import React, { useRef, useState, useEffect } from 'react';
import { View, StyleSheet, useColorScheme } from 'react-native';
import Icon from '../Icon';
import Button from '../Button';
import { useTheme } from '@shopify/restyle';
import Text from '../Typography/Text';
export let containerSize = /*#__PURE__*/function (containerSize) {
  containerSize[containerSize["small"] = 30] = "small";
  containerSize[containerSize["default"] = 36] = "default";
  containerSize[containerSize["large"] = 44] = "large";
  return containerSize;
}({});
export let contentSize = /*#__PURE__*/function (contentSize) {
  contentSize[contentSize["small"] = 12] = "small";
  contentSize[contentSize["default"] = 18] = "default";
  contentSize[contentSize["large"] = 26] = "large";
  return contentSize;
}({});
const DirText = props => {
  const theme = useTheme();
  const colorScheme = useColorScheme();
  const {
    size,
    direction,
    disabled,
    icon,
    onPageChange,
    // borderColor = theme.colors.gray300 || '#8d8d8d',
    color
  } = props;
  const dirText = useRef(direction === 'left' ? '上一页' : '下一页').current;
  const [disabledStyle, setDisabledStyle] = useState(1);
  useEffect(() => {
    setDisabledStyle(disabled ? 0.4 : 1);
  }, [disabled]);
  const textColor = colorScheme === 'dark' ? '#ccc' : '#3d3d3d';
  return <View style={[styles.containerStyle, {
    minWidth: containerSize[size],
    // borderColor: borderColor,
    backgroundColor: theme.colors.white || '#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 || textColor} /> : <Text style={{
        color: color || textColor
      }}>{dirText}</Text>}
      </Button>
    </View>;
};
export const containerStyle = {
  borderStyle: 'dashed',
  // borderWidth: 1,
  borderRadius: 6,
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center'
};
const styles = StyleSheet.create({
  containerStyle
});
export default DirText;