@beppla/tapas-ui 1.0.45 → 1.0.47

package/components/ReasonModal/ReasonModal.tsx

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

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

package/components/ScanButton/ScanButton.tsx

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

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

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

package/components/SheetTitle/SheetTitle.tsx

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

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