@beppla/tapas-ui 1.2.26 → 1.2.28

package/components/Calendar/Calendar.base.tsx

@@ -0,0 +1,426 @@
+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') {
+              // 范围选择模式
+              // 将颜色转换为75%透明度的辅助函数
+              const hexToRgba = (hex: string, alpha: number): string => {
+                // 移除 # 前缀
+                const cleanHex = hex.replace('#', '');
+                let r: number, g: number, b: number;
+                
+                if (cleanHex.length === 3) {
+                  // 短格式 #RGB -> #RRGGBB
+                  const char0 = cleanHex.charAt(0);
+                  const char1 = cleanHex.charAt(1);
+                  const char2 = cleanHex.charAt(2);
+                  r = parseInt(char0 + char0, 16);
+                  g = parseInt(char1 + char1, 16);
+                  b = parseInt(char2 + char2, 16);
+                } else if (cleanHex.length === 6) {
+                  r = parseInt(cleanHex.substring(0, 2), 16);
+                  g = parseInt(cleanHex.substring(2, 4), 16);
+                  b = parseInt(cleanHex.substring(4, 6), 16);
+                } else {
+                  return hex; // 无法解析，返回原值
+                }
+                
+                return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+              };
+              
+              const primaryColor = theme.colors.primary || '#000000';
+              const colorWith75Opacity = primaryColor.startsWith('#') 
+                ? hexToRgba(primaryColor, 0.75)
+                : primaryColor.includes('rgb') 
+                  ? primaryColor.replace(/rgba?\(([^)]+)\)/, (_match: string, values: string) => {
+                      const colorParts = values.split(',').map((v: string) => v.trim());
+                      return `rgba(${colorParts[0]}, ${colorParts[1]}, ${colorParts[2]}, 0.75)`;
+                    })
+                  : primaryColor;
+              
+              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: colorWith75Opacity,
+                      textColor: theme.colors.primary,  // 文字使用完整不透明的主题色
+                      startingDay: dateString === rangeStart,
+                      endingDay: dateString === rangeEnd,
+                    };
+                  }
+                  currentDate.setDate(currentDate.getDate() + 1);
+                }
+              } else if (rangeStart) {
+                // 只选择了开始日期（使用 period 模式显示）
+                marked[rangeStart] = {
+                  color: theme.colors.primary,
+                  textColor: theme.colors.white,
+                  startingDay: true,
+                  endingDay: true,  // 单日时开始和结束是同一天
+                };
+              }
+            } else {
+              // 单日选择模式（默认）
+              if (selected) {
+                marked[selected] = {
+                  selected: true,
+                  selectedColor: theme.colors.primary,
+                };
+              }
+            }
+            
+            // 标记今天
+            if (current && !marked[current]) {
+              marked[current] = {
+                marked: true,
+                selected: selectionMode === 'single' && 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);