@expcat/tigercat-react 0.3.69 → 0.4.0

package/dist/chunk-6W6CRBBG.mjs

@@ -0,0 +1,169 @@
+import { ImageGroupContext } from './chunk-QIJG42YQ.mjs';
+import { ImagePreview } from './chunk-5CLXOFRZ.mjs';
+import { useState, useRef, useContext, useEffect, useCallback, useMemo } from 'react';
+import { classNames, imageBaseClasses, imagePreviewCursorClass, getImageImgClasses, toCSSSize, imageErrorClasses, imageErrorIconPath, imageLoadingClasses } from '@expcat/tigercat-core';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var SvgIcon = ({ d, className = "w-8 h-8" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    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: "1.5", d })
+  }
+);
+var Image = ({
+  src,
+  alt = "",
+  width,
+  height,
+  fit = "cover",
+  fallbackSrc,
+  preview = true,
+  lazy = false,
+  className,
+  errorRender,
+  placeholderRender,
+  onPreviewVisibleChange,
+  onClick,
+  onKeyDown,
+  style,
+  ...props
+}) => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [actualSrc, setActualSrc] = useState(lazy ? "" : src);
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const containerRef = useRef(null);
+  const group = useContext(ImageGroupContext);
+  const registeredIndexRef = useRef(-1);
+  useEffect(() => {
+    if (group && src) {
+      registeredIndexRef.current = group.register(src);
+      return () => {
+        group.unregister(src);
+      };
+    }
+  }, [group, src]);
+  useEffect(() => {
+    if (!lazy || !containerRef.current) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          setActualSrc(src);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.01 }
+    );
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [lazy, src]);
+  useEffect(() => {
+    if (!lazy) {
+      setActualSrc(src);
+      setError(false);
+      setLoading(true);
+    }
+  }, [src, lazy]);
+  const handleLoad = useCallback(() => {
+    setLoading(false);
+    setError(false);
+  }, []);
+  const handleError = useCallback(() => {
+    setLoading(false);
+    setError(true);
+    if (fallbackSrc && actualSrc !== fallbackSrc) {
+      setActualSrc(fallbackSrc);
+      setError(false);
+      setLoading(true);
+    }
+  }, [fallbackSrc, actualSrc]);
+  const handleClick = useCallback(
+    (e) => {
+      onClick?.(e);
+      if (!preview) return;
+      if (group) {
+        group.openPreview(registeredIndexRef.current >= 0 ? registeredIndexRef.current : 0);
+      } else {
+        setPreviewVisible(true);
+        onPreviewVisibleChange?.(true);
+      }
+    },
+    [preview, group, onClick, onPreviewVisibleChange]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      onKeyDown?.(e);
+      if (preview && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        handleClick(e);
+      }
+    },
+    [preview, handleClick, onKeyDown]
+  );
+  const containerClasses = useMemo(
+    () => classNames(imageBaseClasses, preview && imagePreviewCursorClass, className),
+    [preview, className]
+  );
+  const imgClasses = useMemo(() => getImageImgClasses(fit), [fit]);
+  const containerStyle = useMemo(() => {
+    const s = { ...style };
+    const w = toCSSSize(width);
+    const h = toCSSSize(height);
+    if (w) s.width = w;
+    if (h) s.height = h;
+    return s;
+  }, [width, height, style]);
+  let content;
+  if (error && !fallbackSrc) {
+    content = errorRender || /* @__PURE__ */ jsx("div", { className: imageErrorClasses, children: /* @__PURE__ */ jsx(SvgIcon, { d: imageErrorIconPath }) });
+  } else if (loading && !actualSrc) {
+    content = placeholderRender || /* @__PURE__ */ jsx("div", { className: imageLoadingClasses, children: /* @__PURE__ */ jsx(SvgIcon, { d: imageErrorIconPath }) });
+  } else {
+    content = /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: actualSrc,
+        alt,
+        className: imgClasses,
+        onLoad: handleLoad,
+        onError: handleError
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...props,
+        ref: containerRef,
+        className: containerClasses,
+        style: containerStyle,
+        role: preview ? "button" : void 0,
+        tabIndex: preview ? 0 : void 0,
+        "aria-label": preview ? `Preview ${alt || "image"}` : void 0,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        children: content
+      }
+    ),
+    !group && previewVisible && src && /* @__PURE__ */ jsx(
+      ImagePreview,
+      {
+        visible: previewVisible,
+        images: [src],
+        currentIndex: 0,
+        onVisibleChange: (val) => {
+          setPreviewVisible(val);
+          onPreviewVisibleChange?.(val);
+        }
+      }
+    )
+  ] });
+};
+
+export { Image };

package/dist/chunk-EHYSER2Z.js

