@beppla/tapas-ui 1.4.14 → 1.4.15

package/components/Calendar/CustomRange.tsx

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

@@ -0,0 +1,159 @@
+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);