@dropi/react-native-design-system 0.3.6 → 0.3.7

package/lib/molecules/DialogModal/DialogModal.d.ts

@@ -0,0 +1,13 @@
+import { FC } from "react";
+export type DialogModalTypes = 'success' | 'error' | 'warning' | 'info';
+export type DialogModalConfig = {
+    variant: DialogModalTypes;
+    title: string;
+    message: string;
+    buttonText?: string;
+    secondButtonText?: string;
+    setShowAlert: (flag: boolean) => void;
+    handlePrimaryBtn?: () => void;
+    handleSecundaryBtn?: () => void;
+};
+export declare const DialogModal: FC<DialogModalConfig>;

package/lib/molecules/DialogModal/DialogModal.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogModal = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _lottieReactNative = _interopRequireDefault(require("lottie-react-native"));
+var _reactNative2 = _interopRequireDefault(require("dropi-lib-icons/react-native"));
+var _utils = require("../../utils");
+var _constants = require("../../constants");
+var _atoms = require("../../atoms");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DialogModal = ({
+  variant,
+  title,
+  message,
+  buttonText = 'Aceptar',
+  secondButtonText,
+  handlePrimaryBtn,
+  handleSecundaryBtn,
+  setShowAlert
+}) => {
+  const animation = (0, _react.useRef)(null);
+  const lottieFile = variant === 'success' ? require('../../../assets/lottie/afirmacion.json') : variant === 'error' ? require('../../../assets/lottie/buscando.json') : variant === 'warning' ? require('../../../assets/lottie/alerta.json') : require('../../../assets/lottie/pregunta.json');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.backgroundContainer,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.dialogContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.closeButtonContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: () => setShowAlert(false),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.default, {
+            name: "close-large",
+            size: 20,
+            color: _constants.colors["Gray-800"].light
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_lottieReactNative.default, {
+        autoPlay: true,
+        ref: animation,
+        style: styles.lottieAnimation,
+        source: lottieFile
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.titleContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Heading, {
+          type: "h4",
+          style: styles.titleText,
+          children: title
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.messageContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+          type: "m-regular",
+          style: styles.descriptionText,
+          children: message
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.btnsContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.DefaultButton, {
+          variant: "primary",
+          size: "normal",
+          label: buttonText,
+          onPress: () => {
+            handlePrimaryBtn?.();
+            setShowAlert(false);
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.buttonSpacer
+        }), secondButtonText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.DefaultButton, {
+          variant: "secondary",
+          size: "normal",
+          label: secondButtonText,
+          onPress: () => {
+            handleSecundaryBtn?.();
+            setShowAlert(false);
+          }
+        })]
+      })]
+    })
+  });
+};
+exports.DialogModal = DialogModal;
+const styles = _reactNative.StyleSheet.create({
+  backgroundContainer: {
+    backgroundColor: "rgba(0,0,0,0.25)",
+    position: "absolute",
+    width: _utils.windowWidth,
+    height: _utils.windowHeight,
+    zIndex: 99,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  dialogContainer: {
+    padding: _constants.spacing['size-5'],
+    backgroundColor: "white",
+    borderRadius: _constants.radius["border-3"],
+    width: "90%",
+    maxWidth: 600,
+    alignItems: 'center'
+  },
+  titleContainer: {
+    marginTop: _constants.spacing['size-6']
+  },
+  titleText: {
+    textAlign: 'center'
+  },
+  messageContainer: {
+    marginTop: _constants.spacing['size-3']
+  },
+  descriptionText: {
+    color: _constants.colors["Gray-400"].light,
+    textAlign: 'center'
+  },
+  closeButtonContainer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'flex-end'
+  },
+  lottieAnimation: {
+    width: 100,
+    height: 100,
+    backgroundColor: '#fff'
+  },
+  btnsContainer: {
+    width: '100%',
+    marginTop: _constants.spacing['size-6']
+  },
+  buttonSpacer: {
+    height: _constants.spacing['size-3']
+  }
+});

package/lib/molecules/DialogModal/index.d.ts

@@ -0,0 +1 @@
+export * from './DialogModal';

package/lib/molecules/DialogModal/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _DialogModal = require("./DialogModal");
+Object.keys(_DialogModal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DialogModal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DialogModal[key];
+    }
+  });
+});

package/lib/molecules/index.d.ts

@@ -9,3 +9,4 @@ export * from "./Tooltip";
 export * from "./Toasts";
 export * from "./Tags";
 export * from "./InputField";
+export * from "./DialogModal";

package/lib/molecules/index.js

@@ -123,4 +123,15 @@ Object.keys(_InputField).forEach(function (key) {
       return _InputField[key];
     }
   });
+});
+var _DialogModal = require("./DialogModal");
+Object.keys(_DialogModal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DialogModal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DialogModal[key];
+    }
+  });
 });

package/lib/utils/DeviceInfo.d.ts

@@ -1,3 +1,4 @@
 export declare const windowWidth: number;
+export declare const windowHeight: number;
 export declare const isTablet: boolean;
 export declare const statusBarHeight: number;

package/lib/utils/DeviceInfo.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.windowWidth = exports.statusBarHeight = exports.isTablet = void 0;
+exports.windowWidth = exports.windowHeight = exports.statusBarHeight = exports.isTablet = void 0;
 var _reactNative = require("react-native");
 var _expoConstants = _interopRequireDefault(require("expo-constants"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const windowWidth = exports.windowWidth = _reactNative.Dimensions.get("window").width;
+const windowHeight = exports.windowHeight = _reactNative.Dimensions.get("window").height;
 const isTablet = exports.isTablet = windowWidth >= 768;
 const statusBarHeight = exports.statusBarHeight = _expoConstants.default.statusBarHeight;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/react-native-design-system",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "A React Native package built from scratch",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",