@expcat/tigercat-react 0.3.69 → 0.3.70

package/dist/chunk-QFYS5QIZ.mjs

@@ -0,0 +1,142 @@
+import { Modal } from './chunk-JNLX47UL.mjs';
+import { ImageCropper } from './chunk-2EOXY2LP.mjs';
+import { Button } from './chunk-ENSLMM3L.mjs';
+import { useRef, useState, useCallback, useMemo } from 'react';
+import { classNames, cropUploadTriggerDisabledClasses, cropUploadTriggerClasses, uploadPlusIconPath } from '@expcat/tigercat-core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var CropUpload = ({
+  accept = "image/*",
+  disabled = false,
+  maxSize,
+  cropperProps,
+  modalTitle = "\u88C1\u526A\u56FE\u7247",
+  modalWidth = 520,
+  className,
+  children,
+  onCropComplete,
+  onError
+}) => {
+  const fileInputRef = useRef(null);
+  const cropperRef = useRef(null);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [imageSrc, setImageSrc] = useState("");
+  const [cropping, setCropping] = useState(false);
+  const handleTriggerClick = useCallback(() => {
+    if (disabled) return;
+    fileInputRef.current?.click();
+  }, [disabled]);
+  const handleFileChange = useCallback(
+    (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      if (maxSize && file.size > maxSize) {
+        onError?.(new Error(`File size exceeds maximum of ${maxSize} bytes`));
+        e.target.value = "";
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (ev) => {
+        setImageSrc(ev.target?.result);
+        setModalVisible(true);
+      };
+      reader.readAsDataURL(file);
+      e.target.value = "";
+    },
+    [maxSize, onError]
+  );
+  const handleConfirm = useCallback(async () => {
+    if (!cropperRef.current) return;
+    setCropping(true);
+    try {
+      const result = await cropperRef.current.getCropResult();
+      onCropComplete?.(result);
+      setModalVisible(false);
+    } catch (err) {
+      onError?.(err);
+    } finally {
+      setCropping(false);
+    }
+  }, [onCropComplete, onError]);
+  const handleCancel = useCallback(() => {
+    setModalVisible(false);
+    setImageSrc("");
+  }, []);
+  const triggerClasses = useMemo(
+    () => classNames(disabled ? cropUploadTriggerDisabledClasses : cropUploadTriggerClasses, className),
+    [disabled, className]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleTriggerClick();
+      }
+    },
+    [handleTriggerClick]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "tiger-crop-upload inline-block", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept,
+        style: { display: "none" },
+        onChange: handleFileChange
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: triggerClasses,
+        onClick: handleTriggerClick,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-label": "Select image to crop and upload",
+        "aria-disabled": disabled ? "true" : void 0,
+        onKeyDown: handleKeyDown,
+        children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-5 h-5",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2",
+                  d: uploadPlusIconPath
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: "\u9009\u62E9\u56FE\u7247" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        visible: modalVisible,
+        size: "lg",
+        title: modalTitle,
+        closable: true,
+        maskClosable: false,
+        onClose: handleCancel,
+        footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleCancel, children: "\u53D6\u6D88" }),
+          /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, loading: cropping, children: "\u786E\u8BA4\u88C1\u526A" })
+        ] }),
+        children: imageSrc && /* @__PURE__ */ jsx(ImageCropper, { ref: cropperRef, src: imageSrc, ...cropperProps })
+      }
+    )
+  ] });
+};
+
+export { CropUpload };

package/dist/chunk-QIJG42YQ.mjs

