@beppla/tapas-ui 1.0.65 → 1.0.66

package/components/Collapsible/Collapsible.tsx

@@ -1,88 +0,0 @@
-import React, { PropsWithChildren, useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import { withTheme, makeStyles, useTheme } from '@rneui/themed';
-import TapasIcon from '../Icons/TapasIcon';
-import TapasText from '../Text/Text';
-
-export interface CollapsibleProps extends PropsWithChildren {
-  title: string;
-  initialOpen?: boolean;
-  onToggle?: (isOpen: boolean) => void;
-  titleStyle?: any;
-  contentStyle?: any;
-  iconColor?: string;
-  iconSize?: number;
-  testID?: string;
-}
-
-const Collapsible: React.FC<CollapsibleProps> = ({ 
-  children, 
-  title,
-  initialOpen = false,
-  testID,
-  onToggle,
-  titleStyle,
-  contentStyle,
-  iconColor,
-  iconSize = 18,
-}) => {
-  const [isOpen, setIsOpen] = useState(initialOpen);
-  const theme = useTheme();
-  const styles = useStyles();
-
-  const handleToggle = () => {
-    const newState = !isOpen;
-    setIsOpen(newState);
-    onToggle?.(newState);
-  };
-
-  return (
-    <View style={styles.container} testID={testID}>
-      <TouchableOpacity
-        style={styles.heading}
-        onPress={handleToggle}
-        activeOpacity={0.8}
-      >
-        <TapasIcon
-          name={isOpen ? 'expand_less' : 'expand_more'}
-          size={iconSize}
-          color={iconColor || theme.theme.colors.grey1}
-        />
-        <TapasText style={[styles.title, titleStyle]}>
-          {title}
-        </TapasText>
-      </TouchableOpacity>
-      {isOpen && (
-        <View style={[styles.content, contentStyle]}>
-          {children}
-        </View>
-      )}
-    </View>
-  );
-};
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    backgroundColor: theme.colors.background,
-  },
-  heading: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-    paddingVertical: 12,
-    paddingHorizontal: 4,
-  },
-  title: {
-    flex: 1,
-    fontSize: 16,
-    fontWeight: '600',
-    color: theme.colors.primary,
-  },
-  content: {
-    marginTop: 6,
-    marginLeft: 24,
-    paddingBottom: 12,
-  },
-}));
-
-export default withTheme(Collapsible);

package/components/DashboardCard/DashboardCard.tsx

