ywana-core8 0.2.14 → 0.2.15

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo, useCallback, useState, useEffect, useRef, Fragment, createContext } from "react";
+import React, { useContext, useMemo, useCallback, useState, useEffect, useRef, Fragment, createContext, forwardRef, useImperativeHandle } from "react";
 function isEmpty(obj) {
   if (obj === null) {
     return true;
@@ -22632,26 +22632,38 @@ const LOGIN_CONTEXT = {
 const SCROLL_SENSITIVITY = 5e-4;
 const MAX_ZOOM = 5;
 const MIN_ZOOM = 0.1;
-const ImageViewer = ({ image }) => {
+const ImageViewer = forwardRef(({ image }, ref2) => {
   const [offset2, setOffset] = useState({ x: 0, y: 0 });
   const [zoom, setZoom] = useState(1);
-  const [draggind, setDragging] = useState(false);
+  const [dragging, setDragging] = useState(false);
   const touch = useRef({ x: 0, y: 0 });
   const canvasRef = useRef(null);
   const containerRef = useRef(null);
   const observer = useRef(null);
   const background = useMemo(() => new Image(), [image]);
   const clamp = (num, min2, max2) => Math.min(Math.max(num, min2), max2);
+  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({
@@ -22720,14 +22732,55 @@ const ImageViewer = ({ image }) => {
       ref: canvasRef
     }
   ));
+});
+const ViewerTest = () => {
+  const [showViewer, setShowViewer] = 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] = useState(false);
+  const [imageViewerRef, setImageViewerRef] = 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 = useMemo(() => {
@@ -43032,6 +43085,7 @@ export {
   MenuItem,
   MenuSeparator,
   MonthCalendar,
+  MultiProgress,
   MultiSelector,
   Page,
   PageContext,
@@ -43045,6 +43099,7 @@ export {
   ProgressExamples,
   Property,
   PropertyExamples,
+  RadialProgress,
   RadioButton,
   RadioExamples,
   RadioGroup,
@@ -43056,6 +43111,7 @@ export {
   SiteContext,
   SiteProvider,
   Stack,
+  StepProgress,
   Switch,
   SwitchExamples,
   TASK_STATES,
@@ -43100,6 +43156,7 @@ export {
   Uploader,
   View,
   Viewer,
+  ViewerTest,
   WaitScreen,
   Window,
   WindowManager,