ipanel-rnapp-ajb-base 1.0.0

package/app/components/common/CustomTabBar_bak/TabBarInput.js

@@ -0,0 +1,210 @@
+import React, {useState, forwardRef, useRef, useImperativeHandle} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  Platform,
+  KeyboardAvoidingView,
+} from 'react-native';
+import {Icon, Image} from '@rneui/themed';
+
+const INPUT_TYPE = {
+  TEXT: 'text',
+  VOICE: 'voice',
+};
+
+const TabBarInput = forwardRef(
+  (
+    {
+      style,
+      showMoreArea,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onInputTypeChange,
+      onInputFocus,
+      onInputBlur,
+      onInputSubmit,
+      onMoreBtnPress,
+    },
+    ref,
+  ) => {
+    const inputRef = useRef(null);
+    const [inputType, setInputType] = useState(INPUT_TYPE.VOICE);
+    const [inputText, setInputText] = useState('');
+    const [inputAutoFocus, setInputAutoFocus] = useState(false);
+
+    useImperativeHandle(ref, () => {
+      return {
+        blur: () => {
+          inputRef.current?.blur();
+        },
+
+        toggleInputType: () => {
+          handleKeyboardPress();
+        },
+      };
+    });
+
+    const handleKeyboardPress = () => {
+      let type;
+
+      if (inputType === INPUT_TYPE.VOICE) {
+        setInputAutoFocus(true);
+        type = INPUT_TYPE.TEXT;
+      } else {
+        type = INPUT_TYPE.VOICE;
+      }
+      setInputType(type);
+
+      onInputTypeChange(type);
+    };
+    const handleShowMoreArea = () => {
+      onMoreBtnPress();
+    };
+    const handleKeyBoardSubmit = async () => {
+      onInputSubmit(inputText);
+      setInputText('');
+      inputRef.current?.blur();
+      handleKeyboardPress();
+    };
+
+    const textFocusContainerStyle = {
+      backgroundColor: inputType === INPUT_TYPE.VOICE ? 'transparent' : '#fff',
+    };
+    const textFocusKeyboardIconStyle = {
+      width: inputType === INPUT_TYPE.VOICE ? 45 : 60,
+    };
+    const moreBtnRotateStyle = {
+      transform: [
+        {
+          rotateZ: showMoreArea ? '45deg' : '0deg',
+        },
+      ],
+    };
+
+    return (
+      <View
+        onStartShouldSetResponder={evt => true}
+        onMoveShouldSetResponder={evt => true}
+        onResponderGrant={inputType === INPUT_TYPE.VOICE && onResponderGrant}
+        onResponderMove={inputType === INPUT_TYPE.VOICE && onResponderMove}
+        onResponderRelease={
+          inputType === INPUT_TYPE.VOICE && onResponderRelease
+        }
+        style={[styles.container, style]}>
+        <View style={[styles.containerInner, textFocusContainerStyle]}>
+          {inputType === INPUT_TYPE.TEXT && (
+            <TouchableOpacity
+              style={[styles.keyboardIcon, textFocusKeyboardIconStyle]}
+              activeOpacity={0.9}
+              onPressIn={handleKeyboardPress}>
+              <Icon
+                name={
+                  inputType === INPUT_TYPE.TEXT ? 'keyboard-voice' : 'keyboard'
+                }
+                type="material"
+                color="#999"
+                size={30}
+              />
+            </TouchableOpacity>
+          )}
+
+          {inputType === INPUT_TYPE.VOICE ? (
+            <Image
+              source={require('../../../assets/img/audioRecordBar.png')}
+              style={styles.voiceText}
+            />
+          ) : (
+            <>
+              <TextInput
+                ref={inputRef}
+                value={inputText}
+                autoFocus={inputAutoFocus}
+                style={styles.inputTextStyle}
+                placeholder="请输入..."
+                multiline
+                onChangeText={text => setInputText(text)}
+                // onSubmitEditing={handleKeyBoardSubmit}
+                onFocus={onInputFocus}
+                onBlur={onInputBlur}
+              />
+              {inputText.trim() ? (
+                <TouchableOpacity
+                  activeOpacity={0.8}
+                  onPressIn={handleKeyBoardSubmit}>
+                  <View style={styles.sendBtn}>
+                    <Text style={styles.sendBtnText}>发送</Text>
+                  </View>
+                </TouchableOpacity>
+              ) : null}
+            </>
+          )}
+
+          {inputType === INPUT_TYPE.VOICE || inputText.trim() ? null : (
+            <TouchableOpacity
+              style={[styles.keyboardIcon, textFocusKeyboardIconStyle]}
+              activeOpacity={0.9}
+              onPressIn={handleShowMoreArea}>
+              <Icon
+                name="add"
+                type="ionicon"
+                color="#999"
+                size={30}
+                style={moreBtnRotateStyle}
+              />
+            </TouchableOpacity>
+          )}
+        </View>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  containerInner: {
+    width: '100%',
+    borderRadius: 25,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  voiceText: {
+    width: 64,
+    height: 50,
+  },
+  keyboardIcon: {
+    width: 45,
+  },
+  inputTextStyle: {
+    flex: 1,
+    minHeight: 40,
+    fontSize: 16,
+    color: '#000',
+    borderWidth: 1,
+    borderColor: 'rgba(249, 249, 249, 1)',
+    borderRadius: 20,
+    paddingHorizontal: 13,
+    paddingVertical: 7,
+  },
+  sendBtn: {
+    height: 26,
+    backgroundColor: 'rgba(234, 96, 0, 1)',
+    borderRadius: 13,
+    paddingHorizontal: 14,
+    marginHorizontal: 14,
+  },
+  sendBtnText: {
+    fontSize: 14,
+    color: '#fff',
+    lineHeight: 26,
+  },
+});
+
+export default TabBarInput;