@beppla/tapas-ui 1.0.67 → 1.0.69

package/module/MessageBox/MessageBox.js

@@ -1,86 +1,30 @@
-"use strict";
-
-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
-  });
-} : 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 __importDefault = this && this.__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var react_1 = __importStar(require("react"));
-var react_native_1 = require("react-native");
-var themed_1 = require("@rneui/themed");
-var TapasIcon_1 = __importDefault(require("../Icons/TapasIcon"));
-var MessageBox = function (_a) {
-  var state = _a.state,
-    title = _a.title,
-    text = _a.text,
-    icon = _a.icon,
-    visible = _a.visible,
-    confirmBtnText = _a.confirmBtnText,
-    closeBtnText = _a.closeBtnText,
-    _b = _a.hideFooter,
-    hideFooter = _b === void 0 ? false : _b,
-    _c = _a.hideCloseBtn,
-    hideCloseBtn = _c === void 0 ? false : _c,
-    _d = _a.hideConfirmBtn,
-    hideConfirmBtn = _d === void 0 ? false : _d,
-    _e = _a.descNumberOfLines,
-    descNumberOfLines = _e === void 0 ? 3 : _e,
-    onVisibilityChange = _a.onVisibilityChange,
-    onClose = _a.onClose,
-    onConfirm = _a.onConfirm;
-  var theme = (0, themed_1.useTheme)();
-  var styles = useStyles();
-  var _f = (0, react_1.useState)(false),
-    modalVisible = _f[0],
-    setModalVisible = _f[1];
-  (0, react_1.useEffect)(function () {
+import React, { useEffect, useState, useCallback, useMemo } from "react";
+import { View, Text, Modal, Pressable } from "react-native";
+import { withTheme, makeStyles, useTheme } from "@rneui/themed";
+import TapasIcon from "../Icons/TapasIcon";
+const MessageBox = ({
+  state,
+  title,
+  text,
+  icon,
+  visible,
+  confirmBtnText,
+  closeBtnText,
+  hideFooter = false,
+  hideCloseBtn = false,
+  hideConfirmBtn = false,
+  descNumberOfLines = 3,
+  onVisibilityChange,
+  onClose,
+  onConfirm
+}) => {
+  const theme = useTheme();
+  const styles = useStyles();
+  const [modalVisible, setModalVisible] = useState(false);
+  useEffect(() => {
     setModalVisible(Boolean(visible));
   }, [visible]);
-  var stateIcon = (0, react_1.useMemo)(function () {
+  const stateIcon = useMemo(() => {
     if (icon) return icon;
     switch (state) {
       case "success":
@@ -93,7 +37,7 @@ var MessageBox = function (_a) {
         return "";
     }
   }, [state, icon]);
-  var handleClose = (0, react_1.useCallback)(function () {
+  const handleClose = useCallback(() => {
     if (onClose) {
       onClose();
     } else if (onVisibilityChange) {
@@ -102,47 +46,142 @@ var MessageBox = function (_a) {
       setModalVisible(false);
     }
   }, [onClose, onVisibilityChange]);
-  var handleConfirm = (0, react_1.useCallback)(function () {
-    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+  const handleConfirm = useCallback(() => {
+    onConfirm?.();
   }, [onConfirm]);
-  var handleRequestClose = (0, react_1.useCallback)(function () {
+  const handleRequestClose = useCallback(() => {
     onVisibilityChange ? onVisibilityChange(false) : setModalVisible(false);
   }, [onVisibilityChange]);
-  return react_1.default.createElement(react_native_1.Modal, {
+  return /*#__PURE__*/React.createElement(Modal, {
     animationType: "fade",
     transparent: true,
     visible: modalVisible,
     onRequestClose: handleRequestClose
-  }, react_1.default.createElement(react_native_1.View, {
+  }, /*#__PURE__*/React.createElement(View, {
     style: styles.modalContainer
-  }, react_1.default.createElement(react_native_1.View, {
+  }, /*#__PURE__*/React.createElement(View, {
     style: styles.modalContent
-  }, react_1.default.createElement(react_native_1.View, {
+  }, /*#__PURE__*/React.createElement(View, {
     style: styles.messagebox_header
-  }, stateIcon ? react_1.default.createElement(react_native_1.View, {
+  }, stateIcon ? /*#__PURE__*/React.createElement(View, {
     style: styles.messagebox_header_icon
-  }, react_1.default.createElement(TapasIcon_1.default, {
+  }, /*#__PURE__*/React.createElement(TapasIcon, {
     name: stateIcon,
     size: 20,
     color: theme.theme.colors.primary
-  })) : null, react_1.default.createElement(react_native_1.View, {
+  })) : null, /*#__PURE__*/React.createElement(View, {
     style: styles.messagebox_header_txt_con
-  }, title ? react_1.default.createElement(react_native_1.Text, {
+  }, title ? /*#__PURE__*/React.createElement(Text, {
     style: styles.messagebox_header_txt,
     numberOfLines: 1,
     ellipsizeMode: "tail"
-  }, title) : null)), react_1.default.createElement(react_native_1.View, {
+  }, title) : null)), /*#__PURE__*/React.createElement(View, {
     style: styles.messagebox_main
-  }, react_1.default.createElement(react_native_1.Text, {
+  }, /*#__PURE__*/React.createElement(Text, {
     style: styles.messagebox_main_txt,
     numberOfLines: descNumberOfLines,
     ellipsizeMode: "tail"
-  }, text)), !hideFooter ? react_1.default.createElement(react_native_1.View, {
+  }, text)), !hideFooter ? /*#__PURE__*/React.createElement(View, {
     style: styles.messagebox_footer
-  }, !hideCloseBtn ? react_1.default.createElement(react_native_1.Pressable, {
+  }, !hideCloseBtn ? /*#__PURE__*/React.createElement(Pressable, {
     style: styles.messagebox_btn,
     onPress: handleClose
-  }, react_1.default.createElement(react_native_1.Text, {
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.messagebox_btn_txt,
+    numberOfLines: 1,
+    ellipsizeMode: "tail"
+  }, closeBtnText || "Close")) : null, !hideConfirmBtn ? /*#__PURE__*/React.createElement(Pressable, {
+    style: [styles.messagebox_btn, {
+      backgroundColor: theme.theme.colors.primary
+    }],
+    onPress: handleConfirm
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.messagebox_btn_txt, {
+      color: theme.theme.colors.white
+    }],
+    numberOfLines: 1,
+    ellipsizeMode: "tail"
+  }, confirmBtnText || "Confirm")) : null) : null)));
+};
+const useStyles = makeStyles(theme => ({
+  modalContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.6)",
+    zIndex: 10
+  },
+  modalContent: {
+    width: 392,
+    borderRadius: 12,
+    backgroundColor: theme?.colors?.white,
+    display: "flex",
+    flexDirection: "column",
+    padding: 16,
+    gap: 16
+  },
+  messagebox_header: {
+    display: "flex",
+    flexDirection: "row",
+    gap: 4,
+    height: 20
+  },
+  messagebox_header_icon: {
+    width: 20,
+    height: 20,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignContent: "center",
+    alignItems: "center"
+  },
+  messagebox_header_txt_con: {
+    display: "flex",
+    flexDirection: "row",
+    flex: 1,
+    overflow: "hidden"
+  },
+  messagebox_header_txt: {
+    fontSize: 16,
+    fontWeight: "700",
+    color: theme?.colors?.primary
+  },
+  messagebox_main: {
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    overflow: "hidden"
+  },
+  messagebox_main_txt: {
+    fontSize: 14,
+    fontWeight: "400",
+    color: theme?.colors?.secondary
+  },
+  messagebox_footer: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: 8,
+    height: 40
+  },
+  messagebox_btn: {
+    height: 40,
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignContent: "center",
+    alignItems: "center",
+    paddingLeft: 16,
+    paddingRight: 16,
+    borderRadius: 20
+  },
+  messagebox_btn_txt: {
+    fontSize: 14,
+    fontWeight: "600"
+  }
+}));
+export default withTheme(MessageBox);
+
     style: styles.messagebox_btn_txt,
     numberOfLines: 1,
     ellipsizeMode: "tail"
@@ -240,4 +279,3 @@ var useStyles = (0, themed_1.makeStyles)(function (theme) {
   };
 });
 exports.default = (0, themed_1.withTheme)(MessageBox);
-//# sourceMappingURL=MessageBox.js.map