@beppla/tapas-ui 1.5.11 → 1.5.13

package/components/Button/ButtonGroup.tsx

@@ -1,154 +0,0 @@
-import React, {useState, useCallback, memo} 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;
-}
-
-/**
- * @deprecated Use `ButtonType` instead. This type is kept for backward compatibility.
- */
-type buttonType = ButtonType;
-
-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 = useCallback((index:number) => {
-        setIsHovered(true);
-        setHoveredIndex(index);
-    }, []);
-
-    const handleMouseLeave = useCallback(() => {
-        setIsHovered(false);
-        setHoveredIndex(null);
-    }, []);
-
-    const handlePress = useCallback((index: number, button: buttonType) => {
-        setSelected(index);
-        button.onPress && button.onPress(index);
-    }, []);
-
-    const getButtonStyle = useCallback((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;
-    }, [isHovered, hoveredIndex, selected, styles, hoveredStyle, selectedStyle]);
-
-    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 memo(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,393 +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,
-  selectionMode = 'single',  // 默认单日选择模式
-  attachSelectedDate,
-  attachCancel,
-  ...rest
-}: TapasCalendarBaseProps) => {
-  const customHeaderProps: any = useRef(undefined);
-  
-  // 单日选择状态
-  const [selected, setSelected] = useState<string>('');
-  
-  // 范围选择状态
-  const [rangeStart, setRangeStart] = useState<string>('');
-  const [rangeEnd, setRangeEnd] = useState<string>('');
-  
-  // 初始化默认选择
-  React.useEffect(() => {
-    if (selectionMode === 'single' && typeof defaultSelectedDate === 'string') {
-      setSelected(defaultSelectedDate);
-    } else if (selectionMode === 'range' && Array.isArray(defaultSelectedDate)) {
-      if (defaultSelectedDate.length >= 1 && defaultSelectedDate[0]) {
-        setRangeStart(defaultSelectedDate[0]);
-      }
-      if (defaultSelectedDate.length >= 2 && defaultSelectedDate[1]) {
-        setRangeEnd(defaultSelectedDate[1]);
-      }
-    }
-  }, [defaultSelectedDate, selectionMode]);
-
-  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) => {
-            const clickedDate = day.dateString;
-            
-            if (selectionMode === 'range') {
-              // 范围选择模式 - 只更新状态，不触发回调
-              if (!rangeStart || (rangeStart && rangeEnd)) {
-                // 第一次选择或重新开始选择
-                setRangeStart(clickedDate);
-                setRangeEnd('');
-              } else if (rangeStart && !rangeEnd) {
-                // 第二次选择：设置结束日期
-                const start = new Date(rangeStart);
-                const end = new Date(clickedDate);
-                
-                if (end < start) {
-                  // 如果结束日期早于开始日期，交换
-                  setRangeStart(clickedDate);
-                  setRangeEnd(rangeStart);
-                } else {
-                  setRangeEnd(clickedDate);
-                }
-                // 注意：不在这里触发 attachSelectedDate，而是在确认按钮点击时触发
-              }
-            } else {
-              // 单日选择模式（默认，保持向下兼容）
-              if (day.dateString !== selected) {
-                setSelected(day.dateString);
-                attachSelectedDate && attachSelectedDate(day.dateString);
-              } else {
-                setSelected('');
-                attachSelectedDate && attachSelectedDate('');
-              }
-            }
-          }}
-          // Mark specific dates as marked
-          markingType={selectionMode === 'range' && rangeStart ? 'period' : undefined}
-          markedDates={(() => {
-            const marked: any = {};
-            
-            if (selectionMode === 'range') {
-              // 范围选择模式
-              const primaryColor = theme.colors.primary || '#000000';
-              
-              if (rangeStart && rangeEnd) {
-                // 已选择完整范围
-                const start = new Date(rangeStart);
-                const end = new Date(rangeEnd);
-                const currentDate = new Date(start);
-                
-                while (currentDate <= end) {
-                  const isoString = currentDate.toISOString();
-                  const dateParts = isoString.split('T');
-                  const dateString = dateParts[0] || '';
-                  if (dateString) {
-                    marked[dateString] = {
-                      color: primaryColor,
-                      textColor: theme.colors.white,
-                      startingDay: dateString === rangeStart,
-                      endingDay: dateString === rangeEnd,
-                    };
-                  }
-                  currentDate.setDate(currentDate.getDate() + 1);
-                }
-              } else if (rangeStart) {
-                // 只选择了开始日期
-                marked[rangeStart] = {
-                  color: primaryColor,
-                  textColor: theme.colors.white,
-                  startingDay: true,
-                  endingDay: true,
-                };
-              }
-            } else {
-              // 单日选择模式（默认）
-              if (selected) {
-                marked[selected] = {
-                  selected: true,
-                  selectedColor: theme.colors.primary,
-                };
-              }
-            }
-            
-            // 标记今天（仅在单日选择模式下标记，范围模式下不额外标记避免样式冲突）
-            if (selectionMode === 'single' && current && !marked[current]) {
-              marked[current] = {
-                marked: true,
-                selected: current === selected,
-                selectedColor: theme.colors.primary,
-                dotColor: theme.colors.colorTextAccent,
-              };
-            }
-            
-            return marked;
-          })()}
-          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={() => {
-          if (selectionMode === 'range') {
-            setRangeStart("");
-            setRangeEnd("");
-          } else {
-            setSelected("");
-          }
-          attachCancel && attachCancel();
-        }}>
-          {locales[languageCode].clear}
-        </Button>
-        {
-          selectionMode === 'range' ? (
-            // 范围选择模式：显示确认按钮
-            <Button 
-              type="clear" 
-              onPress={() => {
-                // 点击确认时，触发回调（让父组件决定是否关闭）
-                if (rangeStart && rangeEnd) {
-                  attachSelectedDate && attachSelectedDate([rangeStart, rangeEnd]);
-                }
-              }}
-              disabled={!rangeStart || !rangeEnd}
-            >
-              {locales[languageCode].confirm || 'Confirm'}
-            </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,109 +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,
-  selectionMode = 'single',  // 默认单日选择模式
-  testID,
-  ...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
-      testID={testID}
-      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}
-            selectionMode={selectionMode}
-            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);