@beppla/tapas-ui 1.5.14 → 1.5.15

package/components/Drawer/Drawer.tsx

@@ -0,0 +1,227 @@
+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
+  },
+  containerStyle:{
+    flexGrow: 1,
+  },
+  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]} contentContainerStyle={styles.containerStyle}>
+        {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

@@ -0,0 +1,283 @@
+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 { 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,
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: theme.colors.white,
+        borderRadius: theme.radius.rounded,
+        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,
+        zIndex: 9999,
+        // 确保不影响主体布局
+        pointerEvents: 'auto',
+    },
+    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' | 'auto';
+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,
+    // 自定义背景色
+    dropdownBackgroundColor?: string,
+}
+
+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,
+                                             dropdownBackgroundColor,
+                                             ...props}) => {
+    const styles = useStyles(props);
+    const buttonRef = React.useRef<View>(null);
+    const [autoPosition, setAutoPosition] = React.useState<'up' | 'down'>('down');
+
+    const handlePress = (event: any) => {
+        event.stopPropagation();
+        onPress && onPress();
+    };
+
+    // 自动检测可用空间，决定向上还是向下显示
+    useEffect(() => {
+        if (isVisible && subContainerPosition === 'auto' && buttonRef.current && Platform.OS === 'web') {
+            buttonRef.current.measure((_x, _y, _width, height, _pageX, pageY) => {
+                const windowHeight = window.innerHeight;
+                const spaceBelow = windowHeight - pageY - height;
+                const spaceAbove = pageY;
+                
+                // 如果下方空间不足，且上方空间更大，则向上显示
+                if (spaceBelow < subHeight && spaceAbove > spaceBelow) {
+                    setAutoPosition('up');
+                } else {
+                    setAutoPosition('down');
+                }
+            });
+        }
+    }, [isVisible, subContainerPosition, subHeight]);
+
+    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 ref={buttonRef} style={{ position: 'relative', zIndex: isVisible ? 9999 : 1 }}>
+            {props.customButton ? <View>
+                {props.customButton}
+            </View> : <Button
+                hoverStyle={{...styles.buttonContainer, ...props.dropdownButtonStyle as Record<string, unknown>, ...styles.buttonHovered} as Record<string, unknown>}
+                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',
+                }}>{value}</Text>
+                {
+                    icon ? icon: <Icon name="arrow_drop_down"
+                                       style={[styles.dropdownIcon, isVisible ? {...styles.iconExpanded, ...props.iconExpandedStyle as any} : {}, props.disabled && { opacity: 0.5 }] as any} />
+                }
+            </Button>}
+            {
+                !isMobile && isVisible && (() => {
+                    // 判断最终位置：auto 模式根据检测结果，否则根据 position 参数
+                    const isUpPosition = subContainerPosition === 'auto' 
+                        ? autoPosition === 'up'
+                        : subContainerPosition === 'upLeft' || subContainerPosition === 'upRight' || subContainerPosition === 'upCenter';
+                    
+                    // 计算默认的 top 和 left 值
+                    const defaultTop = isUpPosition 
+                        ? -(subHeight + (showSearchBar ? 66 : 16)) 
+                        : undefined;
+                    
+                    const defaultLeft = (subContainerPosition === 'center' || (subContainerPosition === 'auto' && autoPosition === 'down'))
+                        ? -(subWidth - width) / 2 
+                        : (subContainerPosition === 'upCenter')
+                            ? -(subWidth - width) / 2
+                            : subContainerPosition === 'right' || subContainerPosition === 'upRight'
+                                ? undefined 
+                                : 0;
+
+                    return <View  style={[
+                    styles.subContainer,
+                    
+                    // 应用默认的位置样式（如果没有自定义值）
+                    subContainerTop === undefined && defaultTop !== undefined ? { top: defaultTop } : {},
+                    subContainerLeft === undefined && defaultLeft !== undefined ? { left: defaultLeft } : {},
+                    (subContainerPosition === 'right' || subContainerPosition === 'upRight') && subContainerLeft === undefined ? { right: 0 } : {},
+                    
+                    // 应用自定义的 top 和 left 值（优先级最高）
+                    subContainerTop !== undefined ? { top: subContainerTop } : {},
+                    subContainerLeft !== undefined ? { left: subContainerLeft } : {},
+                    
+                    subContainerStyle,
+                    
+                    // 自定义背景色（放在最后，确保最高优先级）
+                    dropdownBackgroundColor !== undefined ? { backgroundColor: dropdownBackgroundColor } : {},
+                ]}>
+                    {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);