@beppla/tapas-ui 1.4.13 → 1.4.15

package/components/Input/Input.tsx

@@ -0,0 +1,297 @@
+import React, {FC, useState, useCallback, useMemo, useRef, useEffect} from "react";
+import {View, Text, Platform, Keyboard} from "react-native";
+import {withTheme, Input, InputProps, makeStyles} from "@rneui/themed";
+import DefaultTheme from "../Theme/defaultTheme";
+import { isBridgelessMode } from "../common/bridgelessUtils";
+
+// 方案 3：全局 Input 实例管理器，用于清除其他 Input 的重新聚焦标记
+// 存储所有 Input 实例的 shouldRefocusRef，用于在 focus 时清除其他 Input 的标记
+const inputInstancesRef = new Set<React.MutableRefObject<boolean>>();
+
+const useStyles = makeStyles((theme: typeof DefaultTheme, ...props) => {
+  const {labelBg, labelColor} = props[0] as any;
+  // @ts-ignore
+  return {
+    inputBase: {
+      minWidth: 112,
+      minHeight: 40,
+      paddingHorizontal: 0,
+      paddingVertical: 0,
+    },
+    input: {
+      fontFamily: theme.fonts.fontFamily,
+      fontSize: theme.fonts.sizeM,
+      fontWeight: theme.fonts.weightR,
+      color: theme.colors.colorTextPrimary,
+      // placeholderTextColor: theme.colors.colorTextSecondary, // Not supported in React Native
+      borderRadius: theme.radius.rounded,
+      borderWidth: 1,
+      borderColor: theme.colors.colorBorder1,
+      paddingLeft: 16,
+      paddingRight: 12,
+    },
+    labelContext: {
+      fontFamily: theme.fonts.fontFamily,
+      fontSize: theme.fonts.sizeS,
+      fontWeight: theme.fonts.weightR,
+      backgroundColor: labelBg || theme.colors.white,
+      color: labelColor || theme.colors.colorTextPrimary,
+      overflow: "hidden",
+      position: "absolute",
+      display: "flex",
+      flexDirection: "row",
+      zIndex: 1,
+      left: 17,
+      top: -7,
+    },
+    require: {
+      color: theme.colors.colorTextError,
+    },
+  };
+});
+export interface TapasInputProps extends InputProps {
+  labelPosition?: "top" | "middle";
+  defaultShowLabel?: boolean;
+  labelBg?: string;
+  labelColor?: string;
+  required?: boolean;
+  /**
+   * 是否启用 RN 0.77 Bridgeless 模式兼容性修复（默认 true）
+   * 当运行在 RN 0.77+ 的 Bridgeless 模式下时，会自动应用焦点管理修复
+   * 如果遇到问题，可以尝试设置为 false
+   */
+  enableBridgelessFix?: boolean;
+}
+
+export const TapasInput: FC<TapasInputProps> = ({
+  labelPosition = "top", 
+  onBlur, 
+  onFocus, 
+  value: propValue,
+  enableBridgelessFix = true,
+  ...props
+}) => {
+  const styles = useStyles(props);
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<any>(null);
+  const blurTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const keyboardShowListenerRef = useRef<any>(null);
+  const keyboardHideListenerRef = useRef<any>(null);
+  const shouldRefocusRef = useRef(false);
+  const isBridgeless = useRef(isBridgelessMode());
+  // 使用 ref 存储 isFocused 的最新值，避免在 useEffect 中需要依赖
+  const isFocusedRef = useRef(false);
+  // 记录最后一次 focus 的时间戳，用于焦点切换保护期
+  const lastFocusTimeRef = useRef<number>(0);
+  // 焦点切换保护期（ms），在此时间内不执行重新聚焦，避免焦点跳动
+  const FOCUS_SWITCH_PROTECTION_PERIOD = 200;
+  
+  const handleFocus = useCallback((e: any) => {
+    // 清除可能存在的 blur 延迟
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
+      blurTimeoutRef.current = null;
+    }
+    
+    // 方案 3：清除所有其他 Input 的重新聚焦标记
+    // 当当前 Input 获得焦点时，清除其他 Input 的 shouldRefocusRef，防止焦点跳动
+    inputInstancesRef.forEach((ref) => {
+      if (ref !== shouldRefocusRef) {
+        ref.current = false;
+      }
+    });
+    
+    // 清除当前组件的重新聚焦标记，因为当前组件已经获得焦点
+    shouldRefocusRef.current = false;
+    // 记录 focus 时间戳，用于焦点切换保护期判断
+    lastFocusTimeRef.current = Date.now();
+    // 更新 ref 和 state
+    isFocusedRef.current = true;
+    setIsFocused(true);
+    onFocus?.(e);
+  }, [onFocus]);
+
+  const handleBlur = useCallback((e: any) => {
+    // 在 Android 上延迟处理 blur，避免键盘弹出时立即失焦
+    // React Native 0.77 Bridgeless 模式的已知问题修复
+    if (Platform.OS === 'android' && enableBridgelessFix) {
+      // 标记可能需要重新聚焦
+      shouldRefocusRef.current = true;
+      
+      // 清除之前的延迟
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+      }
+      
+      // 延迟处理 blur，给键盘足够时间显示
+      // Bridgeless 模式可能需要更长的延迟（500-800ms）来适应新架构
+      const delay = isBridgeless.current ? 800 : 500;
+      blurTimeoutRef.current = setTimeout(() => {
+        // 如果标记仍然为 true，说明键盘显示后输入框确实失焦了
+        // 此时检查是否需要重新聚焦（通过键盘监听器处理）
+        if (!shouldRefocusRef.current) {
+          // 如果标记已被清除（说明键盘隐藏或重新聚焦成功），不执行 blur
+          blurTimeoutRef.current = null;
+          return;
+        }
+        
+        // 更新 ref 和 state
+        isFocusedRef.current = false;
+        setIsFocused(false);
+        onBlur?.(e);
+        shouldRefocusRef.current = false;
+        blurTimeoutRef.current = null;
+      }, delay);
+    } else {
+      isFocusedRef.current = false;
+      setIsFocused(false);
+      onBlur?.(e);
+    }
+  }, [onBlur, enableBridgelessFix]);
+
+  const shouldShowLabel = useMemo(() => 
+    props?.defaultShowLabel || propValue || isFocused
+  , [props?.defaultShowLabel, propValue, isFocused]);
+
+  const containerStyleMemo = useMemo(() => [styles.inputBase, props.containerStyle], [styles.inputBase, props.containerStyle]);
+  const inputStyleMemo = useMemo(() => [styles.inputBase, styles.input, props.inputStyle], [styles.inputBase, styles.input, props.inputStyle]);
+  const inputContainerStyleMemo = useMemo(() => [{borderBottomWidth: 0}, props.inputContainerStyle], [props.inputContainerStyle]);
+
+  // 方案 3：注册当前 Input 实例到全局管理器
+  useEffect(() => {
+    if (Platform.OS === 'android' && enableBridgelessFix) {
+      inputInstancesRef.add(shouldRefocusRef);
+      return () => {
+        inputInstancesRef.delete(shouldRefocusRef);
+      };
+    }
+    return undefined;
+  }, [enableBridgelessFix]);
+
+  // Android 键盘监听：当键盘显示时，如果输入框失焦，尝试重新聚焦
+  // 这是针对 RN 0.77 Bridgeless 模式的兼容性修复
+  useEffect(() => {
+    if (Platform.OS !== 'android' || !enableBridgelessFix) {
+      return;
+    }
+
+    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+      // 键盘显示时，如果应该重新聚焦且输入框失焦，则尝试重新聚焦
+      // React Native 0.77 可能需要多次尝试才能成功聚焦
+      
+      // 方案 1 修复：添加焦点状态检查，防止焦点跳动
+      // 1. 如果当前组件已经聚焦，不需要重新聚焦（可能是其他 Input 触发的键盘显示）
+      if (isFocusedRef.current) {
+        // 当前组件已经聚焦，清除重新聚焦标记，避免后续误操作
+        shouldRefocusRef.current = false;
+        return;
+      }
+      
+      // 2. 检查是否在焦点切换保护期内
+      // 如果最近有 focus 事件（可能是其他 Input 获得焦点），不执行重新聚焦
+      const timeSinceLastFocus = Date.now() - lastFocusTimeRef.current;
+      if (timeSinceLastFocus < FOCUS_SWITCH_PROTECTION_PERIOD) {
+        // 在保护期内，说明可能有其他 Input 正在获得焦点，不执行重新聚焦
+        shouldRefocusRef.current = false;
+        return;
+      }
+      
+      // 3. 只有在确实需要重新聚焦且不在保护期内时才执行
+      if (shouldRefocusRef.current) {
+        // 使用双重 requestAnimationFrame 确保在渲染完成后执行（RN 0.77 新架构可能需要）
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            // 再次检查状态，避免在异步执行期间状态已改变
+            if (shouldRefocusRef.current && !isFocusedRef.current && inputRef.current) {
+              // 尝试通过 inputRef 重新聚焦
+              // @rneui/themed 的 Input 组件可能支持 inputRef prop
+              try {
+                // 如果 inputRef.current 有 focus 方法，直接调用
+                if (typeof inputRef.current.focus === 'function') {
+                  inputRef.current.focus();
+                  shouldRefocusRef.current = false;
+                } else if (inputRef.current.input && typeof inputRef.current.input.focus === 'function') {
+                  // 某些情况下，Input 组件可能将 TextInput 存储在 input 属性中
+                  inputRef.current.input.focus();
+                  shouldRefocusRef.current = false;
+                } else if (inputRef.current._input && typeof inputRef.current._input.focus === 'function') {
+                  // 某些版本的 @rneui/themed 可能使用 _input 属性
+                  inputRef.current._input.focus();
+                  shouldRefocusRef.current = false;
+                } else {
+                  // 如果无法直接聚焦，尝试延迟后再次聚焦（RN 0.77 可能需要）
+                  setTimeout(() => {
+                    if (shouldRefocusRef.current && !isFocusedRef.current && inputRef.current) {
+                      try {
+                        if (inputRef.current.focus) {
+                          inputRef.current.focus();
+                          shouldRefocusRef.current = false;
+                        } else {
+                          shouldRefocusRef.current = false;
+                        }
+                      } catch (err) {
+                        shouldRefocusRef.current = false;
+                      }
+                    }
+                  }, 100);
+                }
+              } catch (error) {
+                // 聚焦失败，清除标记，让 blur 正常执行
+                shouldRefocusRef.current = false;
+              }
+            }
+          });
+        });
+      }
+    });
+
+    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
+      // 键盘隐藏时，清除重新聚焦标记
+      shouldRefocusRef.current = false;
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+        blurTimeoutRef.current = null;
+      }
+    });
+
+    keyboardShowListenerRef.current = keyboardDidShowListener;
+    keyboardHideListenerRef.current = keyboardDidHideListener;
+
+    return () => {
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+        blurTimeoutRef.current = null;
+      }
+    };
+  }, []); // 使用 ref 访问最新状态，不需要添加依赖
+
+  return (
+    <View 
+      style={{flex: 1}}
+      onStartShouldSetResponder={() => false}
+      onResponderTerminationRequest={() => false}
+      pointerEvents="box-none"
+    >
+      <Input
+        {...(inputRef.current ? { inputRef } as any : {})}
+        value={propValue}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        containerStyle={containerStyleMemo}
+        inputStyle={inputStyleMemo}
+        inputContainerStyle={inputContainerStyleMemo}
+        blurOnSubmit={Platform.OS === 'android' ? false : props.blurOnSubmit}
+        {...props}
+        label={
+          <Text style={[shouldShowLabel ? styles.labelContext : {display: "none"}]}>
+            {props.label} {props.required && <Text style={styles.require}>*</Text>}
+          </Text>
+        }
+      />
+    </View>
+  );
+};
+
+export default withTheme(TapasInput);