@@ -0,0 +1,144 @@
+'use strict';
+
+var chunk3T7L3MHX_js = require('./chunk-3T7L3MHX.js');
+var chunkU3JOBIDU_js = require('./chunk-U3JOBIDU.js');
+var chunkF24IF2QL_js = require('./chunk-F24IF2QL.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var CropUpload = ({
+  accept = "image/*",
+  disabled = false,
+  maxSize,
+  cropperProps,
+  modalTitle = "\u88C1\u526A\u56FE\u7247",
+  modalWidth = 520,
+  className,
+  children,
+  onCropComplete,
+  onError
+}) => {
+  const fileInputRef = react.useRef(null);
+  const cropperRef = react.useRef(null);
+  const [modalVisible, setModalVisible] = react.useState(false);
+  const [imageSrc, setImageSrc] = react.useState("");
+  const [cropping, setCropping] = react.useState(false);
+  const handleTriggerClick = react.useCallback(() => {
+    if (disabled) return;
+    fileInputRef.current?.click();
+  }, [disabled]);
+  const handleFileChange = react.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 = react.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 = react.useCallback(() => {
+    setModalVisible(false);
+    setImageSrc("");
+  }, []);
+  const triggerClasses = react.useMemo(
+    () => tigercatCore.classNames(disabled ? tigercatCore.cropUploadTriggerDisabledClasses : tigercatCore.cropUploadTriggerClasses, className),
+    [disabled, className]
+  );
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleTriggerClick();
+      }
+    },
+    [handleTriggerClick]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tiger-crop-upload inline-block", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept,
+        style: { display: "none" },
+        onChange: handleFileChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2",
+                  d: tigercatCore.uploadPlusIconPath
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u9009\u62E9\u56FE\u7247" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      chunk3T7L3MHX_js.Modal,
+      {
+        visible: modalVisible,
+        size: "lg",
+        title: modalTitle,
+        closable: true,
+        maskClosable: false,
+        onClose: handleCancel,
+        footer: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkF24IF2QL_js.Button, { variant: "secondary", onClick: handleCancel, children: "\u53D6\u6D88" }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkF24IF2QL_js.Button, { onClick: handleConfirm, loading: cropping, children: "\u786E\u8BA4\u88C1\u526A" })
+        ] }),
+        children: imageSrc && /* @__PURE__ */ jsxRuntime.jsx(chunkU3JOBIDU_js.ImageCropper, { ref: cropperRef, src: imageSrc, ...cropperProps })
+      }
+    )
+  ] });
+};
+
+exports.CropUpload = CropUpload;

package/dist/chunk-GNMOOYHG.js

