@beppla/tapas-ui 1.5.11 → 1.5.13

package/components/NumericInput/NumericInput.tsx

@@ -1,244 +0,0 @@
-import React, {FC, useEffect, useMemo, useRef} from 'react';
-import {StyleProp, TextInput, TouchableOpacity, View, ViewStyle, Platform, Keyboard} from 'react-native';
-import CustomIcon from '../Icons/TapasIcon';
-import {makeStyles} from '@rneui/themed';
-import { isBridgelessMode } from '../common/bridgelessUtils';
-const useStyle = makeStyles((theme) => {
-  return {
-    container: {
-      backgroundColor: theme.colors.grey4,
-      borderRadius: theme.radius.rounded,
-      paddingHorizontal: 4,
-      minWidth: 136,
-      height: 40,
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center'
-    },
-    input: {
-      width: 48,
-      height: 17,
-      fontFamily: theme.fonts.fontFamily,
-      fontSize: theme.fonts.sizeM,
-      fontWeight: theme.fonts.weightM,
-      color: theme.colors.colorTextSecondary,
-      // outlineWidth: 0, // Not supported in React Native
-      textAlign: 'center'
-    },
-    disabled: {
-      color: theme.colors.grey2
-    },
-    iconWrap: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: 32,
-      height: 32
-    },
-    iconAddWrap: {
-      backgroundColor: theme.colors.primary,
-      borderRadius: 8
-    },
-    iconAddWrapDisabled: {
-      backgroundColor: theme.colors.colorSurface8,
-
-      borderRadius: 8
-    },
-    disabledColor: {
-      color: theme.colors.colorTextPlaceholder
-    },
-    iconRemoveWrapDisabled: {
-      backgroundColor: 'transparent'
-    },
-    iconRemove: {
-      color: theme.colors.secondary
-    },
-    iconAdd: {
-      color: theme.colors.white
-    }
-  };
-});
-
-interface Props {
-  inputStyle?: StyleProp<ViewStyle>;
-  disabled?: boolean;
-  max: number;
-  min: number;
-  onChange: (value: number) => void;
-  onReduce?: () => void;
-  onAdd?: () => void;
-  value: number;
-  testID?: string;
-  /**
-   * 是否启用 RN 0.77 Bridgeless 模式兼容性修复（默认 true）
-   * 当运行在 RN 0.77+ 的 Bridgeless 模式下时，会自动应用焦点管理修复
-   * 如果遇到问题，可以尝试设置为 false
-   */
-  enableBridgelessFix?: boolean;
-}
-const NumericInput: FC<Props> = ({
-  enableBridgelessFix = true,
-  ...props
-}) => {
-  const styles = useStyle();
-  const [value, setValue] = React.useState(props.value ?? 0);
-  const inputRef = useRef<TextInput>(null);
-  const blurTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const shouldRefocusRef = useRef(false);
-  const isBridgeless = useRef(isBridgelessMode());
-  
-  const isRemoveDisabled = useMemo(() => {
-    return value <= 0 || value <= props?.min;
-  }, [value, props?.min]);
-  const isAddDisabled = useMemo(() => {
-    return value >= props?.max;
-  }, [value, props?.max]);
-  const removeStyle = isRemoveDisabled ? styles.disabled : {};
-  const addStyle = isAddDisabled ? styles.disabled : {};
-
-  const handleRemove = () => {
-    props.onReduce && props.onReduce();
-    if (isRemoveDisabled) return;
-    const tempValue = +value - 1;
-    setValue(tempValue);
-    props.onChange && props.onChange(tempValue);
-  };
-  const handleAdd = () => {
-    props.onAdd && props.onAdd();
-    if (isAddDisabled) return;
-    const tempValue = +value + 1;
-    setValue(tempValue);
-    props.onChange && props.onChange(tempValue);
-  };
-
-  const handleChange = (text: any) => {
-    if (props.max && +text > props.max) return;
-    setValue(text);
-  };
-
-  useEffect(() => {
-    setValue(props.value);
-  }, [props.value]);
-
-  // Android 键盘监听：当键盘显示时，如果输入框失焦，尝试重新聚焦
-  // 这是针对 RN 0.77 Bridgeless 模式的兼容性修复
-  useEffect(() => {
-    if (Platform.OS !== 'android' || !enableBridgelessFix) {
-      return;
-    }
-
-    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
-      if (shouldRefocusRef.current) {
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            if (shouldRefocusRef.current && inputRef.current) {
-              try {
-                if (typeof inputRef.current.focus === 'function') {
-                  inputRef.current.focus();
-                  shouldRefocusRef.current = false;
-                } else {
-                  shouldRefocusRef.current = false;
-                }
-              } catch (error) {
-                shouldRefocusRef.current = false;
-              }
-            }
-          });
-        });
-      }
-    });
-
-    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-      shouldRefocusRef.current = false;
-      if (blurTimeoutRef.current) {
-        clearTimeout(blurTimeoutRef.current);
-        blurTimeoutRef.current = null;
-      }
-    });
-
-    return () => {
-      keyboardDidShowListener.remove();
-      keyboardDidHideListener.remove();
-      if (blurTimeoutRef.current) {
-        clearTimeout(blurTimeoutRef.current);
-        blurTimeoutRef.current = null;
-      }
-    };
-  }, [enableBridgelessFix]);
-
-  return (
-    <View style={styles.container} testID={props.testID}>
-      {props.disabled || isRemoveDisabled ? (
-        <CustomIcon
-          name="remove"
-          size={20}
-          style={{
-            ...styles.iconWrap,
-            ...styles.disabledColor,
-            ...styles.iconRemoveWrapDisabled,
-            ...removeStyle
-          }}
-        />
-      ) : (
-        <TouchableOpacity style={styles.iconWrap} onPress={handleRemove}>
-          <CustomIcon
-            name="remove"
-            size={20}
-            style={{...styles.iconWrap, ...styles.iconRemove, ...removeStyle}}
-          />
-        </TouchableOpacity>
-      )}
-      <TextInput
-        ref={inputRef}
-        style={[styles.input, props.inputStyle, props.disabled && styles.disabledColor]}
-        editable={!props.disabled}
-        keyboardType="numeric"
-        value={(value || 0).toString()}
-        onChangeText={handleChange}
-        onBlur={() => {
-          if (Platform.OS === 'android' && enableBridgelessFix) {
-            shouldRefocusRef.current = true;
-            
-            if (blurTimeoutRef.current) {
-              clearTimeout(blurTimeoutRef.current);
-            }
-            
-            const delay = isBridgeless.current ? 800 : 500;
-            blurTimeoutRef.current = setTimeout(() => {
-              if (!shouldRefocusRef.current) {
-                blurTimeoutRef.current = null;
-                return;
-              }
-              
-              props.onChange && props.onChange(value);
-              shouldRefocusRef.current = false;
-              blurTimeoutRef.current = null;
-            }, delay);
-          } else {
-            props.onChange && props.onChange(value);
-          }
-        }}
-        blurOnSubmit={Platform.OS === 'android' ? false : undefined}
-      />
-      {isAddDisabled || props.disabled ? (
-        <CustomIcon
-          name="add"
-          size={20}
-          style={{
-            ...styles.iconWrap,
-            ...addStyle,
-            ...styles.disabledColor,
-            ...styles.iconAddWrapDisabled
-          }}
-        />
-      ) : (
-        <TouchableOpacity onPress={handleAdd} style={[styles.iconWrap, styles.iconAddWrap]}>
-          <CustomIcon name="add" size={20} style={{...styles.iconAdd, ...addStyle}} />
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-};
-
-export default NumericInput;

package/components/Overlay/Overlay.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { Overlay, OverlayProps, makeStyles } from '@rneui/themed';
-
-export interface Props  extends  OverlayProps {
-  /** Test ID for E2E testing */
-  testID?: string;
-}
-
-const useStyles = makeStyles((theme: any) => ({
-    overlay: {
-        width: '100%',
-        height: '80%',
-        justifyContent: 'flex-start',
-        position: 'absolute',
-        bottom: 0,
-    },
-    backdropStyle: {
-        backgroundColor: theme.colors.grey4,
-    },
-}));
-
-const OverlayComponent: React.FunctionComponent<Props> = ({ children, ...props}) => {
-    const styles = useStyles(props);
-
-    return (
-        <Overlay overlayStyle={[styles.overlay, props.overlayStyle]} backdropStyle={[styles.backdropStyle, props.backdropStyle]} {...props}>
-            {children}
-        </Overlay>
-    );
-};
-
-export default OverlayComponent;

package/components/Pagination/Pagination.tsx

@@ -1,296 +0,0 @@
-import React, {FC, useEffect} from'react';
-import {View, Text, TouchableOpacity, StyleProp, ViewStyle} from "react-native";
-import Icon from "../Icons/TapasIcon";
-import Dropdown, {TDropdownPosition} from "../Dropdown/Dropdown";
-import {makeStyles} from "@rneui/themed";
-import {ItemProps} from "../ListItem/ListItem";
-import { isMobile } from "../common";
-
-
-const useStyles = makeStyles((theme) => {
-    return {
-        container: {
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent:'flex-end',
-            alignItems: 'center',
-            height: 48,
-            paddingHorizontal: 24,
-            paddingVertical: 8,
-            backgroundColor: theme.colors.background,
-        },
-        digitIconDisabled: {
-            fontSize: 20,
-            color: theme.colors.colorTextPlaceholder,
-        },
-        digitIconActive: {
-            fontSize: 20,
-            color: theme.colors.colorTextSecondary,
-        },
-        digitsContainer: {
-            flexDirection: 'row',
-            justifyContent: 'center',
-            alignItems: 'center',
-            paddingLeft: 12,
-            height: 32,
-        },
-        digitContainer: {
-            height: 32,
-            width: 32,
-            marginHorizontal: 8,
-            alignItems: 'center',
-            display: 'flex',
-            justifyContent: 'center',
-        },
-        digitSelected: {
-            borderRadius: theme.radius.full,
-            backgroundColor: theme.colors.grey3,
-        },
-        digitText: {
-            fontFamily: theme.fonts.fontFamily,
-            fontSize: theme.fonts.sizeM,
-            fontWeight: theme.fonts.weightR,
-            color: theme.colors.colorTextSecondary,
-        },
-        pageNumberButton: {
-
-        },
-        dropdownButtonStyle: {
-            borderRadius: 0,
-            borderWidth: 0,
-            backgroundColor: theme.colors.background,
-        },
-        dropdownButtonSelectedStyle: {
-            backgroundColor: theme.colors.background,
-        },
-        textExpandedStyle: {
-            color: theme.colors.colorTextPrimary,
-        },
-        gap: {
-            marginHorizontal: 8,
-            height: 24,
-            color: theme.colors.greyOutline,
-            alignItems: 'center',
-            display: 'flex',
-        }
-    }
-});
-
-const generateArrayFromNumber = (start: number, end: number) => {
-    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
-}
-
-const DEFAULT_PAGE_SIZE_OPTIONS = [
-    {
-        name: '1/Page',
-        value: 1
-    }, {
-        name: '5/Page',
-        value: 5
-    },{
-        name: '10/Page',
-        value: 10
-    },{
-        name: '20/Page',
-        value: 20
-    }, {
-        name: '50/Page',
-        value: 50
-    }, {
-        name: '100/Page',
-        value: 100
-    }
-]
-
-const PAGINATION_STEP = 5;
-const DEFAULT_PAGE_PARAMS = {
-    page: 1,
-    pageSize: 10,
-    totalItems: 0,
-    totalPage: 1,
-}
-
-export type TPageParams = typeof DEFAULT_PAGE_PARAMS;
-
-export interface Props {
-    totalCount: string;
-    pageSizeOptions?: ItemProps[],
-    visibleTotalCount?: boolean;
-    visiblePageSizeOptions?: boolean;
-    pageParams?: TPageParams;
-    onPageChange?: (page: TPageParams) => void;
-    onPageSizeChange?: (item: ItemProps) => void;
-    paginationContainerStyle?: StyleProp<ViewStyle>;
-    pageSizePosition?: TDropdownPosition;
-    backgroundColor?: string;
-    pageSizeDropdownWidth?: number;
-    /** Test ID for E2E testing (default: "pagination") */
-    testID?: string;
-}
-
-const Pagination: FC<Props> = (props) => {
-    const styles = useStyles(props);
-    const {totalCount,
-        pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
-        visiblePageSizeOptions = !isMobile,
-        visibleTotalCount = !isMobile,
-        onPageSizeChange,
-        onPageChange,
-        backgroundColor,
-        pageSizePosition = 'auto',
-        pageSizeDropdownWidth,
-    } = props;
-    
-    // 自动计算下拉框宽度
-    const calculateDropdownWidth = () => {
-        if (pageSizeDropdownWidth) return pageSizeDropdownWidth;
-        
-        // 根据最长选项计算宽度
-        const maxTextLength = Math.max(...pageSizeOptions.map(opt => opt.name?.length || 0));
-        // 每个字符约 8px + 左padding 16px + 右padding(含图标) 32px
-        return Math.max(140, Math.min(maxTextLength * 8 + 48, 200));
-    };
-    
-    const dropdownWidth = calculateDropdownWidth();
-    const [isVisible, setIsVisible] = React.useState(false);
-
-    const [pageGroup, setPageGroup] = React.useState({
-        totalGroups: 1,
-        currentGroup: 1,
-    });
-    const [pageParams, setPageParams] = React.useState(props.pageParams || DEFAULT_PAGE_PARAMS);
-
-    const [selected, selectedItem]  = React.useState<any>(pageSizeOptions.find(item => item.value === pageParams.pageSize));
-
-    useEffect(() => {
-        if(pageParams.page < pageParams.totalPage && pageParams.page < pageGroup.currentGroup * PAGINATION_STEP) {
-            const totalPages = Math.ceil(pageParams.totalItems / pageParams.pageSize);
-            const currentGroup = Math.floor(pageParams.page/PAGINATION_STEP) + 1;
-
-            setPageGroup({
-                currentGroup: currentGroup,
-                totalGroups: Math.ceil(totalPages / PAGINATION_STEP),
-            })
-        }
-    }, [pageParams]);
-
-
-    useEffect(() => {
-        if (props.pageParams) {
-            setPageParams(props.pageParams);
-            selectedItem(pageSizeOptions.find(item => item.value === pageParams.pageSize));
-        }
-    }, [props.pageParams]);
-
-    const handelDigitPress = (digit: number) => {
-        const newPageParams = {...pageParams, page: digit}
-
-        setPageParams(newPageParams);
-        onPageChange && onPageChange(newPageParams);
-    }
-
-    const renderDigits = (numbers: number[]) => {
-        return  numbers.map((digit, index) => (
-            <TouchableOpacity key={index} style={[styles.digitContainer, index + ((pageGroup.currentGroup - 1) * PAGINATION_STEP + 1) === pageParams.page && styles.digitSelected]}  onPress={() => {handelDigitPress(digit)}} accessibilityRole="button" accessibilityLabel={`Page ${digit}`}>
-                <Text style={styles.digitText}>{digit}</Text>
-            </TouchableOpacity>
-        ))
-    };
-
-    const hasNextPage = () => {
-        const {currentGroup, totalGroups} = pageGroup;
-        return currentGroup < totalGroups;
-    }
-    const hasPreviousPage = () => {
-        const {currentGroup} = pageGroup;
-
-        return currentGroup > 1;
-    }
-
-    const handleChangeGroup = (type: string) => {
-        const {currentGroup, totalGroups} = pageGroup;
-        let newGroup = currentGroup;
-
-        switch (type) {
-            case 'next':
-                if (currentGroup < totalGroups) {
-                    newGroup = currentGroup + 1;
-                }
-                break;
-            case 'previous':
-                if (currentGroup > 1) {
-                    newGroup = currentGroup - 1;
-                }
-                break;
-        }
-        setPageGroup({
-            ...pageGroup,
-            currentGroup: newGroup
-        })
-    }
-
-
-      return <View style={[styles.container, backgroundColor && { backgroundColor }, props.paginationContainerStyle]} testID={props.testID ?? "pagination"}>
-          { visibleTotalCount && <Text style={styles.digitText}>{totalCount}</Text> }
-         <View style={styles.digitsContainer}>
-             {
-                 hasPreviousPage() ? (
-                     <TouchableOpacity onPress={() => {
-                         handleChangeGroup('previous');
-                     }} accessibilityRole="button" accessibilityLabel="Previous page">
-                         <Icon name="chevron_left" style={styles.digitIconActive} />
-                     </TouchableOpacity>
-                 ) : <Icon name="chevron_left" style={styles.digitIconDisabled} />
-             }
-
-             {renderDigits(generateArrayFromNumber((pageGroup.currentGroup - 1 ) * PAGINATION_STEP + 1, pageParams.totalPage > (pageGroup.currentGroup * PAGINATION_STEP) ? (pageGroup.currentGroup * PAGINATION_STEP) : pageParams.totalPage))}
-
-             {
-                 hasNextPage() ? (
-                     <TouchableOpacity onPress={() => {
-                         handleChangeGroup('next');
-                     }} accessibilityRole="button" accessibilityLabel="Next page">
-                         <Icon name="chevron_right" style={styles.digitIconActive} />
-                     </TouchableOpacity>
-                 ) : <Icon name="chevron_right" style={styles.digitIconDisabled} />
-             }
-
-         </View>
-          {
-              visiblePageSizeOptions &&
-              <>
-                  <Text style={styles.gap}> | </Text>
-                  <Dropdown
-                      options={pageSizeOptions}
-                      value={selected}
-                      width={100}
-                      subWidth={dropdownWidth}
-                      dropdownButtonStyle={{
-                        ...styles.dropdownButtonStyle,
-                        ...(backgroundColor && { backgroundColor })
-                      }}
-                      dropdownButtonSelectedStyle={{
-                        ...styles.dropdownButtonSelectedStyle,
-                        ...(backgroundColor && { backgroundColor })
-                      }}
-                      // @ts-expect-error textExpandedStyle is a valid Dropdown prop not in TS def
-                      textExpandedStyle = {styles.textExpandedStyle}
-                      // @ts-expect-error iconExpandedStyle is a valid Dropdown prop not in TS def
-                      iconExpandedStyle={styles.textExpandedStyle}
-                      dropdownBackgroundColor={backgroundColor || undefined}
-                      onChange={(item) => {
-                          selectedItem(item);
-                          onPageSizeChange && onPageSizeChange(item);
-                       }}
-                      subContainerPosition={pageSizePosition}
-                      isVisible={isVisible}
-                      onClose={() => {setIsVisible(!isVisible);}}
-                      onPress={() => {
-                          setIsVisible(!isVisible);
-                      }}
-                  />
-              </>
-          }
-      </View>;
-};
-export default React.memo(Pagination);