1
1
import React , { useRef , useState , useEffect } from 'react' ;
2
- import { View , ViewStyle , StyleSheet , Text } from 'react-native' ;
2
+ import { View , ViewStyle , StyleSheet , useColorScheme } from 'react-native' ;
3
3
import Icon from '../Icon' ;
4
4
import Button from '../Button' ;
5
5
import { size } from './index' ;
6
6
import { Theme } from '../theme' ;
7
7
import { useTheme } from '@shopify/restyle' ;
8
+ import Text from '../Typography/Text' ;
8
9
9
10
export enum containerSize {
10
11
small = 30 ,
@@ -28,28 +29,29 @@ export interface DirTextProps {
28
29
29
30
const DirText = ( props : DirTextProps ) => {
30
31
const theme = useTheme < Theme > ( ) ;
31
-
32
+ const colorScheme = useColorScheme ( ) ;
32
33
const {
33
34
size,
34
35
direction,
35
36
disabled,
36
37
icon,
37
38
onPageChange,
38
- borderColor = theme . colors . gray300 || '#8d8d8d' ,
39
+ // borderColor = theme.colors.gray300 || '#8d8d8d',
39
40
color,
40
41
} = props ;
41
42
const dirText : '上一页' | '下一页' = useRef < '上一页' | '下一页' > ( direction === 'left' ? '上一页' : '下一页' ) . current ;
42
43
const [ disabledStyle , setDisabledStyle ] = useState ( 1 ) ;
43
44
useEffect ( ( ) => {
44
45
setDisabledStyle ( disabled ? 0.4 : 1 ) ;
45
46
} , [ disabled ] ) ;
47
+ const textColor = colorScheme === 'dark' ? '#ccc' : '#3d3d3d' ;
46
48
return (
47
49
< View
48
50
style = { [
49
51
styles . containerStyle ,
50
52
{
51
53
minWidth : containerSize [ size ] ,
52
- borderColor : borderColor ,
54
+ // borderColor: borderColor,
53
55
backgroundColor : theme . colors . white || '#fff' ,
54
56
// paddingHorizontal: icon ? 0 : 5,
55
57
opacity : disabled ? disabledStyle : disabledStyle - 0.2 ,
@@ -65,18 +67,18 @@ const DirText = (props: DirTextProps) => {
65
67
} }
66
68
>
67
69
{ icon ? (
68
- < Icon name = { direction } size = { contentSize [ size ] } color = { color || '#3d3d3d' } />
70
+ < Icon name = { direction } size = { contentSize [ size ] } color = { color || textColor } />
69
71
) : (
70
- < Text style = { { color : color || '#3d3d3d' } } > { dirText } </ Text >
72
+ < Text style = { { color : color || textColor } } > { dirText } </ Text >
71
73
) }
72
74
</ Button >
73
75
</ View >
74
76
) ;
75
77
} ;
76
78
77
79
export const containerStyle : ViewStyle = {
78
- borderStyle : 'solid ' ,
79
- borderWidth : 1 ,
80
+ borderStyle : 'dashed ' ,
81
+ // borderWidth: 1,
80
82
borderRadius : 6 ,
81
83
display : 'flex' ,
82
84
flexDirection : 'row' ,
0 commit comments