@@ -0,0 +1,250 @@
+'use strict';
+
+var chunkZYPEO2KY_js = require('./chunk-ZYPEO2KY.js');
+var react = require('react');
+var reactDom = require('react-dom');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var SvgIcon = ({ d, cls = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className: cls,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d })
+  }
+);
+var ImagePreview = ({
+  visible,
+  images,
+  currentIndex = 0,
+  zIndex = 1050,
+  maskClosable = true,
+  scaleStep = 0.5,
+  minScale = 0.25,
+  maxScale = 5,
+  onVisibleChange,
+  onCurrentIndexChange,
+  onScaleChange
+}) => {
+  const [scale, setScale] = react.useState(1);
+  const [offsetX, setOffsetX] = react.useState(0);
+  const [offsetY, setOffsetY] = react.useState(0);
+  const [index, setIndex] = react.useState(currentIndex);
+  const draggingRef = react.useRef(false);
+  const dragStartRef = react.useRef({ x: 0, y: 0, ox: 0, oy: 0 });
+  const resetTransform = react.useCallback(() => {
+    setScale(1);
+    setOffsetX(0);
+    setOffsetY(0);
+  }, []);
+  react.useEffect(() => {
+    setIndex(currentIndex);
+    resetTransform();
+  }, [currentIndex, resetTransform]);
+  react.useEffect(() => {
+    if (visible) {
+      resetTransform();
+      setIndex(currentIndex);
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [visible, currentIndex, resetTransform]);
+  const handleClose = react.useCallback(() => {
+    onVisibleChange?.(false);
+  }, [onVisibleChange]);
+  chunkZYPEO2KY_js.useEscapeKey({ enabled: !!visible, onEscape: handleClose });
+  const navState = react.useMemo(() => tigercatCore.getPreviewNavState(index, images.length), [index, images.length]);
+  const handleZoomIn = react.useCallback(() => {
+    setScale((s) => {
+      const next = tigercatCore.clampScale(s + scaleStep, minScale, maxScale);
+      onScaleChange?.(next);
+      return next;
+    });
+  }, [scaleStep, minScale, maxScale, onScaleChange]);
+  const handleZoomOut = react.useCallback(() => {
+    setScale((s) => {
+      const next = tigercatCore.clampScale(s - scaleStep, minScale, maxScale);
+      onScaleChange?.(next);
+      return next;
+    });
+  }, [scaleStep, minScale, maxScale, onScaleChange]);
+  const handleReset = react.useCallback(() => {
+    resetTransform();
+    onScaleChange?.(1);
+  }, [resetTransform, onScaleChange]);
+  const handlePrev = react.useCallback(() => {
+    if (index > 0) {
+      const next = index - 1;
+      setIndex(next);
+      resetTransform();
+      onCurrentIndexChange?.(next);
+    }
+  }, [index, resetTransform, onCurrentIndexChange]);
+  const handleNext = react.useCallback(() => {
+    if (index < images.length - 1) {
+      const next = index + 1;
+      setIndex(next);
+      resetTransform();
+      onCurrentIndexChange?.(next);
+    }
+  }, [index, images.length, resetTransform, onCurrentIndexChange]);
+  react.useEffect(() => {
+    if (!visible) return;
+    const handler = (e) => {
+      if (e.key === "ArrowLeft") handlePrev();
+      if (e.key === "ArrowRight") handleNext();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [visible, handlePrev, handleNext]);
+  const handleWheel = react.useCallback(
+    (e) => {
+      e.preventDefault();
+      const delta = e.deltaY > 0 ? -scaleStep : scaleStep;
+      setScale((s) => {
+        const next = tigercatCore.clampScale(s + delta, minScale, maxScale);
+        onScaleChange?.(next);
+        return next;
+      });
+    },
+    [scaleStep, minScale, maxScale, onScaleChange]
+  );
+  const handleMouseDown = react.useCallback(
+    (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      draggingRef.current = true;
+      dragStartRef.current = { x: e.clientX, y: e.clientY, ox: offsetX, oy: offsetY };
+    },
+    [offsetX, offsetY]
+  );
+  const handleMouseMove = react.useCallback((e) => {
+    if (!draggingRef.current) return;
+    setOffsetX(dragStartRef.current.ox + (e.clientX - dragStartRef.current.x));
+    setOffsetY(dragStartRef.current.oy + (e.clientY - dragStartRef.current.y));
+  }, []);
+  const handleMouseUp = react.useCallback(() => {
+    draggingRef.current = false;
+  }, []);
+  const handleMaskClick = react.useCallback(
+    (e) => {
+      if (maskClosable && e.target === e.currentTarget) {
+        handleClose();
+      }
+    },
+    [maskClosable, handleClose]
+  );
+  const transform = react.useMemo(
+    () => tigercatCore.calculateTransform(scale, offsetX, offsetY),
+    [scale, offsetX, offsetY]
+  );
+  if (!visible || !images.length) return null;
+  const currentSrc = images[index] || images[0];
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: tigercatCore.imagePreviewWrapperClasses,
+        style: { zIndex },
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Image preview",
+        onClick: handleMaskClick,
+        onWheel: handleWheel,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.imagePreviewMaskClasses, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: currentSrc,
+              className: tigercatCore.imagePreviewImgClasses,
+              style: { transform },
+              alt: `Preview image ${index + 1}`,
+              draggable: false,
+              onMouseDown: handleMouseDown,
+              onMouseMove: handleMouseMove,
+              onMouseUp: handleMouseUp,
+              onMouseLeave: handleMouseUp
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: tigercatCore.imagePreviewCloseBtnClasses,
+              onClick: handleClose,
+              "aria-label": "Close preview",
+              type: "button",
+              children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { d: tigercatCore.previewCloseIconPath })
+            }
+          ),
+          images.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: tigercatCore.classNames(tigercatCore.imagePreviewNavBtnClasses, "left-4"),
+              onClick: handlePrev,
+              disabled: !navState.hasPrev,
+              "aria-label": "Previous image",
+              type: "button",
+              children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { d: tigercatCore.prevIconPath })
+            }
+          ),
+          images.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: tigercatCore.classNames(tigercatCore.imagePreviewNavBtnClasses, "right-4"),
+              onClick: handleNext,
+              disabled: !navState.hasNext,
+              "aria-label": "Next image",
+              type: "button",
+              children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { d: tigercatCore.nextIconPath })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.imagePreviewToolbarClasses, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: tigercatCore.imagePreviewToolbarBtnClasses,
+                onClick: handleZoomOut,
+                "aria-label": "Zoom out",
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { d: tigercatCore.zoomOutIconPath })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: tigercatCore.imagePreviewToolbarBtnClasses,
+                onClick: handleReset,
+                "aria-label": "Reset",
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { d: tigercatCore.resetIconPath })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: tigercatCore.imagePreviewToolbarBtnClasses,
+                onClick: handleZoomIn,
+                "aria-label": "Zoom in",
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { d: tigercatCore.zoomInIconPath })
+              }
+            ),
+            navState.counter && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.imagePreviewCounterClasses, children: navState.counter })
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+};
+
+exports.ImagePreview = ImagePreview;