@beppla/tapas-ui 1.0.64 → 1.0.66

package/components/ReasonModal/ReasonModal.tsx

@@ -1,223 +0,0 @@
-import React, { useEffect, useState, useCallback, useMemo } from "react";
-import { View, Text, Modal, ViewProps } from "react-native";
-import { withTheme, makeStyles } from "@rneui/themed";
-import TapasButton from "../Button/Button";
-import TapasRadioButton from "../RadioButton/RadioButton";
-
-export interface ReasonOption {
-  key: string;
-  text: string;
-}
-
-export interface ReasonModalProps extends ViewProps {
-  /** 是否显示模态框 */
-  visible?: boolean;
-  /** 模态框标题 */
-  title?: string;
-  /** 副标题或说明文字 */
-  subtitle?: string;
-  /** 可选择的原因选项 */
-  options: ReasonOption[];
-  /** 当前选中的原因key */
-  selectedReason?: string;
-  /** 确认按钮文字 */
-  confirmText?: string;
-  /** 取消按钮文字 */
-  cancelText?: string;
-  /** 模态框宽度 */
-  width?: number;
-  /** 是否禁用确认按钮（当没有选择时） */
-  disableConfirmWhenEmpty?: boolean;
-  /** 关闭模态框的回调 */
-  onClose?: () => void;
-  /** 确认选择的回调 */
-  onConfirm?: (reason: ReasonOption) => void;
-  /** 选择改变的回调 */
-  onSelectionChange?: (reason: ReasonOption | null) => void;
-  /** 模态框请求关闭的回调（Android返回键等） */
-  onRequestClose?: () => void;
-}
-
-const TapasReasonModal: React.FC<ReasonModalProps> = ({
-  visible = false,
-  title = "Select Reason",
-  subtitle,
-  options = [],
-  selectedReason,
-  confirmText = "Confirm",
-  cancelText = "Cancel",
-  width = 480,
-  disableConfirmWhenEmpty = true,
-  onClose,
-  onConfirm,
-  onSelectionChange,
-  onRequestClose,
-  style,
-  ...otherProps
-}) => {
-  const styles = useStyles();
-  const [localSelectedReason, setLocalSelectedReason] = useState<string>("");
-
-  // 同步外部选中状态
-  useEffect(() => {
-    setLocalSelectedReason(selectedReason || "");
-  }, [selectedReason]);
-
-  // 重置选择当模态框显示/隐藏时
-  useEffect(() => {
-    if (visible) {
-      setLocalSelectedReason(selectedReason || "");
-    } else {
-      setLocalSelectedReason("");
-    }
-  }, [visible, selectedReason]);
-
-  // 处理选择改变
-  const handleSelectionChange = useCallback((option: ReasonOption) => {
-    setLocalSelectedReason(option.key);
-    onSelectionChange?.(option);
-  }, [onSelectionChange]);
-
-  // 处理关闭
-  const handleClose = useCallback(() => {
-    setLocalSelectedReason("");
-    onClose?.();
-  }, [onClose]);
-
-  // 处理确认
-  const handleConfirm = useCallback(() => {
-    const selectedOption = options.find(option => option.key === localSelectedReason);
-    if (selectedOption) {
-      onConfirm?.(selectedOption);
-    }
-  }, [localSelectedReason, options, onConfirm]);
-
-  // 处理模态框请求关闭
-  const handleRequestClose = useCallback(() => {
-    if (onRequestClose) {
-      onRequestClose();
-    } else {
-      handleClose();
-    }
-  }, [onRequestClose, handleClose]);
-
-  // 计算是否应该禁用确认按钮
-  const isConfirmDisabled = useMemo(() => {
-    return disableConfirmWhenEmpty && !localSelectedReason;
-  }, [disableConfirmWhenEmpty, localSelectedReason]);
-
-
-
-  return (
-    <Modal
-      animationType="fade"
-      transparent={true}
-      visible={visible}
-      onRequestClose={handleRequestClose}
-      {...otherProps}
-    >
-      <View style={[styles.modalContainer, style]}>
-        <View style={[styles.modalContent, { width }]}>
-          {/* 标题区域 */}
-          <View style={styles.titleContainer}>
-            <Text style={styles.title}>{title}</Text>
-            {subtitle && (
-              <Text style={styles.subtitle}>{subtitle}</Text>
-            )}
-          </View>
-
-          {/* 选项区域 */}
-          <View style={styles.optionsContainer}>
-            <TapasRadioButton
-              options={options}
-              selected={localSelectedReason}
-              onPress={handleSelectionChange}
-            />
-          </View>
-
-          {/* 按钮区域 */}
-          <View style={styles.buttonsContainer}>
-            <TapasButton
-              title={cancelText}
-              type="clear"
-              onPress={handleClose}
-              style={styles.cancelButton}
-            />
-            <TapasButton
-              title={confirmText}
-              type="solid"
-              disabled={isConfirmDisabled}
-              onPress={handleConfirm}
-              style={styles.confirmButton}
-            />
-          </View>
-        </View>
-      </View>
-    </Modal>
-  );
-};
-
-const useStyles = makeStyles((theme) => ({
-  modalContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "rgba(0, 0, 0, 0.6)",
-    zIndex: 10,
-  },
-  modalContent: {
-    borderRadius: theme?.radius?.rounded || 12,
-    backgroundColor: theme?.colors?.white || '#ffffff',
-    boxShadow: "0px 12px 40px 0px rgba(0, 0, 0, 0.14), 0px 24px 56px 0px rgba(0, 0, 0, 0.10)",
-    display: "flex",
-    flexDirection: "column",
-    maxHeight: "80%",
-    minWidth: 320,
-    maxWidth: "90%",
-  },
-  titleContainer: {
-    padding: theme?.spacing?.tpRg || 16,
-    paddingBottom: theme?.spacing?.tpXs || 8,
-    borderBottomWidth: 1,
-    borderBottomColor: theme?.colors?.grey4 || '#e0e0e0',
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: theme?.fonts?.weightL || "600",
-    color: theme?.colors?.primary || '#007AFF',
-    lineHeight: 24,
-  },
-  subtitle: {
-    marginTop: theme?.spacing?.tp2xs || 4,
-    fontSize: 14,
-    color: theme?.colors?.colorTextSecondary || theme?.colors?.grey1 || '#666666',
-    lineHeight: 20,
-  },
-  optionsContainer: {
-    flex: 1,
-    padding: theme?.spacing?.tpRg || 16,
-    minHeight: 100,
-    maxHeight: 400,
-  },
-  buttonsContainer: {
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    padding: theme?.spacing?.tpRg || 16,
-    paddingTop: theme?.spacing?.tpXs || 8,
-    borderTopWidth: 1,
-    borderTopColor: theme?.colors?.grey4 || '#e0e0e0',
-    gap: 12,
-  },
-  cancelButton: {
-    minWidth: 80,
-  },
-  confirmButton: {
-    minWidth: 80,
-  },
-}));
-
-export default withTheme(TapasReasonModal);
-
-// Export aliases for compatibility
-export const ReasonModal = withTheme(TapasReasonModal);
-export { TapasReasonModal };

