@beppla/tapas-ui 1.4.15 → 1.4.16

package/components/Drawer/Drawer.tsx

@@ -1,224 +0,0 @@
-import {Overlay, withTheme, makeStyles} from '@rneui/themed';
-import {
-  Text,
-  View,
-  ScrollView,
-  StyleProp,
-  ViewStyle,
-  TouchableOpacity,
-  Platform
-} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import React from 'react';
-import Button from '../Button/Button';
-import Icon from '../Icons/TapasIcon';
-import Status, { STATUS_TYPE } from '../Status/Status';
-
-export interface Props {
-  title?: string;
-  titleIcon?: string;
-  titleIconOnPress?: () => void;
-  titleStatus?: string;
-  statusType?: STATUS_TYPE;
-  visible: boolean;
-  showHeader?: boolean;
-  showFooter?: boolean;
-  overlayStyle?: StyleProp<ViewStyle>;
-  onClose?: () => void;
-  clearDisable?: boolean;
-  onClear?: () => void;
-  clearText?: string;
-  children?: React.ReactNode;
-  middleSectionStyle?: StyleProp<ViewStyle>;
-  leftButtonText?: string;
-  leftButtonTextStyle?: StyleProp<ViewStyle>;
-  rightButtonText?: string;
-  rightButtonStyle?: StyleProp<ViewStyle>;
-  leftButtonOnPress?: () => void;
-  rightButtonOnPress?: () => void;
-  component?: React.ReactNode;
-  footerComponent?: React.ReactNode;
-  headerComponent?: React.ReactNode;
-  testID?: string;
-}
-
-const useStyles = makeStyles((theme) => ({
-  overlay: {
-    width: Platform.OS === 'web' ? '55%' : '100%',
-    height: '100%',
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    justifyContent: 'center',
-    alignItems: 'flex-end',
-    paddingVertical: 0,
-    paddingHorizontal: 0,
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  flx: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start'
-  },
-  header: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    height: 64,
-    width: '100%',
-    alignItems: 'center',
-    paddingHorizontal: theme.spacing.tpRg
-  },
-  middleSection: {
-    flex: 1,
-    width: '100%',
-    paddingHorizontal: theme.spacing.tpRg,
-    fontFamily: theme.fonts.fontFamily,
-    paddingBottom: theme.spacing.tpMd
-  },
-  title: {
-    fontFamily: theme.fonts.fontFamily,
-    fontSize: theme.fonts.h4,
-    letterSpacing: theme.fonts.letterSpacingS,
-    color: theme.colors.primary,
-    fontWeight: theme.fonts.weightM
-  },
-  clear: {
-    fontFamily: theme.fonts.fontFamily,
-    fontSize: theme.fonts.sizeM,
-    fontWeight: theme.fonts.weightM,
-    color: theme.colors.grey3
-  },
-  footer: {
-    paddingHorizontal: theme.spacing.tpRg,
-    paddingVertical: theme.spacing.tpMd,
-    color: 'red',
-    width: '100%',
-    justifyContent: 'flex-end',
-    flexDirection: 'row',
-    alignItems: 'center',
-    fontSize: theme.fonts.sizeS,
-    fontWeight: theme.fonts.weightM,
-    borderTopColor: theme.colors.grey3,
-    borderTopWidth: 1
-  },
-  leftButton: {},
-  leftButtonText: {
-    fontFamily: theme.fonts.fontFamily,
-    fontWeight: theme.fonts.weightM,
-    color: theme.colors.primary
-  },
-  rightButton: {
-    marginLeft: theme.spacing.tpXs
-  },
-  icon: {
-    width: 40,
-  },
-  rightButtonText: {
-    // color: 'blue',
-  }
-}));
-
-const Drawer: React.FC<Props> = ({
-  visible = false,
-  onClear,
-  clearText,
-  onClose,
-  title,
-  titleIcon,
-  titleIconOnPress,
-  titleStatus,
-  statusType = 'unavailable',
-  overlayStyle,
-  children,
-  showHeader = true,
-  showFooter = false,
-  middleSectionStyle,
-  leftButtonText,
-  leftButtonTextStyle,
-  rightButtonStyle,
-  rightButtonText,
-  leftButtonOnPress,
-  rightButtonOnPress,
-  component,
-  footerComponent,
-  headerComponent,
-  clearDisable = true,
-  testID,
-  ...props
-}) => {
-  const styles = useStyles(props);
-  const getSaveArea = () => {
-    if (Platform.OS === 'web') {
-      return null;
-    }
-    const insets = useSafeAreaInsets();
-    return {
-      paddingTop: insets.top
-    };
-  };
-
-  return (
-    <Overlay
-      isVisible={visible}
-      onBackdropPress={onClose}
-      overlayStyle={[styles.overlay, getSaveArea(), overlayStyle]}
-      testID={testID}
-    >
-      {showHeader && (
-        <View style={styles.header}>
-          {headerComponent ? (
-            <>{headerComponent}</>
-          ) : (
-            <>
-              <View style={[styles.flx, {gap: 8}]}>
-                {titleIcon && (
-                  <TouchableOpacity
-                    onPress={() => {
-                      titleIconOnPress && titleIconOnPress();
-                    }}
-                  >
-                    <Icon name={titleIcon} size={32} style={styles.icon} />
-                  </TouchableOpacity>
-                )}
-                <Text style={styles.title}>{title}</Text>
-                {titleStatus && (
-                  <Status
-                    mode={'solid'}
-                    type={statusType}
-                    tag={titleStatus}
-                  />
-                )}
-              </View>
-              <Button
-                onPress={onClear ?? onClose}
-                type={'clear'}
-                disabled={clearDisable}
-                title={clearText}
-              />
-            </>
-          )}
-        </View>
-      )}
-      <ScrollView style={[styles.middleSection, middleSectionStyle]}>
-        {component}
-        {children}
-      </ScrollView>
-      {showFooter && (
-        <View style={[styles.footer]}>
-          <TouchableOpacity style={styles.leftButton} onPress={leftButtonOnPress}>
-            <Text style={[styles.leftButtonText, leftButtonTextStyle]}>{leftButtonText}</Text>
-          </TouchableOpacity>
-          <Button style={[styles.rightButton, rightButtonStyle]} onPress={rightButtonOnPress}>
-            {rightButtonText}
-          </Button>
-        </View>
-      )}
-      {footerComponent && <View style={styles.footer}>{footerComponent}</View>}
-    </Overlay>
-  );
-};
-
-export default withTheme(Drawer);

package/components/Dropdown/CustomDropdown.tsx

@@ -1,254 +0,0 @@
-import React, { useEffect } from "react"; // {useEffect}
-import {Platform, ScrollView, StyleProp, 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 ? <View>
-                {props.customButton}
-            </View> : <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}
-                      keyboardShouldPersistTaps="handled"
-                      keyboardDismissMode="none"
-                    >
-                        {children}
-                    </ScrollView>
-                </BottomSheet>
-            }
-        </View>
-    );
-};
-
-export default withTheme(CustomDropdown);