Merge branch 'dev'

Author: ChenlingasMx

packages/core/src/TextArea/README.md

@@ -193,6 +193,25 @@ function Demo() {
 export default Demo
 ```
 
+### 允许拖拽
+
+```jsx mdx:preview&background=#bebebe29
+import React from 'react';
+import TextArea from '@uiw/react-native/lib/TextArea';
+
+function Demo() {
+  return (
+    <TextArea
+      draggable={true}
+      fontStyle={{ color:'#aaa' }}
+      value={"Hello TextArea \nplease input word"}
+      placeholder='请输入'
+    />
+  )
+}
+export default Demo
+```
+
 ### props
 
 组件继承 [`TextInput`](https://www.react-native.cn/docs/textinput)
@@ -210,3 +229,5 @@ export default Demo
 | `showWords` | 是否展示字数 | `boolean` | `false` |
 | `fontStyle` | 输入框文字样式 | ` StyleProp<TextStyle>` | - |
 | `height` | 输入框高度 | `number` | 0 |
+| `draggable` | 是否允许拖拽 | `boolean` | `false` |
+

packages/core/src/TextArea/index.tsx

@@ -1,5 +1,4 @@
-import { number } from 'prop-types';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import {
   StyleSheet,
   TouchableOpacity,
@@ -14,7 +13,11 @@ import {
   NativeSyntheticEvent,
   TextInputChangeEventData,
   TextInputContentSizeChangeEventData,
+  PanResponder,
+  PanResponderInstance,
+  LayoutChangeEvent,
 } from 'react-native';
+
 import Icon, { IconsName } from '../Icon';
 
 export interface TextAreaProps extends ViewProps {
@@ -42,11 +45,15 @@ export interface TextAreaProps extends ViewProps {
   fontStyle?: StyleProp<TextStyle>;
   /** 自适应内容高度 */
   autoSize?: boolean;
+  /** 初始高度 */
   height?: number;
+  /** 是否允许拖拽 */
+  draggable?: boolean;
 }
 
 function TextArea(props: TextAreaProps) {
   const {
+    draggable = false,
     textAlignVertical = 'top',
     placeholder = '',
     placeholderTextColor = '#989FB2',
@@ -64,7 +71,24 @@ function TextArea(props: TextAreaProps) {
   } = props;
 
   const [defaultText, setDefaultText] = useState<string>('');
-  const [height = 0, setHeight] = useState<number>(defaultHeight);
+  const [height, setHeight] = useState<number>(defaultHeight);
+  const [panResponder, setPanResponder] = useState<PanResponderInstance | undefined>();
+
+  // Create PanResponder for resizing text box
+  useEffect(() => {
+    if (draggable) {
+      const panResponder = PanResponder.create({
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderMove: (_, gestureState) => {
+          const { dy } = gestureState;
+          setHeight(Math.max(height + dy, 35));
+        },
+      });
+      setPanResponder(panResponder);
+    } else {
+      setPanResponder(undefined);
+    }
+  }, [draggable]);
 
   const onChangeValue = (event: NativeSyntheticEvent<TextInputChangeEventData>) => {
     if (autoSize) {
@@ -74,12 +98,12 @@ function TextArea(props: TextAreaProps) {
 
   const onContentSizeChange = (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
     if (autoSize) {
-      setHeight(event.nativeEvent.contentSize.height);
+      setHeight(event.nativeEvent.contentSize.height + 20);
     }
   };
 
   return (
-    <View style={StyleSheet.flatten([styles.viewBody, style])}>
+    <View style={[styles.viewBody, style]} {...panResponder?.panHandlers}>
       <View style={styles.bodyLayout}>
         <TextInput
           style={[styles.TextInput, fontStyle, { height: Math.max(35, height) }]}
@@ -98,15 +122,14 @@ function TextArea(props: TextAreaProps) {
           value={value}
           {...other}
         />
-        {showWords === true && <Text style={[styles.textWords, fontStyle]}>{value.length + '/' + maxLength}</Text>}
+        {showWords && <Text style={[styles.textWords, fontStyle]}>{value.length + '/' + maxLength}</Text>}
       </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   viewBody: {
-    // height: 100,
     marginHorizontal: 10,
     borderColor: 'gray',
     borderWidth: 0.2,
@@ -115,13 +138,12 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
   },
   bodyLayout: {
-    // height: '100%',
-    // flexDirection: 'column',
-    justifyContent: 'space-between',
     padding: 10,
   },
   TextInput: {
-    height: '100%',
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    fontSize: 16,
   },
   textWords: {
     padding: 0,