@beppla/tapas-ui 1.0.78 → 1.0.80

package/components/Button/Button.tsx

@@ -1,86 +0,0 @@
-import React, { useState, useCallback, useMemo } from 'react';
-import { Button as RneButton, ButtonProps, makeStyles} from '@rneui/themed';
-import {Platform} from 'react-native';
-import Hoverable from '../Hoverable/Hoverable';
-export interface  Props extends  ButtonProps {
-    hoverStyle?: any;
-    buttonStyle?: any;
-    titleStyle?: any;
-    selectedTitleStyle?: any;
-    width?: number;
-}
-
-const useStyles = makeStyles((theme) => ({
-    buttonHovered: {
-        backgroundColor: theme?.colors?.colorSurface2,
-    },
-    outlineButtonHovered: {
-        backgroundColor: theme?.colors?.grey4,
-        borderColor: theme?.colors?.grey4,
-    },
-    button: {
-        backgroundColor: theme?.colors?.primary,
-    },
-    baseButton: {
-        fontFamily: theme?.fonts?.fontFamily,
-        fontSize: theme?.fonts.sizeM,
-        fontWeight: theme?.fonts.weightM,
-    },
-    outlineButton: {
-        borderColor: theme?.colors?.grey4,
-        backgroundColor: theme?.colors?.white || '#ffffff',
-    }
-}));
-export const Button: React.FC<Props> = ({hoverStyle, buttonStyle, width, ...props}) => {
-
-    const [isHovered, setIsHovered] = useState(false);
-    const styles = useStyles(props);
-    
-    const handleMouseEnter = useCallback(() => {
-        setIsHovered(true);
-    }, []);
-
-    const handleMouseLeave = useCallback(() => {
-        setIsHovered(false);
-    }, []);
-
-    const { primaryStyle, hoveredStyle } = useMemo(() => ({
-        primaryStyle: props.type === 'solid' ? styles.button : props.type === 'outline' ? styles.outlineButton : {},
-        hoveredStyle: props.type === 'solid' ? styles.buttonHovered : props.type === 'outline' ? styles.outlineButtonHovered : {}
-    }), [props.type, styles]);
-
-    const newButtonStyle = useMemo(() => 
-        (isHovered && props.type !== 'clear') 
-            ? {...hoveredStyle, ...hoverStyle} 
-            : { ...primaryStyle, ...buttonStyle}
-    , [isHovered, props.type, hoveredStyle, hoverStyle, primaryStyle, buttonStyle]);
-
-    const containerStyle = useMemo(() => ({ width }), [width]);
-    const titleStyleMemo = useMemo(() => [styles.baseButton, props.titleStyle], [styles.baseButton, props.titleStyle]);
-
-    return Platform.OS === 'web' && props.type !== 'clear' ? (
-        <Hoverable
-            onHoverIn={handleMouseEnter}
-            onHoverOut={handleMouseLeave}
-        >
-            {(isHovered: boolean) => (
-                <RneButton 
-                    containerStyle={containerStyle} 
-                    buttonStyle={isHovered ? [newButtonStyle, hoverStyle].filter(Boolean) : newButtonStyle} 
-                    titleStyle={isHovered ? [titleStyleMemo, props.selectedTitleStyle] : titleStyleMemo} 
-                    {...props} 
-                />
-            )}
-        </Hoverable>
-        ) : (
-            <RneButton 
-                containerStyle={containerStyle} 
-                buttonStyle={newButtonStyle} 
-                titleStyle={titleStyleMemo} 
-                {...props}
-            />
-        );
-};
-
-
-export default Button;

package/components/Button/ButtonGroup.tsx

