@beppla/tapas-ui 1.4.15 → 1.4.16

package/components/Calendar/MonthSelector.tsx

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

@@ -1,493 +0,0 @@
-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,
-  });
-
-  let gridStartTime: any = null;
-  let gridDuration: any = null;
-
-  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 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 / 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":
-                gridStartTime = grid;
-                break;
-              case "right":
-                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);