@beppla/tapas-ui 1.5.10 → 1.5.12

package/components/Calendar/WeekDaySelector.tsx

@@ -0,0 +1,154 @@
+import { withTheme } from "@rneui/themed";
+import React, { useState } from "react";
+import { StyleSheet, View, Text } from "react-native";
+
+import { WeekDaySelectorProps } from "./types";
+import Button from "../Button/Button";
+import { locales } from "./local";
+
+const weekdays = Array.from({ length: 7 }, (_, index) => index + 1);
+
+const WeekDaySelector: React.FC<WeekDaySelectorProps> = ({
+  selectMode = "single",
+  attachComplete,
+  defaultSelected = -1,
+  languageCode,
+  theme,
+}) => {
+  const [selected, setSelected] = useState<number | number[]>(defaultSelected);
+  return (
+    <View style={styles.con}>
+      <View style={styles.gridCon}>
+        <View style={styles.grid}>
+          {weekdays.map((day) => (
+            <View
+              key={day}
+              style={[
+                styles.item,
+                { borderColor: theme.colors.grey2 },
+                (typeof selected === "number"
+                  ? selected === day
+                  : selected?.includes(day)) && {
+                  backgroundColor: theme.colors.grey4,
+                  borderColor: theme.colors.primary,
+                },
+              ]}
+            >
+              <Button
+                type="clear"
+                onPress={() => {
+                  if (selectMode === "single") {
+                    setSelected(day);
+                  }
+                  if (selectMode === "multi") {
+                    if (typeof selected === "number") {
+                      setSelected([selected]);
+                    } else if (selected.includes(day)) {
+                      setSelected(selected.filter((d) => d !== day));
+                    } else {
+                      setSelected([...selected, day]);
+                    }
+                  }
+                }}
+                style={styles.dayButton}
+              >
+                <Text style={styles.dayText}>
+                  {locales[languageCode]?.dayNames[day - 1]}
+                </Text>
+              </Button>
+            </View>
+          ))}
+        </View>
+      </View>
+      <View style={styles.footer}>
+        <Button
+          type="clear"
+          onPress={() => {
+            setSelected(defaultSelected);
+            attachComplete && attachComplete(defaultSelected);
+          }}
+        >
+          {locales[languageCode]?.reset}
+        </Button>
+        <Button
+          disabled={
+            typeof selected === "number" ? selected < 0 : selected.length === 0
+          }
+          onPress={() => {
+            if (
+              attachComplete &&
+              (typeof selected === "number"
+                ? selected > 0
+                : selected.length > 0)
+            ) {
+              attachComplete(selected);
+            }
+          }}
+        >
+          {locales[languageCode]?.done}
+        </Button>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  con: {
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    overflow: "hidden",
+  },
+  grid: {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "flex-start",
+    marginLeft: 16,
+    marginRight: 16,
+    marginTop: 8,
+    marginBottom: 8,
+    gap: 8,
+  },
+  gridCon: {
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    overflow: "hidden",
+    justifyContent: "flex-start",
+  },
+  item: {
+    width: 160,
+    height: 40,
+    justifyContent: "center",
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    borderRadius: 12,
+    borderWidth: 1,
+    borderStyle: "solid",
+  },
+  dayButton: {
+    width: 160,
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  dayText: {
+    fontSize: 14,
+    fontWeight: "400",
+  },
+  footer: {
+    display: "flex",
+    flexDirection: "row",
+    height: 40,
+    marginLeft: 16,
+    marginRight: 16,
+    marginTop: 8,
+    overflow: "hidden",
+    gap: 8,
+    justifyContent: "flex-end",
+  },
+});
+
+export default withTheme(WeekDaySelector);

package/components/Calendar/helper.ts

@@ -0,0 +1,138 @@
+import { locales } from "./local";
+import { DurationItem, LanguageCode, SupportLanguage } from "./types";
+
+/**
+ * Formats a date into a string in the format "YYYY-MM-DD".
+ * @param date - The date to be formatted.
+ * @returns The formatted date string.
+ */
+export const formatDate = (date: Date): string => `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
+
+/**
+ * Formats a date string into a title string based on the language code.
+ * @param dateStr - The date string to be formatted.
+ * @param languageCode - The language code used to determine the month name.
+ * @returns The formatted title string.
+ */
+export const formatTitle = (dateStr: string, languageCode: LanguageCode): string => {
+    const date = new Date(dateStr);
+    if (date.toString() === "Invalid Date") return "";
+    const month = date.getMonth();
+    const year = date.getFullYear();
+    return `${locales[languageCode]?.monthNamesShort?.[month] ?? ""} ${year ?? ""}`;
+}
+
+export const calcHeaderWidth = (width: number): number => {
+    const main = width - 10;
+    return main - 10 - (main / 7 - 32);
+}
+
+export const getDays = (date: Date, languageCode: keyof typeof SupportLanguage): string[] => {
+    const days = Array.from(
+        {
+            length: new Date(date.getFullYear(), date?.getMonth(), 0).getDate(),
+        },
+        (_, index) => `${index + 1}`
+    );
+    days.unshift(locales[languageCode].any);
+    return days;
+}
+
+export const getYears = (date: Date, languageCode: keyof typeof SupportLanguage): string[] => {
+    const currentYear = date.getFullYear();
+    const years = Array.from(
+        { length: currentYear - 1899 },
+        (_, index) => `${1900 + index}`
+    );
+    years.push(locales[languageCode].any);
+    return years;
+}
+
+/**
+ * Generates a list of times in HH:MM format based on the start time and interval.
+ * @param startTime - The start time in HH:MM format.
+ * @param interval - The time interval in minutes.
+ * @returns The list of times in HH:MM format.
+ */
+export const getTimes = (startTime: string, interval: number = 30): string[] => {
+    const [startHour = 0, startMinute = 0] = startTime.split(":").map(Number);
+    const times: string[] = [];
+
+    let currentHour = startHour;
+    let currentMinute = startMinute;
+
+    while (currentHour < 24) {
+        times.push(`${currentHour.toString().padStart(2, "0")}:${currentMinute.toString().padStart(2, "0")}`);
+        currentMinute += interval;
+        if (currentMinute >= 60) {
+            currentHour++;
+            currentMinute -= 60;
+        }
+    }
+
+    return times;
+}
+
+/**
+ * Generates a list of times in HH:MM format based on the start time and interval.
+ * @param startTime - The start time in HH:MM format.
+ * @param entdTime - The end time in HH:MM format.
+ * @returns The list of times in HH:MM format.
+ */
+export const getConcreteTimes = (
+    startTime: string = "00:00",
+    endTime: string = "23:59",
+    returnType: "time" | "hours" | "minutes" = "time",
+): string[] => {
+    const regex = /^([01]?[0-9]|2[0-3]):([0-5][0-9])$/;
+    if (!regex.test(startTime) || !regex.test(endTime)) {
+        return []
+    }
+    const [startH, startM] = startTime.split(":").map(Number);
+    const [endH, endM] = endTime.split(":").map(Number);
+    const start = (startH ?? 0) * 60 + (startM ?? 0);
+    const end = (endH ?? 23) * 60 + (endM ?? 59);
+    if (start > end) {
+        return []
+    }
+
+    const times: string[] = [];
+
+    for (let i = start; i <= end; i++) {
+        const hours = Math.floor(i / 60).toString().padStart(2, '0');
+        const minutes = (i % 60).toString().padStart(2, '0');
+        if (returnType === "time") {
+            times.push(`${hours}:${minutes}`);
+        } else if (returnType === "hours") {
+            times.push(hours);
+        } else if (returnType === "minutes") {
+            times.push(minutes);
+        }
+    }
+    return Array.from(new Set(times));
+};
+
+/**
+ * Generates a list of interval values starting from the minimum time and incrementing by 30 minutes, up to the maximum time.
+ * @param minTime - The minimum time in minutes.
+ * @param maxTime - The maximum time in minutes.
+ * @returns The list of interval values.
+ */
+export const getIntervalValues = (minTime: string, maxTime: string): DurationItem[] => {
+    const intervals: DurationItem[] = [];
+    const [minH='0', minM='0'] = minTime.split(":");
+    const min = parseInt(minH) * 60 + parseInt(minM);
+    const [maxH='0', maxM='0'] = maxTime.split(":");
+    const max = parseInt(maxH) * 60 + parseInt(maxM);
+    let currentInterval = 30;
+
+    while ((currentInterval + min) <= max) {
+        const minutes = currentInterval % 60;
+        const hours = (currentInterval - minutes) / 60;
+        intervals.push({ text: `${hours > 0 ? `${hours} hr` : ''}${minutes > 0 ? ` ${minutes} min` : ""}`, time: currentInterval });
+        currentInterval += 30;
+    }
+
+    return intervals;
+}
+

package/components/Calendar/local.ts

@@ -0,0 +1,124 @@
+export const locales = {
+    en: {
+        monthNames: [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+            'August',
+            'September',
+            'October',
+            'November',
+            'December'
+        ],
+        monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+        dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        today: "Today",
+        clear: "Clear",
+        range: "Custom range",
+        confirm: "Confirm",
+        anyStartDate: "Any start date",
+        anyEndDate: "Any end date",
+        anyTime: "Select time below",
+        startTime: "Start Time",
+        duration: "Duration",
+        next: "Next",
+        reset: "Reset",
+        done: "Done",
+        year: "Year",
+        month: "Month",
+        day: "Day",
+        any: "Any",
+        hour: "Hour",
+        minute: "Minute",
+    },
+    es: {
+        monthNames: [
+            'Enero',
+            'Febrero',
+            'Marzo',
+            'Abril',
+            'Puede',
+            'Junio',
+            'Julio',
+            'Agosto',
+            'Septiembre',
+            'Octubre',
+            'Noviembre',
+            'Diciembre'
+        ],
+        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
+        dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
+        dayNamesShort: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
+        today: "Aujourd'hui",
+        clear: "Borrar",
+        range: "rango personalizado",
+        confirm: "Confirmar",
+        anyStartDate: "Cualquier fecha de inicio",
+        anyEndDate: "Cualquier fecha de finalización",
+        anyTime: "Seleccione la hora a continuación",
+        startTime: "Hora de inicio",
+        duration: "Duración",
+        next: "siguiente",
+        reset: "Restablecer",
+        done: "Hecho",
+        year: "Año",
+        month: "Mes",
+        day: "día",
+        any: "Cualquier",
+        hour: "Hora",
+        minute: "Minuto"
+    },
+    zh: {
+        monthNames: [
+            '一月',
+            '二月',
+            '三月',
+            '四月',
+            '五月',
+            '六月',
+            '七月',
+            '八月',
+            '九月',
+            '十月',
+            '十一月',
+            '十二月'
+        ],
+        monthNamesShort: ['一月',
+            '二月',
+            '三月',
+            '四月',
+            '五月',
+            '六月',
+            '七月',
+            '八月',
+            '九月',
+            '十月',
+            '十一月',
+            '十二月'],
+        dayNames: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+        dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'],
+        today: "今天",
+        clear: "清除",
+        range: "自定义时间范围",
+        confirm: "确认",
+        anyStartDate: "任意开始时间",
+        anyEndDate: "任意结束时间",
+        anyTime: "请选择时间",
+        startTime: "起始时间",
+        duration: "间隔",
+        next: "下一步",
+        reset: "重置",
+        done: "完成",
+        year: "年",
+        month: "月",
+        day: "日",
+        any: "任意",
+        hour: "小时",
+        minute: "分钟"
+    }
+};

package/components/Calendar/types.ts

@@ -0,0 +1,120 @@
+import { CalendarProps } from "react-native-calendars";
+
+export interface TapasCalendarProps extends CalendarProps {
+    mode?: CalendarMode;
+    languageCode: LanguageCode;
+    defaultSelectedDate?: string | string[];
+    theme?: any;
+    autoSize?: boolean;
+    width?: number;
+    height?: number;
+    hideRange?: boolean;
+    selectionMode?: 'single' | 'range';  // 选择模式：单日或范围，默认 single
+    attachSelectedDate?: (date: string | string[]) => void;
+    attachCancel?: () => void;
+    /** Test ID for E2E testing */
+    testID?: string;
+}
+
+export interface TapasCalendarBaseProps extends CalendarProps {
+    mode?: CalendarMode;
+    current: string;
+    languageCode: LanguageCode;
+    defaultSelectedDate?: string | string[];
+    innerConWidth: number;
+    theme?: any;
+    customRangeFn: () => void;
+    hideRange?: boolean;
+    selectionMode?: 'single' | 'range';  // 选择模式：单日或范围，默认 single
+    attachSelectedDate?: (date: string | string[]) => void;
+    attachCancel?: () => void;
+}
+
+export enum CalendarMode {
+    Month = "month",
+    Week = "week",
+    Day = "day",
+    Range = "range"
+}
+
+export enum SupportLanguage {
+    'zh' = 'zh',
+    'en' = 'en',
+    'es' = 'es',
+}
+
+export type LanguageCode = keyof typeof SupportLanguage;
+
+export interface TapasCustomRangeProps {
+    backFn: () => void;
+    languageCode: LanguageCode;
+    theme?: any;
+    rangeVal?: string[];
+    attachComplete?: (range: (DateInfo | null)[]) => void;
+}
+
+/**
+ * @deprecated Use `TapasCustomRangeProps` instead. This interface is kept for backward compatibility.
+ */
+export type TapasCustomRnageProps = TapasCustomRangeProps;
+
+export interface TapasTimeSelectorProps {
+    backFn?: () => void;
+    attachComplete?: (range: string[]) => void;
+    showCloseBtn?: boolean;
+    closeBtnText?: string;
+    attatchClose?: () => void;
+    minTime?: string;
+    maxTime?: string;
+    interval?: number;
+    languageCode: LanguageCode;
+    theme?: any;
+    rangeVal: string[];
+}
+
+export interface DateInfo {
+    day?: number;
+    year?: number;
+    month?: number;
+}
+
+export type DaySelectorProps = SingleProps | MultiProps;
+
+export interface SingleProps extends SelectorBaseProps {
+    selectMode: "single";
+    defaultSelected?: number;
+}
+export interface MultiProps extends SelectorBaseProps {
+    selectMode: "multi";
+    defaultSelected?: number[];
+}
+
+export interface SelectorBaseProps {
+    attachComplete?: (selected: null | number | number[]) => void;
+    languageCode: LanguageCode;
+    theme?: any;
+}
+
+export type WeekDaySelectorProps = SingleProps | MultiProps;
+
+export type MonthSelectorProps = SingleProps | MultiProps;
+
+export type ItemData = {
+    id: string;
+    title: string;
+    index: number;
+};
+
+export enum Column {
+    Year = 'year',
+    Month = 'month',
+    Day = 'day'
+}
+export type position = "left" | "center" | "right";
+export type dateType = "year" | "month" | "day";
+export type rangeType = "start" | "end";
+
+export interface DurationItem {
+    time: number;
+    text: string;
+}