@beppla/tapas-ui 1.4.14 → 1.4.15

package/components/Button/ButtonGroup.tsx

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

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

@@ -0,0 +1,393 @@
+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();
+  
+  // 单日选择状态
+  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

@@ -0,0 +1,107 @@
+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',  // 默认单日选择模式
+  ...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}
+            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);