@beppla/tapas-ui 1.0.46 → 1.0.47

package/components/Shell/styles.ts

@@ -0,0 +1,29 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "row",
+    flexGrow: 1,
+    overflow: "hidden",
+    height: "100%",
+    width: "100%",
+  },
+  mainContainer: {
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    overflow: "hidden",
+  },
+  drawerContainer: {
+    display: "flex",
+    flexDirection: "column",
+    width: 150,
+  },
+  drawerInnerCon: {
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+  }
+});

package/components/Shell/types.ts

@@ -0,0 +1,23 @@
+export interface ShellPorps {
+    children?: React.ReactNode;
+    theme?: any;
+    border?: boolean;
+    style?: any;
+    drawerWidth?: number;
+    openDrawer?: boolean;
+    testID?: string;
+}
+
+export interface ShellViewProps {
+    children?: React.ReactNode;
+    style?: any;
+    theme?: any;
+}
+
+export interface ShellDrawerProps {
+    children?: React.ReactNode;
+    style?: any;
+    theme?:any;
+}
+
+export const defaultDrawerWidth = 150;

package/components/Status/Status.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import {View, Text, StyleProp, ViewStyle} from 'react-native';
+import {withTheme, makeStyles} from "@rneui/themed";
+import defaultTheme from "../Theme/defaultTheme";
+import {capitalizeFirstLetter} from '../common';
+
+export type STATUS_TYPE = 'success' | 'error' | 'warning' | 'waiting' | 'unavailable' | 'disabled';
+
+export interface Props {
+  mode?: 'point' | 'solid';
+  tag: string;
+  type: STATUS_TYPE;
+  testID?: string;
+  styles?: StyleProp<ViewStyle>;
+}
+const useStyles = makeStyles((theme: typeof  defaultTheme) => {
+  return {
+    statusWrap: {
+      height: 24,
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      alignItems: 'center'
+    },
+    base: {
+      width: 'auto',
+      fontFamily: theme?.fonts?.fontFamily,
+      fontSize: theme?.fonts.sizeM,
+      fontWeight: theme?.fonts.weightR,
+      paddingHorizontal: 6,
+      alignItems: 'center',
+      display: 'flex',
+      height: 24,
+      borderRadius: 4,
+      color: theme.colors.colorTextSecondary
+    },
+    unavailable: {
+      color: theme.colors.colorTextSecondary
+    },
+    disabled: {
+      backgroundColor: theme.colors.grey5
+    },
+    warning: {
+      backgroundColor: theme.colors.warning2
+    },
+    reserved: {
+      backgroundColor: theme.colors.colorStatusReserved
+    },
+    error: {
+      backgroundColor: theme.colors.colorStatusError
+    },
+    success: {
+      backgroundColor: theme.colors.colorStatusAvailable
+    },
+    waiting: {
+      borderColor: theme.colors.colorStatusAwaiting,
+      borderWidth: 1,
+      color: theme.colors.colorStatusAwaiting
+    },
+    point: {
+      borderRadius: 4,
+      height: 8,
+      width: 8
+    },
+    solid_disabled: {
+      borderColor: theme.colors.grey5,
+      borderWidth: 1,
+      color: theme.colors.grey5
+    },
+    solid_warning: {
+      borderColor: theme.colors.warning2,
+      borderWidth: 1,
+      color: theme.colors.warning2
+    },
+    solid_error: {
+      borderColor: theme.colors.colorStatusError,
+      borderWidth: 1,
+      color: theme.colors.colorStatusError
+    },
+    solid_success: {
+      borderColor: theme.colors.colorStatusAvailable,
+      borderWidth: 1,
+      color: theme.colors.colorStatusAvailable
+    },
+    solid_unavailable: {
+      color: theme.colors.colorTextSecondary,
+      borderColor: theme.colors.grey3,
+      borderWidth: 1
+    },
+    solid_waiting: {
+      color: theme.colors.colorStatusAwaiting,
+      borderColor: theme.colors.colorStatusAwaiting,
+      borderWidth: 1
+    },
+    solid_reserved: {
+      color: theme.colors.warning2,
+      borderColor: theme.colors.warning2,
+      borderWidth: 1
+    }
+  };
+});
+export const StatusTag: React.FC<Props> = ({tag, type, mode = 'point', ...props}) => {
+  const styles = useStyles(props);
+  const formattedTag = capitalizeFirstLetter(tag);
+  if (!tag) {
+    return null;
+  }
+  return (
+    <View testID={props?.testID} style={[styles.statusWrap, props.styles]}>
+      {mode === 'point' ? (
+        <>
+          <Text style={[styles.point, styles[type]]} />
+          <Text style={[styles.base]}>{formattedTag}</Text>
+        </>
+      ) : (
+        <Text style={[styles.base, styles[`solid_${type}`]]}>
+          {formattedTag}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+export default withTheme(StatusTag);

package/components/Steps/Steps.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { withTheme, makeStyles} from '@rneui/themed';
+import defaultTheme from "../Theme/defaultTheme";
+import Icon from '../Icons/TapasIcon';
+
+interface StepProps {
+    title: string;
+    description?: string;
+    active: boolean;
+    completed: boolean;
+    index?: number;
+    onItemPress?: (step: number) => void;
+}
+
+const useStyles = makeStyles((theme: typeof  defaultTheme) => {
+    return {
+        container: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginVertical: 20,
+        },
+        step: {
+            flex: 1,
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingVertical: 10,
+        },
+        activeStep: {
+            backgroundColor: theme.colors.colorTextBrand,
+            color: theme.colors.white,
+        },
+        completedStep: {
+            // add any styles for the completed step
+            backgroundColor: theme.colors.colorTextBrand,
+        },
+        iconContainer: {
+            marginRight: 10,
+        },
+        stepNumber: {
+            fontSize: 20,
+            fontWeight: 'bold',
+        },
+        textContainer: {
+            flex: 1,
+        },
+        title: {
+            fontSize: 16,
+            fontWeight: 'bold',
+        },
+        activeTitle: {
+            // add any styles for the active title
+        },
+        completedTitle: {
+            // add any styles for the completed title
+        },
+        description: {
+            fontSize: 14,
+            color: '#666',
+        },
+        activeDescription: {
+            // add any styles for the active description
+        },
+        completedDescription: {
+            // add any styles for the completed description
+        },
+        stepText: {
+            fontSize: theme.fonts.sizeM,
+            fontFamily: theme.fonts.fontFamily,
+            fontWeight: theme.fonts.weightR,
+            height: 28,
+            width: 28,
+            borderRadius: theme.radius.full,
+            backgroundColor: theme.colors.grey3,
+            color: theme.colors.grey2,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: 10,
+        },
+        hr: {
+            height: 2,
+            width: 76,
+            backgroundColor:theme.colors.grey4,
+            marginHorizontal: 4,
+            borderRadius: theme.radius.rounded,
+        },
+        completedHr: {
+            backgroundColor:theme.colors.colorTextBrand,
+        },
+        stepItem: {
+            display: "flex",
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: "flex-start",
+        }
+    }
+});
+
+const Step: React.FC<StepProps> = ({ index,  active, completed, onItemPress}) => {
+   const styles = useStyles();
+   const handleItemPress = () => {
+       if (completed || active) {
+        onItemPress && onItemPress(index as number);
+       }
+    }
+    return (
+       <>
+            <TouchableOpacity onPress={handleItemPress}>
+                <View style={styles.stepItem}>
+                    {index !== 1 && <View style={[styles.hr, (completed || active) && styles.completedHr]}></View>}
+                    {
+                        completed? (
+                            <Text style={[styles.stepText, active && styles.activeStep, completed && styles.completedStep]} ><Icon name="check" size={16} color="white" /></Text>
+                        ) : (
+                            <Text style={[styles.stepText, active && styles.activeStep, completed && styles.completedStep]} >{index}</Text>
+                        )
+                    }
+                </View>
+           </TouchableOpacity>
+           {/* <View style={[styles.step, completed && styles.completedStep]}>
+              <View style={styles.stepItem}>
+                  {index !== 1 && <View style={styles.hr}></View>}
+                  <Text style={[styles.stepText, active && styles.activeStep,]} >{index}</Text>
+              </View>
+              <View style={styles.iconContainer}>
+                  {completed ? (
+                     <Icon name="check" type="font-awesome" size={20} color="#fff" />
+                   ) : (
+                     <Text style={styles.stepNumber}>{active ? '●' : '○'}</Text>
+                   )}
+               </View>
+               <View style={styles.textContainer}>
+                   <Text style={[styles.title, active && styles.activeTitle, completed && styles.completedTitle]}>
+                       {title}
+                   </Text>
+                   {description && (
+                     <Text style={[styles.description, active && styles.activeDescription, completed && styles.completedDescription]}>
+                         {description}
+                     </Text>
+                   )}
+               </View>
+           </View> */}
+       </>
+    );
+};
+
+interface StepsProps {
+    steps: { title: string; description?: string }[];
+    currentStep: number;
+    onPressStep: (step: number) => void;
+    testID?: string;
+}
+
+const Steps: React.FC<StepsProps> = ({ steps = [], currentStep, onPressStep, testID }) => {
+    const styles = useStyles()
+    return (
+        <View style={styles.container} testID={testID}>
+            {steps.map((step, index: number) => (
+                <View>
+                    <Step
+                        key={index}
+                        index={Number.parseInt(`${index + 1}`)}
+                        title={step.title}
+                        description={step.description}
+                        active={index === currentStep}
+                        completed={index < currentStep}
+                        onItemPress={onPressStep}
+                    />
+                </View>
+            ))}
+        </View>
+    );
+};
+
+
+export default withTheme(Steps);

package/components/TabTitle/TabTitle.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { Text, View, ViewProps, TextStyle, StyleProp, TextProps } from "react-native";
+import { withTheme, makeStyles } from "@rneui/themed";
+
+export interface TapasTabTitleProps extends ViewProps {
+  /** 显示的文本内容 */
+  text?: string;
+  /** 是否显示红色通知点 */
+  showIndicator?: boolean;
+  /** 指示器颜色 */
+  indicatorColor?: string;
+  /** 指示器大小 */
+  indicatorSize?: number;
+  /** 文本样式 */
+  textStyle?: StyleProp<TextStyle>;
+  /** 文本属性 */
+  textProps?: Partial<TextProps>;
+  /** 指示器相对文本的偏移位置 */
+  indicatorOffset?: {
+    top?: number;
+    right?: number;
+  };
+}
+
+const TapasTabTitle: React.FC<TapasTabTitleProps> = ({
+  text,
+  showIndicator = false,
+  indicatorColor = "#FF4444",
+  indicatorSize = 5,
+  textStyle,
+  textProps,
+  indicatorOffset = { top: 0, right: -8 },
+  style,
+  ...otherProps
+}) => {
+  const styles = useStyles();
+
+  return (
+    <View style={[styles.container, style]} {...otherProps}>
+      <Text
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        style={[styles.text, textStyle]}
+        {...textProps}
+      >
+        {text}
+        {showIndicator && (
+          <View
+            style={[
+              styles.indicator,
+              {
+                width: indicatorSize,
+                height: indicatorSize,
+                borderRadius: indicatorSize / 2,
+                backgroundColor: indicatorColor,
+                top: indicatorOffset.top,
+                right: indicatorOffset.right,
+              },
+            ]}
+          />
+        )}
+      </Text>
+    </View>
+  );
+};
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    alignItems: "flex-start",
+    justifyContent: "center",
+  },
+  text: {
+    fontSize: theme?.fonts?.sizeM || 16,
+    fontWeight: "600",
+    color: theme?.colors?.colorTextPrimary || theme?.colors?.primary || "#000",
+    position: "relative",
+    overflow: "visible",
+  },
+  indicator: {
+    position: "absolute",
+    zIndex: 1,
+  },
+}));
+
+export default withTheme(TapasTabTitle);
+
+// Export aliases for compatibility
+export const TabTitle = withTheme(TapasTabTitle);
+export { TapasTabTitle };

package/components/TabTitle/index.tsx

@@ -0,0 +1,3 @@
+export { default } from './TabTitle';
+export type { TapasTabTitleProps } from './TabTitle';
+export { TabTitle, TapasTabTitle } from './TabTitle';