@beppla/tapas-ui 1.5.12 → 1.5.13

package/components/SearchInput/SearchInput.tsx

@@ -1,378 +0,0 @@
-import React, { useEffect, useState, useCallback, useMemo, useRef } from "react";
-import { Platform, View, ViewProps, Text, TouchableOpacity, ScrollView, ActivityIndicator, Modal, TouchableWithoutFeedback } from "react-native";
-import { withTheme, makeStyles, useTheme } from "@rneui/themed";
-import TapasInput from "../Input/Input";
-import TapasIcon from "../Icons/TapasIcon";
-import { isMobile } from "../common";
-
-const inputStyle = Platform.select({
-  web: {
-    outlineStyle: "none",
-  },
-  default: {
-    borderWidth: 0,
-    height: 40,
-    width: 112,
-  },
-});
-
-/**
- * 搜索历史记录项类型
- */
-export interface SearchHistoryEntry {
-  id?: string | number;
-  keyword: string;
-  timestamp?: number;
-  [key: string]: any;
-}
-
-export interface SearchInputProps extends ViewProps {
-  placeholder?: string;
-  activePlaceholder?: string;  // 搜索激活时的占位符
-  inactivePlaceholder?: string;  // 搜索未激活时的占位符
-  value?: string;
-  height?: number;
-  width?: number;
-  /** @deprecated Unused, kept for backward compatibility */
-  offset?: number;
-  /** @deprecated Use backgroundColor on style instead */
-  backgroundColor?: string;
-  onSearch?: (keyword: string) => void;  // 搜索回调（修改为必需 keyword 参数）
-  attachSearch?: (val?: string) => void;  // 兼容旧接口
-  onSelectResult?: (item: any) => void;  // 选择结果回调
-  onSelectHistory?: (historyEntry: SearchHistoryEntry) => void;  // 选择历史回调
-  renderResultItem?: (item: any, index: number, isHistory: boolean) => React.ReactNode;  // 自定义渲染
-  searchResults?: any[];  // 搜索结果数据
-  isLoading?: boolean;  // 加载状态
-}
-
-const TapasSearchInput: React.FC<SearchInputProps> = ({
-  style,
-  height = 40,
-  width = 168,
-  placeholder,
-  activePlaceholder,
-  inactivePlaceholder,
-  value,
-  onSearch,
-  attachSearch,
-  onSelectResult,
-  onSelectHistory,
-  renderResultItem,
-  searchResults = [],
-  isLoading = false,
-  testID,
-  ...otherProps
-}) => {
-  const theme = useTheme();
-  const styles = useStyles();
-  const [searchValue, setSearchValue] = useState(value || '');
-  const [isFocused, setIsFocused] = useState(false);
-  const [showResults, setShowResults] = useState(false);
-  const inputRef = useRef<any>(null);
-
-  useEffect(() => {
-    setSearchValue(value || '');
-  }, [value]);
-
-  // 根据焦点状态和是否有值来决定显示哪个占位符
-  const currentPlaceholder = useMemo(() => {
-    if (activePlaceholder && inactivePlaceholder) {
-      return isFocused || searchValue ? activePlaceholder : inactivePlaceholder;
-    }
-    return placeholder || '搜索...';
-  }, [placeholder, activePlaceholder, inactivePlaceholder, isFocused, searchValue]);
-
-  // 当有搜索结果或正在加载时显示结果列表
-  useEffect(() => {
-    const shouldShow = (searchResults && searchResults.length > 0) || isLoading;
-    setShowResults(shouldShow && (isFocused || searchValue.length > 0));
-  }, [searchResults, isLoading, isFocused, searchValue]);
-
-  const handleSearch = useCallback((text?: string) => {
-    const keyword = text || '';
-    setSearchValue(keyword);
-    
-    // 调用新的 onSearch（必需 keyword 参数）
-    if (onSearch) {
-      onSearch(keyword);
-    }
-    
-    // 兼容旧的 attachSearch 接口
-    if (attachSearch) {
-      attachSearch(keyword);
-    }
-  }, [onSearch, attachSearch]);
-
-  const handleFocus = useCallback(() => {
-    setIsFocused(true);
-  }, []);
-
-  const blurTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  React.useEffect(() => {
-    return () => {
-      if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
-    };
-  }, []);
-
-  const handleBlur = useCallback(() => {
-    // 延迟隐藏，允许点击结果项
-    blurTimeoutRef.current = setTimeout(() => {
-      setIsFocused(false);
-    }, 200);
-  }, []);
-
-  const handleSelectResult = useCallback((item: any) => {
-    if (onSelectResult) {
-      onSelectResult(item);
-    }
-    setShowResults(false);
-    setIsFocused(false);
-  }, [onSelectResult]);
-
-  const handleSelectHistory = useCallback((historyEntry: SearchHistoryEntry) => {
-    if (onSelectHistory) {
-      onSelectHistory(historyEntry);
-    }
-    setSearchValue(historyEntry.keyword);
-    setShowResults(false);
-    setIsFocused(false);
-  }, [onSelectHistory]);
-
-  const containerStyle = useMemo(() => [
-    styles.search, 
-    style, 
-    { width }
-  ], [styles.search, style, width]);
-
-  const inputContainerStyle = useMemo(() => [
-    styles.inputContainer,
-    { width, height, maxHeight: height, minHeight: height },
-  ], [styles.inputContainer, width, height]);
-
-  const inputInnerContainerStyle = useMemo(() => [
-    styles.inputInnerContainer,
-    { width: width - 56, height, maxHeight: height, minHeight: height },
-  ], [styles.inputInnerContainer, width, height]);
-
-  const inputStyleMemo = useMemo(() => [
-    inputStyle, 
-    { width: width - 56, height }
-  ], [width, height]);
-
-  // 渲染默认结果项
-  const renderDefaultResultItem = useCallback((item: any, index: number, isHistory: boolean) => {
-    const displayText = typeof item === 'string' ? item : (item.name || item.title || item.keyword || JSON.stringify(item));
-
-    return (
-      <TouchableOpacity
-        key={index}
-        style={styles.resultItem}
-        onPress={() => {
-          if (isHistory) {
-            handleSelectHistory(item as SearchHistoryEntry);
-          } else {
-            handleSelectResult(item);
-          }
-        }}
-        accessibilityRole="button"
-        accessibilityLabel={displayText}
-      >
-        <Text style={styles.resultItemText}>{displayText}</Text>
-      </TouchableOpacity>
-    );
-  }, [styles.resultItem, styles.resultItemText, handleSelectResult, handleSelectHistory]);
-
-  // 渲染结果列表
-  const renderResultsList = useCallback(() => {
-    if (!showResults) {
-      return null;
-    }
-
-    const resultsContent = (
-      <View style={[styles.resultsContainer, { width }]}>
-        {isLoading ? (
-          <View style={styles.loadingContainer}>
-            <ActivityIndicator size="small" color={theme.theme.colors.primary} />
-            <Text style={styles.loadingText}>搜索中...</Text>
-          </View>
-        ) : searchResults && searchResults.length > 0 ? (
-          <ScrollView
-            style={styles.resultsScrollView}
-            keyboardShouldPersistTaps="handled"
-            keyboardDismissMode="none"
-            showsVerticalScrollIndicator={false}
-          >
-            {searchResults.map((item, index) => {
-              const isHistory = item.keyword !== undefined; // 简单判断是否为历史记录
-              
-              if (renderResultItem) {
-                return (
-                  <View key={index}>
-                    {renderResultItem(item, index, isHistory)}
-                  </View>
-                );
-              }
-              
-              return renderDefaultResultItem(item, index, isHistory);
-            })}
-          </ScrollView>
-        ) : null}
-      </View>
-    );
-
-    // 移动端使用 Modal，桌面端使用绝对定位
-    if (isMobile) {
-      return (
-        <Modal
-          transparent
-          visible={showResults}
-          animationType="fade"
-          onRequestClose={() => {
-            setShowResults(false);
-            setIsFocused(false);
-          }}
-        >
-          <TouchableWithoutFeedback
-            onPress={() => {
-              setShowResults(false);
-              setIsFocused(false);
-            }}
-          >
-            <View style={styles.modalBackdrop}>
-              <View style={styles.modalContent}>
-                {resultsContent}
-              </View>
-            </View>
-          </TouchableWithoutFeedback>
-        </Modal>
-      );
-    }
-
-    // 桌面端使用绝对定位
-    return resultsContent;
-  }, [
-    showResults,
-    isLoading,
-    searchResults,
-    width,
-    styles,
-    theme,
-    renderResultItem,
-    renderDefaultResultItem,
-  ]);
-
-  return (
-    <View {...otherProps} testID={testID} style={containerStyle}>
-      <TapasInput
-        ref={inputRef}
-        inputStyle={inputStyleMemo as any}
-        labelBg="transparent"
-        inputContainerStyle={inputInnerContainerStyle}
-        value={searchValue}
-        onChangeText={handleSearch}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        containerStyle={inputContainerStyle}
-        leftIcon={
-          <TapasIcon
-            onPress={() => handleSearch(searchValue)}
-            name="search"
-            size={24}
-            color={theme.theme.colors.grey1}
-            accessibilityRole="button"
-            accessibilityLabel="Search"
-          />
-        }
-        placeholder={currentPlaceholder}
-      />
-      {renderResultsList()}
-    </View>
-  );
-};
-
-const useStyles = makeStyles((theme) => ({
-  inputContainer: {
-    backgroundColor: theme?.colors?.grey4,
-    width: 168,
-    height: 40,
-    maxHeight: 40,
-    minHeight: 40,
-    borderRadius: 20,
-  },
-  inputInnerContainer: {
-    borderWidth: 0,
-    width: 112,
-    height: 40,
-    maxHeight: 40,
-    minHeight: 40,
-    borderBottomWidth: 0,
-  },
-  search: {
-    width: 168,
-    display: "flex",
-    overflow: "visible",  // 改为 visible 以显示下拉结果
-    position: "relative",
-  },
-  resultsContainer: {
-    position: "absolute",
-    top: "100%",
-    left: 0,
-    marginTop: 4,
-    backgroundColor: theme?.colors?.white,
-    borderRadius: 8,
-    shadowColor: theme?.colors?.black,
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 3,
-    maxHeight: 300,
-    zIndex: 1000,
-    overflow: "hidden",
-  },
-  modalBackdrop: {
-    flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.3)",
-    justifyContent: "flex-start",
-    alignItems: "center",
-    paddingTop: 100,
-  },
-  modalContent: {
-    width: "90%",
-    maxWidth: 400,
-  },
-  resultsScrollView: {
-    maxHeight: 300,
-  },
-  resultItem: {
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: theme?.colors?.grey4,
-    backgroundColor: theme?.colors?.white,
-  },
-  resultItemText: {
-    fontSize: theme?.fonts?.sizeM || 14,
-    color: theme?.colors?.colorTextPrimary,
-    fontFamily: theme?.fonts?.fontFamily,
-  },
-  loadingContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 16,
-  },
-  loadingText: {
-    marginLeft: 8,
-    fontSize: theme?.fonts?.sizeM || 14,
-    color: theme?.colors?.colorTextSecondary || theme?.colors?.grey1,
-    fontFamily: theme?.fonts?.fontFamily,
-  },
-}));
-
-export default withTheme(TapasSearchInput);
-
-// Export aliases for compatibility
-export const SearchInput = withTheme(TapasSearchInput);
-export { TapasSearchInput };

