@beppla/tapas-ui 1.4.35 → 1.5.2

package/components/Text/Text.tsx

@@ -1,152 +0,0 @@
-import React, {FC, useEffect, useState} from 'react';
-import {makeStyles, withTheme, Text as RNText, TextProps} from "@rneui/themed";
-import {Platform, StyleProp, TouchableOpacity, ViewStyle} from "react-native";
-import Hoverable from '../Hoverable/Hoverable';
-export interface Props extends TextProps {
-    children?: React.ReactNode;
-    mode?: 'standard' |'medium' | 'small';
-    type?: 'primary' | 'secondary';
-    hoverStyle?: StyleProp<ViewStyle>;
-    onPress?: () => void;
-    selected?: boolean;
-    disabled?: boolean;
-}
-const useStyles = makeStyles((theme, ...props) => {
-    const { mode } = props[0] as Props;
-    let height = 40, fontSize = theme.fonts.sizeM;
-    switch (mode) {
-        case'small':
-            height = 32;
-            fontSize = theme.fonts.sizeS;
-            break;
-        case'medium':
-            height = 36;
-            break;
-        default:
-            height = 40;
-            break;
-    }
-    return {
-        textItem: {
-            fontFamily: theme.fonts.fontFamily,
-            fontSize: fontSize,
-            fontWeight: theme.fonts.weightR,
-            color: theme.colors.colorTextPrimary,
-            // textOverflow: 'ellipsis', // Not supported in React Native
-            // whiteSpace: 'nowrap', // Not supported in React Native
-            justifyContent: "center",
-            alignItems: "center",
-            display: "flex",
-            minWidth: 80,
-        },
-        priceRangeItem: {
-            paddingHorizontal: 16,
-            paddingVertical: 8,
-            height: height,
-            minWidth: 80,
-            borderRadius: theme.radius.rounded,
-            marginBottom: 8,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-        },
-        primary: {
-            backgroundColor: theme.colors.grey4,
-        },
-        secondary: {
-            borderColor: theme.colors.grey2,
-            borderWidth: 1,
-        },
-        disabledText: {
-            color: theme.colors.disabled,
-        },
-        secondaryDisableText: {
-            color: theme.colors.disabled,
-            borderColor: theme.colors.disabled,
-            borderWidth: 1,
-        },
-        hovered: {
-            backgroundColor: theme.colors.grey3,
-        },
-        secondaryHovered: {
-            backgroundColor: theme.colors.grey4,
-        },
-        selected: {
-            backgroundColor: theme.colors.primary,
-        },
-        secondarySelected: {
-            backgroundColor: theme.colors.grey4,
-            borderColor: theme.colors.primary,
-            borderWidth: 2,
-            color: theme.colors.primary,
-        },
-        textSelected: {
-            color: theme.colors.white,
-        }
-    }
-});
-
-
-const Text: FC<Props> = ({children,selected = false ,type = 'primary',disabled ,style ,onPress ,hoverStyle , ...props}) => {
-  const styles = useStyles(props);
-  const [isHovered, setIsHovered] = useState(false);
-  const [isSelected, setIsSelected] = useState(selected);
-  const handleItemPress = () => {
-      // setIsSelected(!isSelected);
-      onPress && onPress();
-  };
-
-    const handleMouseEnter = () => {
-        setIsHovered(true);
-    };
-
-    const handleMouseLeave = () => {
-        setIsHovered(false);
-    };
-
-    useEffect(() => {
-        setIsSelected(selected);
-    }, [selected]);
-    const renderText = () => {
-        return (!disabled ?<TouchableOpacity style={[
-            styles.priceRangeItem,
-            type === 'primary' ? styles.primary : styles.secondary,
-            isHovered && (type === 'primary' ? styles.hovered : styles.secondaryHovered),
-            isHovered && hoverStyle,
-            isSelected && (type === 'primary' ? styles.selected : styles.secondarySelected),
-            style
-        ]} onPress={handleItemPress}>
-            <RNText style={[
-                styles.textItem,
-                isSelected && type === 'primary' && styles.textSelected,
-                style,
-            ]} numberOfLines={1} ellipsizeMode="tail" {...props}>
-                {children}
-            </RNText>
-        </TouchableOpacity> : <RNText style={[
-            styles.priceRangeItem,
-            type === 'primary' ? styles.primary : styles.secondary,
-            styles.textItem,
-            disabled && type === 'primary' ? styles.disabledText : styles.secondaryDisableText,
-            style
-        ]} numberOfLines={1} ellipsizeMode="tail" {...props}>
-            {children}
-        </RNText>)
-    }
-
-
-  return (
-      Platform.OS === 'web' ? (
-              <Hoverable
-                  onHoverIn={handleMouseEnter}
-                  onHoverOut={handleMouseLeave}
-              >
-                  {
-                      renderText()
-                  }
-              </Hoverable>
-      ): renderText()
-  )
-}
-
-export default withTheme(Text);