@@ -1,148 +0,0 @@
-import React, {useState} from 'react';
-import {makeStyles} from '@rneui/themed';
-import {View, Text, StyleProp, ViewStyle, TouchableOpacity} from 'react-native';
-import Hoverable from '../Hoverable/Hoverable';
-import Icon from '../Icons/TapasIcon';
-
-type buttonType = {
-    icon?: string;
-    title?: string;
-    disabled?: boolean;
-    onPress?: (index: number) => void;
-}
-
-export interface  Props {
-    buttons: buttonType[],
-    hoveredStyle?: StyleProp<ViewStyle>;
-    selectedStyle?: StyleProp<ViewStyle>;
-}
-
-const useStyles = makeStyles((theme) => ({
-    buttonContainer: {
-        display: 'flex',
-        flexDirection: 'row',
-    },
-    buttonWrap: {
-        display: 'flex',
-        flexDirection: 'row',
-        height: 56,
-        paddingVertical: 8,
-        backgroundColor: theme.colors.grey5,
-        justifyContent: 'center',
-        alignItems: 'center',
-        cursor: 'pointer',
-    },
-    title: {
-        fontFamily: theme.fonts.fontFamily,
-        fontSize: theme.fonts.sizeM,
-        fontWeight: theme.fonts.weightM,
-        color: theme.colors.colorTextPrimary,
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        minWidth: 40,
-        marginLeft: 4,
-        marginRight: 12,
-    },
-    first: {
-        borderTopLeftRadius: theme.radius.full,
-        borderBottomLeftRadius: theme.radius.full,
-        paddingLeft: 8,
-        paddingRight: 12,
-    },
-    last: {
-        borderTopRightRadius: theme.radius.full,
-        borderBottomRightRadius: theme.radius.full,
-        borderLeftWidth: 1,
-        borderLeftColor: theme.colors.grey3,
-        paddingLeft: 12,
-        paddingRight: 8,
-    },
-    middle: {
-        borderLeftWidth: 1,
-        borderLeftColor: theme.colors.grey3,
-        paddingHorizontal: 12,
-    },
-    buttonHovered: {
-        backgroundColor: theme?.colors?.grey3,
-    },
-    selectedStyle: {
-        backgroundColor: theme?.colors?.grey3,
-    },
-    disabledStyle: {
-        backgroundColor: theme?.colors?.grey3,
-    },
-    baseButton: {
-        fontFamily: theme?.fonts?.fontFamily,
-        fontSize: theme?.fonts.sizeM,
-        fontWeight: theme?.fonts.weightM,
-        minWidth: 80,
-    },
-    icon: {
-        marginLeft: 8,
-    },
-    disabledIcon: {
-        marginLeft: 8,
-        color: theme.colors.disabled,
-    },
-    disabledTitle: {
-        color: theme.colors.disabled,
-    }
-}));
-const ButtonGroup: React.FC<Props > = ({buttons, hoveredStyle = {}, selectedStyle = {}, ...props}) => {
-
-    const [isHovered, setIsHovered] = useState(false);
-    const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
-    const [selected, setSelected] = useState<number | null>(null);
-
-    const styles = useStyles(props);
-    const handleMouseEnter = (index:number) => {
-        setIsHovered(true);
-        setHoveredIndex(index);
-    };
-
-    const handleMouseLeave = () => {
-        setIsHovered(false);
-        setHoveredIndex(null);
-    };
-
-    const handlePress = (index: number, button: buttonType) => {
-        setSelected(index);
-        button.onPress && button.onPress(index);
-    }
-
-    const getButtonStyle = (index: number) => {
-        const base = [index == 0 && styles.first, index === buttons.length-1 && styles.last, index !== 0 && index !== buttons.length-1 && styles.middle];
-        const style = (isHovered && hoveredIndex === index) ? [...base, styles.buttonHovered, hoveredStyle] : base;
-        return selected === index ? [...style, styles.selectedStyle, selectedStyle] : style;
-    }
-
-    return <View style={styles.buttonContainer}>
-        {
-            buttons.map((button, index) => {
-                return !button.disabled ? (
-                  <Hoverable
-                    onHoverIn={() => handleMouseEnter(index)}
-                    onHoverOut={handleMouseLeave}
-                  >
-                      <TouchableOpacity onPress={() => {
-                          handlePress(index, button)
-                      }}>
-                          <View style={[styles.buttonWrap, ...getButtonStyle(index)]}>
-                              <Icon size={20} name={button.icon || ''} style={styles.icon} />
-                              <Text style={styles.title}>{button.title}</Text>
-                          </View>
-                      </TouchableOpacity>
-                  </Hoverable>
-                ) : (
-                  <View style={[styles.buttonWrap, index == 0 && styles.first, index === buttons.length-1 && styles.last, index !== 0 && index !== buttons.length-1 && styles.middle, styles.disabledStyle ]}>
-                      <Icon size={20} name={button.icon || ''} style={styles.disabledIcon} />
-                      <Text style={[styles.title, styles.disabledTitle]}>{button.title}</Text>
-                  </View>
-                )
-            })
-        }
-    </View>
-};
-
-
-export default ButtonGroup;

