@beppla/tapas-ui 1.5.10 → 1.5.12

package/components/SearchInput/SearchInput.tsx

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

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

package/components/SheetTitle/SheetTitle.tsx

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

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

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

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