package/components/TextArea/TextArea.tsx

@@ -1,348 +0,0 @@
-import React, { useEffect, useRef, useState, useCallback, useMemo } from "react";
-import {
-  View,
-  Text,
-  TextInput,
-  Pressable,
-  Animated,
-  Platform,
-  Keyboard,
-} from "react-native";
-import { withTheme, makeStyles, useTheme } from "@rneui/themed";
-import TapasIcon from "../Icons/TapasIcon";
-import { isBridgelessMode } from "../common/bridgelessUtils";
-
-export interface TextAreaProps {
-  height?: number;
-  label?: string;
-  showCount?: boolean;
-  showClearBtn?: boolean;
-  value?: string;
-  numberOfLines?: number;
-  maxCount?: number;
-  placeholder?: string;
-  required?: boolean;
-  onChangeText?: (value: string) => void;
-  backgroundColor?: string;
-  state?: "normal" | "error";
-  stateMsg?: string;
-  disabled?: boolean;
-  /**
-   * 是否启用 RN 0.77 Bridgeless 模式兼容性修复（默认 true）
-   * 当运行在 RN 0.77+ 的 Bridgeless 模式下时，会自动应用焦点管理修复
-   * 如果遇到问题，可以尝试设置为 false
-   */
-  enableBridgelessFix?: boolean;
-}
-
-const TextArea: React.FC<TextAreaProps> = ({
-  height = 88,
-  numberOfLines = 4,
-  label,
-  value,
-  placeholder,
-  showCount = false,
-  showClearBtn = false,
-  required = false,
-  maxCount = 100,
-  onChangeText,
-  backgroundColor,
-  state = "normal",
-  disabled,
-  stateMsg,
-  enableBridgelessFix = true,
-}) => {
-  const theme = useTheme();
-  const styles = useStyles();
-  const [text, setText] = useState(value || "");
-  const [focus, setFocus] = useState(false);
-  const [top, setTop] = useState(18);
-
-  const topAnim = useRef(new Animated.Value(18)).current;
-  const inputRef = useRef<TextInput>(null);
-  const blurTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const shouldRefocusRef = useRef(false);
-  const isBridgeless = useRef(isBridgelessMode());
-
-  useEffect(() => {
-    const start = !text && !focus ? 0 : 18;
-    const target = !text && !focus ? 18 : 0;
-    if (top === target) return;
-    setTop(target);
-    topAnim.setValue(start);
-    Animated.timing(topAnim, {
-      toValue: target,
-      duration: 300,
-      useNativeDriver: true,
-    }).start();
-  }, [text, focus, top, topAnim]);
-
-  useEffect(() => {
-    setText(value || "");
-  }, [value]);
-
-  // Android 键盘监听：当键盘显示时，如果输入框失焦，尝试重新聚焦
-  // 这是针对 RN 0.77 Bridgeless 模式的兼容性修复
-  useEffect(() => {
-    if (Platform.OS !== 'android' || !enableBridgelessFix) {
-      return;
-    }
-
-    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
-      if (shouldRefocusRef.current) {
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            if (shouldRefocusRef.current && inputRef.current) {
-              try {
-                if (typeof inputRef.current.focus === 'function') {
-                  inputRef.current.focus();
-                  shouldRefocusRef.current = false;
-                } else {
-                  shouldRefocusRef.current = false;
-                }
-              } catch (error) {
-                shouldRefocusRef.current = false;
-              }
-            }
-          });
-        });
-      }
-    });
-
-    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-      shouldRefocusRef.current = false;
-      if (blurTimeoutRef.current) {
-        clearTimeout(blurTimeoutRef.current);
-        blurTimeoutRef.current = null;
-      }
-    });
-
-    return () => {
-      keyboardDidShowListener.remove();
-      keyboardDidHideListener.remove();
-      if (blurTimeoutRef.current) {
-        clearTimeout(blurTimeoutRef.current);
-        blurTimeoutRef.current = null;
-      }
-    };
-  }, [enableBridgelessFix]);
-
-  const handleChangeText = useCallback((newText: string) => {
-    setText(newText);
-    onChangeText?.(newText);
-  }, [onChangeText]);
-
-  const handleClear = useCallback(() => {
-    handleChangeText("");
-  }, [handleChangeText]);
-
-  const handleFocus = useCallback(() => {
-    // 清除可能存在的 blur 延迟
-    if (blurTimeoutRef.current) {
-      clearTimeout(blurTimeoutRef.current);
-      blurTimeoutRef.current = null;
-    }
-    shouldRefocusRef.current = false;
-    setFocus(true);
-  }, []);
-
-  const handleBlur = useCallback(() => {
-    // 在 Android 上延迟处理 blur，避免键盘弹出时立即失焦
-    // React Native 0.77 Bridgeless 模式的已知问题修复
-    if (Platform.OS === 'android' && enableBridgelessFix) {
-      // 标记可能需要重新聚焦
-      shouldRefocusRef.current = true;
-      
-      // 清除之前的延迟
-      if (blurTimeoutRef.current) {
-        clearTimeout(blurTimeoutRef.current);
-      }
-      
-      // 延迟处理 blur，给键盘足够时间显示
-      const delay = isBridgeless.current ? 800 : 500;
-      blurTimeoutRef.current = setTimeout(() => {
-        if (!shouldRefocusRef.current) {
-          blurTimeoutRef.current = null;
-          return;
-        }
-        
-        setFocus(false);
-        shouldRefocusRef.current = false;
-        blurTimeoutRef.current = null;
-      }, delay);
-    } else {
-      setFocus(false);
-    }
-  }, [enableBridgelessFix]);
-
-  const containerHeight = useMemo(() => 
-    Math.max(height, numberOfLines * 22) +
-    (label ? 7 : 0) +
-    (showCount ? 15 : 0)
-  , [height, numberOfLines, label, showCount]);
-
-  const textAreaHeight = useMemo(() => 
-    Math.max(height, numberOfLines * 22)
-  , [height, numberOfLines]);
-
-  const labelStyle = useMemo(() => [
-    styles.label,
-    { top: topAnim },
-    { backgroundColor: backgroundColor || theme.theme.colors.white },
-  ], [styles.label, topAnim, backgroundColor, theme]);
-
-  const labelTextStyle = useMemo(() => [
-    styles.label_text,
-    focus && { color: theme.theme.colors.primary },
-    state === "error" && { color: theme.theme.colors.error },
-    !text && !focus && { fontSize: 14, color: theme.theme.colors.secondary },
-  ], [styles.label_text, focus, state, text, theme]);
-
-  const textAreaStyle = useMemo(() => ({
-    ...styles.textArea,
-    height: textAreaHeight,
-    ...(showClearBtn && text && { paddingRight: 44 }),
-    ...(focus && styles.focus),
-    ...(state === "error" && { borderColor: theme.theme.colors.error }),
-  }), [styles.textArea, styles.focus, textAreaHeight, showClearBtn, text, focus, state, theme]);
-
-  const stateMsgStyle = useMemo(() => [
-    styles.stateMsg,
-    state === "error" && { color: theme.theme.colors.error },
-  ], [styles.stateMsg, state, theme]);
-
-  return (
-    <View style={[styles.con, { height: containerHeight }]}>
-      <Animated.View style={labelStyle}>
-        <Text
-          style={labelTextStyle}
-          numberOfLines={1}
-          ellipsizeMode="tail"
-        >
-          {!text && !focus ? placeholder || label : label}
-        </Text>
-        {required && <Text style={styles.required}>*</Text>}
-      </Animated.View>
-      {showClearBtn && text ? (
-        <Pressable style={styles.clearBtnCon} onPress={handleClear}>
-          <TapasIcon
-            size={20}
-            color={theme.theme.colors.secondary}
-            name="clear-all"
-          />
-        </Pressable>
-      ) : null}
-      <TextInput
-        ref={inputRef}
-        editable={!disabled}
-        style={textAreaStyle}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        value={text}
-        onChangeText={handleChangeText}
-        multiline={true}
-        numberOfLines={numberOfLines}
-        placeholder={!label ? placeholder : undefined}
-        blurOnSubmit={Platform.OS === 'android' ? false : undefined}
-      />
-      <View style={styles.count}>
-        <Text
-          style={stateMsgStyle}
-          numberOfLines={1}
-          ellipsizeMode="tail"
-        >
-          {stateMsg}
-        </Text>
-        {showCount && (
-          <Text style={styles.count_text} numberOfLines={1} ellipsizeMode="tail">
-            {text.length}/{maxCount}
-          </Text>
-        )}
-      </View>
-    </View>
-  );
-};
-
-const useStyles = makeStyles((theme) => ({
-  con: {
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden",
-    width: "100%",
-    position: "relative",
-  },
-  textArea: {
-    paddingTop: 10,
-    paddingBottom: 10,
-    paddingLeft: 16,
-    paddingRight: 12,
-    marginTop: 7,
-    borderColor: theme?.colors?.grey2,
-    borderWidth: 1,
-    borderRadius: 12,
-    textAlignVertical: "top",
-    width: "100%",
-    ...Platform.select({
-      web: {
-        // outlineWidth: 0, // Not supported in React Native
-      },
-    }),
-  },
-  focus: {
-    borderWidth: 2,
-    borderColor: theme?.colors?.primary,
-  },
-  label: {
-    display: "flex",
-    flexDirection: "row",
-    position: "absolute",
-    left: 16,
-    paddingLeft: 1,
-    paddingRight: 1,
-    zIndex: 1,
-  },
-  label_text: { 
-    fontSize: 12, 
-    color: theme?.colors?.primary 
-  },
-  count: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    paddingLeft: 8,
-    paddingRight: 8,
-    marginTop: 1,
-  },
-  stateMsg: {
-    flexGrow: 1,
-    paddingLeft: 16,
-    marginRight: 8,
-    fontSize: 12,
-    fontWeight: "400",
-    color: theme?.colors?.secondary,
-  },
-  count_text: {
-    fontSize: 12,
-    fontWeight: "400",
-    color: theme?.colors?.secondary,
-  },
-  clearBtnCon: {
-    position: "absolute",
-    top: 18,
-    right: 13,
-    width: 20,
-    height: 20,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    zIndex: 2,
-  },
-  required: {
-    fontSize: 12,
-    fontWeight: "400",
-    color: theme?.colors?.error,
-    marginLeft: 1,
-  },
-}));
-
-export default withTheme(TextArea);

package/components/Theme/ThemeProvider.tsx

@@ -1,13 +0,0 @@
-
-import { ThemeProvider } from '@rneui/themed';
-import {defaultTheme} from "./defaultTheme";
-import {View} from "react-native";
-import React from 'react';
-
-const CustomThemeProvider = ({ mode='dark', children, testID }: { mode?: string, children: React.ReactNode, testID?: string }) => {
-    return <ThemeProvider theme={defaultTheme(mode)}>
-        <View style={{ flex: 1,  height: '100%' }} testID={testID}>{children}</View>
-    </ThemeProvider>
-}
-
-export  default  CustomThemeProvider;