package/components/Button/react-native-hoverable.d.ts

@@ -1,14 +0,0 @@
-declare module 'react-native-hoverable' {
-    import { ComponentClass, ReactNode } from 'react';
-    import { ViewProps } from 'react-native';
-
-    interface HoverableProps extends ViewProps {
-        children: ReactNode;
-        onHoverIn?: () => void;
-        onHoverOut?: () => void;
-    }
-
-    const Hoverable: ComponentClass<HoverableProps>;
-
-    export default Hoverable;
-}

package/components/Calendar/Calendar.base.tsx

@@ -1,279 +0,0 @@
-import { Divider, withTheme } from "@rneui/themed";
-import { SupportLanguage, TapasCalendarBaseProps } from "./types";
-import { View, StyleSheet, Text } from "react-native";
-import { Calendar, DateData, LocaleConfig } from "react-native-calendars";
-import Button from "../Button/Button";
-import { locales } from "./local";
-import React, { LegacyRef, forwardRef, useRef, useState } from "react";
-import { formatDate, formatTitle } from "./helper";
-import CustomIcon from "../Icons/TapasIcon";
-
-// 安全地设置 LocaleConfig.locales
-try {
-  if (LocaleConfig && typeof LocaleConfig === 'object') {
-    LocaleConfig.locales = LocaleConfig.locales || {};
-    Object.assign(LocaleConfig.locales, locales);
-  }
-} catch (error) {
-  console.warn('Could not set LocaleConfig.locales:', error);
-}
-
-const CalendarBase = ({
-  languageCode = SupportLanguage.en,
-  current,
-  hideDayNames = false,
-  theme,
-  defaultSelectedDate,
-  innerConWidth,
-  customRangeFn,
-  hideRange = false,
-  attachSelectedDate,
-  attachCancel,
-  ...rest
-}: TapasCalendarBaseProps) => {
-  const customHeaderProps: any = useRef();
-  const [selected, setSelected] = useState<any>(defaultSelectedDate);
-
-  const [title, setTitle] = useState<string>(
-    formatTitle(current, languageCode)
-  );
-
-  // 安全地设置 defaultLocale
-  try {
-    if (LocaleConfig && typeof LocaleConfig === 'object') {
-      LocaleConfig.defaultLocale = languageCode;
-    }
-  } catch (error) {
-    console.warn('Could not set LocaleConfig.defaultLocale:', error);
-  }
-
-  const setCustomHeaderNewMonth = (next = false) => {
-    const add = next ? 1 : -1;
-    const month = new Date(customHeaderProps?.current?.month);
-    const newMonth = new Date(month.setMonth(month.getMonth() + add));
-    customHeaderProps?.current?.addMonth(add);
-    setTitle(formatTitle(formatDate(newMonth), languageCode));
-  };
-
-  const moveNext = () => {
-    setCustomHeaderNewMonth(true);
-  };
-  const movePrevious = () => {
-    setCustomHeaderNewMonth(false);
-  };
-
-  const CustomHeader = forwardRef((props, ref) => {
-    customHeaderProps.current = props;
-    return (
-      <>
-        <View
-          ref={ref as LegacyRef<View> | undefined}
-          {...props}
-          style={styles.headerCon}
-        >
-          <View style={{ ...styles.header, width: innerConWidth }}>
-            <Text style={{ ...styles.title, color: theme.colors.primary }}>
-              {title}
-            </Text>
-            <View style={styles.rightCon}>
-              <View style={styles.arrow}>
-                <Button
-                  type="clear"
-                  icon={
-                    <CustomIcon
-                      name="chevron_left"
-                      size={20}
-                      color={theme.colors.primary}
-                    />
-                  }
-                  onPress={movePrevious}
-                />
-              </View>
-              <Text style={{ ...styles.today, color: theme.colors.primary }}>
-                {locales[languageCode].today}
-              </Text>
-              <View style={styles.arrow}>
-                <Button
-                  buttonStyle={styles.arrow}
-                  type="clear"
-                  icon={
-                    <CustomIcon
-                      name="chevron_right"
-                      size={20}
-                      color={theme.colors.primary}
-                    />
-                  }
-                  onPress={moveNext}
-                />
-              </View>
-            </View>
-          </View>
-        </View>
-        {!hideDayNames && (
-          <View style={styles.dayNames}>
-            {locales[languageCode]?.dayNamesShort?.map((str: string) => (
-              <Text
-                key={str}
-                style={{
-                  ...styles.dayNameCell,
-                  color: theme.colors.secondary,
-                }}
-              >
-                {str}
-              </Text>
-            ))}
-          </View>
-        )}
-      </>
-    );
-  });
-  return (
-    <View style={styles.container}>
-      <View style={styles.calendarCon}>
-        <Calendar
-          {...rest}
-          // Customize the appearance of the calendar
-          hideArrows={true}
-          // Specify the current date
-          current={current}
-          Callback that gets called when the user selects a day
-          onDayPress={(day:DateData) => {
-            if(day.dateString !== selected) {
-              setSelected(day.dateString);
-              attachSelectedDate && attachSelectedDate(day.dateString);
-            } else {
-              setSelected('');
-              attachSelectedDate && attachSelectedDate('');
-            }
-          }}
-          // Mark specific dates as marked
-          markedDates={{
-            [selected]: {
-              selected: true,
-              // disableTouchEvent: true,
-              selectedColor: theme.colors.primary,
-            },
-            [current]: {
-              marked: true,
-              selected: current === selected,
-              selectedColor: theme.colors.primary,
-              dotColor: theme.colors.colorTextAccent,
-            },
-          }}
-          customHeader={CustomHeader}
-          enableSwipeMonths={true}
-          hideExtraDays={true}
-          theme={{
-            textDayFontSize: 14, // day font size
-            textDayHeaderFontSize: 14, // day of the week font size
-            textDayFontWeight: "400",
-            dayTextColor: theme.colors.primary,
-            todayTextColor: theme.colors.primary, // the color of the section titles
-            textSectionTitleDisabledColor: "gray", // the color of the section titles when disabled
-          }}
-        />
-      </View>
-      <Divider style={styles.divider} />
-      <View style={styles.footer}>
-        <Button type="clear" onPress={() => {
-          setSelected("");
-          attachCancel && attachCancel();
-        }}>
-          {locales[languageCode].clear}
-        </Button>
-        {
-          !hideRange && <Button type="clear" onPress={customRangeFn}>
-              {locales[languageCode].range}
-            </Button>
-        }
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: 1,
-    width: "100%",
-    overflow: "hidden",
-    paddingTop: 16,
-    paddingBottom: 16,
-  },
-  calendarCon: {
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: 1,
-    overflow: "hidden",
-  },
-  headerCon: {
-    display: "flex",
-    height: 40,
-    width: "100%",
-    flexDirection: "row",
-    justifyContent: "center",
-  },
-  header: {
-    display: "flex",
-    height: 40,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    width: "100%",
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: "700",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-  },
-  arrow: {
-    alignSelf: "center",
-  },
-  today: {
-    fontSize: 14,
-    fontWeight: "600",
-    display: "flex",
-    minWidth: 56,
-    textAlign: "center",
-    flexDirection: "column",
-    justifyContent: "center",
-    marginLeft: 12,
-    marginRight: 12,
-  },
-  rightCon: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    flexGrow: 1,
-    marginRight: -16,
-  },
-  divider: {
-    // marginTop: 48,
-  },
-  footer: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    height: 40,
-    marginLeft: 8,
-    marginRight: 8,
-    marginTop: 8,
-    gap: 8,
-  },
-  dayNames: {
-    display: "flex",
-    flexDirection: "row",
-    width: "100%",
-    justifyContent: "space-around",
-    marginTop: 7,
-    marginBottom: 7,
-  },
-  dayNameCell: {
-    alignItems: "center",
-    fontWeight: "400",
-    fontSize: 14,
-  },
-});
-export default withTheme(CalendarBase);

