@sinco/react 1.1.2-rc.73 → 1.1.2-rc.74

package/index.esm.js

@@ -13393,7 +13393,7 @@ var FooterAction = function FooterAction(_ref) {
   }), React__default.createElement(Box$2, null, labelChangeCounter), rightContent));
 };
 
-var useProgress = function useProgress(timeProgress) {
+var useProgress = function useProgress(timeProgress, lote) {
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     progress = _useState2[0],
@@ -13404,15 +13404,20 @@ var useProgress = function useProgress(timeProgress) {
         if (prev >= 100) {
           clearInterval(interval);
         }
-        return prev + 1;
+        if (lote) {
+          var nextProgress = prev + lote;
+          return nextProgress <= 100 ? nextProgress : 100;
+        } else {
+          return prev + 1;
+        }
       });
     }, timeProgress * 10);
     return function () {
       clearInterval(interval);
     };
-  }, [timeProgress]);
+  }, [timeProgress, lote]);
   return {
-    progressToast: progress
+    progress: progress
   };
 };
 
@@ -13427,7 +13432,7 @@ var ToastNotification = function ToastNotification(toast) {
     setStateToast = _useState4[1];
   var timeProgress = toast.time || 10;
   var _useProgress = useProgress(timeProgress),
-    progressToast = _useProgress.progressToast;
+    progress = _useProgress.progress;
   var toastColorConfig = toast.type || 'info';
   var toastIconOption = {
     success: React__default.createElement(CheckCircleRounded, null),
@@ -13445,8 +13450,8 @@ var ToastNotification = function ToastNotification(toast) {
     });
   };
   useEffect(function () {
-    progressToast >= 100 && setStateToast(false);
-  }, [progressToast]);
+    progress >= 100 && setStateToast(false);
+  }, [progress]);
   return React__default.createElement(React__default.Fragment, null, stateToast && React__default.createElement(Stack$1, {
     position: 'fixed',
     zIndex: 1400,
@@ -13542,7 +13547,7 @@ var ToastNotification = function ToastNotification(toast) {
     },
     color: toastColorConfig,
     variant: "determinate",
-    value: 100 - progressToast
+    value: 100 - progress
   })));
 };
 
@@ -13599,6 +13604,70 @@ var PageHeader = function PageHeader(_ref2) {
   }, actions)));
 };
 
+var ProgressSinco = function ProgressSinco(_ref) {
+  var time = _ref.time,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'indeterminate' : _ref$variant,
+    valueBuffer = _ref.valueBuffer,
+    _ref$lote = _ref.lote,
+    lote = _ref$lote === void 0 ? 0 : _ref$lote;
+  var timeProgress = time || 10;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    showToast = _useState2[0],
+    setShowToast = _useState2[1];
+  var _useProgress = useProgress(timeProgress, lote),
+    progress = _useProgress.progress;
+  useEffect(function () {
+    if (progress >= 100) {
+      setShowToast(false);
+    }
+  }, [progress]);
+  return React__default.createElement(React__default.Fragment, null, showToast && React__default.createElement(Stack$1, {
+    position: 'fixed',
+    zIndex: 1000,
+    height: '100%',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }, React__default.createElement(Stack$1, {
+    width: 226,
+    gap: 0.8,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }, React__default.createElement(Stack$1, {
+    width: 300,
+    height: 60,
+    justifyContent: 'center'
+  }, React__default.createElement("img", {
+    src: '../assets/spinner.gif',
+    alt: "logo"
+  })), React__default.createElement(Typography$1, {
+    variant: "body2",
+    color: 'text.secondary'
+  }, "Progresando..."), React__default.createElement(LinearProgress$1, {
+    value: progress,
+    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%)'
+      }
+    }
+  }), React__default.createElement(Typography$1, {
+    color: 'text.secondary',
+    variant: "subtitle2"
+  }, "".concat(progress, "%")))));
+};
+
 /**
  * @license
  * Copyright 2021 Google LLC
@@ -18005,4 +18074,4 @@ var useDynamicColor = function useDynamicColor(url) {
   };
 };
 
-export { AdproSincoTheme, DrawerComponent as Drawer, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, FooterAction, PageHeader, PageHeaderWraps, SincoTheme, ToastNotification, useDynamicColor };
+export { AdproSincoTheme, DrawerComponent as Drawer, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, FooterAction, PageHeader, PageHeaderWraps, ProgressSinco, SincoTheme, ToastNotification, useDynamicColor };

package/package.json

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

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+type Variant = 'buffer' | 'determinate' | 'indeterminate' | 'query' | 'lote';
+interface ProgressProps {
+    time?: number;
+    variant?: Variant;
+    valueBuffer?: number;
+    lote?: number;
+}
+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 "./ProgressSinco";

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

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