@beppla/tapas-ui 1.4.13 → 1.4.15

package/components/Theme/defaultTheme.ts

@@ -0,0 +1,222 @@
+
+export const defaultTheme: any = (options?: {mode?: string}) => {
+    const { mode = 'dark' } = options || {};
+    return {
+        mode: mode,
+        // 为了兼容性，同时提供 colors 和 darkColors
+        colors: {
+            primary: 'rgba(0, 0, 0, 0.87)',
+            secondary: 'rgba(0, 0, 0, 0.54)',
+            background: '#F9F2E8',
+            bg1: '#644528',
+            white: '#FFF',
+            black: 'rgba(0, 0, 0, 0.87)',
+            grey0: 'rgba(0, 0, 0, 0.87)',
+            grey1: 'rgba(0, 0, 0, 0.54)',
+            grey2: 'rgba(0, 0, 0, 0.26)',
+            grey3: 'rgba(0, 0, 0, 0.12)',
+            grey4: 'rgba(0, 0, 0, 0.08)',
+            grey5: 'rgba(0, 0, 0, 0.04)',
+            greyOutline: 'rgba(0, 0, 0, 0.12)',
+            searchBg: 'rgba(0, 0, 0, 0.12)',
+            success: '#57B07B',
+            warning: '#B81F1E',
+            warning2: '#BD9509',
+            error: '#B81F1E',
+            info: '#007AFF',
+            disabled: 'rgba(0, 0, 0, 0.26)',
+            divider: '1',
+            divider1: '2',
+            divider2: '4',
+            colorTextPrimary: 'rgba(0, 0, 0, 0.87)',
+            colorTextSecondary: 'rgba(0, 0, 0, 0.54)',
+            colorTextPlaceholder: 'rgba(0, 0, 0, 0.26)',
+            colorTextInvert: '#FFF',
+            colorTextInvert1: 'rgba(255, 255, 255, 0.80)',
+            colorTextInvert2: 'rgba(255, 255, 255, 0.50)',
+            colorTextBrand: '#895F38',
+            colorTextError: '#B81F1E',
+            colorTextAccent: '#F55523',
+            colorSurface: '#F9F2E8',
+            colorSurface1: '#FFF',
+            colorSurface2: '#895F38',
+            colorSurface3: '#46301C',
+            colorSurface4: 'rgba(0, 0, 0, 0.87)',
+            colorSurface5: 'rgba(0, 0, 0, 0.54)',
+            colorSurface6: 'rgba(0, 0, 0, 0.12)',
+            colorSurface7: 'rgba(0, 0, 0, 0.08)',
+            colorSurface8: 'rgba(0, 0, 0, 0.04)',
+            colorSurface9: 'rgba(255, 255, 255, 0.80)',
+            colorSurface10: 'rgba(255, 255, 255, 0.50)',
+            colorSurface11: 'rgba(255, 255, 255, 0.30)',
+            colorPrimaryBorder: 'rgba(0, 0, 0, 0.12)',
+            colorBorder1: 'rgba(0, 0, 0, 0.26)',
+            colorBorder2: 'rgba(0, 0, 0, 0.87)',
+            colorInvertBorder: 'rgba(255, 255, 255, 0.16)',
+            colorInvertBorder1: 'rgba(255, 255, 255, 0.50)',
+            colorErrorBorder: '#B81F1E',
+            colorActiveBorder: '#F55523',
+            colorNormalIcon: 'rgba(0, 0, 0, 0.54)',
+            colorActiveIcon: 'rgba(0, 0, 0, 0.87)',
+            colorDisabledIcon: 'rgba(0, 0, 0, 0.26)',
+            colorInvertNormalIcon: 'rgba(255, 255, 255, 0.80)',
+            colorInvertActiveIcon: '#FFF',
+            colorInvertDisabledIcon: 'rgba(255, 255, 255, 0.30)',
+            colorAccentIcon: '#F55523',
+            colorStatusAvailable: '#57B07B',
+            colorStatusAvailableBg: '#EEF7F2',
+            colorStatusOccupied: '#B81F1E',
+            colorStatusCleaning: '#DCD421',
+            colorStatusReserved: '#3E6DA4',
+            colorStatusCompleted: '#57B07B',
+            colorStatusPromoted: '#F55523',
+            colorStatusAwaiting: '#3E6DA4',
+            colorStatusWarning: '#DCD421',
+            colorStatusError: '#B81F1E',
+            colorStatusErrorBg: '#FFEBEA',
+            colorToastPositive: '#57B07B',
+            colorToastInformative: '#007AFF',
+            colorToastNatural: '#FFF',
+            colorToastNegative: '#FF3B30',
+            // 图表颜色 - Chart colors
+            colorChartCategoryTeal: '#1FBCAD',    // Sales volume by category
+            colorChartProductBrown: '#895F38',    // Sales volume by product
+            colorChartWastageGold: '#F0C05A',     // Wastage quantity by product
+            colorChartWastageOrange: '#FF6F1D',   // Wastage quantity by category
+            colorTableBorder: 'rgba(0, 0, 0, 0.12)',      // Table border
+        },
+        darkColors: {
+            primary: 'rgba(0, 0, 0, 0.87)',
+            secondary: 'rgba(0, 0, 0, 0.54)',
+            background: '#F9F2E8',
+            bg1: '#644528',
+            white: '#FFF',
+            black: 'rgba(0, 0, 0, 0.87)',
+            grey0: 'rgba(0, 0, 0, 0.87)',
+            grey1: 'rgba(0, 0, 0, 0.54)',
+            grey2: 'rgba(0, 0, 0, 0.26)',
+            grey3: 'rgba(0, 0, 0, 0.12)',
+            grey4: 'rgba(0, 0, 0, 0.08)',
+            grey5: 'rgba(0, 0, 0, 0.04)',
+            greyOutline: 'rgba(0, 0, 0, 0.12)',
+            searchBg: 'rgba(0, 0, 0, 0.12)',
+            success: '#57B07B',
+            warning: '#B81F1E',
+            warning2: '#BD9509',
+            error: '#B81F1E',
+            info: '#007AFF',
+            disabled: 'rgba(0, 0, 0, 0.26)',
+            divider: '1',
+            divider1: '2',
+            divider2: '4',
+            colorTextPrimary: 'rgba(0, 0, 0, 0.87)',
+            colorTextSecondary: 'rgba(0, 0, 0, 0.54)',
+            colorTextPlaceholder: 'rgba(0, 0, 0, 0.26)',
+            colorTextInvert: '#FFF',
+            colorTextInvert1: 'rgba(255, 255, 255, 0.80)',
+            colorTextInvert2: 'rgba(255, 255, 255, 0.50)',
+            colorTextBrand: '#895F38',
+            colorTextError: '#B81F1E',
+            colorTextAccent: '#F55523',
+            colorSurface: '#F9F2E8',
+            colorSurface1: '#FFF',
+            colorSurface2: '#895F38',
+            colorSurface3: '#46301C',
+            colorSurface4: 'rgba(0, 0, 0, 0.87)',
+            colorSurface5: 'rgba(0, 0, 0, 0.54)',
+            colorSurface6: 'rgba(0, 0, 0, 0.12)',
+            colorSurface7: 'rgba(0, 0, 0, 0.08)',
+            colorSurface8: 'rgba(0, 0, 0, 0.04)',
+            colorSurface9: 'rgba(255, 255, 255, 0.80)',
+            colorSurface10: 'rgba(255, 255, 255, 0.50)',
+            colorSurface11: 'rgba(255, 255, 255, 0.30)',
+            colorPrimaryBorder: 'rgba(0, 0, 0, 0.12)',
+            colorBorder1: 'rgba(0, 0, 0, 0.26)',
+            colorBorder2: 'rgba(0, 0, 0, 0.87)',
+            colorInvertBorder: 'rgba(255, 255, 255, 0.16)',
+            colorInvertBorder1: 'rgba(255, 255, 255, 0.50)',
+            colorErrorBorder: '#B81F1E',
+            colorActiveBorder: '#F55523',
+            colorNormalIcon: 'rgba(0, 0, 0, 0.54)',
+            colorActiveIcon: 'rgba(0, 0, 0, 0.87)',
+            colorDisabledIcon: 'rgba(0, 0, 0, 0.26)',
+            colorInvertNormalIcon: 'rgba(255, 255, 255, 0.80)',
+            colorInvertActiveIcon: '#FFF',
+            colorInvertDisabledIcon: 'rgba(255, 255, 255, 0.30)',
+            colorAccentIcon: '#F55523',
+            colorStatusAvailable: '#57B07B',
+            colorStatusAvailableBg: '#EEF7F2',
+            colorStatusOccupied: '#B81F1E',
+            colorStatusCleaning: '#DCD421',
+            colorStatusReserved: '#3E6DA4',
+            colorStatusCompleted: '#57B07B',
+            colorStatusPromoted: '#F55523',
+            colorStatusAwaiting: '#3E6DA4',
+            colorStatusWarning: '#DCD421',
+            colorStatusError: '#B81F1E',
+            colorStatusErrorBg: '#FFEBEA',
+            colorToastPositive: '#57B07B',
+            colorToastInformative: '#007AFF',
+            colorToastNatural: '#FFF',
+            colorToastNegative: '#FF3B30',
+            // 图表颜色 - Chart colors
+            colorChartCategoryTeal: '#1FBCAD',    // Sales volume by category
+            colorChartProductBrown: '#895F38',    // Sales volume by product
+            colorChartWastageGold: '#F0C05A',     // Wastage quantity by product
+            colorChartWastageOrange: '#FF6F1D',   // Wastage quantity by category
+            colorTableBorder: 'rgba(0, 0, 0, 0.12)',      // Table border
+        },
+        spacing: {
+            sm: 12,
+            tp2xs: 4,
+            tpXs: 8,
+            tpSm: 12,
+            tpRg: 16,
+            tpMd: 24,
+            tpLg: 32,
+            tpXl: 48,
+            tp2xl: 88,
+            tp3xl: 112,
+        },
+        radius: {
+            mini: 4,
+            rounded: 12,
+            full: 360
+        },
+        fonts: {
+            fontFamily: 'BricolageGrotesque-Regular',
+            fontFamilyBold: 'BricolageGrotesque-Bold',
+            h1: 44,
+            h2: 32,
+            h3: 24,
+            h4: 21,
+            sizeL: 16,
+            sizeM: 14,
+            sizeS: 12,
+            sizeXs: 10,
+            weightL: '700',
+            weightM: '600',
+            weightS: '500',
+            weightR: '400',
+            weightXs: '300',
+            letterSpacingL: -0.88,
+            letterSpacingM: -0.32,
+            letterSpacingS: -0.24,
+            letterSpacingR: -0.21,
+        },
+        components: {
+            Button: (props: any, theme: any) => {
+                return {
+                    ...props,
+                    buttonStyle: {
+                        borderRadius: theme.radius.full,
+                        paddingVertical: theme.spacing.tpXs,
+                        paddingHorizontal: theme.spacing.tpRg
+                    },
+                }
+            },
+        }
+    }
+}
+
+export  default  defaultTheme

