@tamagui/demos 2.0.0-rc.8 → 2.0.0

package/dist/cjs/ToastDemo.cjs

@@ -1,150 +1,232 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var ToastDemo_exports = {};
 __export(ToastDemo_exports, {
   ToastDemo: () => ToastDemo
 });
 module.exports = __toCommonJS(ToastDemo_exports);
-var import_toast = require("@tamagui/toast"),
-  import_react = __toESM(require("react"), 1),
-  import_tamagui = require("tamagui"),
-  import_jsx_runtime = require("react/jsx-runtime");
+var import_tamagui = require("tamagui");
+var import_v2 = require("@tamagui/toast/v2");
+var import_lucide_icons_2 = require("@tamagui/lucide-icons-2");
+var import_react = require("react");
+var import_tamagui2 = require("tamagui");
+var import_jsx_runtime = require("react/jsx-runtime");
 const ToastDemo = () => {
-    const [native, setNative] = import_react.default.useState(!1);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      gap: "$4",
-      items: "center",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastControl, {
-        native
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(CurrentToast, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeOptions, {
-        native,
-        setNative
-      })]
+  const [position, setPosition] = (0, import_react.useState)("bottom-right");
+  const [gap, setGap] = (0, import_react.useState)(14);
+  const [visibleToasts, setVisibleToasts] = (0, import_react.useState)(4);
+  const [duration, setDuration] = (0, import_react.useState)(4e3);
+  const count = (0, import_react.useRef)(0);
+  const showToast = newPosition => {
+    setPosition(newPosition);
+    count.current++;
+    (0, import_v2.toast)(`Toast #${count.current}`, {
+      description: "Swipe to dismiss or wait for auto-close."
     });
-  },
-  CurrentToast = () => {
-    const currentToast = (0, import_toast.useToastState)();
-    return !currentToast || currentToast.isHandledNatively ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_toast.Toast, {
-      duration: currentToast.duration,
-      viewportName: currentToast.viewportName,
-      enterStyle: {
-        opacity: 0,
-        scale: 0.95,
-        y: -80
-      },
-      exitStyle: {
-        opacity: 0,
-        scale: 0.95,
-        y: -80
-      },
-      opacity: 1,
-      scale: 1,
-      y: -50,
-      transition: "quicker",
-      bg: "$color2",
-      boxShadow: "0px 2px 4px rgba(0,0,0,0.12), 0px 8px 24px rgba(0,0,0,0.08)",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-        gap: "$5",
-        items: "center",
-        justify: "space-between",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          gap: "$0.5",
-          flex: 1,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_toast.Toast.Title, {
-            children: currentToast.title
-          }), !!currentToast.message && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_toast.Toast.Description, {
-            children: currentToast.message
-          })]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_toast.Toast.Action, {
-          asChild: !0,
-          altText: "Dismiss toast",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-            size: "$2",
-            children: "Dismiss"
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_v2.Toast, {
+    position,
+    gap: Math.round(gap),
+    visibleToasts,
+    duration,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_v2.Toast.Viewport, {
+      offset: 16,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_v2.Toast.List, {
+        renderItem: ({
+          toast: t,
+          index
+        }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_v2.Toast.Item, {
+          toast: t,
+          index,
+          testID: "toast-item",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastContent, {
+            toast: t
           })
-        })]
+        }, t.id)
       })
