@hanzogui/demos 4.4.0 → 8.0.1

package/dist/cjs/ToastDemo.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all) __defProp(target, name, {
@@ -19,15 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   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: true
-}) : target, mod));
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
@@ -36,120 +25,208 @@ __export(ToastDemo_exports, {
   ToastDemo: () => ToastDemo
 });
 module.exports = __toCommonJS(ToastDemo_exports);
-var import_toast = require("@hanzogui/toast");
-var import_react = __toESM(require("react"), 1);
 var import_gui = require("@hanzo/gui");
+var import_v2 = require("@hanzogui/toast/v2");
+var import_lucide_icons_2 = require("@hanzogui/lucide-icons-2");
+var import_react = require("react");
+var import_gui2 = require("@hanzo/gui");
 var import_jsx_runtime = require("react/jsx-runtime");
 const ToastDemo = () => {
-  const [native, setNative] = import_react.default.useState(false);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.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."
+    });
+  };
+  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)
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui2.YStack, {
+      gap: "$3",
+      self: "center",
+      width: 280,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui2.YStack, {
+        gap: "$2",
+        self: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui2.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_gui2.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_gui2.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`
+        })]
+      })]
     })]
   });
 };
-const CurrentToast = () => {
-  const currentToast = (0, import_toast.useToastState)();
-  if (!currentToast || currentToast.isHandledNatively) return null;
-  return /* @__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_gui.XStack, {
-      gap: "$5",
-      items: "center",
-      justify: "space-between",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
-        gap: "$0.5",
+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_gui2.XStack, {
+      gap: "$3",
+      alignItems: "flex-start",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_v2.Toast.Icon, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui2.YStack, {
         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: true,
-        altText: "Dismiss toast",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        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: "Dismiss"
-        })
+          children: description
+        })]
       })]
-    })
-  }, currentToast.id);
-};
-const ToastControl = ({
-  native
-}) => {
-  const toast = (0, import_toast.useToastController)();
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
-    gap: "$2",
-    justify: "center",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
-      onPress: () => {
-        toast.show("Successfully saved!", {
-          message: "Don't worry, we've got your data.",
-          native,
-          demo: true
-        });
-      },
-      children: "Show"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
-      onPress: () => {
-        toast.hide();
-      },
-      children: "Hide"
+    }), import_gui.isWeb && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_v2.Toast.Close, {
+      testID: "toast-close-button",
+      position: "absolute",
+      top: -6,
+      left: -6,
+      zIndex: 1
     })]
   });
-};
-const NativeOptions = ({
-  native,
-  setNative
-}) => {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
-    gap: "$3",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
-      size: "$1",
-      onPress: () => setNative(false),
-      children: "Custom"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Switch, {
-      theme: "surface2",
-      id: "native-toggle",
-      size: "$1",
-      checked: !!native,
-      onCheckedChange: val => setNative(val),
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Switch.Thumb, {
+}
+function DemoSlider({
+  label,
+  value,
+  min,
+  max,
+  step,
+  onChange,
+  format
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui2.XStack, {
+    gap: "$2",
+    alignItems: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui2.Label, {
+      size: "$2",
+      width: 55,
+      children: label
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui2.Slider, {
+      flex: 1,
+      value: [value],
+      min,
+      max,
+      step,
+      onValueChange: ([v]) => onChange(v),
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui2.Slider.Track, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui2.Slider.TrackActive, {})
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui2.Slider.Thumb, {
         theme: "accent",
-        transition: ["quickest", {
-          transform: {
-            overshootClamping: true
-          }
-        }]
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
-      size: "$1",
-      onPress: () => setNative(true),
-      children: "Native"
+        size: 16,
+        borderRadius: 100,
+        index: 0
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui2.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_gui2.Button, {
+    icon: Icon,
+    circular: true,
+    theme: isActive ? "accent" : void 0,
+    onPress: () => onPress(position),
+    testID
+  });
 };