@beppla/tapas-ui 1.0.67 → 1.0.69

package/module/Calendar/TimeSelector.js

@@ -1,87 +1,170 @@
-import { withTheme } from "@rneui/themed";
-import React, { useState } from "react";
-import { View, Text, StyleSheet } from "react-native";
-import Button from "../Button/Button";
-import { SupportLanguage } 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
-}) => {
-  const startTimes = [locales[languageCode].any, ...getTimes(minTime, interval)];
-  const durations = [{
-    time: 0,
-    text: locales[languageCode].any
-  }, ...getIntervalValues(minTime, maxTime)];
-  const [mid, setMid] = useState(2);
-  const [startTime, setStartTime] = useState(0);
-  const [duration, setDuration] = useState(0);
-  const [rowHeight] = useState(52);
-  const [innerConWidth, setInnerConWidth] = useState(0);
-  const [innerConHeight, setInnerConHeight] = useState(0);
-  const [range, setRange] = useState(rangeVal);
-  const [rowCount, setRowCount] = useState({
-    left: startTimes.length + mid * 2,
-    right: durations.length + mid * 2
+"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
   });
-  let gridStartTime = null;
-  let gridDuration = null;
-  const calcEndTime = index => {
-    if (!range[0] || range[0] === locales[languageCode].any) return;
+} : 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 types_1 = require("./types");
+var TapasIcon_1 = __importDefault(require("../Icons/TapasIcon"));
+var local_1 = require("./local");
+var FixedSizeGrid_1 = __importDefault(require("../Grid/FixedSizeGrid"));
+var helper_1 = require("./helper");
+var TimeSelector = function (_a) {
+  var _b, _c;
+  var backFn = _a.backFn,
+    _d = _a.minTime,
+    minTime = _d === void 0 ? "8:00" : _d,
+    _e = _a.maxTime,
+    maxTime = _e === void 0 ? "24:00" : _e,
+    _f = _a.interval,
+    interval = _f === void 0 ? 30 : _f,
+    theme = _a.theme,
+    _g = _a.rangeVal,
+    rangeVal = _g === void 0 ? [] : _g,
+    _h = _a.showCloseBtn,
+    showCloseBtn = _h === void 0 ? false : _h,
+    closeBtnText = _a.closeBtnText,
+    attatchClose = _a.attatchClose,
+    attachComplete = _a.attachComplete,
+    _j = _a.languageCode,
+    languageCode = _j === void 0 ? types_1.SupportLanguage.en : _j;
+  var startTimes = __spreadArray([local_1.locales[languageCode].any], (0, helper_1.getTimes)(minTime, interval), true);
+  var durations = __spreadArray([{
+    time: 0,
+    text: local_1.locales[languageCode].any
+  }], (0, helper_1.getIntervalValues)(minTime, maxTime), true);
+  var _k = (0, react_1.useState)(2),
+    mid = _k[0],
+    setMid = _k[1];
+  var _l = (0, react_1.useState)(0),
+    startTime = _l[0],
+    setStartTime = _l[1];
+  var _m = (0, react_1.useState)(0),
+    duration = _m[0],
+    setDuration = _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)(rangeVal),
+    range = _q[0],
+    setRange = _q[1];
+  var _r = (0, react_1.useState)({
+      left: startTimes.length + mid * 2,
+      right: durations.length + mid * 2
+    }),
+    rowCount = _r[0],
+    setRowCount = _r[1];
+  var gridStartTime = null;
+  var gridDuration = null;
+  var calcEndTime = function (index) {
+    var _a, _b, _c, _d, _e, _f;
+    if (!range[0] || range[0] === local_1.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");
+    var startHour = parseInt((_b = (_a = range[0]) === null || _a === void 0 ? void 0 : _a.split(":")[0]) !== null && _b !== void 0 ? _b : "0");
+    var startMinute = parseInt((_d = (_c = range[0]) === null || _c === void 0 ? void 0 : _c.split(":")[1]) !== null && _d !== void 0 ? _d : "0");
     if (index - mid > 0) {
-      const times = durations[index - mid]?.time ?? 0;
+      var times = (_f = (_e = durations[index - mid]) === null || _e === void 0 ? void 0 : _e.time) !== null && _f !== void 0 ? _f : 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")}`]);
+      var durationMinute = times % 60;
+      var durationHour = (times - durationMinute) / 60;
+      var endHour = startHour + durationHour + Math.floor((startMinute + durationMinute) / 60);
+      var endMinute = (startMinute + durationMinute) % 60;
+      setRange([range[0], "".concat(endHour.toString().padStart(2, "0"), ":").concat(endMinute.toString().padStart(2, "0"))]);
     }
   };
-
   // Inner Container Layout Event to set grid width and height
-  const handleInnerConWidthLayout = event => {
-    const {
-      width
-    } = event.nativeEvent.layout;
+  var handleInnerConWidthLayout = function (event) {
+    var width = event.nativeEvent.layout.width;
     if (innerConWidth === 0) {
       setInnerConWidth(width);
     }
   };
-
   // Inner Container Layout Event to set grid width and height
-  const handleInnerConHeightLayout = event => {
-    const {
-      height
-    } = event.nativeEvent.layout;
+  var handleInnerConHeightLayout = function (event) {
+    var height = event.nativeEvent.layout.height;
     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);
+      var val = Math.floor((height - 64) / 2 / rowHeight);
       setMid(val);
       setRowCount({
         left: startTimes.length + val * 2,
@@ -91,68 +174,67 @@ const TimeSelector = ({
       setDuration(val);
     }
   };
-  const renderRangeText = key => /*#__PURE__*/React.createElement(View, {
-    key: key,
-    style: key === "start" ? 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 === "start" ? range[0] : range[1]));
-  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" ? startTime : duration;
-    const Cell = ({
-      rowIndex,
-      style
-    }) => /*#__PURE__*/React.createElement(View, {
-      style: style
-    }, /*#__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" ? startTimes[rowIndex - mid] : durations[rowIndex - mid]?.text) ?? ""));
-    return /*#__PURE__*/React.createElement(View, {
+  var renderRangeText = function (key) {
+    return react_1.default.createElement(react_native_1.View, {
       key: key,
-      style: {
-        ...styles.scrollCon,
-        backgroundColor: theme.colors.grey5,
-        ...(key === "left" && {
-          borderBottomLeftRadius: 8
-        }),
-        ...(key === "right" && {
-          borderBottomRightRadius: 8
+      style: key === "start" ? 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 === "start" ? range[0] : range[1]));
+  };
+  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 selected = key === "left" ? startTime : duration;
+    var Cell = function (_a) {
+      var _b, _c;
+      var rowIndex = _a.rowIndex,
+        style = _a.style;
+      return react_1.default.createElement(react_native_1.View, {
+        style: style
+      }, 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
         })
-      }
-    }, /*#__PURE__*/React.createElement(FixedSizeGrid, {
-      onScroll: event => {
-        const {
-          scrollTop
-        } = event;
-        const index = Math.floor((scrollTop + (innerConHeight - 64) / 2) / rowHeight);
+      }, (_c = key === "left" ? startTimes[rowIndex - mid] : (_b = durations[rowIndex - mid]) === null || _b === void 0 ? void 0 : _b.text) !== null && _c !== void 0 ? _c : ""));
+    };
+    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, {
+      onScroll: function (event) {
+        var _a;
+        var scrollTop = event.scrollTop;
+        var index = Math.floor((scrollTop + (innerConHeight - 64) / 2) / rowHeight);
         switch (key) {
           case "left":
-            if (startTimes[index - mid] === locales[languageCode].any) {
+            if (startTimes[index - mid] === local_1.locales[languageCode].any) {
               setRange([]);
             } else {
-              setRange([startTimes[index - mid] ?? ""]);
+              setRange([(_a = startTimes[index - mid]) !== null && _a !== void 0 ? _a : ""]);
               if (duration >= mid) {
                 calcEndTime(duration);
               }
@@ -178,7 +260,7 @@ const TimeSelector = ({
       columnWidth: (innerConWidth - 20) / 2 - 24,
       rowCount: rowCount[key],
       rowHeight: rowHeight,
-      ref: grid => {
+      ref: function (grid) {
         if (grid && key === "left" && startTime === startTimes.length + mid * 2 - 1) {
           grid.scrollToItem({
             columnIndex: 0,
@@ -198,12 +280,12 @@ const TimeSelector = ({
       }
     }, Cell));
   };
-  return /*#__PURE__*/React.createElement(View, {
+  return react_1.default.createElement(react_native_1.View, {
     style: styles.container
-  }, /*#__PURE__*/React.createElement(View, {
+  }, react_1.default.createElement(react_native_1.View, {
     style: styles.header,
     onLayout: handleInnerConWidthLayout
-  }, backFn && /*#__PURE__*/React.createElement(Button, {
+  }, backFn && react_1.default.createElement(Button_1.default, {
     containerStyle: styles.backBtn,
     buttonStyle: {
       paddingTop: 4.5,
@@ -211,204 +293,30 @@ const TimeSelector = ({
     },
     onPress: backFn,
     type: "clear",
-    icon: /*#__PURE__*/React.createElement(CustomIcon, {
+    icon: react_1.default.createElement(TapasIcon_1.default, {
       size: 24,
       color: theme.colors.primary,
       name: "back"
     })
-  }), /*#__PURE__*/React.createElement(View, {
+  }), react_1.default.createElement(react_native_1.View, {
     style: styles.rangeTextCon
-  }, startTime > mid ? /*#__PURE__*/React.createElement(React.Fragment, null, renderRangeText("start"), range[1] && /*#__PURE__*/React.createElement(Text, {
-    style: {
-      ...styles.rangeText,
+  }, startTime > mid ? react_1.default.createElement(react_1.default.Fragment, null, renderRangeText("start"), range[1] && react_1.default.createElement(react_native_1.Text, {
+    style: __assign(__assign({}, styles.rangeText), {
       color: theme.colors.primary
-    }
-  }, "-"), renderRangeText("end")) : /*#__PURE__*/React.createElement(Text, {
-    style: {
-      ...styles.anyTime,
+    })
+  }, "-"), renderRangeText("end")) : react_1.default.createElement(react_native_1.Text, {
+    style: __assign(__assign({}, styles.anyTime), {
       color: theme.colors.colorTextPlaceholder
-    }
-  }, locales[languageCode].anyTime)), showCloseBtn && /*#__PURE__*/React.createElement(View, {
+    })
+  }, local_1.locales[languageCode].anyTime)), showCloseBtn && react_1.default.createElement(react_native_1.View, {
     style: styles.backBtn
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, react_1.default.createElement(Button_1.default, {
     type: "clear",
-    icon: !closeBtnText && /*#__PURE__*/React.createElement(CustomIcon, {
+    icon: !closeBtnText && react_1.default.createElement(TapasIcon_1.default, {
       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].startTime), renderListHeader(locales[languageCode].duration)), /*#__PURE__*/React.createElement(View, {
-    style: styles.flatlistCon
-  }, renderScrollList("left"), renderScrollList("right"))), /*#__PURE__*/React.createElement(View, {
-    style: styles.footer
-  }, /*#__PURE__*/React.createElement(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), /*#__PURE__*/React.createElement(Button, {
-    disabled: startTime <= mid,
-    onPress: () => {
-      if (attachComplete) {
-        attachComplete(range);
-      }
-    }
-  }, locales[languageCode]?.done)));
-};
-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);
-//# sourceMappingURL=TimeSelector.js.mapme.colors.primary,
-      name: "close"
-    }),
     onPress: function () {
       return attatchClose && attatchClose();
     }
@@ -580,4 +488,3 @@ var styles = react_native_1.StyleSheet.create({
   }
 });
 exports.default = (0, themed_1.withTheme)(TimeSelector);
-//# sourceMappingURL=TimeSelector.js.map