package/components/Theme/themed.d.ts

@@ -0,0 +1,102 @@
+
+import '@rneui/themed';
+
+type FontWeights = "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined
+
+declare module '@rneui/themed' {
+    export interface Colors {
+        bg1: string;
+        colorTextPrimary: string;
+        colorTextSecondary: string;
+        colorTextPlaceholder: string;
+        colorTextInvert:string;
+        colorTextInvert1: string;
+        colorTextInvert2: string;
+        colorTextBrand: string;
+        colorTextError: string;
+        colorTextAccent: string;
+        colorSurface: string;
+        colorSurface1: string;
+        colorSurface2: string;
+        colorSurface3: string;
+        colorSurface4: string;
+        colorSurface5: string;
+        colorSurface6: string;
+        colorSurface7: string;
+        colorSurface8: string;
+        colorSurface9: string;
+        colorSurface10: string;
+        colorSurface11: string;
+        colorPrimaryBorder: string;
+        colorBorder1: string;
+        colorBorder2: string;
+        colorInvertBorder: string;
+        colorInvert1Border: string;
+        colorErrorBorder: string;
+        colorActiveBorder: string;
+        colorNormalIcon: string;
+        colorActiveIcon: string;
+        colorDisabledIcon: string;
+        colorInvertNormalIcon: string;
+        colorInvertActiveIcon: string;
+        colorInvertDisabledIcon: string;
+        colorAccentIcon:string;
+        colorStatusAvailable: string;
+        colorStatusOccupied: string;
+        colorStatusCleaning: string;
+        colorStatusReserved: string;
+        colorStatusCompleted: string;
+        colorStatusPromoted: string;
+        colorStatusAwaiting: string;
+        colorStatusWarning: string;
+        colorStatusError: string;
+        colorToastPositive: string;
+        colorToastInformative: string;
+        colorToastNatural:string;
+        colorToastNegative: string;
+        divider1: string;
+        divider2: string;
+        info: string;
+    }
+    export interface ThemeSpacing {
+        tp2xs: number;
+        tpXs: number;
+        tpSm: number;
+        tpRg: number;
+        tpMd: number;
+        tpLg: number;
+        tpXl: number;
+        tp2xl: number;
+        tp3xl: number;
+    }
+    export interface  Radius {
+        mini: number;
+        rounded: number;
+        full: number;
+    }
+
+    export interface Fonts {
+        h1: number;
+        h2: number;
+        h3: number;
+        h4: number;
+        sizeL: number;
+        sizeM: number;
+        sizeS: number;
+        sizeXs: number;
+        fontFamily: string;
+        weightL: FontWeights;
+        weightM: FontWeights;
+        weightR: FontWeights;
+        weightS: FontWeights;
+        weightXs: FontWeights;
+        letterSpacingL: number;
+        letterSpacingM: number;
+        letterSpacingR: number;
+        letterSpacingS: number;
+    }
+    export interface Theme {
+        radius: Radius;
+        fonts: Fonts;
+    }
+}

