@pnt-team/pnt-component-frontend 0.0.89 → 0.0.91

package/lib/esm/components/PntImagePreview/index.d.ts

@@ -1,75 +0,0 @@
-import React, { FC } from 'react';
-import './index.scss';
-interface PntImagePreviewProps {
-    /**
-     * 当前图片组件 URL
-     * @description 图片的完整 URL 地址，用于显示已上传的图片
-     */
-    iconUrl: string | undefined;
-    /**
-     * 上传加载状态
-     * @description 当为 true 时显示上传加载状态，阻止其他操作
-     */
-    loading: boolean;
-    /**
-     * 默认图片
-     * @description 支持传入默认封面图片，不传入则使用默认的 uploadImg 作为默认图片
-     */
-    defaultImg?: string;
-    /**
-     * 自定义扩展参数
-     * @description 用于传递额外的配置选项，如样式等
-     */
-    params?: {
-        /** 自定义样式 */
-        style?: React.CSSProperties;
-        /** 其他可扩展配置 */
-        [key: string]: any;
-    };
-    /**
-     * 删除回调函数
-     * @description 当点击删除图标时触发的回调函数
-     * @param e - 事件对象
-     */
-    onRemove?: (e: any) => void;
-}
-/**
- * 上传图片查看器组件
- * @description 用于展示上传的图片，支持预览、删除功能和上传状态显示
- * @param {PntImagePreviewProps} props - 组件属性
- * @param {string | undefined} props.iconUrl - 当前图片组件 URL
- * @param {boolean} props.loading - 上传加载状态
- * @param {string} [props.defaultImg] - 默认图片
- * @param {object} [props.params] - 自定义扩展参数
- * @param {function} [props.onRemove] - 删除回调函数
- *
- * @example
- * ```tsx
- * // 基础用法
- * <UploadImageViewer
- *   iconUrl={imageUrl}
- *   loading={uploading}
- *   onRemove={handleRemove}
- * />
- *
- * // 带默认图片
- * <UploadImageViewer
- *   iconUrl={imageUrl}
- *   loading={false}
- *   defaultImg="/path/to/default.png"
- *   onRemove={handleRemove}
- * />
- *
- * // 自定义样式
- * <UploadImageViewer
- *   iconUrl={imageUrl}
- *   loading={uploading}
- *   params={{ style: { width: '200px', height: '200px' } }}
- *   onRemove={handleRemove}
- * />
- * ```
- *
- * @returns {ReactElement} 上传图片查看器组件
- */
-declare const PntImagePreview: FC<PntImagePreviewProps>;
-export default PntImagePreview;

package/lib/esm/components/PntImagePreview/index.js

@@ -1,120 +0,0 @@
-import uploadImg from "../../assets/images/uploadImg.png";
-import React from 'react';
-import { BrowseIcon, DeleteIcon, LoadingIcon } from 'tdesign-icons-react';
-import { Image, ImageViewer } from 'tdesign-react';
-import "./index.scss";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * 上传图片查看器组件
- * @description 用于展示上传的图片，支持预览、删除功能和上传状态显示
- * @param {PntImagePreviewProps} props - 组件属性
- * @param {string | undefined} props.iconUrl - 当前图片组件 URL
- * @param {boolean} props.loading - 上传加载状态
- * @param {string} [props.defaultImg] - 默认图片
- * @param {object} [props.params] - 自定义扩展参数
- * @param {function} [props.onRemove] - 删除回调函数
- *
- * @example
- * ```tsx
- * // 基础用法
- * <UploadImageViewer
- *   iconUrl={imageUrl}
- *   loading={uploading}
- *   onRemove={handleRemove}
- * />
- *
- * // 带默认图片
- * <UploadImageViewer
- *   iconUrl={imageUrl}
- *   loading={false}
- *   defaultImg="/path/to/default.png"
- *   onRemove={handleRemove}
- * />
- *
- * // 自定义样式
- * <UploadImageViewer
- *   iconUrl={imageUrl}
- *   loading={uploading}
- *   params={{ style: { width: '200px', height: '200px' } }}
- *   onRemove={handleRemove}
- * />
- * ```
- *
- * @returns {ReactElement} 上传图片查看器组件
- */
-const PntImagePreview = ({
-  iconUrl,
-  loading,
-  defaultImg,
-  params,
-  onRemove
-}) => {
-  const src = iconUrl?.length ? iconUrl : defaultImg || uploadImg;
-
-  /**
-   * 加载中组件
-   * @param isImageLoading - 是否为图片加载状态
-   * @description 统一使用一种loading效果，避免两种加载风格
-   * @returns 加载状态的 JSX 元素
-   */
-  const LoadingContent = isImageLoading => /*#__PURE__*/_jsx("div", {
-    className: isImageLoading ? 'pnt-image-preview-progress' : 'pnt-image-preview-upload-progress',
-    style: params?.style,
-    children: /*#__PURE__*/_jsxs("div", {
-      className: "pnt-image-preview-loading",
-      children: [/*#__PURE__*/_jsx(LoadingIcon, {
-        size: "18px",
-        name: 'loading'
-      }), /*#__PURE__*/_jsx("p", {
-        children: "\u4E0A\u4F20\u4E2D"
-      })]
-    })
-  });
-  return /*#__PURE__*/_jsx("div", {
-    className: "pnt-image-preview-wrapper",
-    onClick: e => {
-      if (iconUrl?.length || loading) {
-        e.stopPropagation(); // 图片已上传 或 加载中 阻止上传行为
-      }
-    },
-    children: loading ? LoadingContent(false) : /*#__PURE__*/_jsx(ImageViewer, {
-      images: [src],
-      closeOnOverlay: true,
-      trigger: ({
-        open
-      }) => {
-        const mask = /*#__PURE__*/_jsxs("div", {
-          className: "pnt-image-preview-mask",
-          children: [/*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(BrowseIcon, {
-              onClick: open,
-              size: "16px",
-              name: 'browse'
-            })
-          }), /*#__PURE__*/_jsx("span", {
-            className: "pnt-image-preview-divider"
-          }), /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(DeleteIcon, {
-              onClick: onRemove,
-              size: "16px",
-              name: 'delete'
-            })
-          })]
-        });
-        return /*#__PURE__*/_jsx(Image, {
-          alt: '',
-          src: src,
-          loading: LoadingContent(true),
-          overlayContent: iconUrl ? mask : /*#__PURE__*/_jsx(_Fragment, {}),
-          overlayTrigger: "hover",
-          fit: "contain",
-          className: "pnt-image-preview",
-          style: params?.style
-        });
-      }
-    })
-  });
-};
-export default PntImagePreview;