package/components/ReasonModal/index.tsx

@@ -1,3 +0,0 @@
-export { default } from './ReasonModal';
-export type { ReasonModalProps, ReasonOption } from './ReasonModal';
-export { ReasonModal, TapasReasonModal } from './ReasonModal';

package/components/ScanButton/ScanButton.tsx

@@ -1,139 +0,0 @@
-import React from "react";
-import { View, Text, Pressable } from "react-native";
-import { withTheme, makeStyles, useTheme } from "@rneui/themed";
-import TapasIcon from "../Icons/TapasIcon";
-
-export interface ScanButtonProps {
-  onPress?: () => void;
-  text?: string;
-  icon?: string;
-  size?: number;
-  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'center';
-  backgroundColor?: string;
-  textColor?: string;
-  iconColor?: string;
-  testID?: string;
-}
-
-const ScanButton: React.FC<ScanButtonProps> = ({ 
-  onPress,
-  text = "Scan QR Code",
-  icon = "qr_code_scan",
-  size = 20,
-  position = 'bottom-right',
-  backgroundColor,
-  textColor,
-  iconColor,
-  testID,
-}) => {
-  const theme = useTheme();
-  const styles = useStyles({ position });
-  
-  return (
-    <View style={styles.scanWrapper} testID={testID}>
-      <View style={styles.barCon}>
-        <Pressable
-          style={[
-            styles.scanBtn,
-            backgroundColor ? { backgroundColor } : null
-          ]}
-          onPress={() => {
-            onPress && onPress();
-          }}
-        >
-          <TapasIcon
-            style={styles.scanIcon}
-            name={icon}
-            size={size}
-            color={iconColor || theme.theme.colors.white}
-          />
-          <Text
-            style={[
-              styles.scanText,
-              textColor ? { color: textColor } : null
-            ]}
-            numberOfLines={1}
-            ellipsizeMode="tail"
-          >
-            {text}
-          </Text>
-        </Pressable>
-      </View>
-    </View>
-  );
-};
-
-const useStyles = makeStyles((theme, props?: { position?: string }) => {
-  const { position = 'bottom-right' } = props || {};
-  
-  let positionStyle: any = {
-    bottom: 24,
-    right: 24,
-  };
-
-  switch (position) {
-    case 'bottom-left':
-      positionStyle = { bottom: 24, left: 24 };
-      break;
-    case 'top-right':
-      positionStyle = { top: 24, right: 24 };
-      break;
-    case 'top-left':
-      positionStyle = { top: 24, left: 24 };
-      break;
-    case 'center':
-      positionStyle = { 
-        top: '50%', 
-        left: '50%',
-        marginTop: -20,
-        marginLeft: -50,
-      };
-      break;
-  }
-
-  return {
-    scanWrapper: {
-      display: "flex",
-      position: "absolute",
-      flexDirection: "column",
-      height: 40,
-      justifyContent: "flex-end",
-      ...positionStyle,
-    },
-    barCon: {
-      height: 40,
-      flex: 1,
-      maxHeight: 40,
-      display: "flex",
-      flexDirection: "row",
-      zIndex: 20,
-    },
-    scanBtn: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      alignContent: "center",
-      height: 40,
-      paddingLeft: 16,
-      paddingRight: 16,
-      borderRadius: 20,
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 4 },
-      shadowOpacity: 0.08,
-      shadowRadius: 16,
-      elevation: 8,
-      backgroundColor: theme.colors.primary,
-    },
-    scanIcon: {
-      display: "flex",
-      marginRight: 8,
-    },
-    scanText: {
-      fontSize: 14,
-      fontWeight: "600",
-      color: theme.colors.white,
-    }
-  };
-});
-
-export default withTheme(ScanButton);

