@beppla/tapas-ui 1.5.12 → 1.5.13

package/components/Calendar/CustomRange.tsx

@@ -1,538 +0,0 @@
-import { withTheme } from "@rneui/themed";
-import React, { useEffect, useState, useRef } from "react";
-import { View, Text, StyleSheet, LayoutChangeEvent } from "react-native";
-
-import Button from "../Button/Button";
-import {
-  DateInfo,
-  SupportLanguage,
-  TapasCustomRnageProps,
-  rangeType,
-} from "./types";
-import CustomIcon from "../Icons/TapasIcon";
-import { locales } from "./local";
-import FixedSizeGrid from "../Grid/FixedSizeGrid";
-import { getDays, getYears } from "./helper";
-
-const curDate = new Date();
-
-const CustomRange = ({
-  backFn,
-  theme,
-  attachComplete,
-  rangeVal,
-  languageCode = SupportLanguage.en,
-}: TapasCustomRnageProps) => {
-  const [curEditDate, setCurEditDate] = useState<"start" | "end">("start");
-  const [range, setRnage] = useState<string[]>(rangeVal ?? []);
-  const [rangeDetail, setRangeDetail] = useState<(DateInfo | null)[]>([]);
-  const [rowHeight, setRowHeight] = useState<number>(52);
-
-  const years = getYears(curDate, languageCode);
-  const [days, setDays] = useState<string[]>([locales[languageCode].any]);
-  const monthes = [
-    locales[languageCode].any,
-    ...locales[languageCode]?.monthNamesShort,
-  ];
-
-  const [mid, setMid] = useState<number>(2);
-  const [rowCount, setRowCount] = useState<{
-    left: number;
-    center: number;
-    right: number;
-  }>({
-    left: years.length + mid * 2,
-    center: monthes.length + mid * 2,
-    right: days.length + mid * 2,
-  });
-  const [selectedYear, setSelectedYear] = useState<number>(0);
-  const [selectedMonth, setSelectedMonth] = useState<number>(0);
-  const [selectedDay, setSelectedDay] = useState<number>(0);
-  const [innerConWidth, setInnerConWidth] = useState<number>(0);
-  const [innerConHeight, setInnerConHeight] = useState<number>(0);
-  const yearGrid = useRef<any>(null);
-  const monthGrid = useRef<any>(null);
-  const dayGrid = useRef<any>(null);
-
-  useEffect(() => {
-    if (selectedYear > 0 && selectedMonth > mid) {
-      setDays(
-        getDays(
-          new Date(
-            `${
-              selectedYear - mid === years.length - 1
-                ? curDate.getFullYear()
-                : years[selectedYear - mid]
-            }-${selectedMonth - mid < 0 ? 1 : selectedMonth - mid}-01`
-          ),
-          languageCode
-        )
-      );
-      setRowCount({ ...rowCount, right: days.length + mid * 2 });
-    }
-  }, [selectedMonth, selectedYear]);
-
-  useEffect(() => {
-    let val: string = "";
-    let obj: DateInfo | null = null;
-    if (selectedMonth > mid) {
-      const month = selectedMonth - mid < 0 ? 1 : selectedMonth - mid;
-      if (month) {
-        obj = { month };
-        val += locales[languageCode].monthNamesShort[month - 1];
-        if (selectedDay > mid) {
-          const day = selectedDay - mid < 0 ? 1 : selectedDay - mid;
-          if (day) {
-            if (obj) {
-              obj.day = day;
-            }
-            val += ` ${day.toString().padStart(2, "0")}`;
-          }
-        }
-      }
-    }
-    if (selectedYear > mid && selectedYear - mid !== years.length - 1) {
-      if (val) {
-        val += ", ";
-      }
-      const year = years[selectedYear - mid];
-      if (year) {
-        val += year;
-        obj = { ...(obj ?? {}), year: parseInt(year) };
-      }
-    }
-
-    if (curEditDate === "start") {
-      setRangeDetail([obj, rangeDetail[1] ?? null]);
-      setRnage([val, range[1] ?? ""]);
-    } else {
-      setRnage([range[0] ?? "", val]);
-      setRangeDetail([rangeDetail[0] ?? null, obj]);
-    }
-  }, [selectedMonth, selectedYear, selectedDay]);
-
-  useEffect(() => {
-    const { year, month, day } =
-      rangeDetail[curEditDate === "start" ? 0 : 1] ?? {};
-    const newYearIndex = year
-      ? years.indexOf(`${year}`)
-      : years.length + mid * 2 - 1;
-    yearGrid.current.scrollToItem({
-      columnIndex: 0,
-      rowIndex: newYearIndex,
-      align: "auto",
-    });
-
-    const newMonthIndex = month ? month + mid * 2 : 0;
-    monthGrid.current.scrollToItem({
-      columnIndex: 0,
-      rowIndex: newMonthIndex,
-      align: "auto",
-    });
-
-    const newDayIndex = day ? day + mid * 2 : 0;
-    dayGrid.current.scrollToItem({
-      columnIndex: 0,
-      rowIndex: newDayIndex,
-      align: "auto",
-    });
-  }, [curEditDate, mid]);
-
-  // Inner Container Layout Event to set grid width and height
-  const handleInnerConWidthLayout = (event: LayoutChangeEvent) => {
-    const { width } = event.nativeEvent.layout;
-    if (innerConWidth === 0) {
-      setInnerConWidth(width);
-    }
-  };
-
-  // Inner Container Layout Event to set grid width and height
-  const handleInnerConHeightLayout = (event: LayoutChangeEvent) => {
-    const { height } = event.nativeEvent.layout;
-    if (innerConHeight === 0) {
-      setInnerConHeight(height);
-
-      // 矫正行高，和总行数，确保显示行为奇数， 中间行为选中行
-      const maxRowCount = Math.floor((height - 64) / rowHeight);
-      const adjustedRowCount =
-        maxRowCount % 2 === 0 ? maxRowCount - 1 : maxRowCount;
-      const newRowHeight = (height - 64) / adjustedRowCount;
-      setRowHeight(newRowHeight);
-
-      // 设置中间行索引以及各列的选中行索引
-      const val = Math.floor((height - 64) / 2 / newRowHeight);
-      setMid(val);
-      setRowCount({
-        left: years.length + val * 2,
-        center: monthes.length + val * 2,
-        right: days.length + val * 2,
-      });
-      setSelectedMonth(val);
-      setSelectedDay(val);
-      setSelectedYear(years.length + val * 2 - 1);
-    }
-  };
-
-  const renderRangeText = (key: rangeType) => (
-    <View key={key} style={key === "start" ? styles.range1 : styles.range2}>
-      <Button
-        type="clear"
-        titleStyle={{
-          ...styles.rangeText,
-          maxWidth: (innerConWidth - 102) / 2 - 8,
-          whiteSpace: "nowrap",
-          textOverflow: "ellipsis",
-          color:
-            curEditDate === key ? theme.colors.primary : theme.colors.secondary,
-        }}
-        buttonStyle={styles.padding4}
-        onPress={() => setCurEditDate(key)}
-      >
-        {key === "start"
-          ? range[0] || locales[languageCode]?.anyStartDate
-          : range[1] || locales[languageCode]?.anyEndDate}
-      </Button>
-    </View>
-  );
-
-  const renderListHeader = (title: string) => (
-    <Text
-      key={title}
-      style={{
-        ...styles.listHeadertext,
-        color: theme.colors.primary,
-        width: (innerConWidth - 20) / 3,
-      }}
-    >
-      {title}
-    </Text>
-  );
-
-  const YearCell = ({ rowIndex, style }: any) => (
-    <View style={style}>
-      <Text
-        style={{
-          ...styles.cell,
-          fontSize: rowIndex === selectedYear ? 16 : 14,
-          fontWeight: rowIndex === selectedYear ? "700" : "400",
-          color:
-            rowIndex === selectedYear
-              ? theme.colors.primary
-              : theme.colors.secondary,
-        }}
-      >
-        {years[rowIndex - mid]}
-      </Text>
-    </View>
-  );
-  const MonthCell = ({ rowIndex, style }: any) => (
-    <View style={style}>
-      <Text
-        style={{
-          ...styles.cell,
-          fontSize: rowIndex === selectedMonth ? 16 : 14,
-          fontWeight: rowIndex === selectedMonth ? "700" : "400",
-          color:
-            rowIndex === selectedMonth
-              ? theme.colors.primary
-              : theme.colors.secondary,
-        }}
-      >
-        {monthes[rowIndex - mid]}
-      </Text>
-    </View>
-  );
-  const DayCell = ({ rowIndex, style }: any) => (
-    <View style={style}>
-      <Text
-        style={{
-          ...styles.cell,
-          fontSize: rowIndex === selectedDay ? 16 : 14,
-          fontWeight: rowIndex === selectedDay ? "700" : "400",
-          color:
-            rowIndex === selectedDay
-              ? theme.colors.primary
-              : theme.colors.secondary,
-        }}
-      >
-        {days[rowIndex - mid]}
-      </Text>
-    </View>
-  );
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.header} onLayout={handleInnerConWidthLayout}>
-        <Button
-          containerStyle={styles.backBtn}
-          buttonStyle={{ paddingTop: 4.5, paddingBottom: 4.5 }}
-          onPress={backFn}
-          type="clear"
-          icon={
-            <CustomIcon size={24} color={theme.colors.primary} name={"back"} />
-          }
-        />
-        <View style={styles.rangeTextCon}>
-          {renderRangeText("start")}
-          <Text style={{ ...styles.rangeText, color: theme.colors.secondary }}>
-            -
-          </Text>
-          {renderRangeText("end")}
-        </View>
-        <View style={styles.backBtn}></View>
-      </View>
-      <View style={styles.main} onLayout={handleInnerConHeightLayout}>
-        <View style={styles.listHeader}>
-          {renderListHeader(locales[languageCode].year)}
-          {renderListHeader(locales[languageCode].month)}
-          {renderListHeader(locales[languageCode].day)}
-        </View>
-        <View style={styles.flatlistCon}>
-          <View
-            key="year-grid"
-            style={{
-              ...styles.scrollCon,
-              backgroundColor: theme.colors.grey5,
-              borderTopLeftRadius: 8,
-              borderBottomLeftRadius: 8,
-            }}
-          >
-            <FixedSizeGrid
-              onScroll={(event) => {
-                const { scrollTop } = event;
-                const index = Math.floor(
-                  (scrollTop + (innerConHeight - 64) / 2) / rowHeight
-                );
-                setSelectedYear(index);
-              }}
-              style={{
-                scrollbarWidth: "none",
-                msOverflowStyle: "none",
-              }}
-              height={innerConHeight - 64}
-              width={(innerConWidth - 20) / 3 - 24}
-              columnCount={1}
-              columnWidth={(innerConWidth - 20) / 3 - 24}
-              rowCount={rowCount.left}
-              rowHeight={rowHeight}
-              ref={yearGrid}
-            >
-              {YearCell}
-            </FixedSizeGrid>
-          </View>
-          <View
-            key="month-grid"
-            style={{
-              ...styles.scrollCon,
-              backgroundColor: theme.colors.grey5,
-            }}
-          >
-            <FixedSizeGrid
-              onScroll={(event) => {
-                const { scrollTop } = event;
-                const index = Math.floor(
-                  (scrollTop + (innerConHeight - 64) / 2) / rowHeight
-                );
-                setSelectedMonth(index);
-              }}
-              style={{
-                scrollbarWidth: "none",
-                msOverflowStyle: "none",
-              }}
-              height={innerConHeight - 64}
-              width={(innerConWidth - 20) / 3 - 24}
-              columnCount={1}
-              columnWidth={(innerConWidth - 20) / 3 - 24}
-              rowCount={rowCount.center}
-              rowHeight={rowHeight}
-              ref={monthGrid}
-            >
-              {MonthCell}
-            </FixedSizeGrid>
-          </View>
-          <View
-            key="day-grid"
-            style={{
-              ...styles.scrollCon,
-              backgroundColor: theme.colors.grey5,
-              borderTopRightRadius: 8,
-              borderBottomRightRadius: 8,
-            }}
-          >
-            <FixedSizeGrid
-              onScroll={(event) => {
-                const { scrollTop } = event;
-                const index = Math.floor(
-                  (scrollTop + (innerConHeight - 64) / 2) / rowHeight
-                );
-
-                setSelectedDay(index);
-              }}
-              style={{
-                scrollbarWidth: "none",
-                msOverflowStyle: "none",
-              }}
-              height={innerConHeight - 64}
-              width={(innerConWidth - 20) / 3 - 24}
-              columnCount={1}
-              columnWidth={(innerConWidth - 20) / 3 - 24}
-              rowCount={rowCount.right}
-              rowHeight={rowHeight}
-              ref={dayGrid}
-            >
-              {DayCell}
-            </FixedSizeGrid>
-          </View>
-        </View>
-      </View>
-      <View style={styles.footer}>
-        <Button
-          type="clear"
-          onPress={() => {
-            setRangeDetail([]);
-            setRnage([]);
-            // TODO reset sroll
-          }}
-        >
-          {locales[languageCode]?.reset}
-        </Button>
-        {curEditDate === "end" ? (
-          <Button
-            onPress={() => {
-              attachComplete && attachComplete(rangeDetail);
-            }}
-          >
-            {locales[languageCode]?.done}
-          </Button>
-        ) : (
-          <Button onPress={() => setCurEditDate("end")}>
-            {locales[languageCode]?.next}
-          </Button>
-        )}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: 1,
-    overflow: "hidden",
-  },
-  header: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "flex-start",
-    marginLeft: 8,
-    marginRight: 8,
-    marginTop: 16,
-    marginBottom: 8,
-    gap: 8,
-    height: 40,
-    overflow: "hidden",
-  },
-  backBtn: {
-    width: 40,
-    height: 40,
-  },
-  rangeTextCon: {
-    height: 40,
-    display: "flex",
-    flexDirection: "row",
-    flexGrow: 1,
-    flex: 1,
-    overflow: "hidden",
-  },
-  padding4: {
-    paddingLeft: 4,
-    paddingRight: 4,
-  },
-  range1: {
-    display: "flex",
-    flexDirection: "row",
-    flexGrow: 1,
-    justifyContent: "flex-end",
-    height: 40,
-    overflow: "hidden",
-  },
-  range2: {
-    display: "flex",
-    flexDirection: "row",
-    flexGrow: 1,
-    justifyContent: "flex-start",
-    height: 40,
-    overflow: "hidden",
-  },
-  rangeText: {
-    alignSelf: "center",
-    fontSize: 16,
-    fontWeight: "700",
-    overflow: "hidden",
-  },
-  main: {
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: 1,
-    marginLeft: 16,
-    marginRight: 16,
-    overflow: "hidden",
-  },
-  footer: {
-    display: "flex",
-    flexDirection: "row",
-    height: 40,
-    marginLeft: 16,
-    marginBottom: 16,
-    marginRight: 16,
-    marginTop: 8,
-    overflow: "hidden",
-    gap: 8,
-    justifyContent: "flex-end",
-  },
-  flatlistCon: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    flexGrow: 1,
-    marginBottom: 8,
-    marginTop: 8,
-    gap: 1,
-    height: 0,
-    overflow: "hidden",
-  },
-  scrollCon: {
-    paddingLeft: 12,
-    paddingRight: 12,
-    paddingTop: 8,
-    paddingBottom: 8,
-  },
-  listHeader: {
-    height: 28,
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    gap: 1,
-    overflow: "hidden",
-  },
-  listHeadertext: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    height: 14,
-    marginTop: 14,
-    textAlign: "center",
-    fontSize: 12,
-    fontWeight: "700",
-  },
-  cell: {
-    display: "flex",
-    flexDirection: "column",
-    height: 40,
-    justifyContent: "center",
-    textAlign: "center",
-  },
-});
-
-export default withTheme(CustomRange);

package/components/Calendar/DaySelector.tsx

@@ -1,159 +0,0 @@
-import { withTheme } from "@rneui/themed";
-import React, { useState } from "react";
-import { StyleSheet, View, Text } from "react-native";
-
-import { DaySelectorProps } from "./types";
-import Button from "../Button/Button";
-import { locales } from "./local";
-
-const days = Array.from({ length: 31 }, (_, index) => index + 1);
-
-const DaySelector: React.FC<DaySelectorProps> = ({
-  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}>
-          {days.map((day) => (
-            <View
-              key={day}
-              style={[
-                styles.item,
-                (typeof selected === "number"
-                  ? selected === day
-                  : selected?.includes(day)) && {
-                  backgroundColor: theme.colors.black,
-                },
-              ]}
-            >
-              <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,
-                    (typeof selected === "number"
-                      ? selected === day
-                      : selected.includes(day)) && {
-                      color: theme.colors.white,
-                    },
-                  ]}
-                >
-                  {day}
-                </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: 40,
-    height: 40,
-    justifyContent: "center",
-    alignItems: "center",
-    display: "flex",
-    flexDirection: "column",
-    borderRadius: 20,
-  },
-  dayButton: {
-    flex: 1,
-    width: 40,
-    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(DaySelector);