@beppla/tapas-ui 1.0.65 → 1.0.67

package/components/NumericInput/NumericInput.tsx

@@ -1,161 +0,0 @@
-import React, {FC, useEffect, useMemo} from 'react';
-import {StyleProp, TextInput, TouchableOpacity, View, ViewStyle} from 'react-native';
-import CustomIcon from '../Icons/TapasIcon';
-import {makeStyles} from '@rneui/themed';
-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;
-}
-const NumericInput: FC<Props> = (props) => {
-  const styles = useStyle();
-  const [value, setValue] = React.useState(props.value || 0);
-  const isRemoveDisabled = useMemo(() => {
-    return value <= 0 || value <= props?.min;
-  }, [value]);
-  const isAddDisabled = useMemo(() => {
-    return value >= props?.max;
-  }, [value]);
-  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]);
-
-  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
-        style={[styles.input, props.inputStyle, props.disabled && styles.disabledColor]}
-        editable={!props.disabled}
-        keyboardType="numeric"
-        value={(value || 0).toString()}
-        onChangeText={handleChange}
-        onBlur={() => {
-          props.onChange && props.onChange(value);
-        }}
-      />
-      {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,30 +0,0 @@
-import React from 'react';
-import { Overlay, OverlayProps, makeStyles } from '@rneui/themed';
-
-export interface Props  extends  OverlayProps {
-}
-
-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,271 +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;
-}
-
-const Pagination: FC<Props> = (props) => {
-    const styles = useStyles(props);
-    const {totalCount,
-        pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
-        visiblePageSizeOptions = !isMobile,
-        visibleTotalCount = !isMobile,
-        onPageSizeChange,
-        onPageChange,
-    } = props;
-    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)}}>
-                <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, props.paginationContainerStyle]} testID="pagination">
-          { visibleTotalCount && <Text style={styles.digitText}>{totalCount}</Text> }
-         <View style={styles.digitsContainer}>
-             {
-                 hasPreviousPage() ? (
-                     <TouchableOpacity onPress={() => {
-                         handleChangeGroup('previous');
-                     }}>
-                         <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');
-                     }}>
-                         <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}
-                      // @ts-ignore
-                      subWidth={100}
-                      dropdownButtonStyle={styles.dropdownButtonStyle}
-                      dropdownButtonSelectedStyle={styles.dropdownButtonSelectedStyle}
-                      // @ts-ignore
-                      textExpandedStyle = {styles.textExpandedStyle}
-                      // @ts-ignore
-                      iconExpandedStyle={styles.textExpandedStyle}
-                      onChange={(item) => {
-                          selectedItem(item);
-                          onPageSizeChange && onPageSizeChange(item);
-                       }}
-                      subContainerPosition={props.pageSizePosition}
-                      isVisible={isVisible}
-                      onClose={() => {setIsVisible(!isVisible);}}
-                      onPress={() => {
-                          setIsVisible(!isVisible);
-                      }}
-                  />
-              </>
-          }
-      </View>;
-};
-export default Pagination;

package/components/Popover/Popover.tsx

@@ -1,172 +0,0 @@
-import React from 'react';
-import { View,  StyleProp, ViewStyle } from 'react-native';
-import { makeStyles, withTheme } from '@rneui/themed';
-import Icon from '../Icons/TapasIcon';
-
-export type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
-export type ArrowPosition = 'start' | 'center' | 'end';
-
-export interface Props {
-  isVisible: boolean;
-  children?: React.ReactNode;
-  position?: PopoverPosition;
-  arrowPosition?: ArrowPosition;
-  width?: number;
-  height?: number;
-  containerStyle?: StyleProp<ViewStyle>;
-  contentStyle?: StyleProp<ViewStyle>;
-}
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    position: 'absolute',
-    backgroundColor: theme.colors.white,
-    borderRadius: theme.radius.rounded,
-    shadowColor: theme.colors.grey4,
-    shadowOffset: {
-      width: 0,
-      height: 12,
-    },
-    shadowOpacity: 0.58,
-    shadowRadius: 24,
-    elevation: 8,
-    zIndex: 9999,
-  },
-  arrow: {
-    position: 'absolute',
-    color: theme.colors.white,
-    width: 12,
-    height: 27,
-  },
-  arrowTop: {
-    top: -6,
-    shadowColor: theme.colors.grey4,
-    shadowOffset: {
-      width: 0,
-      height: -2,
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 4,
-    elevation: 2,
-  },
-  arrowBottom: {
-    bottom: -6,
-    shadowColor: theme.colors.grey4, 
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 4,
-    elevation: 2,
-  },
-  arrowLeft: {
-    left: -6,
-    shadowColor: theme.colors.grey4,
-    shadowOffset: {
-      width: -2,
-      height: 0,
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 4,
-    elevation: 2,
-  },
-  arrowRight: {
-    right: -6,
-    shadowColor: theme.colors.grey4,
-    shadowOffset: {
-      width: 2,
-      height: 0,
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 4,
-    elevation: 2,
-  },
-  content: {
-    flex: 1,
-    borderRadius: theme.radius.rounded,
-    overflow: 'hidden',
-  },
-}));
-
-const Popover: React.FC<Props> = ({
-  isVisible,
-  children,
-  position = 'bottom',
-  arrowPosition = 'center',
-  width = 392,
-  height = 696,
-  containerStyle,
-  contentStyle,
-  ...props
-}) => {
-  const styles = useStyles(props);
-
-  if (!isVisible) return null;
-
-  const getArrowStyle = () => {
-    let arrowPositionStyle = {};
-    
-    switch (position) {
-      case 'top':
-        arrowPositionStyle = styles.arrowTop;
-        break;
-      case 'bottom':
-        arrowPositionStyle = styles.arrowBottom;
-        break;
-      case 'left':
-        arrowPositionStyle = styles.arrowLeft;
-        break;
-      case 'right':
-        arrowPositionStyle = styles.arrowRight;
-        break;
-    }
-
-    // 根据箭头位置调整left/top值
-    const positionStyle: any = {};
-    if (position === 'top' || position === 'bottom') {
-      switch (arrowPosition) {
-        case 'start':
-          positionStyle.left = 20;
-          break;
-        case 'center':
-          positionStyle.left = width / 2 - 6;
-          break;
-        case 'end':
-          positionStyle.right = 20;
-          break;
-      }
-    } else {
-      switch (arrowPosition) {
-        case 'start':
-          positionStyle.top = 20;
-          break;
-        case 'center':
-          positionStyle.top = height / 2 - 6;
-          break;
-        case 'end':
-          positionStyle.bottom = 20;
-          break;
-      }
-    }
-
-    return {
-      ...styles.arrow,
-      ...arrowPositionStyle,
-      ...positionStyle,
-    };
-  };
-
-  return (
-    <View style={[styles.container, { width, height }, containerStyle]} testID="popover">
-      {/* 箭头 */}
-      <Icon name="left_arrow" size={17} style={getArrowStyle()} />
-      {/* 内容区域 */}
-      <View style={[styles.content, contentStyle]}>
-        {children}
-      </View>
-    </View>
-  );
-};
-
-export default withTheme(Popover);