@beppla/tapas-ui 1.4.13 → 1.4.15

package/components/Calendar/ConcreteTimeSelector.tsx

@@ -0,0 +1,479 @@
+import { withTheme } from "@rneui/themed";
+import React, { useEffect, useState } from "react";
+import { View, Text, StyleSheet, LayoutChangeEvent } from "react-native";
+import Button from "../Button/Button";
+import CustomIcon from "../Icons/TapasIcon";
+import FixedSizeGrid from "../Grid/FixedSizeGrid";
+import { getConcreteTimes } from "./helper";
+import { SupportLanguage } from "./types";
+import { locales } from "./local";
+export type Type = "hour" | "minute";
+
+export interface TapasConcreteTimeSelectorProps {
+  backFn?: () => void;
+  attachComplete?: (range: string[]) => void;
+  showCloseBtn?: boolean;
+  closeBtnText?: string;
+  attatchClose?: () => void;
+  minTime?: string;
+  maxTime?: string;
+  languageCode?: keyof typeof SupportLanguage;
+  theme?: any;
+  minute?: string;
+  hour?: string;
+}
+const ConcreteTimeSelector: React.FC<TapasConcreteTimeSelectorProps> = ({
+  backFn,
+  minTime = "00:00",
+  maxTime = "23:59",
+  theme,
+  hour,
+  minute,
+  showCloseBtn = false,
+  closeBtnText,
+  attatchClose,
+  attachComplete,
+  languageCode = SupportLanguage.en,
+}) => {
+  const hours = getConcreteTimes(minTime, maxTime, "hours");
+  const minutes = getConcreteTimes(minTime, maxTime, "minutes");
+  const [mid, setMid] = useState<number>(2);
+  const [hourIndex, setHourIndex] = useState<number>(
+    hour ? parseInt(hour) + mid : -1
+  );
+  const [minuteIndex, setMinuteIndex] = useState<number>(
+    minute ? parseInt(minute) + mid : -1
+  );
+  const [hourVal, setHourVal] = useState<string>(hour ?? "00");
+  const [minuteVal, setMinuteVal] = useState<string>(minute ?? "00");
+  const [rowHeight] = useState<number>(52);
+  const [innerConWidth, setInnerConWidth] = useState<number>(0);
+  const [innerConHeight, setInnerConHeight] = useState<number>(0);
+
+  const [rowCount, setRowCount] = useState<{
+    left: number;
+    right: number;
+  }>({
+    left: hours.length + mid * 2,
+    right: minutes.length + mid * 2,
+  });
+
+  let gridHour: any = null;
+  let gridMinute: any = null;
+
+  useEffect(() => {
+    setHourIndex(hours.indexOf(hour ?? "00") + mid);
+    setMinuteIndex(minutes.indexOf(minute ?? "00") + mid);
+    setHourVal(hour ?? "00");
+    setMinuteVal(minute ?? "00");
+  }, [hour, minute, 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: any) => {
+    const { height } = event.nativeEvent.layout as any;
+    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 visibleRowCount = Math.floor((height - 64) / rowHeight);
+      const midValue = Math.floor(visibleRowCount / 2);
+      setMid(midValue);
+      setRowCount({
+        left: hours.length + midValue * 2,
+        right: minutes.length + midValue * 2,
+      });
+      if (hourIndex === -1) {
+        setHourIndex(midValue);
+        setHourVal(hours[midValue - mid] ?? "00");
+      }
+      if (minuteIndex === -1) {
+        setMinuteVal(minutes[midValue - mid] ?? "00");
+        setMinuteIndex(midValue);
+      }
+    }
+  };
+
+  const renderRangeText = (key: Type) => (
+    <View key={key} style={key === "hour" ? 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 === "hour" ? hourVal : minuteVal}
+      </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" ? hourIndex : minuteIndex;
+    const Cell = ({ rowIndex, style }: any) => (
+      <View style={style} key={`${key}-${rowIndex}`}>
+        <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" ? hours[rowIndex - mid] : minutes[rowIndex - mid]) ?? ""}
+        </Text>
+      </View>
+    );
+
+    return (
+      <View
+        key={key}
+        style={{
+          ...styles.scrollCon,
+          backgroundColor: theme.colors.grey5,
+          ...(key === "left" && {
+            borderBottomLeftRadius: 8,
+          }),
+          ...(key === "right" && {
+            borderBottomRightRadius: 8,
+          }),
+        }}
+      >
+        <FixedSizeGrid
+          initialScrollTop={
+            ([
+              ...Array(mid).fill(""),
+              ...(key === "left" ? hours : minutes),
+              ...Array(mid).fill(""),
+            ].indexOf((key === "left" ? hour : minute) ?? "00") -
+              mid) *
+            rowHeight
+          }
+          onScroll={(event) => {
+            const { scrollTop } = event;
+            const index = Math.floor(
+              (scrollTop + (innerConHeight - 64) / 2) / rowHeight
+            );
+            switch (key) {
+              case "left":
+                if (hours[index - mid]) {
+                  setHourIndex(index);
+                  setHourVal(hours[index - mid] ?? "00");
+                }
+                break;
+              case "right":
+                if (minutes[index - mid]) {
+                  setMinuteIndex(index);
+                  setMinuteVal(minutes[index - mid] ?? "00");
+                }
+                break;
+              default:
+            }
+          }}
+          style={{
+            scrollbarWidth: "none",
+            msOverflowStyle: "none",
+          }}
+          height={innerConHeight - 64}
+          width={(innerConWidth - 20) / 2 - 24}
+          columnCount={1}
+          columnWidth={(innerConWidth - 20) / 2 - 24}
+          rowHeight={rowHeight}
+          rowCount={rowCount[key]}
+          ref={(grid) => {
+            if (
+              grid &&
+              key === "left" &&
+              hourIndex === hours.length + mid * 2 - 1
+            ) {
+              grid.scrollToItem({
+                columnIndex: 0,
+                rowIndex: hours.length + mid * 2,
+                align: "end",
+              });
+            }
+            switch (key) {
+              case "left":
+                gridHour = grid;
+                break;
+              case "right":
+                gridMinute = 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}>
+          {/* {hourIndex > mid ? (
+            <> */}
+          {renderRangeText("hour")}
+          {minuteVal && (
+            <Text
+              style={{
+                ...styles.rangeText,
+                color: theme.colors.primary,
+                paddingBottom: 4,
+              }}
+            >
+              :
+            </Text>
+          )}
+          {renderRangeText("minute")}
+          {/* </>
+          ) : (
+            <Text
+              style={{
+                ...styles.anyTime,
+                color: theme.colors.colorTextPlaceholder,
+              }}
+            >
+              {i18n.t("common.placeholder.selectTimeBelow")}
+            </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].hour)}
+          {renderListHeader(locales[languageCode].minute)}
+        </View>
+        <View style={styles.flatlistCon}>
+          {renderScrollList("left")}
+          {renderScrollList("right")}
+        </View>
+      </View>
+      <View style={styles.footer}>
+        <Button
+          onPress={() => {
+            setHourVal("00");
+            setMinuteVal("00");
+            setHourIndex(mid);
+            if (gridHour)
+              gridHour.scrollToItem({
+                columnIndex: 0,
+                rowIndex: 0,
+                align: "start",
+              });
+            setMinuteIndex(mid);
+            if (gridMinute)
+              gridMinute.scrollToItem({
+                columnIndex: 0,
+                rowIndex: 0,
+                align: "start",
+              });
+            attachComplete && attachComplete([]);
+          }}
+          type="clear"
+        >
+          {locales[languageCode]?.clear}
+        </Button>
+        <Button
+          disabled={hourIndex < mid}
+          onPress={() => {
+            if (attachComplete) {
+              attachComplete([hourVal, minuteVal]);
+            }
+          }}
+        >
+          {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",
+    margin: 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(ConcreteTimeSelector);