@beppla/tapas-ui 1.0.64 → 1.0.66

package/components/Dropdown/CustomDropdown.tsx

@@ -1,251 +0,0 @@
-import React, { useEffect } from "react"; // {useEffect}
-import {Platform, ScrollView, StyleProp, TouchableOpacity, View, ViewStyle, Text} from "react-native";
-import {BottomSheet, BottomSheetProps, makeStyles, withTheme} from '@rneui/themed';
-import {Button, Props as ButtonProps} from '../Button/Button'
-import Icon from '../Icons/TapasIcon';
-import SheetTitle, {Props as SheetTileProps} from "../SheetTitle/SheetTitle";
-// import CustomListItem from "../ListItem/ListItem";
-import { isMobile } from "../common";
-
-
-const SUB_CONTAINER_HEIGHT = 258;
-const SUB_CONTAINER_WIDTH = 250;
-
-const useStyles = makeStyles((theme) => ({
-    buttonContainer: {
-        backgroundColor: 'transparent',
-        color: theme.colors.primary,
-        height: 40,
-        minWidth: 80,
-        maxHeight: 56,
-        paddingLeft: 16,
-        paddingRight: 12,
-        justifyContent: 'space-between',
-        borderWidth: 1,
-        borderColor: theme.colors.grey2,
-    },
-    buttonDisabled: {
-        backgroundColor: theme.colors.grey4,
-        borderWidth: 1,
-    },
-    buttonHovered: {
-        backgroundColor: theme.colors.grey4,
-        borderWidth: 1,
-    },
-    buttonSelected: {
-        backgroundColor: theme.colors.grey4,
-        borderColor: theme.colors.primary,
-        borderWidth: 1,
-    },
-    title: {
-        color: theme.colors.primary,
-        fontSize: 14,
-        fontWeight: theme.fonts.weightR,
-    },
-    iconExpanded: {
-        color: theme.colors.primary,
-        transform: 'rotate(-180deg)',
-    },
-    titleExpanded: {
-        color: theme.colors.primary,
-        fontSize: 14,
-        fontWeight: theme.fonts.weightR,
-    },
-    dropdownIcon: {
-        color: theme.colors.secondary,
-        fontSize: 20,
-    },
-    subContainer: {
-        marginTop: 8, // 移除 marginTop，避免与 top: 40 冲突
-        display: 'flex',
-        flexDirection: 'column',
-        backgroundColor: theme.colors.white,
-        borderRadius: theme.radius.rounded,
-        flex: 1,
-        elevation: 8,
-        shadowColor: 'rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.12)',
-        shadowOffset: {
-            width: 0,
-            height: 12,
-        },
-        shadowOpacity: 0.58,
-        shadowRadius: 24,
-        overflow: 'hidden',
-        position: 'absolute',
-        top: 40, // 40 - 44 (SafeAreaProvider) + 20 (全局装饰器) = 16px
-        zIndex: 1000,
-    },
-    backdropStyle:{
-        backgroundColor: 'rgba(0, 0, 0, 0.6)',
-    },
-    bottomSheetContainer: {
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        zIndex: 999,
-        backgroundColor: theme.colors.white,
-        borderTopLeftRadius: theme.radius.rounded,
-        borderTopRightRadius: theme.radius.rounded,
-    },
-    scrollView: {
-        maxHeight: SUB_CONTAINER_HEIGHT,
-        width: '100%',
-    }
-}));
-
-export type TDropdownPosition = 'left' | 'center' | 'right' | 'upLeft' | 'upRight' | 'upCenter';
-export interface Props  extends ButtonProps, BottomSheetProps{
-    children?: React.ReactNode;
-    onPress: () => void,
-    value: string,
-    icon?: any,
-    subWidth?: number,
-    subHeight?: number,
-    width?: number,
-    isVisible? : boolean,
-    onClose: () => void,
-    // set pop up container style
-    containerStyle?: StyleProp<ViewStyle>,
-    // set pop up scroll view style
-    scrollViewStyle?: StyleProp<ViewStyle>,
-    // set dropdown button style
-    dropdownButtonStyle?: StyleProp<ViewStyle>,
-    dropdownButtonSelectedStyle?: StyleProp<ViewStyle>,
-    dropdownButtonHoverStyle?: StyleProp<ViewStyle>,
-    textExpandedStyle?: StyleProp<ViewStyle>,
-    iconExpandedStyle?: StyleProp<ViewStyle>,
-    backdropStyle?: StyleProp<ViewStyle>,
-    subContainerStyle?: StyleProp<ViewStyle>,
-    // 自定义 subContainer 的 top 和 left 值，优先级最高
-    subContainerTop?: number,
-    subContainerLeft?: number,
-    // it will be show when mobile status
-    sheetTitlePros?: SheetTileProps,
-    subContainerPosition?: TDropdownPosition,
-    customButton?: React.ReactNode,
-    showSearchBar?: boolean,
-}
-
-const CustomDropdown: React.FC<Props> = ({
-                                             children,
-                                             isVisible,
-                                             width = 80,
-                                             icon,
-                                             value,
-                                             onPress,
-                                             onClose,
-                                             subWidth = SUB_CONTAINER_WIDTH,
-                                             subHeight = SUB_CONTAINER_HEIGHT,
-                                             subContainerPosition= 'left',
-                                             subContainerStyle,
-                                             subContainerTop,
-                                             subContainerLeft,
-                                             showSearchBar,
-                                             sheetTitlePros,
-                                             ...props}) => {
-    const styles = useStyles(props);
-
-    const handlePress = (event: any) => {
-        event.stopPropagation();
-        onPress && onPress();
-    };
-
-    useEffect(() => {
-        const handleClickOutside = () => {
-            if (isVisible) {
-                onClose && onClose();
-            }
-        };
-        if (Platform.OS === 'web'){
-            document.addEventListener('click', handleClickOutside);
-        }
-        return () => {
-            Platform.OS === 'web' && document.removeEventListener('click', handleClickOutside);
-        };
-    }, [isVisible]);
-
-
-    return (
-        <View>
-            {props.customButton ? <TouchableOpacity onPress={(event) => {
-                handlePress(event);
-            }}>
-                {props.customButton}
-            </TouchableOpacity> : <Button
-                // @ts-ignore
-                hoverStyle={{...styles.buttonContainer, ...props.dropdownButtonStyle as object, ...styles.buttonHovered}}
-                buttonStyle={{...styles.buttonContainer, ...props.dropdownButtonStyle as object, ...(isVisible ? {...styles.buttonSelected, ...props.dropdownButtonSelectedStyle as object} : {}), ...(props.disabled && styles.buttonDisabled)}}
-                titleStyle={{...styles.title, ...(isVisible ? {...styles.titleExpanded, ...props.textExpandedStyle as object}: {})}}
-                onPress={(event) => {
-                    if(props.disabled) return;
-                    handlePress(event);
-                }}
-                width={width}
-                type="outline"
-                {...props}
-            >
-                <Text disabled={props.disabled} style={{
-                    overflow:'hidden',
-                    // whiteSpace: 'nowrap', // 不支持 React Native
-                    // textOverflow:"ellipsis" // 不支持 React Native
-                }}>{value}</Text>
-                {
-                    icon ? icon: <Icon name="arrow_drop_down"
-                        // @ts-ignore
-                                       style={[styles.dropdownIcon, isVisible ? {...styles.iconExpanded, ...props.iconExpandedStyle as object} : {}, props.disabled && { opacity: 0.5 }]} />
-                }
-            </Button>}
-            {
-                !isMobile && isVisible && (() => {
-                    // console.log('CustomDropdown: Rendering desktop dropdown', { isMobile, isVisible, subWidth, subHeight });
-                    // 计算默认的 top 和 left 值
-                    const defaultTop = subContainerPosition === 'upLeft' || subContainerPosition === 'upRight' || subContainerPosition === 'upCenter' 
-                        ? -(subHeight + (showSearchBar ? 66 : 16)) 
-                        : undefined;
-                    const defaultLeft = subContainerPosition === 'center' 
-                        ? -(subWidth - width) / 2 
-                        : subContainerPosition === 'right' 
-                            ? undefined 
-                            : subContainerPosition === 'left' 
-                                ? 0 
-                                : undefined;
-
-                    return <View  style={[styles.subContainer,
-                    // 应用默认的位置样式（如果没有自定义值）
-                    subContainerTop === undefined && defaultTop !== undefined ? { top: defaultTop } : {},
-                    subContainerLeft === undefined && defaultLeft !== undefined ? { left: defaultLeft } : {},
-                    subContainerPosition === 'right' && subContainerLeft === undefined ? { right: 0 } : {},
-                    
-                    // 应用自定义的 top 和 left 值（优先级最高）
-                    subContainerTop !== undefined ? { top: subContainerTop } : {},
-                    subContainerLeft !== undefined ? { left: subContainerLeft } : {},
-                    
-                    subContainerStyle
-                ]}>
-                    {children}
-                </View>;
-                })()
-            }
-            {
-                isMobile && isVisible && <BottomSheet
-                    containerStyle={[styles.bottomSheetContainer, props.containerStyle]}
-                    backdropStyle={[styles.backdropStyle, props.backdropStyle]}
-                    isVisible={isVisible}
-                    onBackdropPress={props?.onBackdropPress}>
-                    <SheetTitle
-                        {
-                            ...sheetTitlePros
-                        }
-
-                    />
-                    <ScrollView style={[styles.scrollView, props.scrollViewStyle, {width: subWidth}]} onPointerEnter={handlePress} >
-                        {children}
-                    </ScrollView>
-                </BottomSheet>
-            }
-        </View>
-    );
-};
-
-export default withTheme(CustomDropdown);