package/components/SearchInput/index.tsx

@@ -1,2 +0,0 @@
-export { default } from './SearchInput';
-export type { SearchInputProps } from './SearchInput';

package/components/SheetTitle/SheetTitle.tsx

@@ -1,84 +0,0 @@
-import React, { FC } from 'react';
-import {withTheme, makeStyles, Text} from "@rneui/themed";
-import {StyleProp, TouchableOpacity, View, ViewStyle} from "react-native";
-import Button from "../Button/Button";
-import Icon from '../Icons/TapasIcon';
-export interface Props {
-    title?: string,
-    icon?: React.ReactNode | string,
-    showClear?: Boolean,
-    showClose?: Boolean,
-    clearText?: string,
-    onClear?: () => void,
-    onClose?: () => void,
-    titleContainerStyle?: StyleProp<ViewStyle>,
-    titleStyle?: StyleProp<ViewStyle>,
-    clearStyle?: StyleProp<ViewStyle>,
-    closeStyle?: StyleProp<ViewStyle>,
-    testID?: string,
-}
-const useStyles = makeStyles((theme) => {
-    return {
-        titleContainer: {
-            backgroundColor: theme.colors.white,
-            height: 40,
-            width: '100%',
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            paddingVertical: 8,
-            paddingLeft: 16,
-            borderBottomWidth: 1,
-            borderBottomColor: theme.colors.greyOutline,
-            borderBottomStyle: 'solid'
-        },
-        title: {
-            fontFamily: theme.fonts.fontFamily,
-            fontSize: theme.fonts.sizeL,
-            fontWeight: theme.fonts.weightL,
-            color: theme.colors.colorTextPrimary,
-            flex: 1,
-        },
-        clear: {
-            marginRight: 8,
-        },
-        close: {
-            width: 40,
-            height: 40,
-            justifyContent: 'center',
-            alignItems: 'center'
-        },
-        closeWrapper: {
-            display: 'flex',
-            flexDirection: 'row',
-        }
-    }
-});
-const SheetTitle:FC<Props>  = (props) => {
-    const {title, icon = 'close', showClose = true, showClear, onClose, clearText, clearStyle, onClear, titleContainerStyle, titleStyle, closeStyle, testID} = props;
-    const styles = useStyles(props);
-    return (
-        <View style={[styles.titleContainer, titleContainerStyle]} testID={testID}>
-            <Text style={[styles.title, titleStyle]} numberOfLines={1} ellipsizeMode="tail" >{title}</Text>
-            <View style={styles.closeWrapper}>
-                {
-                    showClear && <Button style={[styles.clear, clearStyle]} onPress={onClear} type={'clear'}>
-                        {
-                            clearText || 'Clear'
-                        }
-                    </Button>
-                }
-                {
-                    (showClose && icon) && (<TouchableOpacity style={[styles.close, closeStyle]} onPress={onClose}>
-                        {
-                            typeof icon === 'string' ? <Icon name={icon as string} size={20} /> : icon
-                        }
-                    </TouchableOpacity>)
-                }
-            </View>
-        </View>
-    )
-}
-
-export default withTheme(React.memo(SheetTitle))

