@beppla/tapas-ui 1.4.34 → 1.5.0

package/components/Input/Input.tsx

@@ -1,297 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,119 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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;