@dropi/react-native-design-system 0.3.16 → 0.3.18

package/lib/molecules/Toasts/LikeInteractionToast/LikeInteractionToast.d.ts

@@ -0,0 +1,9 @@
+export type LikeInteractionToastProps = {
+    productImage: string;
+    message: string;
+    submessage: string;
+    onClose: () => void;
+    fallbackImageSource?: any;
+    cloudFrontUrl?: string;
+};
+export declare const LikeInteractionToast: ({ productImage, message, submessage, onClose, fallbackImageSource, cloudFrontUrl, }: LikeInteractionToastProps) => import("react/jsx-runtime").JSX.Element;

package/lib/molecules/Toasts/LikeInteractionToast/LikeInteractionToast.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LikeInteractionToast = void 0;
+var _reactNative = require("react-native");
+var _atoms = require("../../../atoms");
+var _utils = require("../../../utils");
+var _constants = require("../../../constants");
+var _reactNative2 = _interopRequireDefault(require("dropi-lib-icons/react-native"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const LikeInteractionToast = ({
+  productImage,
+  message,
+  submessage,
+  onClose,
+  fallbackImageSource,
+  cloudFrontUrl
+}) => {
+  const imageSource = cloudFrontUrl ? `${cloudFrontUrl}${productImage}` : productImage;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.toastContainer,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.CustomImage, {
+      source: imageSource,
+      style: styles.image,
+      fallbackSource: fallbackImageSource
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.textContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Heading, {
+        type: "h5",
+        style: styles.message,
+        children: message
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+        type: "s-regular",
+        style: styles.submessage,
+        ellipsizeMode: "tail",
+        numberOfLines: 1,
+        children: submessage
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      onPress: onClose,
+      style: styles.closeButton,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.default, {
+        name: "close-large",
+        size: 12,
+        color: _constants.colors["Gray-800"].light
+      })
+    })]
+  });
+};
+exports.LikeInteractionToast = LikeInteractionToast;
+const styles = _reactNative.StyleSheet.create({
+  toastContainer: {
+    backgroundColor: '#FFF',
+    width: _utils.windowWidth - 32,
+    maxWidth: 700,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: _constants.spacing['size-4'],
+    alignItems: 'center',
+    borderRadius: _constants.radius['border-2'],
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: _constants.radius['border-1'],
+    elevation: 5
+  },
+  image: {
+    width: 50,
+    height: 50,
+    borderRadius: _constants.radius['border-2'],
+    overflow: 'hidden'
+  },
+  textContainer: {
+    flex: 1,
+    marginHorizontal: _constants.spacing['size-4']
+  },
+  message: {
+    color: _constants.colors['White'].dark,
+    marginBottom: _constants.spacing['size-1']
+  },
+  submessage: {
+    color: _constants.colors['Gray-600'].light
+  },
+  closeButton: {
+    padding: _constants.spacing['size-2']
+  }
+});

package/lib/molecules/Toasts/LikeInteractionToast/index.d.ts

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

package/lib/molecules/Toasts/LikeInteractionToast/index.js

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

package/lib/molecules/Toasts/ToastProvider/ToastProvider.js

@@ -7,6 +7,7 @@ exports.ToastProvider = exports.ToastContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _FeedbackToast = require("../FeedbackToast/FeedbackToast");
+var _LikeInteractionToast = require("../LikeInteractionToast/LikeInteractionToast");
 var _utils = require("../../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -179,9 +180,8 @@ const ToastProvider = ({
   const showToast = (0, _react.useCallback)(params => {
     const newToast = {
       id: `toast-${toastIdCounter.current++}`,
-      type: params.type,
-      title: params.title,
-      message: params.message,
+      variant: params.variant,
+      data: params.data,
       duration: params.duration ?? DEFAULT_DURATION
     };
     if (!currentToast && !isAnimating) {
@@ -196,19 +196,26 @@ const ToastProvider = ({
     value: {
       showToast
     },
-    children: [children, currentToast && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    children: [children, currentToast && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
       style: [styles.toastWrapper, {
         transform: [{
           translateY: slideAnim
         }]
       }],
       pointerEvents: "box-none",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FeedbackToast.FeedbackToast, {
-        type: currentToast.type,
-        title: currentToast.title,
-        message: currentToast.message,
+      children: [currentToast.variant === 'feedback' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FeedbackToast.FeedbackToast, {
+        type: currentToast.data.type,
+        title: currentToast.data.title,
+        message: currentToast.data.message,
         onClose: handleClose
-      })
+      }), currentToast.variant === 'like-interaction' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LikeInteractionToast.LikeInteractionToast, {
+        productImage: currentToast.data.productImage,
+        message: currentToast.data.message,
+        submessage: currentToast.data.submessage,
+        fallbackImageSource: currentToast.data.fallbackImageSource,
+        cloudFrontUrl: currentToast.data.cloudFrontUrl,
+        onClose: handleClose
+      })]
     })]
   });
 };

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

@@ -1,3 +1,4 @@
 export * from './types';
 export * from './FeedbackToast';
+export * from './LikeInteractionToast';
 export * from './ToastProvider';

package/lib/molecules/Toasts/index.js

@@ -25,6 +25,17 @@ Object.keys(_FeedbackToast).forEach(function (key) {
     }
   });
 });
+var _LikeInteractionToast = require("./LikeInteractionToast");
+Object.keys(_LikeInteractionToast).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _LikeInteractionToast[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _LikeInteractionToast[key];
+    }
+  });
+});
 var _ToastProvider = require("./ToastProvider");
 Object.keys(_ToastProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/molecules/Toasts/types.d.ts

@@ -1,11 +1,28 @@
 export type ToastTypes = 'success' | 'error' | 'warning' | 'info';
-export type ToastConfig = {
-    id: string;
+export type ToastVariant = 'feedback' | 'like-interaction';
+export type BaseFeedbackToastData = {
     type: ToastTypes;
     title?: string;
     message?: string;
-    duration?: number;
 };
+export type LikeInteractionToastData = {
+    productImage: string;
+    message: string;
+    submessage: string;
+    fallbackImageSource?: any;
+    cloudFrontUrl?: string;
+};
+export type ToastConfig = {
+    id: string;
+    variant: ToastVariant;
+    duration?: number;
+} & ({
+    variant: 'feedback';
+    data: BaseFeedbackToastData;
+} | {
+    variant: 'like-interaction';
+    data: LikeInteractionToastData;
+});
 export type ShowToastParams = Omit<ToastConfig, 'id'> & {
     duration?: number;
 };

package/package.json

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