package/components/SearchInput/SearchInput.tsx

@@ -1,122 +0,0 @@
-import React, { useEffect, useState, useCallback, useMemo } from "react";
-import { Platform, View, ViewProps } from "react-native";
-import { withTheme, makeStyles, useTheme } from "@rneui/themed";
-import TapasInput from "../Input/Input";
-import TapasIcon from "../Icons/TapasIcon";
-
-const inputStyle = Platform.select({
-  web: {
-    outlineStyle: "none",
-  },
-  default: {
-    borderWidth: 0,
-    height: 40,
-    width: 112,
-  },
-});
-
-export interface SearchInputProps extends ViewProps {
-  placeholder?: string;
-  value?: string;
-  height?: number;
-  width?: number;
-  onSearch?: (val?: string) => void;
-  attachSearch?: (val?: string) => void;
-}
-
-const TapasSearchInput: React.FC<SearchInputProps> = ({
-  style,
-  height = 40,
-  width = 168,
-  placeholder,
-  value,
-  onSearch,
-  attachSearch,
-  ...otherProps
-}) => {
-  const theme = useTheme();
-  const styles = useStyles();
-  const [searchValue, setSearchValue] = useState(value);
-
-  useEffect(() => {
-    setSearchValue(value);
-  }, [value]);
-
-  const handleSearch = useCallback((text?: string) => {
-    onSearch?.(text);
-    attachSearch?.(text);
-  }, [onSearch, attachSearch]);
-
-  const containerStyle = useMemo(() => [
-    styles.search, 
-    style, 
-    { width }
-  ], [styles.search, style, width]);
-
-  const inputContainerStyle = useMemo(() => [
-    styles.inputContainer,
-    { width, height, maxHeight: height, minHeight: height },
-  ], [styles.inputContainer, width, height]);
-
-  const inputInnerContainerStyle = useMemo(() => [
-    styles.inputInnerContainer,
-    { width: width - 56, height, maxHeight: height, minHeight: height },
-  ], [styles.inputInnerContainer, width, height]);
-
-  const inputStyleMemo = useMemo(() => [
-    inputStyle, 
-    { width: width - 56, height }
-  ], [width, height]);
-
-  return (
-    <View {...otherProps} style={containerStyle}>
-      <TapasInput
-        inputStyle={inputStyleMemo}
-        labelBg="transparent"
-        inputContainerStyle={inputInnerContainerStyle}
-        value={searchValue}
-        onChangeText={handleSearch}
-        containerStyle={inputContainerStyle}
-        leftIcon={
-          <TapasIcon
-            onPress={() => handleSearch(searchValue)}
-            name="search"
-            size={24}
-            color={theme.theme.colors.grey1}
-          />
-        }
-        placeholder={placeholder}
-      />
-    </View>
-  );
-};
-
-const useStyles = makeStyles((theme) => ({
-  inputContainer: {
-    backgroundColor: theme?.colors?.grey4,
-    width: 168,
-    height: 40,
-    maxHeight: 40,
-    minHeight: 40,
-    borderRadius: 20,
-  },
-  inputInnerContainer: {
-    borderWidth: 0,
-    width: 112,
-    height: 40,
-    maxHeight: 40,
-    minHeight: 40,
-    borderBottomWidth: 0,
-  },
-  search: {
-    width: 168,
-    display: "flex",
-    overflow: "hidden",
-  },
-}));
-
-export default withTheme(TapasSearchInput);
-
-// Export aliases for compatibility
-export const SearchInput = withTheme(TapasSearchInput);
-export { TapasSearchInput };

