@dropi/react-native-design-system 0.2.25 → 0.2.27

package/lib/atoms/CustomImage/CustomImage.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ImageProps } from 'expo-image';
+type Src = string | number;
+interface CustomImageProps extends Omit<ImageProps, 'source' | 'placeholder'> {
+    source: Src;
+    fallbackSource?: Src;
+    placeholderSource?: Src;
+    retryCount?: number;
+}
+export declare const CustomImage: React.FC<CustomImageProps>;
+export {};

package/lib/atoms/CustomImage/CustomImage.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomImage = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _expoImage = require("expo-image");
+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); }
+const normalize = src => {
+  if (!src) return undefined;
+  return typeof src === 'string' ? {
+    uri: src
+  } : src;
+};
+const CustomImage = ({
+  source,
+  fallbackSource,
+  placeholderSource,
+  retryCount = 1,
+  contentFit = 'cover',
+  ...rest
+}) => {
+  // If source is empty, use fallback immediately
+  const initialSource = !source || typeof source === 'string' && source.trim() === '' ? fallbackSource || source : source;
+  const [currentSource, setCurrentSource] = (0, _react.useState)(initialSource);
+  const [attempts, setAttempts] = (0, _react.useState)(0);
+  const [usedFallback, setUsedFallback] = (0, _react.useState)(!source && !!fallbackSource);
+
+  /* sync when source changes */
+  (0, _react.useEffect)(() => {
+    const newSource = !source || typeof source === 'string' && source.trim() === '' ? fallbackSource || source : source;
+    setCurrentSource(newSource);
+    setAttempts(0);
+    setUsedFallback(!source && !!fallbackSource);
+  }, [source, fallbackSource]);
+  const handleError = (0, _react.useCallback)(() => {
+    /* retry first */
+    if (attempts < retryCount) {
+      setAttempts(a => a + 1);
+      setCurrentSource(source);
+      return;
+    }
+
+    /* fallback once */
+    if (fallbackSource && !usedFallback) {
+      setUsedFallback(true);
+      setCurrentSource(fallbackSource);
+    }
+  }, [attempts, retryCount, fallbackSource, usedFallback, source]);
+  const normalizedPlaceholder = normalize(placeholderSource);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
+    ...rest,
+    source: normalize(currentSource),
+    ...(normalizedPlaceholder && {
+      placeholder: normalizedPlaceholder
+    }),
+    contentFit: contentFit,
+    onError: handleError
+  });
+};
+exports.CustomImage = CustomImage;

package/lib/atoms/CustomImage/index.d.ts

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

package/lib/atoms/CustomImage/index.js

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

package/lib/atoms/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Text';
 export * from './Buttons';
+export * from './CustomImage';
 export * from './ProviderBadge';

package/lib/atoms/index.js

@@ -25,6 +25,17 @@ Object.keys(_Buttons).forEach(function (key) {
     }
   });
 });
+var _CustomImage = require("./CustomImage");
+Object.keys(_CustomImage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CustomImage[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CustomImage[key];
+    }
+  });
+});
 var _ProviderBadge = require("./ProviderBadge");
 Object.keys(_ProviderBadge).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

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