@@ -1,222 +0,0 @@
-import React, {useState} from 'react';
-import TapasIcon from  '../Icons/TapasIcon';
-import {View, Text, TouchableOpacity, StyleProp, ViewStyle} from 'react-native';
-import {makeStyles} from "@rneui/themed";
-import Hoverable from "../Hoverable/Hoverable";
-export interface Props {
-    cardContainerStyle?: StyleProp<ViewStyle>;
-    cardStyle?: StyleProp<ViewStyle>;
-    contentStyle?: StyleProp<ViewStyle>;
-    headerStyle?: StyleProp<ViewStyle>;
-    titleStyle?: StyleProp<ViewStyle>;
-    disabled?: boolean;
-    testID?: string;
-    header?: {
-        icon?: string;
-        title?: string;
-        description?: string[];
-        action?: React.ReactNode;
-        onPressAction?: (value: any) => void;
-        actionStyle?: StyleProp<ViewStyle>;
-    }
-    content?: string;
-    footer?: {
-        title?: string;
-        description?: string;
-        onPress?: () => void;
-        icon?: string;
-    };
-    onCardPress?: () => void;
-}
-const useStyles = makeStyles((theme, ...props) => {
-    const {disabled} = props[0] as any;
-    return {
-        cardWrap: {
-            display: "flex",
-            backgroundColor: disabled ? theme.colors.grey5 : theme.colors.white,
-            borderRadius: theme.radius.rounded,
-            borderColor: theme.colors.grey5,
-            flex: 1,
-        },
-        cardWrapHover: {
-            shadowColor: theme.colors.grey5,
-            shadowOffset: { width: 0, height: 8 }, // 第一部分的 offset
-            shadowRadius: 24,
-        },
-        headerWrap: {
-            display: "flex",
-            flexDirection: "row",
-            paddingLeft: 16,
-            paddingRight: 10,
-            paddingTop: 10,
-            paddingBottom:8,
-            justifyContent: "space-between",
-        },
-        titleWrap: {
-            display: "flex",
-            flexDirection: "column",
-            maxWidth: "100%",
-        },
-        title: {
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-            flexGrow: 1,
-        },
-        titleText: {
-            marginLeft: 8,
-            fontFamily: theme.fonts.fontFamily,
-            fontSize: theme.fonts.sizeL,
-            fontWeight: theme.fonts.weightL,
-            color: disabled ? theme.colors.grey2 : theme.colors.primary,
-            overflow: "hidden",
-            maxWidth: '100%',
-        },
-        icon: {},
-        descriptionWrap: {
-            marginTop: 4,
-            display: "flex",
-            flexDirection: "row",
-        },
-        description: {
-            fontFamily: theme.fonts.fontFamily,
-            fontSize: theme.fonts.sizeS,
-            fontWeight: theme.fonts.weightR,
-            color: disabled ? theme.colors.grey2 : theme.colors.secondary,
-            backgroundColor: theme.colors.grey5,
-            padding: 4,
-            marginRight: 4,
-        },
-        actionStyle: {
-            color: disabled ? theme.colors.grey2 : theme.colors.secondary,
-        },
-        footerWrap: {
-            display: "flex",
-            flexDirection: "row",
-            padding: 16,
-            justifyContent: "space-between"
-        },
-        footerTitleWrap: {
-
-        },
-        footerDescriptionText:{
-            fontFamily: theme.fonts.fontFamily,
-            fontSize: theme.fonts.sizeL,
-            fontWeight: theme.fonts.weightR,
-            color: disabled ? theme.colors.grey2 : theme.colors.primary,
-        },
-        footerTitleText: {
-            fontFamily: theme.fonts.fontFamily,
-            fontSize: theme.fonts.sizeXs,
-            fontWeight: theme.fonts.weightL,
-            color: disabled ? theme.colors.grey2 : theme.colors.secondary,
-        },
-        footerIcon: {
-            borderRadius: 14,
-            borderWidth: 1,
-            borderColor: disabled ? theme.colors.grey2 : theme.colors.grey3,
-            height: 28,
-            width: 28,
-            transform: "rotate(180deg)",
-            justifyContent: "center",
-            alignItems: "center",
-        },
-        footerIconStyle: {
-            color: disabled ? theme.colors.grey2 : theme.colors.primary,
-        },
-        titleIcon: {
-            color: disabled ? theme.colors.grey2 : theme.colors.primary,
-        },
-        contentTextStyle: {
-            color: disabled ? theme.colors.grey2 : theme.colors.primary,
-        },
-        disabled: {
-            backgroundColor: theme.colors.grey5,
-        }
-    }
-});
-const DashboardCard: React.FC<Props> = ({header, content, footer, onCardPress, testID, ...props}) => {
-    const styles = useStyles(props);
-    const [isHovered, setIsHovered] = useState(false);
-    const handleMouseEnter = () => {
-        setIsHovered(true);
-    };
-
-    const handleMouseLeave = () => {
-        setIsHovered(false);
-    };
-    return <Hoverable
-        onHoverIn={handleMouseEnter}
-        onHoverOut={handleMouseLeave}
-        style={props.cardContainerStyle}
-        testID={testID}
-    >
-        <TouchableOpacity 
-            testID={testID}
-            onPress={() => {
-                if (props?.disabled) return;
-                onCardPress && onCardPress();
-            }}
-        >
-            <View
-                style={[styles.cardWrap,  isHovered && !props?.disabled && styles.cardWrapHover ,props.cardStyle]}
-            >
-                <View style={[styles.headerWrap, props.headerStyle]}>
-                    <View style={[styles.titleWrap, props.titleStyle]}>
-                        <View style={styles.title}>
-                            {
-                                header?.icon && <TapasIcon name={header?.icon} size={24} style={styles.titleIcon} />
-                            }
-                            {
-                                header?.title &&  <Text style={styles.titleText} numberOfLines={1} ellipsizeMode="tail">{header?.title}</Text>
-                            }
-                        </View>
-                        {
-                            header?.description && header?.description?.length > 0 && <View style={styles.descriptionWrap}>
-                                {
-                                    header?.description?.map((desc, index) => {
-                                        return desc && <Text style={styles.description}  key={index}>{desc}</Text>
-                                    })
-                                }
-                            </View>
-                        }
-                    </View>
-                    {
-                        header?.action && <TouchableOpacity style={header?.actionStyle} onPress={() => {header?.onPressAction && header?.onPressAction(header)}}>
-                            {
-                                header?.action
-                            }
-                        </TouchableOpacity>
-                    }
-                </View>
-                <View style={props.contentStyle}>{
-                    content && typeof content === 'string' ? <Text style={styles.contentTextStyle}>{content}</Text> : content
-                }</View>
-               <View style={styles.footerWrap}>
-                   <View style={styles.footerTitleWrap}>
-                       {
-                           footer?.title && <View>
-                               <Text style={styles.footerTitleText}>{footer?.title}</Text>
-                           </View>
-                       }
-                       {
-                           footer?.description && <View>
-                               <Text style={styles.footerDescriptionText}>{footer?.description}</Text>
-                           </View>
-                       }
-                   </View>
-                   {
-                       footer?.icon && <TouchableOpacity style={styles.footerIcon} onPress={() => {
-                           if(props?.disabled) return;
-                         footer?.onPress && footer?.onPress();
-                     }}>
-                           <TapasIcon name={footer?.icon || ''} size={20} style={styles.footerIconStyle} />
-                       </TouchableOpacity>
-                   }
-               </View>
-            </View>
-        </TouchableOpacity>
-    </Hoverable>
-};
-
-export  default  DashboardCard;