package/components/SearchInput/index.tsx

@@ -1,2 +0,0 @@
-export { default } from './SearchInput';
-export type { SearchInputProps } from './SearchInput';

package/components/SheetTitle/SheetTitle.tsx

@@ -1,84 +0,0 @@
-import React, { FC } from 'react';
-import {withTheme, makeStyles, Text} from "@rneui/themed";
-import {StyleProp, TouchableOpacity, View, ViewStyle} from "react-native";
-import Button from "../Button/Button";
-import Icon from '../Icons/TapasIcon';
-export interface Props {
-    title?: string,
-    icon?: React.ReactNode | string,
-    showClear?: Boolean,
-    showClose?: Boolean,
-    clearText?: string,
-    onClear?: () => void,
-    onClose?: () => void,
-    titleContainerStyle?: StyleProp<ViewStyle>,
-    titleStyle?: StyleProp<ViewStyle>,
-    clearStyle?: StyleProp<ViewStyle>,
-    closeStyle?: StyleProp<ViewStyle>,
-    testID?: string,
-}
-const useStyles = makeStyles((theme) => {
-    return {
-        titleContainer: {
-            backgroundColor: theme.colors.white,
-            height: 40,
-            width: '100%',
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            paddingVertical: 8,
-            paddingLeft: 16,
-            borderBottomWidth: 1,
-            borderBottomColor: theme.colors.greyOutline,
-            borderBottomStyle: 'solid'
-        },
-        title: {
-            fontFamily: theme.fonts.fontFamily,
-            fontSize: theme.fonts.sizeL,
-            fontWeight: theme.fonts.weightL,
-            color: theme.colors.colorTextPrimary,
-            flex: 1,
-        },
-        clear: {
-            marginRight: 8,
-        },
-        close: {
-            width: 40,
-            height: 40,
-            justifyContent: 'center',
-            alignItems: 'center'
-        },
-        closeWrapper: {
-            display: 'flex',
-            flexDirection: 'row',
-        }
-    }
-});
-const SheetTitle:FC<Props>  = (props) => {
-    const {title, icon = 'close', showClose = true, showClear, onClose, clearText, clearStyle, onClear, titleContainerStyle, titleStyle, closeStyle, testID} = props;
-    const styles = useStyles(props);
-    return (
-        <View style={[styles.titleContainer, titleContainerStyle]} testID={testID}>
-            <Text style={[styles.title, titleStyle]} numberOfLines={1} ellipsizeMode="tail" >{title}</Text>
-            <View style={styles.closeWrapper}>
-                {
-                    showClear && <Button style={[styles.clear, clearStyle]} onPress={onClear} type={'clear'}>
-                        {
-                            clearText || 'Clear'
-                        }
-                    </Button>
-                }
-                {
-                    (showClose && icon) && (<TouchableOpacity style={[styles.close, closeStyle]} onPress={onClose}>
-                        {
-                            typeof icon === 'string' ? <Icon name={icon as string} size={20} /> : icon
-                        }
-                    </TouchableOpacity>)
-                }
-            </View>
-        </View>
-    )
-}
-
-export  default  withTheme(SheetTitle)