package/components/Layout/DrawerContext.tsx

@@ -0,0 +1,31 @@
+import React, { createContext, useState } from "react";
+import { Props as DrawerProps } from "../Drawer/Drawer";
+
+//@ts-ignore
+export const DrawerContext = createContext();
+
+export const DrawerProvider = ({ children }: any) => {
+    const [drawerInfo, setDrawerInfo] = useState<DrawerProps>({} as DrawerProps);
+
+    const open = (drawerInfo: DrawerProps ) => {
+        setDrawerInfo({
+            ...drawerInfo,
+            visible: true,
+        });
+    };
+
+    const close = () => {
+        setDrawerInfo({
+            visible: false,
+            title: '',
+            component: null,
+            showFooter: false
+        })
+    }
+
+    return (
+        <DrawerContext.Provider value={{ drawerInfo, setDrawerInfo, open, close } }>
+            {children}
+        </DrawerContext.Provider>
+    );
+};

package/components/Layout/Layout.tsx

@@ -0,0 +1,119 @@
+import React, { useContext, useState } from "react";
+import {View, Platform, ScrollView } from "react-native";
+import Navigation, {Props as NavigationProps} from "../Navigation/Navigation";
+import Drawer  from '../Drawer/Drawer'
+import Header, {Props as HeaderProps } from "../Header/Header";
+import { makeStyles, withTheme } from "@rneui/themed";
+import { Toast } from "../Toast/Toast";
+import {  ToastContext } from "./ToastContext";
+import {  DrawerContext } from "./DrawerContext";
+
+// 移除错误的导出语句，这些类型已经在 index.tsx 中正确导出
+
+
+const useStyles = makeStyles((theme) => ({
+    container: {
+        flex: 1,
+        height: '100%',
+        overflow: 'hidden',
+        backgroundColor: theme.colors.background,
+        position: 'relative',
+    },
+    smallContainer: {
+        marginTop: 70,
+        height: '90%',
+    },
+    navContainer:{
+        position: 'absolute',
+        zIndex: 9999,
+        top: 0,
+        bottom: 0,
+        left: 0,
+    },
+    bodyContainer: {
+        flex:1,
+        flexDirection: 'column',
+    },
+    bodyWebContainer: {
+        marginLeft: 56,
+    },
+    toastWebContainer: {
+        right: 24,
+        top: 24,
+        position: 'absolute'
+    },
+    toastContainer: {
+        top: 4,
+        backgroundColor: 'red'
+    },
+}));
+
+export type Props = {
+    children: React.ReactNode;
+    headerComponent?: React.ReactNode;
+    headerProps?: HeaderProps,
+    navigationComponent?: React.ReactNode,
+    navigationProps?: NavigationProps,
+    showNavigation?: boolean;
+    testID?: string;
+};
+
+const isWeb = Platform.OS === 'web';
+const Layout: React.FC<Props> = ({ children, headerProps, navigationProps,navigationComponent, headerComponent, showNavigation = true, testID, ...props }: any) => {
+    const styles = useStyles(props);
+    //@ts-ignore
+    const { toastInfo } = useContext (ToastContext) || {};
+    //@ts-ignore
+    const { drawerInfo } = useContext (DrawerContext) || {};
+    const [navVisible, setNavVisible] = useState(!isWeb ? false : true);
+
+    return (
+        <View style={styles.container} testID={testID}>
+            {
+                toastInfo && (<Toast {...toastInfo}  style={ isWeb ? styles.toastWebContainer : styles.toastContainer} />)
+            }
+            {
+                drawerInfo && (
+                    <Drawer {...drawerInfo} />
+                )
+            }
+            <View style={{ flexDirection: 'row', height: '100%' }}>
+                {
+                    showNavigation && (
+                        navigationComponent ? (<View>
+                            {navigationComponent}
+                        </View>) : (<View style={styles.navContainer}>
+                            <Navigation
+                                {...navigationProps}
+                                onMaskPress={() => {
+                                    if(Platform.OS !== 'web') {
+                                        setNavVisible(!navVisible)
+                                    }
+                                }}
+                                visible={navVisible}
+                            />
+                        </View>)
+                    )
+                }
+                <View style={[styles.bodyContainer, (showNavigation && isWeb) ? styles.bodyWebContainer : {}]}>
+                    {
+                        headerComponent ? (
+                            <View>
+                                {headerComponent}
+                            </View>
+                        ) : (<Header {...headerProps} showLeftIcon={showNavigation && !isWeb } onLeftIconPress={() => { setNavVisible(!navVisible) }} />)
+                    }
+                    <ScrollView 
+                        style={[{ height: '100%'}, Platform.OS !== 'web' ? styles.smallContainer : {}]}
+                        keyboardShouldPersistTaps="handled"
+                        keyboardDismissMode="none"
+                    >
+                        {children}
+                    </ScrollView>
+                </View>
+            </View>
+        </View>
+  );
+};
+
+export default withTheme(Layout);