package/components/Shell/Shell.tsx

@@ -1,116 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { View, Animated } from "react-native";
-import { withTheme } from "@rneui/themed";
-import {
-  ShellDrawerProps,
-  ShellPorps,
-  ShellViewProps,
-  defaultDrawerWidth,
-} from "./types";
-import { styles } from "./styles";
-
-const Shell: React.FC<ShellPorps> & {
-  Main: React.FC<ShellViewProps>;
-  Drawer: React.FC<ShellDrawerProps>;
-} = ({
-  children,
-  border = true,
-  drawerWidth = defaultDrawerWidth,
-  style = {},
-  openDrawer = false,
-  testID,
-  ...props
-}: ShellPorps) => {
-  let mainContent = null;
-  let drawerContent = null;
-
-  const [open, setOpen] = useState<boolean>(openDrawer);
-  const animatedWidth = new Animated.Value(openDrawer ? drawerWidth : 0);
-
-  useEffect(() => {
-    setOpen(openDrawer);
-  }, [openDrawer]);
-
-  useEffect(() => {
-    Animated.spring(animatedWidth, {
-      toValue: open ? drawerWidth : 0,
-      tension: 300,
-      friction: 20,
-      useNativeDriver: false,
-    }).start();
-  }, [open, drawerWidth]);
-
-  React.Children.forEach(children, (child) => {
-    if (React.isValidElement(child)) {
-      if (child.type === Shell.Main) {
-        mainContent = (child.props as any).children;
-      } else if (child.type === Shell.Drawer) {
-        drawerContent = (child.props as any).children;
-      }
-    }
-  });
-
-  return (
-    <View style={{...styles.container, ...style}} testID={testID} {...props}>
-      <ShellView
-        style={{ ...styles.mainContainer, borderTopWidth: border ? 1 : 0 }}
-      >
-        {mainContent}
-      </ShellView>
-      <Animated.View style={{ ...styles.drawerContainer, width: animatedWidth }}>
-        <ShellDrawer
-          style={{
-            borderTopWidth: border ? 1 : 0,
-            borderLeftWidth: border ? 1 : 0,
-          }}
-        >
-          {drawerContent}
-        </ShellDrawer>
-      </Animated.View>
-    </View>
-  );
-};
-
-export const ShellView: React.FC<ShellViewProps> = ({
-  children,
-  style = {},
-  theme,
-}) => {
-  return (
-    <View
-      style={{
-        ...style,
-        borderTopColor: theme?.greyOutline ?? "rgba(0, 0, 0, 0.12)",
-        borderTopStyle: "solid",
-      }}
-    >
-      {children}
-    </View>
-  );
-};
-
-export const ShellDrawer: React.FC<ShellDrawerProps> = ({
-  children,
-  style,
-  theme,
-}) => {
-  return (
-    <View
-      style={{
-        ...style,
-        ...styles.drawerInnerCon,
-        borderTopColor: theme?.greyOutline ?? "rgba(0, 0, 0, 0.12)",
-        borderTopStyle: "solid",
-        borderLeftColor: theme?.greyOutline ?? "rgba(0, 0, 0, 0.12)",
-        borderLeftStyle: "solid",
-      }}
-    >
-      {children}
-    </View>
-  );
-};
-
-Shell.Main = withTheme(ShellView) as React.FC<ShellViewProps>;
-Shell.Drawer = withTheme(ShellDrawer) as React.FC<ShellDrawerProps>;
-
-export default Shell;