package/components/Calendar/Calendar.tsx

@@ -1,105 +0,0 @@
-import { TabView, withTheme } from "@rneui/themed";
-import React, { useState } from "react";
-import { View, StyleSheet, LayoutChangeEvent } from "react-native";
-
-import { DateInfo, SupportLanguage, TapasCalendarProps } from "./types";
-import { calcHeaderWidth, formatDate } from "./helper";
-import CustomRange from "./CustomRange";
-import CalendarBase from "./Calendar.base";
-
-const curDate = new Date();
-
-const TapasCalendar = ({
-  languageCode = SupportLanguage.en,
-  current = formatDate(curDate),
-  defaultSelectedDate,
-  autoSize = true,
-  width = 360,
-  height = 436,
-  hideDayNames = false,
-  theme,
-  attachSelectedDate,
-  attachCancel,
-  hideRange = false,
-  ...rest
-}: TapasCalendarProps) => {
-  const [tabIndex, setTabIndex] = useState<number>(0);
-
-  const [innerConWidth, setInnerConWidth] = useState<number>(
-    autoSize ? 0 : calcHeaderWidth(width)
-  );
-
-  // Inner Container Layout Event to set grid width and height
-  const handleInnerConLayout = (event: LayoutChangeEvent) => {
-    const { width } = event.nativeEvent.layout;
-    if (innerConWidth === 0 && autoSize) {
-      setInnerConWidth(calcHeaderWidth(width));
-    }
-  };
-
-  return (
-    <View
-      style={{
-        ...styles.container,
-        flexGrow: autoSize ? 1 : undefined,
-        width: autoSize ? undefined : width,
-        height: autoSize ? undefined : height,
-      }}
-      onLayout={handleInnerConLayout}
-    >
-      <TabView
-        value={tabIndex as number}
-        onChange={setTabIndex}
-        animationType="spring"
-      >
-        <TabView.Item style={styles.wFull}>
-          <CalendarBase
-            {...rest}
-            defaultSelectedDate={defaultSelectedDate}
-            current={current}
-            languageCode={languageCode}
-            innerConWidth={innerConWidth}
-            customRangeFn={() => setTabIndex(1)}
-            hideDayNames={hideDayNames}
-            attachSelectedDate={(dateStr: string | string[]) => {
-              attachSelectedDate && attachSelectedDate(dateStr);
-            }}
-            attachCancel={attachCancel}
-            hideRange={hideRange}
-          />
-        </TabView.Item>
-        <TabView.Item style={styles.wFull}>
-          <CustomRange
-            backFn={() => setTabIndex(0)}
-            rangeVal={[]}
-            attachComplete={(range: (DateInfo | null)[]) => {
-              attachSelectedDate &&
-                attachSelectedDate(
-                  range.map((item) =>
-                    item ? `${item.year}-${item.month}-${item.day}` : ""
-                  )
-                );
-            }}
-            languageCode={languageCode}
-          />
-        </TabView.Item>
-      </TabView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: 1,
-    width: "100%",
-    overflow: "hidden",
-  },
-
-  wFull: {
-    width: "100%",
-  },
-});
-
-export default withTheme(TapasCalendar);