package/components/Shell/Shell.tsx

@@ -1,116 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { View, Animated } from "react-native";
-import { withTheme } from "@rneui/themed";
-import {
-  ShellDrawerProps,
-  ShellPorps,
-  ShellViewProps,
-  defaultDrawerWidth,
-} from "./types";
-import { styles } from "./styles";
-
-const Shell: React.FC<ShellPorps> & {
-  Main: React.FC<ShellViewProps>;
-  Drawer: React.FC<ShellDrawerProps>;
-} = ({
-  children,
-  border = true,
-  drawerWidth = defaultDrawerWidth,
-  style = {},
-  openDrawer = false,
-  testID,
-  ...props
-}: ShellPorps) => {
-  let mainContent = null;
-  let drawerContent = null;
-
-  const [open, setOpen] = useState<boolean>(openDrawer);
-  const animatedWidth = new Animated.Value(openDrawer ? drawerWidth : 0);
-
-  useEffect(() => {
-    setOpen(openDrawer);
-  }, [openDrawer]);
-
-  useEffect(() => {
-    Animated.spring(animatedWidth, {
-      toValue: open ? drawerWidth : 0,
-      tension: 300,
-      friction: 20,
-      useNativeDriver: false,
-    }).start();
-  }, [open, drawerWidth]);
-
-  React.Children.forEach(children, (child) => {
-    if (React.isValidElement(child)) {
-      if (child.type === Shell.Main) {
-        mainContent = child.props.children;
-      } else if (child.type === Shell.Drawer) {
-        drawerContent = child.props.children;
-      }
-    }
-  });
-
-  return (
-    <View style={{...styles.container, ...style}} testID={testID} {...props}>
-      <ShellView
-        style={{ ...styles.mainContainer, borderTopWidth: border ? 1 : 0 }}
-      >
-        {mainContent}
-      </ShellView>
-      <Animated.View style={{ ...styles.drawerContainer, width: animatedWidth }}>
-        <ShellDrawer
-          style={{
-            borderTopWidth: border ? 1 : 0,
-            borderLeftWidth: border ? 1 : 0,
-          }}
-        >
-          {drawerContent}
-        </ShellDrawer>
-      </Animated.View>
-    </View>
-  );
-};
-
-export const ShellView: React.FC<ShellViewProps> = ({
-  children,
-  style = {},
-  theme,
-}) => {
-  return (
-    <View
-      style={{
-        ...style,
-        borderTopColor: theme?.greyOutline ?? "rgba(0, 0, 0, 0.12)",
-        borderTopStyle: "solid",
-      }}
-    >
-      {children}
-    </View>
-  );
-};
-
-export const ShellDrawer: React.FC<ShellDrawerProps> = ({
-  children,
-  style,
-  theme,
-}) => {
-  return (
-    <View
-      style={{
-        ...style,
-        ...styles.drawerInnerCon,
-        borderTopColor: theme?.greyOutline ?? "rgba(0, 0, 0, 0.12)",
-        borderTopStyle: "solid",
-        borderLeftColor: theme?.greyOutline ?? "rgba(0, 0, 0, 0.12)",
-        borderLeftStyle: "solid",
-      }}
-    >
-      {children}
-    </View>
-  );
-};
-
-Shell.Main = withTheme(ShellView) as React.FC<ShellViewProps>;
-Shell.Drawer = withTheme(ShellDrawer) as React.FC<ShellDrawerProps>;
-
-export default Shell;