package/components/Shell/styles.ts

@@ -1,29 +0,0 @@
-import { StyleSheet } from "react-native";
-
-export const styles = StyleSheet.create({
-  container: {
-    display: "flex",
-    justifyContent: "flex-start",
-    flexDirection: "row",
-    flexGrow: 1,
-    overflow: "hidden",
-    height: "100%",
-    width: "100%",
-  },
-  mainContainer: {
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: 1,
-    overflow: "hidden",
-  },
-  drawerContainer: {
-    display: "flex",
-    flexDirection: "column",
-    width: 150,
-  },
-  drawerInnerCon: {
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: 1,
-  }
-});

package/components/Shell/types.ts

@@ -1,28 +0,0 @@
-export interface ShellProps {
-    children?: React.ReactNode;
-    theme?: any;
-    border?: boolean;
-    style?: any;
-    drawerWidth?: number;
-    openDrawer?: boolean;
-    testID?: string;
-}
-
-/**
- * @deprecated Use `ShellProps` instead. This interface is kept for backward compatibility.
- */
-export type ShellPorps = ShellProps;
-
-export interface ShellViewProps {
-    children?: React.ReactNode;
-    style?: any;
-    theme?: any;
-}
-
-export interface ShellDrawerProps {
-    children?: React.ReactNode;
-    style?: any;
-    theme?:any;
-}
-
-export const defaultDrawerWidth = 150;