@@ -0,0 +1,54 @@
+import { ImagePreview } from './chunk-5CLXOFRZ.mjs';
+import { createContext, useState, useRef, useCallback, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ImageGroupContext = createContext(null);
+var ImageGroup = ({
+  preview = true,
+  onPreviewVisibleChange,
+  children,
+  className
+}) => {
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewIndex, setPreviewIndex] = useState(0);
+  const imagesRef = useRef([]);
+  const register = useCallback((src) => {
+    const idx = imagesRef.current.length;
+    imagesRef.current = [...imagesRef.current, src];
+    return idx;
+  }, []);
+  const unregister = useCallback((src) => {
+    imagesRef.current = imagesRef.current.filter((s) => s !== src);
+  }, []);
+  const openPreview = useCallback(
+    (index) => {
+      if (!preview) return;
+      setPreviewIndex(index);
+      setPreviewVisible(true);
+      onPreviewVisibleChange?.(true);
+    },
+    [preview, onPreviewVisibleChange]
+  );
+  const contextValue = useMemo(
+    () => ({ register, unregister, openPreview }),
+    [register, unregister, openPreview]
+  );
+  return /* @__PURE__ */ jsx(ImageGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: className || "tiger-image-group", role: "group", children: [
+    children,
+    preview && /* @__PURE__ */ jsx(
+      ImagePreview,
+      {
+        visible: previewVisible,
+        images: imagesRef.current,
+        currentIndex: previewIndex,
+        onVisibleChange: (val) => {
+          setPreviewVisible(val);
+          if (!val) onPreviewVisibleChange?.(false);
+        },
+        onCurrentIndexChange: setPreviewIndex
+      }
+    )
+  ] }) });
+};
+
+export { ImageGroup, ImageGroupContext };

package/dist/chunk-U3JOBIDU.js

