@beppla/tapas-ui 1.4.34 → 1.5.0

package/components/Calendar/ConcreteTimeSelector.tsx

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