fix(TextArea): 明暗主题色调整

uiwjs · Apr 8, 2023 · 5ca0434 · 5ca0434
1 parent 44630d3
commit 5ca0434
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 45 deletions.
diff --git a/example/examples/src/routes/DatePicker/index.tsx b/example/examples/src/routes/DatePicker/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {View, Text} from 'react-native';
-import {DatePicker, Button} from '@uiw/react-native';
+import {View} from 'react-native';
+import {DatePicker, Button, Text} from '@uiw/react-native';
 import {ComProps} from '../../routes';
 import Layout, {Container} from '../../Layout';
 const {Header, Body, Footer, Card} = Layout;
@@ -25,7 +25,7 @@ export default class BadgeView extends React.Component<BadgeViewProps> {
             <Card title="基本使用">
               <Button onPress={() => this.setState({visible: true})}>打开</Button>
               <View>
-                <Text>{this.state.formatDate}</Text>
+                <Text color="text">{this.state.formatDate}</Text>
               </View>
               <DatePicker
                 title="请选择日期"

diff --git a/example/examples/src/routes/TextArea/index.tsx b/example/examples/src/routes/TextArea/index.tsx
@@ -1,5 +1,4 @@
 import React, {Component} from 'react';
-import {StyleSheet} from 'react-native';
 import {TextArea} from '@uiw/react-native';
 import Layout, {Container} from '../../Layout';
 import {ComProps} from '../../routes';
@@ -28,7 +27,7 @@ export default class TextAreaView extends Component<TextAreaProps> {
         <Layout>
           <Header title={title} description={description} />
           <Body>
-            <Card title="基础实例" style={styles.card}>
+            <Card title="基础实例">
               <TextArea
                 onChange={(value: string) => {
                   this.setState({value});
@@ -37,7 +36,7 @@ export default class TextAreaView extends Component<TextAreaProps> {
                 placeholder="默认提示语"
               />
             </Card>
-            <Card title="根据内容自动调整高度" style={styles.card}>
+            <Card title="根据内容自动调整高度">
               <TextArea
                 onChange={(value5: string) => {
                   this.setState({value5});
@@ -47,7 +46,7 @@ export default class TextAreaView extends Component<TextAreaProps> {
                 autoSize
               />
             </Card>
-            <Card title="展示字数" style={styles.card}>
+            <Card title="展示字数">
               <TextArea
                 onChange={(value4: string) => {
                   this.setState({value4});
@@ -57,7 +56,7 @@ export default class TextAreaView extends Component<TextAreaProps> {
                 placeholder="默认展示字数"
               />
             </Card>
-            <Card title="只读状态" style={styles.card}>
+            <Card title="只读状态">
               <TextArea
                 editable={false}
                 onChange={(value1: string) => {
@@ -66,7 +65,7 @@ export default class TextAreaView extends Component<TextAreaProps> {
                 value={this.state.value1}
               />
             </Card>
-            <Card title="允许拖拽" style={styles.card}>
+            <Card title="允许拖拽">
               <TextArea
                 showWords={true}
                 onChange={(value6: string) => {
@@ -76,7 +75,7 @@ export default class TextAreaView extends Component<TextAreaProps> {
                 draggable
               />
             </Card>
-            <Card title="自定义输入框样式" style={styles.card}>
+            <Card title="自定义输入框样式">
               <TextArea
                 height={150}
                 style={{
@@ -101,9 +100,3 @@ export default class TextAreaView extends Component<TextAreaProps> {
     );
   }
 }
-
-const styles = StyleSheet.create({
-  card: {
-    backgroundColor: '#fff',
-  },
-});
diff --git a/packages/core/src/TextArea/index.tsx b/packages/core/src/TextArea/index.tsx
@@ -1,10 +1,7 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   StyleSheet,
-  TouchableOpacity,
   ViewProps,
-  ViewStyle,
-  Dimensions,
   View,
   StyleProp,
   Text,
@@ -16,6 +13,8 @@ import {
   PanResponder,
   PanResponderInstance,
 } from 'react-native';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 export interface TextAreaProps extends ViewProps {
   /** 文本位置 */
@@ -49,11 +48,12 @@ export interface TextAreaProps extends ViewProps {
 }
 
 function TextArea(props: TextAreaProps) {
+  const theme = useTheme<Theme>();
   const {
     draggable = false,
     textAlignVertical = 'top',
     placeholder = '',
-    placeholderTextColor = '#989FB2',
+    placeholderTextColor = theme.colors.gray200 || '#989FB2',
     numberOfLines = 30,
     onChange,
     maxLength = 50,
@@ -67,6 +67,12 @@ function TextArea(props: TextAreaProps) {
     ...other
   } = props;
 
+  const styles = createStyles({
+    backgroundColor: theme.colors.mask,
+    borderColor: theme.colors.border,
+    color: theme.colors.text,
+  });
+
   const [defaultText, setDefaultText] = useState<string>('');
   const [height, setHeight] = useState<number>(defaultHeight);
   const [panResponder, setPanResponder] = useState<PanResponderInstance | undefined>();
@@ -125,28 +131,30 @@ function TextArea(props: TextAreaProps) {
   );
 }
 
-const styles = StyleSheet.create({
-  viewBody: {
-    marginHorizontal: 10,
-    borderColor: 'gray',
-    borderWidth: 0.2,
-    borderRadius: 2,
-    color: 'black',
-    backgroundColor: '#fff',
-  },
-  bodyLayout: {
-    padding: 10,
-  },
-  TextInput: {
-    backgroundColor: 'transparent',
-    borderWidth: 0,
-    fontSize: 16,
-  },
-  textWords: {
-    padding: 0,
-    color: 'gray',
-    textAlign: 'right',
-  },
-});
+function createStyles({ backgroundColor = '#fff', borderColor = 'gray', color = '#000' }) {
+  return StyleSheet.create({
+    viewBody: {
+      marginHorizontal: 10,
+      borderColor: borderColor,
+      borderWidth: 0.2,
+      borderRadius: 2,
+      backgroundColor: backgroundColor,
+    },
+    bodyLayout: {
+      padding: 10,
+    },
+    TextInput: {
+      backgroundColor: 'transparent',
+      borderWidth: 0,
+      fontSize: 16,
+      color: color,
+    },
+    textWords: {
+      padding: 0,
+      color: color,
+      textAlign: 'right',
+    },
+  });
+}
 
 export default TextArea;
diff --git a/packages/core/src/Typography/Text.tsx b/packages/core/src/Typography/Text.tsx
@@ -1,4 +1,4 @@
-import { TextProps as RNTextProps, Text as BaseText, ColorValue } from 'react-native';
+import { TextProps as RNTextProps, Text as BaseText } from 'react-native';
 import { Theme } from '../theme';
 import { useTheme } from '@shopify/restyle';
 import { isEmpty } from 'lodash';