@beppla/tapas-ui 1.4.32 → 1.4.34

package/components/Text/Text.tsx

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

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

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