@beppla/tapas-ui 1.0.68 → 1.0.70

package/module/Calendar/ConcreteTimeSelector.js

@@ -1,157 +1,73 @@
-"use strict";
-
-var __assign = this && this.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  var desc = Object.getOwnPropertyDescriptor(m, k);
-  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-    desc = {
-      enumerable: true,
-      get: function () {
-        return m[k];
-      }
-    };
-  }
-  Object.defineProperty(o, k2, desc);
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
-var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
-  Object.defineProperty(o, "default", {
-    enumerable: true,
-    value: v
+import { withTheme } from "@rneui/themed";
+import React, { useEffect, useState } from "react";
+import { View, Text, StyleSheet } 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";
+const ConcreteTimeSelector = ({
+  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(2);
+  const [hourIndex, setHourIndex] = useState(hour ? parseInt(hour) + mid : -1);
+  const [minuteIndex, setMinuteIndex] = useState(minute ? parseInt(minute) + mid : -1);
+  const [hourVal, setHourVal] = useState(hour ?? "00");
+  const [minuteVal, setMinuteVal] = useState(minute ?? "00");
+  const [rowHeight] = useState(52);
+  const [innerConWidth, setInnerConWidth] = useState(0);
+  const [innerConHeight, setInnerConHeight] = useState(0);
+  const [rowCount, setRowCount] = useState({
+    left: hours.length + mid * 2,
+    right: minutes.length + mid * 2
   });
-} : function (o, v) {
-  o["default"] = v;
-});
-var __importStar = this && this.__importStar || function () {
-  var ownKeys = function (o) {
-    ownKeys = Object.getOwnPropertyNames || function (o) {
-      var ar = [];
-      for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-      return ar;
-    };
-    return ownKeys(o);
-  };
-  return function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-    __setModuleDefault(result, mod);
-    return result;
-  };
-}();
-var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
-  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-    if (ar || !(i in from)) {
-      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-      ar[i] = from[i];
-    }
-  }
-  return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = this && this.__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var themed_1 = require("@rneui/themed");
-var react_1 = __importStar(require("react"));
-var react_native_1 = require("react-native");
-var Button_1 = __importDefault(require("../Button/Button"));
-var TapasIcon_1 = __importDefault(require("../Icons/TapasIcon"));
-var FixedSizeGrid_1 = __importDefault(require("../Grid/FixedSizeGrid"));
-var helper_1 = require("./helper");
-var types_1 = require("./types");
-var local_1 = require("./local");
-var ConcreteTimeSelector = function (_a) {
-  var _b, _c;
-  var backFn = _a.backFn,
-    _d = _a.minTime,
-    minTime = _d === void 0 ? "00:00" : _d,
-    _e = _a.maxTime,
-    maxTime = _e === void 0 ? "23:59" : _e,
-    theme = _a.theme,
-    hour = _a.hour,
-    minute = _a.minute,
-    _f = _a.showCloseBtn,
-    showCloseBtn = _f === void 0 ? false : _f,
-    closeBtnText = _a.closeBtnText,
-    attatchClose = _a.attatchClose,
-    attachComplete = _a.attachComplete,
-    _g = _a.languageCode,
-    languageCode = _g === void 0 ? types_1.SupportLanguage.en : _g;
-  var hours = (0, helper_1.getConcreteTimes)(minTime, maxTime, "hours");
-  var minutes = (0, helper_1.getConcreteTimes)(minTime, maxTime, "minutes");
-  var _h = (0, react_1.useState)(2),
-    mid = _h[0],
-    setMid = _h[1];
-  var _j = (0, react_1.useState)(hour ? parseInt(hour) + mid : -1),
-    hourIndex = _j[0],
-    setHourIndex = _j[1];
-  var _k = (0, react_1.useState)(minute ? parseInt(minute) + mid : -1),
-    minuteIndex = _k[0],
-    setMinuteIndex = _k[1];
-  var _l = (0, react_1.useState)(hour !== null && hour !== void 0 ? hour : "00"),
-    hourVal = _l[0],
-    setHourVal = _l[1];
-  var _m = (0, react_1.useState)(minute !== null && minute !== void 0 ? minute : "00"),
-    minuteVal = _m[0],
-    setMinuteVal = _m[1];
-  var rowHeight = (0, react_1.useState)(52)[0];
-  var _o = (0, react_1.useState)(0),
-    innerConWidth = _o[0],
-    setInnerConWidth = _o[1];
-  var _p = (0, react_1.useState)(0),
-    innerConHeight = _p[0],
-    setInnerConHeight = _p[1];
-  var _q = (0, react_1.useState)({
-      left: hours.length + mid * 2,
-      right: minutes.length + mid * 2
-    }),
-    rowCount = _q[0],
-    setRowCount = _q[1];
-  var gridHour = null;
-  var gridMinute = null;
-  (0, react_1.useEffect)(function () {
-    setHourIndex(hours.indexOf(hour !== null && hour !== void 0 ? hour : "00") + mid);
-    setMinuteIndex(minutes.indexOf(minute !== null && minute !== void 0 ? minute : "00") + mid);
-    setHourVal(hour !== null && hour !== void 0 ? hour : "00");
-    setMinuteVal(minute !== null && minute !== void 0 ? minute : "00");
+  let gridHour = null;
+  let gridMinute = 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
-  var handleInnerConWidthLayout = function (event) {
-    var width = event.nativeEvent.layout.width;
+  const handleInnerConWidthLayout = event => {
+    const {
+      width
+    } = event.nativeEvent.layout;
     if (innerConWidth === 0) {
       setInnerConWidth(width);
     }
   };
+
   // Inner Container Layout Event to set grid width and height
-  var handleInnerConHeightLayout = function (event) {
-    var _a, _b;
-    var height = event.nativeEvent.layout.height;
+  const handleInnerConHeightLayout = event => {
+    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);
-      var visibleRowCount = Math.floor((height - 64) / rowHeight);
-      var midValue = Math.floor(visibleRowCount / 2);
+      const visibleRowCount = Math.floor((height - 64) / rowHeight);
+      const midValue = Math.floor(visibleRowCount / 2);
       setMid(midValue);
       setRowCount({
         left: hours.length + midValue * 2,
@@ -159,83 +75,83 @@ var ConcreteTimeSelector = function (_a) {
       });
       if (hourIndex === -1) {
         setHourIndex(midValue);
-        setHourVal((_a = hours[midValue - mid]) !== null && _a !== void 0 ? _a : "00");
+        setHourVal(hours[midValue - mid] ?? "00");
       }
       if (minuteIndex === -1) {
-        setMinuteVal((_b = minutes[midValue - mid]) !== null && _b !== void 0 ? _b : "00");
+        setMinuteVal(minutes[midValue - mid] ?? "00");
         setMinuteIndex(midValue);
       }
     }
   };
-  var renderRangeText = function (key) {
-    return react_1.default.createElement(react_native_1.View, {
+  const renderRangeText = key => /*#__PURE__*/React.createElement(View, {
+    key: key,
+    style: key === "hour" ? styles.range1 : styles.range2
+  }, /*#__PURE__*/React.createElement(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));
+  const renderListHeader = title => /*#__PURE__*/React.createElement(Text, {
+    key: title,
+    style: {
+      ...styles.listHeadertext,
+      color: theme.colors.primary,
+      width: (innerConWidth - 20) / 2,
+      backgroundColor: theme.colors.grey5
+    }
+  }, title);
+  const renderScrollList = key => {
+    const selected = key === "left" ? hourIndex : minuteIndex;
+    const Cell = ({
+      rowIndex,
+      style
+    }) => /*#__PURE__*/React.createElement(View, {
+      style: style,
+      key: `${key}-${rowIndex}`
+    }, /*#__PURE__*/React.createElement(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]) ?? ""));
+    return /*#__PURE__*/React.createElement(View, {
       key: key,
-      style: key === "hour" ? styles.range1 : styles.range2
-    }, react_1.default.createElement(Button_1.default, {
-      type: "clear",
-      titleStyle: __assign(__assign({}, styles.rangeText), {
-        maxWidth: (innerConWidth - 102) / 2 - 8,
-        // whiteSpace: "nowrap",
-        // textOverflow: "ellipsis",
-        color: theme.colors.primary
-      }),
-      buttonStyle: styles.padding4
-    }, key === "hour" ? hourVal : minuteVal));
-  };
-  var renderListHeader = function (title) {
-    return react_1.default.createElement(react_native_1.Text, {
-      key: title,
-      style: __assign(__assign({}, styles.listHeadertext), {
-        color: theme.colors.primary,
-        width: (innerConWidth - 20) / 2,
-        backgroundColor: theme.colors.grey5
-      })
-    }, title);
-  };
-  var renderScrollList = function (key) {
-    var _a;
-    var selected = key === "left" ? hourIndex : minuteIndex;
-    var Cell = function (_a) {
-      var _b;
-      var rowIndex = _a.rowIndex,
-        style = _a.style;
-      return react_1.default.createElement(react_native_1.View, {
-        style: style,
-        key: "".concat(key, "-").concat(rowIndex)
-      }, react_1.default.createElement(react_native_1.Text, {
-        style: __assign(__assign({}, styles.cell), {
-          fontSize: rowIndex === selected ? 16 : 14,
-          fontWeight: rowIndex === selected ? "700" : "400",
-          color: rowIndex === selected ? theme.colors.primary : theme.colors.secondary
+      style: {
+        ...styles.scrollCon,
+        backgroundColor: theme.colors.grey5,
+        ...(key === "left" && {
+          borderBottomLeftRadius: 8
+        }),
+        ...(key === "right" && {
+          borderBottomRightRadius: 8
         })
-      }, (_b = key === "left" ? hours[rowIndex - mid] : minutes[rowIndex - mid]) !== null && _b !== void 0 ? _b : ""));
-    };
-    return react_1.default.createElement(react_native_1.View, {
-      key: key,
-      style: __assign(__assign(__assign(__assign({}, styles.scrollCon), {
-        backgroundColor: theme.colors.grey5
-      }), key === "left" && {
-        borderBottomLeftRadius: 8
-      }), key === "right" && {
-        borderBottomRightRadius: 8
-      })
-    }, react_1.default.createElement(FixedSizeGrid_1.default, {
-      initialScrollTop: (__spreadArray(__spreadArray(__spreadArray([], Array(mid).fill(""), true), key === "left" ? hours : minutes, true), Array(mid).fill(""), true).indexOf((_a = key === "left" ? hour : minute) !== null && _a !== void 0 ? _a : "00") - mid) * rowHeight,
-      onScroll: function (event) {
-        var _a, _b;
-        var scrollTop = event.scrollTop;
-        var index = Math.floor((scrollTop + (innerConHeight - 64) / 2) / rowHeight);
+      }
+    }, /*#__PURE__*/React.createElement(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((_a = hours[index - mid]) !== null && _a !== void 0 ? _a : "00");
+              setHourVal(hours[index - mid] ?? "00");
             }
             break;
           case "right":
             if (minutes[index - mid]) {
               setMinuteIndex(index);
-              setMinuteVal((_b = minutes[index - mid]) !== null && _b !== void 0 ? _b : "00");
+              setMinuteVal(minutes[index - mid] ?? "00");
             }
             break;
           default:
@@ -251,7 +167,7 @@ var ConcreteTimeSelector = function (_a) {
       columnWidth: (innerConWidth - 20) / 2 - 24,
       rowHeight: rowHeight,
       rowCount: rowCount[key],
-      ref: function (grid) {
+      ref: grid => {
         if (grid && key === "left" && hourIndex === hours.length + mid * 2 - 1) {
           grid.scrollToItem({
             columnIndex: 0,
@@ -271,12 +187,12 @@ var ConcreteTimeSelector = function (_a) {
       }
     }, Cell));
   };
-  return react_1.default.createElement(react_native_1.View, {
+  return /*#__PURE__*/React.createElement(View, {
     style: styles.container
-  }, react_1.default.createElement(react_native_1.View, {
+  }, /*#__PURE__*/React.createElement(View, {
     style: styles.header,
     onLayout: handleInnerConWidthLayout
-  }, backFn && react_1.default.createElement(Button_1.default, {
+  }, backFn && /*#__PURE__*/React.createElement(Button, {
     containerStyle: styles.backBtn,
     buttonStyle: {
       paddingTop: 4.5,
@@ -284,27 +200,199 @@ var ConcreteTimeSelector = function (_a) {
     },
     onPress: backFn,
     type: "clear",
-    icon: react_1.default.createElement(TapasIcon_1.default, {
+    icon: /*#__PURE__*/React.createElement(CustomIcon, {
       size: 24,
       color: theme.colors.primary,
       name: "back"
     })
-  }), react_1.default.createElement(react_native_1.View, {
+  }), /*#__PURE__*/React.createElement(View, {
     style: styles.rangeTextCon
-  }, renderRangeText("hour"), minuteVal && react_1.default.createElement(react_native_1.Text, {
-    style: __assign(__assign({}, styles.rangeText), {
+  }, renderRangeText("hour"), minuteVal && /*#__PURE__*/React.createElement(Text, {
+    style: {
+      ...styles.rangeText,
       color: theme.colors.primary,
       paddingBottom: 4
-    })
-  }, ":"), renderRangeText("minute")), showCloseBtn && react_1.default.createElement(react_native_1.View, {
+    }
+  }, ":"), renderRangeText("minute")), showCloseBtn && /*#__PURE__*/React.createElement(View, {
     style: styles.backBtn
-  }, react_1.default.createElement(Button_1.default, {
+  }, /*#__PURE__*/React.createElement(Button, {
     type: "clear",
-    icon: !closeBtnText && react_1.default.createElement(TapasIcon_1.default, {
+    icon: !closeBtnText && /*#__PURE__*/React.createElement(CustomIcon, {
       size: 24,
       color: theme.colors.primary,
       name: "close"
     }),
+    onPress: () => attatchClose && attatchClose()
+  }, closeBtnText))), /*#__PURE__*/React.createElement(View, {
+    style: styles.main,
+    onLayout: handleInnerConHeightLayout
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.listHeader
+  }, renderListHeader(locales[languageCode].hour), renderListHeader(locales[languageCode].minute)), /*#__PURE__*/React.createElement(View, {
+    style: styles.flatlistCon
+  }, renderScrollList("left"), renderScrollList("right"))), /*#__PURE__*/React.createElement(View, {
+    style: styles.footer
+  }, /*#__PURE__*/React.createElement(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), /*#__PURE__*/React.createElement(Button, {
+    disabled: hourIndex < mid,
+    onPress: () => {
+      if (attachComplete) {
+        attachComplete([hourVal, minuteVal]);
+      }
+    }
+  }, locales[languageCode]?.done)));
+};
+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);
+//# sourceMappingURL=ConcreteTimeSelector.js.map    size: 24,
+      color: theme.colors.primary,
+      name: "close"
+    }),
     onPress: function () {
       return attatchClose && attatchClose();
     }