@beppla/tapas-ui 1.4.35 → 1.5.0

package/components/Theme/defaultTheme.ts

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

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

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