@@ -0,0 +1,355 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ImageCropper.tsx
+var ImageCropper = react.forwardRef(
+  ({
+    src,
+    aspectRatio,
+    minWidth = 20,
+    minHeight = 20,
+    outputType = "image/png",
+    quality = 0.92,
+    guides = true,
+    className,
+    style,
+    onCropChange,
+    onReady
+  }, ref) => {
+    const containerRef = react.useRef(null);
+    const imageRef = react.useRef(null);
+    const [imageLoaded, setImageLoaded] = react.useState(false);
+    const [displayWidth, setDisplayWidth] = react.useState(0);
+    const [displayHeight, setDisplayHeight] = react.useState(0);
+    const [cropRect, setCropRect] = react.useState({ x: 0, y: 0, width: 0, height: 0 });
+    const dragModeRef = react.useRef("none");
+    const activeHandleRef = react.useRef(null);
+    const dragStartPosRef = react.useRef({ x: 0, y: 0 });
+    const dragStartRectRef = react.useRef({ x: 0, y: 0, width: 0, height: 0 });
+    const displayDimsRef = react.useRef({ w: 0, h: 0 });
+    react.useEffect(() => {
+      displayDimsRef.current = { w: displayWidth, h: displayHeight };
+    }, [displayWidth, displayHeight]);
+    react.useEffect(() => {
+      setImageLoaded(false);
+      const img = new window.Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        imageRef.current = img;
+        const container = containerRef.current;
+        const containerW = container ? container.clientWidth : img.naturalWidth;
+        const containerH = container ? container.clientHeight || 400 : img.naturalHeight;
+        const ratio = Math.min(containerW / img.naturalWidth, containerH / img.naturalHeight, 1);
+        const dw = img.naturalWidth * ratio;
+        const dh = img.naturalHeight * ratio;
+        setDisplayWidth(dw);
+        setDisplayHeight(dh);
+        displayDimsRef.current = { w: dw, h: dh };
+        const initial = tigercatCore.getInitialCropRect(dw, dh, aspectRatio);
+        setCropRect(initial);
+        setImageLoaded(true);
+        onReady?.();
+      };
+      img.src = src;
+    }, [src, aspectRatio, onReady]);
+    react.useImperativeHandle(
+      ref,
+      () => ({
+        getCropResult: () => {
+          return new Promise((resolve, reject) => {
+            if (!imageRef.current) {
+              reject(new Error("Image not loaded"));
+              return;
+            }
+            const { canvas, dataUrl } = tigercatCore.cropCanvas(
+              imageRef.current,
+              cropRect,
+              displayWidth,
+              displayHeight,
+              outputType,
+              quality
+            );
+            canvas.toBlob(
+              (blob) => {
+                if (blob) {
+                  resolve({ canvas, blob, dataUrl, cropRect: { ...cropRect } });
+                } else {
+                  reject(new Error("Failed to create blob"));
+                }
+              },
+              outputType,
+              quality
+            );
+          });
+        }
+      }),
+      [cropRect, displayWidth, displayHeight, outputType, quality]
+    );
+    const handleMouseDown = react.useCallback(
+      (e, mode, handle) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragModeRef.current = mode;
+        activeHandleRef.current = handle || null;
+        dragStartPosRef.current = { x: e.clientX, y: e.clientY };
+        dragStartRectRef.current = { ...cropRect };
+        const onMouseMove = (ev) => {
+          const dx = ev.clientX - dragStartPosRef.current.x;
+          const dy = ev.clientY - dragStartPosRef.current.y;
+          const dims = displayDimsRef.current;
+          let newRect;
+          if (dragModeRef.current === "move") {
+            newRect = tigercatCore.moveCropRect(dragStartRectRef.current, dx, dy, dims.w, dims.h);
+          } else {
+            newRect = tigercatCore.resizeCropRect(
+              dragStartRectRef.current,
+              activeHandleRef.current,
+              dx,
+              dy,
+              dims.w,
+              dims.h,
+              aspectRatio,
+              minWidth,
+              minHeight
+            );
+          }
+          setCropRect(newRect);
+          onCropChange?.(newRect);
+        };
+        const onMouseUp = () => {
+          dragModeRef.current = "none";
+          activeHandleRef.current = null;
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+        };
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+      },
+      [cropRect, aspectRatio, minWidth, minHeight, onCropChange]
+    );
+    const handleTouchStart = react.useCallback(
+      (e, mode, handle) => {
+        if (e.touches.length !== 1) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const touch = e.touches[0];
+        dragModeRef.current = mode;
+        activeHandleRef.current = handle || null;
+        dragStartPosRef.current = { x: touch.clientX, y: touch.clientY };
+        dragStartRectRef.current = { ...cropRect };
+        const onTouchMove = (ev) => {
+          if (ev.touches.length !== 1) return;
+          const t = ev.touches[0];
+          const dx = t.clientX - dragStartPosRef.current.x;
+          const dy = t.clientY - dragStartPosRef.current.y;
+          const dims = displayDimsRef.current;
+          let newRect;
+          if (dragModeRef.current === "move") {
+            newRect = tigercatCore.moveCropRect(dragStartRectRef.current, dx, dy, dims.w, dims.h);
+          } else {
+            newRect = tigercatCore.resizeCropRect(
+              dragStartRectRef.current,
+              activeHandleRef.current,
+              dx,
+              dy,
+              dims.w,
+              dims.h,
+              aspectRatio,
+              minWidth,
+              minHeight
+            );
+          }
+          setCropRect(newRect);
+          onCropChange?.(newRect);
+        };
+        const onTouchEnd = () => {
+          dragModeRef.current = "none";
+          activeHandleRef.current = null;
+          document.removeEventListener("touchmove", onTouchMove);
+          document.removeEventListener("touchend", onTouchEnd);
+        };
+        document.addEventListener("touchmove", onTouchMove, { passive: false });
+        document.addEventListener("touchend", onTouchEnd);
+      },
+      [cropRect, aspectRatio, minWidth, minHeight, onCropChange]
+    );
+    const containerClasses = react.useMemo(
+      () => tigercatCore.classNames(tigercatCore.imageCropperContainerClasses, className),
+      [className]
+    );
+    const cr = cropRect;
+    if (!imageLoaded) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: containerRef,
+          className: tigercatCore.classNames(containerClasses, "flex items-center justify-center"),
+          style: { ...style, minHeight: "200px" },
+          role: "img",
+          "aria-label": "Loading image for cropping",
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 border-2 border-white/30 border-t-white rounded-full animate-spin" })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: containerClasses,
+        style: {
+          ...style,
+          width: `${displayWidth}px`,
+          height: `${displayHeight}px`
+        },
+        role: "application",
+        "aria-label": "Image cropper",
+        "aria-roledescription": "image cropper",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src,
+              className: tigercatCore.imageCropperImgClasses,
+              style: { width: `${displayWidth}px`, height: `${displayHeight}px` },
+              draggable: false,
+              alt: "Image to crop"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              className: tigercatCore.imageCropperMaskClasses,
+              width: displayWidth,
+              height: displayHeight,
+              xmlns: "http://www.w3.org/2000/svg",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("mask", { id: "crop-mask", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: displayWidth, height: displayHeight, fill: "white" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: cr.x, y: cr.y, width: cr.width, height: cr.height, fill: "black" })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "rect",
+                  {
+                    width: displayWidth,
+                    height: displayHeight,
+                    fill: "var(--tiger-image-cropper-mask, rgba(0,0,0,0.55))",
+                    mask: "url(#crop-mask)"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: tigercatCore.imageCropperSelectionClasses,
+              style: {
+                left: `${cr.x}px`,
+                top: `${cr.y}px`,
+                width: `${cr.width}px`,
+                height: `${cr.height}px`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: tigercatCore.imageCropperDragAreaClasses,
+              style: {
+                left: `${cr.x}px`,
+                top: `${cr.y}px`,
+                width: `${cr.width}px`,
+                height: `${cr.height}px`
+              },
+              onMouseDown: (e) => handleMouseDown(e, "move"),
+              onTouchStart: (e) => handleTouchStart(e, "move")
+            }
+          ),
+          guides && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x}px`,
+                  top: `${cr.y + cr.height / 3}px`,
+                  width: `${cr.width}px`,
+                  height: 0,
+                  borderTopWidth: "1px",
+                  borderTopStyle: "dashed"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x}px`,
+                  top: `${cr.y + cr.height * 2 / 3}px`,
+                  width: `${cr.width}px`,
+                  height: 0,
+                  borderTopWidth: "1px",
+                  borderTopStyle: "dashed"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x + cr.width / 3}px`,
+                  top: `${cr.y}px`,
+                  width: 0,
+                  height: `${cr.height}px`,
+                  borderLeftWidth: "1px",
+                  borderLeftStyle: "dashed"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x + cr.width * 2 / 3}px`,
+                  top: `${cr.y}px`,
+                  width: 0,
+                  height: `${cr.height}px`,
+                  borderLeftWidth: "1px",
+                  borderLeftStyle: "dashed"
+                }
+              }
+            )
+          ] }),
+          tigercatCore.CROP_HANDLES.map((handle) => {
+            const pos = {};
+            if (handle.includes("n")) pos.top = `${cr.y}px`;
+            if (handle.includes("s")) pos.top = `${cr.y + cr.height}px`;
+            if (handle === "e" || handle === "w") pos.top = `${cr.y + cr.height / 2}px`;
+            if (handle.includes("w")) pos.left = `${cr.x}px`;
+            if (handle.includes("e")) pos.left = `${cr.x + cr.width}px`;
+            if (handle === "n" || handle === "s") pos.left = `${cr.x + cr.width / 2}px`;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.getCropperHandleClasses(handle),
+                style: pos,
+                onMouseDown: (e) => handleMouseDown(e, "resize", handle),
+                onTouchStart: (e) => handleTouchStart(e, "resize", handle)
+              },
+              handle
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+ImageCropper.displayName = "ImageCropper";
+
+exports.ImageCropper = ImageCropper;