@beppla/tapas-ui 1.5.11 → 1.5.13

package/components/Calendar/WeekDaySelector.tsx

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

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

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

@@ -1,120 +0,0 @@
-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;
-}