package/components/Layout/ToastContext.tsx

@@ -0,0 +1,29 @@
+import React, { createContext, useState } from "react";
+import { Props as ToastProps } from "../Toast/Toast";
+
+//@ts-ignore
+export const ToastContext = createContext();
+
+export const ToastProvider = ({ children }: any) => {
+    const [toastInfo, setToastInfo] = useState<ToastProps>({} as ToastProps);
+
+    const open = (props: ToastProps) => {
+        setToastInfo({
+            ...props,
+            visible: true
+        })
+
+    }
+    const close = () => {
+        setToastInfo({
+            visible: false,
+            message: "",
+        })
+    }
+
+    return (
+        <ToastContext.Provider value={{ toastInfo, setToastInfo, open, close } }>
+            {children}
+        </ToastContext.Provider>
+    );
+};

package/components/Layout/index.tsx

@@ -0,0 +1,24 @@
+import { ToastProvider } from "./ToastContext";
+import { DrawerProvider } from "./DrawerContext";
+import React from "react";
+import Layout, { Props } from "./Layout";
+import {View} from "react-native";
+
+export { Props } from "./Layout";
+export { NavItem, NavItemType, SelectedItem } from "../Navigation/Navigation";
+
+const Index: React.FC<Props> = ({children, ...props}) => {
+    return (
+        <ToastProvider>
+            <DrawerProvider>
+                <Layout {...props} >
+                <View>
+                    {children}
+                </View>
+                </Layout>
+            </DrawerProvider>
+        </ToastProvider>
+    )
+}
+
+export default Index;