@designbasekorea/figma-ui 0.1.74 → 0.1.75

package/dist/index.d.ts

@@ -269,6 +269,8 @@ interface ProgressModalProps {
     completeIcon?: React.ReactNode;
     className?: string;
     t?: TFunctionLite;
+    autoComplete?: boolean;
+    autoCloseOnComplete?: boolean;
 }
 declare const ProgressModal: React.FC<ProgressModalProps>;
 

package/dist/index.esm.js

@@ -738,24 +738,33 @@ const PaymentStatusSection = ({ status, usageCount, activationLimit, activationU
 };
 PaymentStatusSection.displayName = 'PaymentStatusSection';
 
-const ProgressModal = ({ isOpen, onClose, progress, title = { key: 'progress.working' }, completedMessage = { key: 'progress.completed' }, processingMessage = { key: 'progress.processing' }, stopButtonText = { key: 'progress.stop' }, confirmButtonText = { key: 'progress.confirm' }, helpText, onStop, onComplete, loadingIcon, completeIcon, className, t }) => {
+const ProgressModal = ({ isOpen, onClose, progress, title = { key: 'progress.working' }, completedMessage = { key: 'progress.completed' }, processingMessage = { key: 'progress.processing' }, stopButtonText = { key: 'progress.stop' }, confirmButtonText = { key: 'progress.confirm' }, helpText, onStop, onComplete, loadingIcon, completeIcon, className, t, autoComplete = true, autoCloseOnComplete = false }) => {
     const [isCompleted, setIsCompleted] = useState(false);
+    const completeFiredRef = useRef(false);
     const { processedNodes, totalNodes } = progress;
-    const progressPercentage = totalNodes > 0 ? (processedNodes / totalNodes) * 100 : 0;
+    const progressPercentage = totalNodes > 0 ? Math.min(100, (processedNodes / totalNodes) * 100) : 0;
     useEffect(() => {
-        if (processedNodes === totalNodes && totalNodes > 0) {
-            setIsCompleted(true);
-            if (onComplete)
-                onComplete();
+        const done = totalNodes > 0 && processedNodes >= totalNodes;
+        setIsCompleted(done);
+        if (done && autoComplete && !completeFiredRef.current) {
+            completeFiredRef.current = true;
+            onComplete?.();
+            if (autoCloseOnComplete) {
+                onClose();
+            }
         }
-    }, [processedNodes, totalNodes, onComplete]);
+    }, [processedNodes, totalNodes, autoComplete, autoCloseOnComplete, onComplete, onClose]);
     useEffect(() => {
-        if (isOpen)
+        if (isOpen) {
             setIsCompleted(false);
+            completeFiredRef.current = false;
+        }
     }, [isOpen]);
     const handleStop = () => {
-        if (onStop)
-            onStop();
+        onStop?.();
+        onClose();
+    };
+    const handleConfirm = () => {
         onClose();
     };
     const modalClasses = clsx('designbase-figma-progress-modal', className);
@@ -773,7 +782,7 @@ const ProgressModal = ({ isOpen, onClose, progress, title = { key: 'progress.wor
             React.createElement("div", { className: "designbase-figma-progress-modal__status" }, `${processedNodes} / ${totalNodes} (${progressPercentage.toFixed(1)}%)`),
             React.createElement(Progressbar, { value: progressPercentage, size: "m", variant: isCompleted ? 'success' : 'primary', style: "animated", fullWidth: true }),
             displayHelpText && !isCompleted && (React.createElement("p", { className: "designbase-figma-progress-modal__help-text" }, displayHelpText)),
-            React.createElement("div", { className: "designbase-figma-progress-modal__actions" }, isCompleted ? (React.createElement(Button, { onPress: onClose, variant: "primary", size: "m", fullWidth: true }, displayConfirmText)) : (React.createElement(Button, { onPress: handleStop, variant: "secondary", size: "m", fullWidth: true }, displayStopText))))));
+            React.createElement("div", { className: "designbase-figma-progress-modal__actions" }, isCompleted ? (React.createElement(Button, { onPress: handleConfirm, variant: "primary", size: "m", fullWidth: true }, displayConfirmText)) : (React.createElement(Button, { onPress: handleStop, variant: "secondary", size: "m", fullWidth: true }, displayStopText))))));
 };
 ProgressModal.displayName = 'ProgressModal';