chore: image edit ux

src/components/auto-image/single-image.tsx

@@ -1,11 +1,10 @@
 import { CloseCircleOutlined } from '@ant-design/icons';
-import { Progress } from 'antd';
+import { Progress, Tooltip } from 'antd';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import React, { useCallback } from 'react';
 import AutoImage from './index';
 import './single-image.less';
-
 interface SingleImageProps {
   loading?: boolean;
   width?: number;
@@ -15,17 +14,23 @@ interface SingleImageProps {
   maxWidth?: number;
   dataUrl: string;
   uid: number;
+  preview?: boolean;
   autoSize?: boolean;
   onDelete: (uid: number) => void;
+  onClick?: (item: any) => void;
   autoBgColor?: boolean;
   editable?: boolean;
   style?: React.CSSProperties;
+  progressType?: 'line' | 'circle' | 'dashboard';
+  progressColor?: string;
+  progressWidth?: number;
 }
 
 const SingleImage: React.FC<SingleImageProps> = (props) => {
   const {
     editable,
     onDelete: handleOnDelete,
+    onClick,
     autoSize,
     uid,
     loading,
@@ -36,10 +41,13 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
     maxWidth,
     dataUrl,
     style,
-    autoBgColor
+    autoBgColor,
+    progressColor = 'var(--ant-color-primary)',
+    progressWidth = 2,
+    preview = true,
+    progressType = 'dashboard'
   } = props;
 
-  const [color, setColor] = React.useState({});
   const imgWrapper = React.useRef<HTMLSpanElement>(null);
   const [imgSize, setImgSize] = React.useState({
     width: width,
@@ -50,6 +58,10 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
     return loading ? { width: '100%', height: '100%' } : {};
   }, [loading, imgSize]);
 
+  const handleOnClick = useCallback(() => {
+    onClick?.(props);
+  }, [onClick, props]);
+
   const handleResize = useCallback(
     (size: { width: number; height: number }) => {
       if (!autoSize) return;
@@ -119,18 +131,47 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
                   overflow: 'hidden'
                 }}
               >
-                <Progress
-                  percent={progress}
-                  type="dashboard"
-                  steps={{ count: 50, gap: 2 }}
-                  format={() => (
-                    <span className="font-size-20">{progress}%</span>
-                  )}
-                  trailColor="var(--ant-color-fill-secondary)"
-                />
+                {progressType === 'dashboard' ? (
+                  <Progress
+                    percent={progress}
+                    type="dashboard"
+                    steps={{ count: 50, gap: 2 }}
+                    format={() => (
+                      <span className="font-size-20">{progress}%</span>
+                    )}
+                    trailColor="var(--ant-color-fill-secondary)"
+                  />
+                ) : (
+                  <span
+                    className="progress-wrapper"
+                    style={{ bottom: 'unset' }}
+                  >
+                    <Tooltip title={`${progress}%`} open={true}>
+                      <Progress
+                        style={{
+                          paddingInline: 0,
+                          borderRadius: 12,
+                          display: 'flex',
+                          alignItems: 'center',
+                          backgroundColor: 'rgba(0,0,0,0.5)'
+                        }}
+                        percent={progress}
+                        percentPosition={{
+                          align: 'center',
+                          type: 'inner'
+                        }}
+                        type="line"
+                        size={[undefined, 6]}
+                        strokeLinecap="round"
+                        strokeColor="var(--color-white-1)"
+                      />
+                    </Tooltip>
+                  </span>
+                )}
               </span>
             ) : (
               <span
+                onClick={handleOnClick}
                 className="img"
                 style={{
                   maxHeight: `min(${maxHeight}, 100%)`,
@@ -138,12 +179,37 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
                 }}
               >
                 <AutoImage
+                  preview={preview}
                   autoSize={autoSize}
                   src={dataUrl}
                   width={imgSize.width || 100}
                   height={imgSize.height || 100}
                   onLoad={handleOnLoad}
                 />
+                {progress && progress < 100 && (
+                  <span className="progress-wrapper">
+                    <Tooltip title={`${progress}%`} open={true}>
+                      <Progress
+                        style={{
+                          paddingInline: 0,
+                          borderRadius: 12,
+                          display: 'flex',
+                          alignItems: 'center',
+                          backgroundColor: 'rgba(0,0,0,0.5)'
+                        }}
+                        percent={progress}
+                        percentPosition={{
+                          align: 'center',
+                          type: 'inner'
+                        }}
+                        type="line"
+                        size={[undefined, 6]}
+                        strokeLinecap="round"
+                        strokeColor="var(--color-white-1)"
+                      />
+                    </Tooltip>
+                  </span>
+                )}
               </span>
             )}
           </>