react-native-bread 0.5.2 → 0.6.0

package/lib/commonjs/toast-provider.js

@@ -1 +1,109 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BreadLoaf=function({config:i}){return(0,e.useEffect)(()=>(o.toastStore.setConfig(i),()=>{o.toastStore.setConfig(void 0)}),[i]),(0,s.jsx)(t.View,{style:n.container,pointerEvents:"box-none",children:(0,s.jsx)(r.ToastContainer,{})})};var e=require("react"),t=require("react-native"),r=require("./toast.js"),o=require("./toast-store.js"),s=require("react/jsx-runtime");const n=t.StyleSheet.create({container:{...t.StyleSheet.absoluteFillObject,zIndex:9999}});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BreadLoaf = BreadLoaf;
+exports.ToastPortal = ToastPortal;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativeScreens = require("react-native-screens");
+var _toast = require("./toast.js");
+var _toastStore = require("./toast-store.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function ToastContent() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    pointerEvents: "box-none",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toast.ToastContainer, {})
+  });
+}
+/**
+ * Toast component that enables toast notifications in your app.
+ * Add `<BreadLoaf />` to your root layout to start showing toasts.
+ *
+ * @example
+ * ```tsx
+ * import { BreadLoaf } from 'react-native-bread';
+ *
+ * // Basic usage - add to your root layout
+ * export default function RootLayout() {
+ *   return (
+ *     <>
+ *       <Stack />
+ *       <BreadLoaf />
+ *     </>
+ *   );
+ * }
+ *
+ * // With configuration
+ * <BreadLoaf
+ *   config={{
+ *     position: 'bottom',
+ *     stacking: false,
+ *     defaultDuration: 5000,
+ *     colors: {
+ *       success: { accent: '#22c55e', background: '#f0fdf4' },
+ *       error: { accent: '#ef4444', background: '#fef2f2' },
+ *     },
+ *     toastStyle: { borderRadius: 12 },
+ *   }}
+ * />
+ * ```
+ */
+function BreadLoaf({
+  config
+}) {
+  (0, _react.useEffect)(() => {
+    _toastStore.toastStore.setConfig(config);
+    return () => {
+      _toastStore.toastStore.setConfig(undefined);
+    };
+  }, [config]);
+
+  // iOS: use FullWindowOverlay to render above native modals
+  if (_reactNative.Platform.OS === "ios") {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeScreens.FullWindowOverlay, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastContent, {})
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastContent, {});
+}
+
+/**
+ * Lightweight toast renderer for use inside modal screens.
+ *
+ * On Android, native modals render above the root React view, so toasts from
+ * the main `<BreadLoaf />` won't be visible. Add `<ToastPortal />` inside your
+ * modal layouts to show toasts above modal content.
+ *
+ * This component only renders toasts - it does not accept configuration.
+ * All styling/behavior is inherited from your root `<BreadLoaf />` config.
+ *
+ * @example
+ * ```tsx
+ * // app/(modal)/_layout.tsx
+ * import { Stack } from 'expo-router';
+ * import { ToastPortal } from 'react-native-bread';
+ * import { Platform } from 'react-native';
+ *
+ * export default function ModalLayout() {
+ *   return (
+ *     <>
+ *       <Stack screenOptions={{ headerShown: false }} />
+ *       {Platform.OS === 'android' && <ToastPortal />}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+function ToastPortal() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastContent, {});
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    ..._reactNative.StyleSheet.absoluteFillObject,
+    zIndex: 9999
+  }
+});
+//# sourceMappingURL=toast-provider.js.map

package/lib/commonjs/toast-store.js

@@ -1 +1,252 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.toastStore=void 0;const t={position:"top",offset:0,rtl:!1,stacking:!0,maxStack:3,dismissible:!0,showCloseButton:!0,colors:{success:{accent:"#28B770",background:"#FFFFFF"},error:{accent:"#F05964",background:"#FFFFFF"},info:{accent:"#EDBE43",background:"#FFFFFF"},loading:{accent:"#232323",background:"#FFFFFF"}},icons:{},toastStyle:{},titleStyle:{},descriptionStyle:{},defaultDuration:4e3};exports.toastStore=new class{state={visibleToasts:[]};theme=t;listeners=new Set;toastIdCounter=0;timeouts=new Map;subscribe=t=>(this.listeners.add(t),()=>{this.listeners.delete(t)});emit(){for(const t of this.listeners)t(this.state)}setState(t){this.state={...this.state,...t},this.emit()}getState=()=>this.state;getTheme=()=>this.theme;setConfig=s=>{this.theme=function(s){if(!s)return t;const e={...t.colors};if(s.colors)for(const i of Object.keys(s.colors)){const o=s.colors[i];o&&(e[i]={...t.colors[i],...o})}return{position:s.position??t.position,offset:s.offset??t.offset,rtl:s.rtl??t.rtl,stacking:s.stacking??t.stacking,maxStack:s.maxStack??t.maxStack,dismissible:s.dismissible??t.dismissible,showCloseButton:s.showCloseButton??t.showCloseButton,colors:e,icons:{...t.icons,...s.icons},toastStyle:{...t.toastStyle,...s.toastStyle},titleStyle:{...t.titleStyle,...s.titleStyle},descriptionStyle:{...t.descriptionStyle,...s.descriptionStyle},defaultDuration:s.defaultDuration??t.defaultDuration}}(s)};show=(t,s,e="success",i,o)=>{const a=i??o?.duration??this.theme.defaultDuration,l=this.theme.stacking?this.theme.maxStack:1,n="toast-"+ ++this.toastIdCounter,c={id:n,title:t,description:s??o?.description,type:e,duration:a,createdAt:Date.now(),isExiting:!1,options:o},{visibleToasts:r}=this.state,h=r.filter(t=>!t.isExiting);if(h.length>=l){const t=h.slice(l-1);for(const s of t){const t=this.timeouts.get(s.id);t&&(clearTimeout(t),this.timeouts.delete(s.id))}const s=new Set(t.map(t=>t.id));if(!this.theme.stacking)return this.setState({visibleToasts:r.map(t=>s.has(t.id)?{...t,isExiting:!0}:t)}),setTimeout(()=>{for(const s of t)this.removeToast(s.id);this.addToast(c,a)},130),n;this.setState({visibleToasts:r.filter(t=>!s.has(t.id))})}return this.addToast(c,a),n};addToast(t,s){this.setState({visibleToasts:[t,...this.state.visibleToasts.filter(t=>!t.isExiting)]}),this.scheduleTimeout(t.id,s,0),this.rescheduleAllTimeouts()}scheduleTimeout(t,s,e){const i=this.timeouts.get(t);i&&clearTimeout(i);const o=setTimeout(()=>{this.hide(t)},s*(e+1));this.timeouts.set(t,o)}rescheduleAllTimeouts(){const{visibleToasts:t}=this.state;t.forEach((t,s)=>{t.isExiting||0===s||this.scheduleTimeout(t.id,t.duration,s)})}hide=t=>{const{visibleToasts:s}=this.state,e=s.find(s=>s.id===t);if(!e||e.isExiting)return;const i=this.timeouts.get(t);i&&(clearTimeout(i),this.timeouts.delete(t)),this.setState({visibleToasts:s.map(s=>s.id===t?{...s,isExiting:!0}:s)}),setTimeout(()=>{this.removeToast(t)},350)};removeToast(t){const s=this.timeouts.get(t);s&&(clearTimeout(s),this.timeouts.delete(t)),this.setState({visibleToasts:this.state.visibleToasts.filter(s=>s.id!==t)}),this.rescheduleAllTimeouts()}updateToast=(t,s)=>{const{visibleToasts:e}=this.state,i=e.findIndex(s=>s.id===t);-1!==i&&(this.setState({visibleToasts:e.map(e=>e.id===t?{...e,...s}:e)}),void 0!==s.duration&&this.scheduleTimeout(t,s.duration,i))};hideAll=()=>{for(const t of this.timeouts.values())clearTimeout(t);this.timeouts.clear(),this.setState({visibleToasts:[]})}};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toastStore = void 0;
+const EXIT_DURATION = 350;
+const DEFAULT_THEME = {
+  position: "top",
+  offset: 0,
+  rtl: false,
+  stacking: true,
+  maxStack: 3,
+  dismissible: true,
+  showCloseButton: true,
+  colors: {
+    success: {
+      accent: "#28B770",
+      background: "#FFFFFF"
+    },
+    error: {
+      accent: "#F05964",
+      background: "#FFFFFF"
+    },
+    info: {
+      accent: "#EDBE43",
+      background: "#FFFFFF"
+    },
+    loading: {
+      accent: "#232323",
+      background: "#FFFFFF"
+    }
+  },
+  icons: {},
+  toastStyle: {},
+  titleStyle: {},
+  descriptionStyle: {},
+  defaultDuration: 4000
+};
+function mergeConfig(config) {
+  if (!config) return DEFAULT_THEME;
+  const mergedColors = {
+    ...DEFAULT_THEME.colors
+  };
+  if (config.colors) {
+    for (const type of Object.keys(config.colors)) {
+      const userColors = config.colors[type];
+      if (userColors) {
+        mergedColors[type] = {
+          ...DEFAULT_THEME.colors[type],
+          ...userColors
+        };
+      }
+    }
+  }
+  return {
+    position: config.position ?? DEFAULT_THEME.position,
+    offset: config.offset ?? DEFAULT_THEME.offset,
+    rtl: config.rtl ?? DEFAULT_THEME.rtl,
+    stacking: config.stacking ?? DEFAULT_THEME.stacking,
+    maxStack: config.maxStack ?? DEFAULT_THEME.maxStack,
+    dismissible: config.dismissible ?? DEFAULT_THEME.dismissible,
+    showCloseButton: config.showCloseButton ?? DEFAULT_THEME.showCloseButton,
+    colors: mergedColors,
+    icons: {
+      ...DEFAULT_THEME.icons,
+      ...config.icons
+    },
+    toastStyle: {
+      ...DEFAULT_THEME.toastStyle,
+      ...config.toastStyle
+    },
+    titleStyle: {
+      ...DEFAULT_THEME.titleStyle,
+      ...config.titleStyle
+    },
+    descriptionStyle: {
+      ...DEFAULT_THEME.descriptionStyle,
+      ...config.descriptionStyle
+    },
+    defaultDuration: config.defaultDuration ?? DEFAULT_THEME.defaultDuration
+  };
+}
+class ToastStore {
+  state = {
+    visibleToasts: []
+  };
+  theme = DEFAULT_THEME;
+  listeners = new Set();
+  toastIdCounter = 0;
+  timeouts = new Map();
+  subscribe = listener => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+  emit() {
+    for (const listener of this.listeners) {
+      listener(this.state);
+    }
+  }
+  setState(partial) {
+    this.state = {
+      ...this.state,
+      ...partial
+    };
+    this.emit();
+  }
+  getState = () => this.state;
+  getTheme = () => this.theme;
+  setConfig = config => {
+    this.theme = mergeConfig(config);
+  };
+  show = (title, description, type = "success", duration, options) => {
+    const actualDuration = duration ?? options?.duration ?? this.theme.defaultDuration;
+    const maxToasts = this.theme.stacking ? this.theme.maxStack : 1;
+    const id = `toast-${++this.toastIdCounter}`;
+    const newToast = {
+      id,
+      title,
+      description: description ?? options?.description,
+      type,
+      duration: actualDuration,
+      createdAt: Date.now(),
+      isExiting: false,
+      options
+    };
+    const {
+      visibleToasts
+    } = this.state;
+    const activeToasts = visibleToasts.filter(t => !t.isExiting);
+    if (activeToasts.length >= maxToasts) {
+      const toastsToRemove = activeToasts.slice(maxToasts - 1);
+      for (const toast of toastsToRemove) {
+        const timeout = this.timeouts.get(toast.id);
+        if (timeout) {
+          clearTimeout(timeout);
+          this.timeouts.delete(toast.id);
+        }
+      }
+      const removeIds = new Set(toastsToRemove.map(t => t.id));
+      if (this.theme.stacking) {
+        this.setState({
+          visibleToasts: visibleToasts.filter(t => !removeIds.has(t.id))
+        });
+      } else {
+        this.setState({
+          visibleToasts: visibleToasts.map(t => removeIds.has(t.id) ? {
+            ...t,
+            isExiting: true
+          } : t)
+        });
+        setTimeout(() => {
+          for (const toast of toastsToRemove) {
+            this.removeToast(toast.id);
+          }
+          this.addToast(newToast, actualDuration);
+        }, EXIT_DURATION - 220);
+        return id;
+      }
+    }
+    this.addToast(newToast, actualDuration);
+    return id;
+  };
+  addToast(toast, duration) {
+    this.setState({
+      visibleToasts: [toast, ...this.state.visibleToasts.filter(t => !t.isExiting)]
+    });
+    this.scheduleTimeout(toast.id, duration, 0);
+    this.rescheduleAllTimeouts();
+  }
+  scheduleTimeout(id, baseDuration, index) {
+    const existingTimeout = this.timeouts.get(id);
+    if (existingTimeout) {
+      clearTimeout(existingTimeout);
+    }
+    const duration = baseDuration * (index + 1);
+    const timeout = setTimeout(() => {
+      this.hide(id);
+    }, duration);
+    this.timeouts.set(id, timeout);
+  }
+  rescheduleAllTimeouts() {
+    const {
+      visibleToasts
+    } = this.state;
+    visibleToasts.forEach((toast, index) => {
+      if (toast.isExiting || index === 0) return;
+      this.scheduleTimeout(toast.id, toast.duration, index);
+    });
+  }
+  hide = id => {
+    const {
+      visibleToasts
+    } = this.state;
+    const toast = visibleToasts.find(t => t.id === id);
+    if (!toast || toast.isExiting) return;
+    const timeout = this.timeouts.get(id);
+    if (timeout) {
+      clearTimeout(timeout);
+      this.timeouts.delete(id);
+    }
+    this.setState({
+      visibleToasts: visibleToasts.map(t => t.id === id ? {
+        ...t,
+        isExiting: true
+      } : t)
+    });
+    setTimeout(() => {
+      this.removeToast(id);
+    }, EXIT_DURATION);
+  };
+  removeToast(id) {
+    const timeout = this.timeouts.get(id);
+    if (timeout) {
+      clearTimeout(timeout);
+      this.timeouts.delete(id);
+    }
+    this.setState({
+      visibleToasts: this.state.visibleToasts.filter(t => t.id !== id)
+    });
+    this.rescheduleAllTimeouts();
+  }
+  updateToast = (id, data) => {
+    const {
+      visibleToasts
+    } = this.state;
+    const index = visibleToasts.findIndex(t => t.id === id);
+    if (index === -1) return;
+    this.setState({
+      visibleToasts: visibleToasts.map(t => t.id === id ? {
+        ...t,
+        ...data
+      } : t)
+    });
+    if (data.duration !== undefined) {
+      this.scheduleTimeout(id, data.duration, index);
+    }
+  };
+  hideAll = () => {
+    for (const timeout of this.timeouts.values()) {
+      clearTimeout(timeout);
+    }
+    this.timeouts.clear();
+    this.setState({
+      visibleToasts: []
+    });
+  };
+}
+const toastStore = exports.toastStore = new ToastStore();
+//# sourceMappingURL=toast-store.js.map