@beppla/tapas-ui 1.5.10 → 1.5.12

package/components/NumericInput/NumericInput.tsx

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

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

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