@beppla/tapas-ui 1.5.14 → 1.5.15

package/components/Calendar/MonthSelector.tsx

@@ -0,0 +1,154 @@
+import { withTheme } from "@rneui/themed";
+import React, { useState } from "react";
+import { StyleSheet, View, Text } from "react-native";
+
+import { MonthSelectorProps } from "./types";
+import Button from "../Button/Button";
+import { locales } from "./local";
+
+const months = Array.from({ length: 12 }, (_, index) => index + 1);
+
+const MonthSelector: React.FC<MonthSelectorProps> = ({
+  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}>
+          {months.map((month) => (
+            <View
+              key={month}
+              style={[
+                styles.item,
+                { borderColor: theme.colors.grey2 },
+                (typeof selected === "number"
+                  ? selected === month
+                  : selected?.includes(month)) && {
+                  backgroundColor: theme.colors.grey4,
+                  borderColor: theme.colors.primary,
+                },
+              ]}
+            >
+              <Button
+                type="clear"
+                onPress={() => {
+                  if (selectMode === "single") {
+                    setSelected(month);
+                  }
+                  if (selectMode === "multi") {
+                    if (typeof selected === "number") {
+                      setSelected([selected]);
+                    } else if (selected.includes(month)) {
+                      setSelected(selected.filter((d) => d !== month));
+                    } else {
+                      setSelected([...selected, month]);
+                    }
+                  }
+                }}
+                style={styles.dayButton}
+              >
+                <Text style={styles.dayText}>
+                  {locales[languageCode]?.monthNamesShort[month - 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: 104,
+    height: 40,
+    justifyContent: "center",
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    borderRadius: 12,
+    borderWidth: 1,
+    borderStyle: "solid",
+  },
+  dayButton: {
+    width: 104,
+    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(MonthSelector);

package/components/Calendar/TimeSelector.tsx

@@ -0,0 +1,492 @@
+import { withTheme } from "@rneui/themed";
+import React, { useState } from "react";
+import { View, Text, StyleSheet, LayoutChangeEvent } from "react-native";
+
+import Button from "../Button/Button";
+import {
+  SupportLanguage,
+  TapasTimeSelectorProps,
+  rangeType,
+} from "./types";
+import CustomIcon from "../Icons/TapasIcon";
+import { locales } from "./local";
+import FixedSizeGrid from "../Grid/FixedSizeGrid";
+import { getTimes, getIntervalValues } from "./helper";
+
+const TimeSelector = ({
+  backFn,
+  minTime = "8:00",
+  maxTime = "24:00",
+  interval = 30,
+  theme,
+  rangeVal = [],
+  showCloseBtn = false,
+  closeBtnText,
+  attatchClose,
+  attachComplete,
+  languageCode = SupportLanguage.en,
+}: TapasTimeSelectorProps) => {
+  const startTimes = [
+    locales[languageCode].any,
+    ...getTimes(minTime, interval),
+  ];
+  const durations = [
+    { time: 0, text: locales[languageCode].any },
+    ...getIntervalValues(minTime, maxTime),
+  ];
+
+  const [mid, setMid] = useState<number>(2);
+  const [startTime, setStartTime] = useState<number>(0);
+  const [duration, setDuration] = useState<number>(0);
+  const [rowHeight] = useState<number>(52);
+  const [innerConWidth, setInnerConWidth] = useState<number>(0);
+  const [innerConHeight, setInnerConHeight] = useState<number>(0);
+  const [range, setRange] = useState<string[]>(rangeVal);
+
+  const [rowCount, setRowCount] = useState<{
+    left: number;
+    right: number;
+  }>({
+    left: startTimes.length + mid * 2,
+    right: durations.length + mid * 2,
+  });
+
+  const gridStartTimeRef = React.useRef<any>(null);
+  const gridDurationRef = React.useRef<any>(null);
+  // Backward-compatible aliases
+  let gridStartTime = gridStartTimeRef.current;
+  let gridDuration = gridDurationRef.current;
+
+  const calcEndTime = (index: number) => {
+    if (!range[0] || range[0] === locales[languageCode].any) return;
+    if (index === mid) {
+      if (range.length > 1) setRange([range[0]]);
+      return;
+    }
+    const startHour = parseInt(range[0]?.split(":")[0] ?? "0");
+    const startMinute = parseInt(range[0]?.split(":")[1] ?? "0");
+    if (index - mid > 0) {
+      const times = durations[index - mid]?.time ?? 0;
+      if (times === 0) return;
+      const durationMinute = times % 60;
+      const durationHour = (times - durationMinute) / 60;
+      const endHour =
+        startHour +
+        durationHour +
+        Math.floor((startMinute + durationMinute) / 60);
+      const endMinute = (startMinute + durationMinute) % 60;
+      setRange([
+        range[0],
+        `${endHour.toString().padStart(2, "0")}:${endMinute
+          .toString()
+          .padStart(2, "0")}`,
+      ]);
+    }
+  };
+
+  // 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 val = Math.floor((height - 64) / 2 / rowHeight);
+      setMid(val);
+      setRowCount({
+        left: startTimes.length + val * 2,
+        right: durations.length + val * 2,
+      });
+      setStartTime(val);
+      setDuration(val);
+    }
+  };
+
+  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: theme.colors.primary,
+        }}
+        buttonStyle={styles.padding4}
+      >
+        {key === "start" ? range[0] : range[1]}
+      </Button>
+    </View>
+  );
+
+  const renderListHeader = (title: string) => (
+    <Text
+      key={title}
+      style={{
+        ...styles.listHeadertext,
+        color: theme.colors.primary,
+        width: (innerConWidth - 20) / 2,
+        backgroundColor: theme.colors.grey5,
+      }}
+    >
+      {title}
+    </Text>
+  );
+
+  const renderScrollList = (key: 'left'|'right') => {
+    const selected = key === "left" ? startTime : duration;
+    const Cell = ({ rowIndex, style }: any) => (
+      <View style={style}>
+        <Text
+          style={{
+            ...styles.cell,
+            fontSize: rowIndex === selected ? 16 : 14,
+            fontWeight: rowIndex === selected ? "700" : "400",
+            color:
+              rowIndex === selected
+                ? theme.colors.primary
+                : theme.colors.secondary,
+          }}
+        >
+          {(key === "left"
+            ? startTimes[rowIndex - mid]
+            : durations[rowIndex - mid]?.text) ?? ""}
+        </Text>
+      </View>
+    );
+
+    return (
+      <View
+        key={key}
+        style={{
+          ...styles.scrollCon,
+          backgroundColor: theme.colors.grey5,
+          ...(key === "left" && {
+            borderBottomLeftRadius: 8,
+          }),
+          ...(key === "right" && {
+            borderBottomRightRadius: 8,
+          }),
+        }}
+      >
+        <FixedSizeGrid
+          onScroll={(event) => {
+            const { scrollTop } = event;
+            const index = Math.floor(
+              (scrollTop + (innerConHeight - 64) / 2) / rowHeight
+            );
+            switch (key) {
+              case "left":
+                if (startTimes[index - mid] === locales[languageCode].any) {
+                  setRange([]);
+                } else {
+                  setRange([startTimes[index - mid] ?? ""]);
+                  if (duration >= mid) {
+                    calcEndTime(duration);
+                  }
+                }
+                setStartTime(index);
+
+                break;
+              case "right":
+                if (range[0]) {
+                  calcEndTime(index);
+                }
+                setDuration(index);
+                break;
+              default:
+            }
+          }}
+          style={{
+            scrollbarWidth: "none",
+            msOverflowStyle: "none",
+          }}
+          height={innerConHeight - 64}
+          width={(innerConWidth - 20) / 2 - 24}
+          columnCount={1}
+          columnWidth={(innerConWidth - 20) / 2 - 24}
+          rowCount={rowCount[key]}
+          rowHeight={rowHeight}
+          ref={(grid) => {
+            if (
+              grid &&
+              key === "left" &&
+              startTime === startTimes.length + mid * 2 - 1
+            ) {
+              grid.scrollToItem({
+                columnIndex: 0,
+                rowIndex: startTimes.length + mid * 2,
+                align: "end",
+              });
+            }
+            switch (key) {
+              case "left":
+                gridStartTimeRef.current = grid;
+                gridStartTime = grid;
+                break;
+              case "right":
+                gridDurationRef.current = grid;
+                gridDuration = grid;
+                break;
+              default:
+            }
+          }}
+        >
+          {Cell}
+        </FixedSizeGrid>
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header} onLayout={handleInnerConWidthLayout}>
+        {backFn && (
+          <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}>
+          {startTime > mid ? (
+            <>
+              {renderRangeText("start")}
+              {range[1] && (
+                <Text
+                  style={{ ...styles.rangeText, color: theme.colors.primary }}
+                >
+                  -
+                </Text>
+              )}
+              {renderRangeText("end")}
+            </>
+          ) : (
+            <Text
+              style={{
+                ...styles.anyTime,
+                color: theme.colors.colorTextPlaceholder,
+              }}
+            >
+              {locales[languageCode].anyTime}
+            </Text>
+          )}
+        </View>
+        {showCloseBtn && (
+          <View style={styles.backBtn}>
+            <Button
+              type="clear"
+              icon={
+                !closeBtnText && (
+                  <CustomIcon
+                    size={24}
+                    color={theme.colors.primary}
+                    name={"close"}
+                  />
+                )
+              }
+              onPress={() => attatchClose && attatchClose()}
+            >
+              {closeBtnText}
+            </Button>
+          </View>
+        )}
+      </View>
+      <View style={styles.main} onLayout={handleInnerConHeightLayout}>
+        <View style={styles.listHeader}>
+          {renderListHeader(locales[languageCode].startTime)}
+          {renderListHeader(locales[languageCode].duration)}
+        </View>
+        <View style={styles.flatlistCon}>
+          {renderScrollList("left")}
+          {renderScrollList("right")}
+        </View>
+      </View>
+      <View style={styles.footer}>
+        <Button
+          onPress={() => {
+            setRange([]);
+            setStartTime(mid);
+            if (gridStartTime)
+              gridStartTime.scrollToItem({
+                columnIndex: 0,
+                rowIndex: 0,
+                align: "start",
+              });
+            setDuration(mid);
+            if (gridDuration)
+              gridDuration.scrollToItem({
+                columnIndex: 0,
+                rowIndex: 0,
+                align: "start",
+              });
+            attachComplete && attachComplete([]);
+          }}
+          type="clear"
+        >
+          {locales[languageCode]?.reset}
+        </Button>
+        <Button
+          disabled={startTime <= mid}
+          onPress={() => {
+            if (attachComplete) {
+              attachComplete(range);
+            }
+          }}
+        >
+          {locales[languageCode]?.done}
+        </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,
+  },
+  anyTime: {
+    fontSize: 16,
+    fontWeight: "700",
+    alignSelf: "center",
+    display: "flex",
+    textAlign: "center",
+    flexGrow: 1,
+    justifyContent: "center",
+  },
+  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,
+    marginRight: 16,
+    marginTop: 8,
+    overflow: "hidden",
+    gap: 8,
+    justifyContent: "flex-end",
+  },
+  flatlistCon: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    flexGrow: 1,
+    marginBottom: 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,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    overflow: "hidden",
+  },
+  listHeadertext: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    height: 32,
+    paddingTop: 14,
+    paddingBottom: 8,
+    textAlign: "center",
+    fontSize: 12,
+    fontWeight: "700",
+  },
+  cell: {
+    display: "flex",
+    flexDirection: "column",
+    height: 40,
+    justifyContent: "center",
+    marginBottom: 12,
+    textAlign: "center",
+  },
+});
+
+export default withTheme(TimeSelector);