-    }, currentToast.id);
-  },
-  ToastControl = ({
-    native
-  }) => {
-    const toast = (0, import_toast.useToastController)();
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-      gap: "$2",
-      justify: "center",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-        onPress: () => {
-          toast.show("Successfully saved!", {
-            message: "Don't worry, we've got your data.",
-            native,
-            demo: !0
-          });
-        },
-        children: "Show"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-        onPress: () => {
-          toast.hide();
-        },
-        children: "Hide"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
+      gap: "$3",
+      self: "center",
+      width: 280,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
+        gap: "$2",
+        self: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(PositionButton, {
+            position: "top-left",
+            current: position,
+            onPress: showToast,
+            Icon: import_lucide_icons_2.ArrowUpLeft
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(PositionButton, {
+            position: "top-center",
+            current: position,
+            onPress: showToast,
+            Icon: import_lucide_icons_2.ArrowUp
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(PositionButton, {
+            position: "top-right",
+            current: position,
+            onPress: showToast,
+            Icon: import_lucide_icons_2.ArrowUpRight,
+            testID: "toast-top-right-button"
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(PositionButton, {
+            position: "bottom-left",
+            current: position,
+            onPress: showToast,
+            Icon: import_lucide_icons_2.ArrowDownLeft
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(PositionButton, {
+            position: "bottom-center",
+            current: position,
+            onPress: showToast,
+            Icon: import_lucide_icons_2.ArrowDown
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(PositionButton, {
+            position: "bottom-right",
+            current: position,
+            onPress: showToast,
+            Icon: import_lucide_icons_2.ArrowDownRight,
+            testID: "toast-show-button"
+          })]
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
+        gap: "$1",
+        paddingTop: "$1",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(DemoSlider, {
+          label: "Gap",
+          value: gap,
+          min: 0,
+          max: 30,
+          step: 0.1,
+          onChange: setGap
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(DemoSlider, {
+          label: "Visible",
+          value: visibleToasts,
+          min: 1,
+          max: 8,
+          step: 1,
+          onChange: setVisibleToasts
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(DemoSlider, {
+          label: "Duration",
+          value: duration,
+          min: 1e3,
+          max: 1e4,
+          step: 100,
+          onChange: setDuration,
+          format: v => `${(v / 1e3).toFixed(1)}s`
+        })]
       })]
-    });
-  },
-  NativeOptions = ({
-    native,
-    setNative
-  }) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-    gap: "$3",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
-      size: "$1",
-      onPress: () => setNative(!1),
-      children: "Custom"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Switch, {
-      theme: "surface2",
-      id: "native-toggle",
-      size: "$1",
-      checked: !!native,
-      onCheckedChange: val => setNative(val),
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Switch.Thumb, {
+    })]
+  });
+};
+function ToastContent({
+  toast: t
+}) {
+  const {
+    handleClose
+  } = (0, import_v2.useToastItem)();
+  const title = typeof t.title === "function" ? t.title() : t.title;
+  const description = typeof t.description === "function" ? t.description() : t.description;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
+      gap: "$3",
+      alignItems: "flex-start",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_v2.Toast.Icon, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
+        flex: 1,
+        gap: "$0.5",
+        children: [title && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_v2.Toast.Title, {
+          fontWeight: "600",
+          size: "$3",
+          children: title
+        }), description && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_v2.Toast.Description, {
+          color: "$color9",
+          size: "$2",
+          children: description
+        })]
+      })]
+    }), import_tamagui.isWeb && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_v2.Toast.Close, {
+      testID: "toast-close-button",
+      position: "absolute",
+      top: -6,
+      left: -6,
+      zIndex: 1
+    })]
+  });
+}
+function DemoSlider({
+  label,
+  value,
+  min,
+  max,
+  step,
+  onChange,
+  format
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
+    gap: "$2",
+    alignItems: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Label, {
+      size: "$2",
+      width: 55,
+      children: label
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.Slider, {
+      flex: 1,
+      value: [value],
+      min,
+      max,
+      step,
+      onValueChange: ([v]) => onChange(v),
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Slider.Track, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Slider.TrackActive, {})
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Slider.Thumb, {
         theme: "accent",
-        transition: ["quickest", {
-          transform: {
-            overshootClamping: !0
-          }
-        }]
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
-      size: "$1",
-      onPress: () => setNative(!0),
-      children: "Native"
+        size: 16,
+        borderRadius: 100,
+        index: 0
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.SizableText, {
+      userSelect: "none",
+      size: "$2",
+      width: 35,
+      textAlign: "right",
+      children: format ? format(value) : Math.round(value)
     })]
-  });
+  });
+}
+const PositionButton = ({
+  position,
+  current,
+  onPress,
+  Icon,
+  testID
+}) => {
+  const isActive = position === current;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Button, {
+    icon: Icon,
+    circular: true,
+    theme: isActive ? "accent" : void 0,
+    onPress: () => onPress(position),
+    testID
+  });
+};