@sinco/react 1.1.2-rc.54 → 1.1.2-rc.56

package/index.esm.js

@@ -14453,22 +14453,32 @@ const FooterAction = ({
   }), /*#__PURE__*/React__default.createElement(Box$2, null, labelChangeCounter), rightContent));
 };
 
-const useProgress = (timeProgress, lote) => {
-  const [progress, setProgress] = useState(0);
+const useProgress = (initialProgress, timeProgress, shouldDecrease, lote) => {
+  const [progress, setProgress] = useState(initialProgress);
   useEffect(() => {
     const interval = setInterval(() => {
       setProgress(prev => {
-        if (prev >= 100) {
-          clearInterval(interval);
+        if (shouldDecrease) {
+          if (prev <= 0 || prev >= 100) {
+            clearInterval(interval);
+            return prev;
+          }
+          const nextProgress = lote ? prev - lote : prev - 1;
+          return nextProgress < 0 ? 0 : nextProgress;
+        } else {
+          if (prev >= 100) {
+            clearInterval(interval);
+            return prev;
+          }
+          const nextProgress = lote ? prev + lote : prev + 1;
+          return nextProgress > 100 ? 100 : nextProgress;
         }
-        const nextProgress = lote ? prev + lote : prev;
-        return nextProgress > 100 ? 100 : nextProgress;
       });
     }, timeProgress * 10);
     return () => {
       clearInterval(interval);
     };
-  }, [timeProgress, lote]);
+  }, [initialProgress, timeProgress, shouldDecrease, lote]);
   return {
     progressToast: progress
   };
@@ -14480,7 +14490,7 @@ const ToastNotification = toast => {
   const timeProgress = toast.time || 10;
   const {
     progressToast
-  } = useProgress(timeProgress);
+  } = useProgress(99, timeProgress, true);
   const toastColorConfig = toast.type || 'info';
   const toastIconOption = {
     success: /*#__PURE__*/React__default.createElement(CheckCircleRounded, null),
@@ -14496,7 +14506,7 @@ const ToastNotification = toast => {
     setStateOptions(prevShowOptions => !prevShowOptions);
   };
   useEffect(() => {
-    progressToast >= 100 && setStateToast(false);
+    progressToast <= 0 && setStateToast(false);
   }, [progressToast]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, stateToast && ( /*#__PURE__*/React__default.createElement(Stack$1, {
     position: 'fixed',
@@ -14583,7 +14593,6 @@ const ToastNotification = toast => {
     color: toastColorConfig
   }, stateOptions ? 'Ver más' : 'Ver menos', stateOptions ? /*#__PURE__*/React__default.createElement(KeyboardArrowDown, null) : /*#__PURE__*/React__default.createElement(KeyboardArrowUp, null)))))), /*#__PURE__*/React__default.createElement(LinearProgress$1, {
     sx: {
-      transform: 'rotate(180deg)',
       '.MuiLinearProgress-bar': {
         transition: '0.1s linear !important'
       }
@@ -14651,6 +14660,74 @@ const PageHeader = ({
   }, actions))));
 };
 
+var spinnerSinco = "6b9c10915ea2b5ed.gif";
+
+const ProgressSinco = ({
+  time,
+  variant: _variant = 'indeterminate',
+  valueBuffer,
+  lote: _lote = 0,
+  porcent: _porcent = true,
+  text: _text = true,
+  progress: _progress = true,
+  gif: _gif = true
+}) => {
+  const timeProgress = time || 10;
+  const [showToast, setShowToast] = useState(true);
+  const {
+    progressToast
+  } = useProgress(0, timeProgress, false, _lote);
+  const gifProgress = spinnerSinco;
+  useEffect(() => {
+    if (progressToast >= 100) {
+      setShowToast(false);
+    }
+  }, [progressToast]);
+  return /*#__PURE__*/React__default.createElement(Stack$1, {
+    position: 'fixed',
+    zIndex: 1000,
+    height: '100%',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }, showToast && ( /*#__PURE__*/React__default.createElement(Stack$1, {
+    width: 226,
+    gap: 0.8,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }, _gif && ( /*#__PURE__*/React__default.createElement(Stack$1, {
+    width: 300,
+    height: 60,
+    justifyContent: 'center'
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: gifProgress,
+    alt: "logo"
+  }))), _text && ( /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "body2",
+    color: 'text.secondary'
+  }, "Progresando...")), _progress && ( /*#__PURE__*/React__default.createElement(LinearProgress$1, {
+    value: progressToast,
+    variant: _variant === 'lote' ? 'determinate' : _variant,
+    valueBuffer: valueBuffer,
+    color: "primary",
+    sx: {
+      backgroundColor: SincoTheme.palette.primary[50],
+      clipPath: 'polygon(5% 0, 100% 0, 95% 100%, 0 100%)',
+      height: 10,
+      width: 226,
+      '.MuiLinearProgress-dashed': {
+        top: _variant === 'buffer' ? 2.5 : 0
+      },
+      '.MuiLinearProgress-bar': {
+        clipPath: 'polygon(5% 0, 100% 0, 95% 100%, 0 100%)'
+      }
+    }
+  })), _porcent && ( /*#__PURE__*/React__default.createElement(Typography$1, {
+    color: 'text.secondary',
+    variant: "subtitle2"
+  }, `${progressToast}%`)))));
+};
+
 var global$6 = global$i;
 var classof$3 = classofRaw$2;
 
@@ -20166,4 +20243,4 @@ const useDynamicColor = url => {
   };
 };
 
-export { AdproSincoTheme, DrawerComponent as Drawer, DrawerComponent, DynamicColor, EmptyState, EmptyStateImageUrls, FooterAction, PageHeader, PageHeaderWraps, SincoTheme, ToastNotification, useDynamicColor };
+export { AdproSincoTheme, DrawerComponent as Drawer, DrawerComponent, DynamicColor, EmptyState, EmptyStateImageUrls, FooterAction, PageHeader, PageHeaderWraps, ProgressSinco, SincoTheme, ToastNotification, useDynamicColor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sinco/react",
-  "version": "1.1.2-rc.54",
+  "version": "1.1.2-rc.56",
   "description": "package for the configuration of mui react sinco",
   "private": false,
   "license": "MIT",

package/src/lib/Components/Progress.d.ts

@@ -10,5 +10,5 @@ interface ProgressProps {
     gif?: boolean;
     progress?: boolean;
 }
-export declare const Progres: FC<ProgressProps>;
+export declare const ProgressSinco: FC<ProgressProps>;
 export {};

package/src/lib/Components/index.d.ts

@@ -3,3 +3,4 @@ export * from "./Drawer";
 export * from "./FooterAction";
 export * from "./ToastNotification";
 export * from "./PageHeader";
+export * from './Progress';

package/src/lib/Hooks/useProgress.d.ts

@@ -1,3 +1,3 @@
-export declare const useProgress: (timeProgress: number, lote?: number) => {
+export declare const useProgress: (initialProgress: number, timeProgress: number, shouldDecrease: boolean, lote?: number) => {
     progressToast: number;
 };