package/components/Timeline/Timeline.tsx

@@ -0,0 +1,230 @@
+import React, {FC, useState, useRef} from 'react';
+import {makeStyles, withTheme, Text as RNText} from "@rneui/themed";
+import {ScrollView, StyleProp,  View, ViewStyle} from "react-native";
+import TapasIcon from "../Icons/TapasIcon";
+import Hoverable from '../Hoverable/Hoverable';
+
+type Item  = {
+    id: string,
+    time: string;
+    description: string;
+    selected?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+}
+export interface IData {
+    title: string;
+    items: Item[]
+}
+export interface Props {
+    data: IData;
+    itemContainerStyle: StyleProp<ViewStyle>;
+    onPress?: (item: Item) => void;
+    selected?: boolean;
+    disabled?: boolean;
+    containerStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+const useStyles = makeStyles((theme) => {
+
+    return {
+        container: {
+            width: 192,
+        },
+        itemContainer: {
+            minHeight: 100
+        },
+        title: {
+            fontSize: theme.fonts.sizeL,
+            fontWeight: theme.fonts.weightL,
+            color: '#000',
+            // textOverflow: 'ellipsis', // Not supported in React Native
+            // whiteSpace: 'nowrap', // Not supported in React Native
+            justifyContent: "flex-start",
+            alignItems: "center",
+            display: "flex",
+            lineHeight: 'normal',
+            flexGrow: 1,
+            marginBottom: 16,
+        },
+        titleContainer: {
+            display: 'flex',
+            flexDirection: "row",
+            justifyContent: "flex-start",
+            alignItems: "center",
+        },
+        descriptionContainer: {
+            display: 'flex',
+            flexDirection: "row",
+            justifyContent: "flex-start",
+            alignItems: "center",
+        },
+
+        pointContainer: {
+            width: 20,
+            height: 20,
+            display: 'flex',
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "center"
+        },
+        lineContainer: {
+            width: 20,
+            display: 'flex',
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+        },
+        point: {
+            width: 6,
+            height: 6,
+            borderRadius: 6,
+            borderColor: theme.colors.grey2,
+            borderWidth: 1,
+        },
+        pointError: {
+            borderColor: theme.colors.error,
+            backgroundColor: theme.colors.error,
+        },
+        pointDisabled: {
+            borderColor: theme.colors.grey4,
+        },
+        pointSelected: {
+            borderColor: theme.colors.colorTextBrand,
+            backgroundColor: theme.colors.colorTextBrand,
+        },
+        line: {
+            minHeight: 64,
+            borderLeftWidth: 1,
+            borderColor: theme.colors.grey2,
+        },
+        lineError: {
+            borderColor: theme.colors.error,
+        },
+        lineDisabled: {
+            borderColor: theme.colors.grey4,
+            borderStyle: "dashed",
+        },
+        lineSelected: {
+            borderColor: theme.colors.colorTextBrand,
+        },
+        itemTitle:{
+            fontSize: theme.fonts.sizeS,
+            fontWeight: theme.fonts.weightL,
+            color: theme.colors.secondary,
+            // textOverflow: 'ellipsis', // Not supported in React Native
+            // whiteSpace: 'nowrap', // Not supported in React Native
+            justifyContent: "flex-start",
+            alignItems: "center",
+            display: "flex",
+            lineHeight: 'normal',
+            flexGrow: 1,
+        },
+        titleError: {
+            color: theme.colors.error,
+        },
+        titleDisabled: {
+            color: theme.colors.grey2,
+        },
+        titleSelected: {
+            color: theme.colors.colorTextBrand,
+        },
+        description: {
+            fontSize: theme.fonts.sizeM,
+            fontWeight: theme.fonts.weightR,
+            color: theme.colors.secondary,
+            // textOverflow: 'ellipsis', // Not supported in React Native
+            // whiteSpace: 'nowrap', // Not supported in React Native
+            justifyContent: "flex-start",
+            alignItems: "center",
+            display: "flex",
+            lineHeight: 'normal',
+            flexGrow: 1,
+            height: 40,
+            borderRadius: theme.radius.rounded,
+            paddingHorizontal: 12,
+        },
+        descriptionError: {
+            color: theme.colors.error,
+        },
+        descriptionDisabled: {
+            color: theme.colors.grey2,
+        },
+        descriptionSelected: {
+            color: theme.colors.primary,
+        },
+        error: {
+            color: theme.colors.error,
+            marginRight: 4,
+        },
+        itemHover: {
+            backgroundColor: theme.colors.grey4,
+        }
+    }
+});
+
+
+const Timeline: FC<Props> = ({containerStyle,data, selected = false, disabled,onPress, testID,  ...props}) => {
+    const styles = useStyles(props);
+    const [isHovered, setIsHovered] = useState(false);
+    const hoverItemIndex = useRef('')
+
+    const handleMouseEnter = (index: number) => {
+        setIsHovered(true);
+        hoverItemIndex.current = `${index}`;
+    };
+
+    const handleMouseLeave = () => {
+        setIsHovered(false);
+        hoverItemIndex.current = '';
+    };
+  const handlePressItem = (item: Item) => {
+        onPress && onPress(item);
+  }
+    const renderItem = (item: Item, index: number) => {
+        return <View key={index}>
+            <View style={styles.titleContainer}>
+                <View style={styles.pointContainer}>
+                    <View style={[styles.point, item.disabled && styles.pointDisabled, item.selected && styles.pointSelected, item.error && styles.pointError]} />
+                </View>
+                {
+                    item.error &&  <TapasIcon name={'error'} size={20} style={styles.error} />
+                }
+                <RNText style={[styles.itemTitle, item.disabled && styles.titleDisabled, item.selected && styles.titleSelected, item.error && styles.titleError]}>
+                    {item.time}
+                </RNText>
+            </View>
+                <Hoverable
+                    onHoverIn={() => {
+                        handleMouseEnter(index)
+                    }}
+                    onHoverOut={handleMouseLeave}
+                    style={styles.descriptionContainer}
+                    //@ts-ignore
+                    onPress={() => {handlePressItem(item)}}
+                >
+                    <View style={styles.lineContainer}>
+                        <View style={[styles.line, item.disabled && styles.lineDisabled, item.selected  && styles.lineSelected, item.error && styles.lineError]}></View>
+                    </View>
+                    <RNText style={[styles.description, item.disabled && styles.descriptionDisabled, item.selected && styles.descriptionSelected, item.error && styles.descriptionError, (isHovered && +hoverItemIndex.current === index)  && styles.itemHover]}>
+                        {item.description}
+                    </RNText>
+                </Hoverable>
+        </View>
+    }
+
+  return <View style={[styles.container, containerStyle]} testID={testID}>
+      <RNText
+          //@ts-ignore
+          style={styles.title}>{data?.title}</RNText>
+      <ScrollView style={[styles.itemContainer, props.itemContainerStyle]}>
+          {
+              data?.items.map((item, index) => {
+                  return renderItem(item, index);
+              })
+          }
+      </ScrollView>
+  </View>
+}
+
+export default withTheme(Timeline);