ywana-core8 0.2.13 → 0.2.15

package/dist/index.umd.js

@@ -22635,26 +22635,38 @@ const rows = [
   const SCROLL_SENSITIVITY = 5e-4;
   const MAX_ZOOM = 5;
   const MIN_ZOOM = 0.1;
-  const ImageViewer = ({ image }) => {
+  const ImageViewer = React.forwardRef(({ image }, ref2) => {
     const [offset2, setOffset] = React.useState({ x: 0, y: 0 });
     const [zoom, setZoom] = React.useState(1);
-    const [draggind, setDragging] = React.useState(false);
+    const [dragging, setDragging] = React.useState(false);
     const touch = React.useRef({ x: 0, y: 0 });
     const canvasRef = React.useRef(null);
     const containerRef = React.useRef(null);
     const observer = React.useRef(null);
     const background = React.useMemo(() => new Image(), [image]);
     const clamp = (num, min2, max2) => Math.min(Math.max(num, min2), max2);
+    React.useImperativeHandle(ref2, () => ({
+      zoomIn: () => {
+        setZoom((prevZoom) => clamp(prevZoom + 0.2, MIN_ZOOM, MAX_ZOOM));
+      },
+      zoomOut: () => {
+        setZoom((prevZoom) => clamp(prevZoom - 0.2, MIN_ZOOM, MAX_ZOOM));
+      },
+      resetZoom: () => {
+        setZoom(1);
+        setOffset({ x: 0, y: 0 });
+      }
+    }), []);
     const handleWheel = (event) => {
       const { deltaY } = event;
-      if (!draggind) {
+      if (!dragging) {
         setZoom(
           (zoom2) => clamp(zoom2 + deltaY * SCROLL_SENSITIVITY * -1, MIN_ZOOM, MAX_ZOOM)
         );
       }
     };
     const handleMouseMove = (event) => {
-      if (draggind) {
+      if (dragging) {
         const { x, y } = touch.current;
         const { clientX, clientY } = event;
         setOffset({
@@ -22723,14 +22735,55 @@ const rows = [
         ref: canvasRef
       }
     ));
+  });
+  const ViewerTest = () => {
+    const [showViewer, setShowViewer] = React.useState(false);
+    const sampleInfo = /* @__PURE__ */ React.createElement("div", { style: { padding: "1rem" } }, /* @__PURE__ */ React.createElement("h3", null, "Sample Image"), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Size:"), " 1920x1080"), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Format:"), " PNG"), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Created:"), " 2024-01-15"));
+    const sampleActions = [
+      /* @__PURE__ */ React.createElement(Icon, { key: "download", icon: "download", clickable: true, title: "Download" }),
+      /* @__PURE__ */ React.createElement(Icon, { key: "share", icon: "share", clickable: true, title: "Share" })
+    ];
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("button", { onClick: () => setShowViewer(true) }, "Open Viewer Test"), showViewer && /* @__PURE__ */ React.createElement(
+      Viewer,
+      {
+        title: "Sample Image",
+        src: "https://concepto.de/wp-content/uploads/2015/03/paisaje-800x409.jpg",
+        info: sampleInfo,
+        actions: sampleActions,
+        tools: true,
+        onClose: () => setShowViewer(false)
+      }
+    ));
   };
   const Viewer = ({ title, src, info, actions = [], tools = false, onClose }) => {
     const [showDetails, setShowDetails] = React.useState(false);
+    const [imageViewerRef, setImageViewerRef] = React.useState(null);
     function toggleDetails() {
       setShowDetails(!showDetails);
     }
+    function handleZoomIn() {
+      if (imageViewerRef && imageViewerRef.zoomIn) {
+        imageViewerRef.zoomIn();
+      }
+    }
+    function handleZoomOut() {
+      if (imageViewerRef && imageViewerRef.zoomOut) {
+        imageViewerRef.zoomOut();
+      }
+    }
+    function handleZoomReset() {
+      if (imageViewerRef && imageViewerRef.resetZoom) {
+        imageViewerRef.resetZoom();
+      }
+    }
     const headerTitle = /* @__PURE__ */ React.createElement(Text, { use: "headline6" }, title);
-    return /* @__PURE__ */ React.createElement("div", { className: "viewer" }, /* @__PURE__ */ React.createElement(Header, { icon: "view", title: headerTitle }, onClose ? /* @__PURE__ */ React.createElement(Icon, { icon: "close", clickable: true, action: onClose }) : null, showDetails ? "" : /* @__PURE__ */ React.createElement(Icon, { icon: "info", clickable: true, action: toggleDetails }), actions), /* @__PURE__ */ React.createElement("main", null, /* @__PURE__ */ React.createElement("div", { className: "resizer" }, /* @__PURE__ */ React.createElement("picture", null, /* @__PURE__ */ React.createElement(ImageViewer, { image: src })))), /* @__PURE__ */ React.createElement("aside", { className: `${showDetails ? "open" : ""}` }, /* @__PURE__ */ React.createElement(Header, { title: "Detalles" }, /* @__PURE__ */ React.createElement(Icon, { icon: "close", clickable: true, action: toggleDetails })), /* @__PURE__ */ React.createElement("main", null, info)), tools ? /* @__PURE__ */ React.createElement("footer", null, /* @__PURE__ */ React.createElement(Icon, { clickable: true, icon: "zoom_out" }), /* @__PURE__ */ React.createElement(Icon, { clickable: true, icon: "zoom_out_map" }), /* @__PURE__ */ React.createElement(Icon, { clickable: true, icon: "zoom_in" })) : null);
+    return /* @__PURE__ */ React.createElement("div", { className: "viewer" }, /* @__PURE__ */ React.createElement(Header, { icon: "view", title: headerTitle }, actions, !showDetails && /* @__PURE__ */ React.createElement(Icon, { icon: "info", clickable: true, action: toggleDetails }), onClose && /* @__PURE__ */ React.createElement(Icon, { icon: "close", clickable: true, action: onClose })), /* @__PURE__ */ React.createElement("main", null, /* @__PURE__ */ React.createElement("div", { className: "resizer" }, /* @__PURE__ */ React.createElement("picture", null, /* @__PURE__ */ React.createElement(
+      ImageViewer,
+      {
+        image: src,
+        ref: setImageViewerRef
+      }
+    )))), /* @__PURE__ */ React.createElement("aside", { className: `${showDetails ? "open" : ""}` }, /* @__PURE__ */ React.createElement(Header, { title: "Detalles" }, /* @__PURE__ */ React.createElement(Icon, { icon: "close", clickable: true, action: toggleDetails })), /* @__PURE__ */ React.createElement("main", null, info)), tools && /* @__PURE__ */ React.createElement("footer", null, /* @__PURE__ */ React.createElement(Icon, { clickable: true, icon: "zoom_out", action: handleZoomOut }), /* @__PURE__ */ React.createElement(Icon, { clickable: true, icon: "zoom_out_map", action: handleZoomReset }), /* @__PURE__ */ React.createElement(Icon, { clickable: true, icon: "zoom_in", action: handleZoomIn })));
   };
   const Kanban = ({ children }) => {
     const hasSwimlanes = React.useMemo(() => {
@@ -32970,7 +33023,7 @@ const rows = [
         toolbar: window2.toolbar,
         statusBar: window2.statusBar
       },
-      /* @__PURE__ */ React.createElement("div", { style: { padding: "16px" } }, window2.content)
+      window2.content
     )));
   };
   const DesktopTaskbar = () => {
@@ -43034,6 +43087,7 @@ Middle click: Close`
   exports2.MenuItem = MenuItem;
   exports2.MenuSeparator = MenuSeparator;
   exports2.MonthCalendar = MonthCalendar;
+  exports2.MultiProgress = MultiProgress;
   exports2.MultiSelector = MultiSelector;
   exports2.Page = Page;
   exports2.PageContext = PageContext;
@@ -43047,6 +43101,7 @@ Middle click: Close`
   exports2.ProgressExamples = ProgressExamples;
   exports2.Property = Property;
   exports2.PropertyExamples = PropertyExamples;
+  exports2.RadialProgress = RadialProgress;
   exports2.RadioButton = RadioButton;
   exports2.RadioExamples = RadioExamples;
   exports2.RadioGroup = RadioGroup;
@@ -43058,6 +43113,7 @@ Middle click: Close`
   exports2.SiteContext = SiteContext;
   exports2.SiteProvider = SiteProvider;
   exports2.Stack = Stack;
+  exports2.StepProgress = StepProgress;
   exports2.Switch = Switch;
   exports2.SwitchExamples = SwitchExamples;
   exports2.TASK_STATES = TASK_STATES;
@@ -43102,6 +43158,7 @@ Middle click: Close`
   exports2.Uploader = Uploader;
   exports2.View = View;
   exports2.Viewer = Viewer;
+  exports2.ViewerTest = ViewerTest;
   exports2.WaitScreen = WaitScreen;
   exports2.Window = Window;
   exports2.WindowManager = WindowManager;