@sinco/react 1.1.2-rc.54 → 1.1.2-rc.56
Sign up to get free protection for your applications and to get access to all the features.
Binary file
|
package/index.esm.js
CHANGED
@@ -14453,22 +14453,32 @@ const FooterAction = ({
|
|
14453
14453
|
}), /*#__PURE__*/React__default.createElement(Box$2, null, labelChangeCounter), rightContent));
|
14454
14454
|
};
|
14455
14455
|
|
14456
|
-
const useProgress = (timeProgress, lote) => {
|
14457
|
-
const [progress, setProgress] = useState(
|
14456
|
+
const useProgress = (initialProgress, timeProgress, shouldDecrease, lote) => {
|
14457
|
+
const [progress, setProgress] = useState(initialProgress);
|
14458
14458
|
useEffect(() => {
|
14459
14459
|
const interval = setInterval(() => {
|
14460
14460
|
setProgress(prev => {
|
14461
|
-
if (
|
14462
|
-
|
14461
|
+
if (shouldDecrease) {
|
14462
|
+
if (prev <= 0 || prev >= 100) {
|
14463
|
+
clearInterval(interval);
|
14464
|
+
return prev;
|
14465
|
+
}
|
14466
|
+
const nextProgress = lote ? prev - lote : prev - 1;
|
14467
|
+
return nextProgress < 0 ? 0 : nextProgress;
|
14468
|
+
} else {
|
14469
|
+
if (prev >= 100) {
|
14470
|
+
clearInterval(interval);
|
14471
|
+
return prev;
|
14472
|
+
}
|
14473
|
+
const nextProgress = lote ? prev + lote : prev + 1;
|
14474
|
+
return nextProgress > 100 ? 100 : nextProgress;
|
14463
14475
|
}
|
14464
|
-
const nextProgress = lote ? prev + lote : prev;
|
14465
|
-
return nextProgress > 100 ? 100 : nextProgress;
|
14466
14476
|
});
|
14467
14477
|
}, timeProgress * 10);
|
14468
14478
|
return () => {
|
14469
14479
|
clearInterval(interval);
|
14470
14480
|
};
|
14471
|
-
}, [timeProgress, lote]);
|
14481
|
+
}, [initialProgress, timeProgress, shouldDecrease, lote]);
|
14472
14482
|
return {
|
14473
14483
|
progressToast: progress
|
14474
14484
|
};
|
@@ -14480,7 +14490,7 @@ const ToastNotification = toast => {
|
|
14480
14490
|
const timeProgress = toast.time || 10;
|
14481
14491
|
const {
|
14482
14492
|
progressToast
|
14483
|
-
} = useProgress(timeProgress);
|
14493
|
+
} = useProgress(99, timeProgress, true);
|
14484
14494
|
const toastColorConfig = toast.type || 'info';
|
14485
14495
|
const toastIconOption = {
|
14486
14496
|
success: /*#__PURE__*/React__default.createElement(CheckCircleRounded, null),
|
@@ -14496,7 +14506,7 @@ const ToastNotification = toast => {
|
|
14496
14506
|
setStateOptions(prevShowOptions => !prevShowOptions);
|
14497
14507
|
};
|
14498
14508
|
useEffect(() => {
|
14499
|
-
progressToast
|
14509
|
+
progressToast <= 0 && setStateToast(false);
|
14500
14510
|
}, [progressToast]);
|
14501
14511
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, stateToast && ( /*#__PURE__*/React__default.createElement(Stack$1, {
|
14502
14512
|
position: 'fixed',
|
@@ -14583,7 +14593,6 @@ const ToastNotification = toast => {
|
|
14583
14593
|
color: toastColorConfig
|
14584
14594
|
}, 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, {
|
14585
14595
|
sx: {
|
14586
|
-
transform: 'rotate(180deg)',
|
14587
14596
|
'.MuiLinearProgress-bar': {
|
14588
14597
|
transition: '0.1s linear !important'
|
14589
14598
|
}
|
@@ -14651,6 +14660,74 @@ const PageHeader = ({
|
|
14651
14660
|
}, actions))));
|
14652
14661
|
};
|
14653
14662
|
|
14663
|
+
var spinnerSinco = "6b9c10915ea2b5ed.gif";
|
14664
|
+
|
14665
|
+
const ProgressSinco = ({
|
14666
|
+
time,
|
14667
|
+
variant: _variant = 'indeterminate',
|
14668
|
+
valueBuffer,
|
14669
|
+
lote: _lote = 0,
|
14670
|
+
porcent: _porcent = true,
|
14671
|
+
text: _text = true,
|
14672
|
+
progress: _progress = true,
|
14673
|
+
gif: _gif = true
|
14674
|
+
}) => {
|
14675
|
+
const timeProgress = time || 10;
|
14676
|
+
const [showToast, setShowToast] = useState(true);
|
14677
|
+
const {
|
14678
|
+
progressToast
|
14679
|
+
} = useProgress(0, timeProgress, false, _lote);
|
14680
|
+
const gifProgress = spinnerSinco;
|
14681
|
+
useEffect(() => {
|
14682
|
+
if (progressToast >= 100) {
|
14683
|
+
setShowToast(false);
|
14684
|
+
}
|
14685
|
+
}, [progressToast]);
|
14686
|
+
return /*#__PURE__*/React__default.createElement(Stack$1, {
|
14687
|
+
position: 'fixed',
|
14688
|
+
zIndex: 1000,
|
14689
|
+
height: '100%',
|
14690
|
+
width: '100%',
|
14691
|
+
alignItems: 'center',
|
14692
|
+
justifyContent: 'center'
|
14693
|
+
}, showToast && ( /*#__PURE__*/React__default.createElement(Stack$1, {
|
14694
|
+
width: 226,
|
14695
|
+
gap: 0.8,
|
14696
|
+
justifyContent: 'center',
|
14697
|
+
alignItems: 'center'
|
14698
|
+
}, _gif && ( /*#__PURE__*/React__default.createElement(Stack$1, {
|
14699
|
+
width: 300,
|
14700
|
+
height: 60,
|
14701
|
+
justifyContent: 'center'
|
14702
|
+
}, /*#__PURE__*/React__default.createElement("img", {
|
14703
|
+
src: gifProgress,
|
14704
|
+
alt: "logo"
|
14705
|
+
}))), _text && ( /*#__PURE__*/React__default.createElement(Typography$1, {
|
14706
|
+
variant: "body2",
|
14707
|
+
color: 'text.secondary'
|
14708
|
+
}, "Progresando...")), _progress && ( /*#__PURE__*/React__default.createElement(LinearProgress$1, {
|
14709
|
+
value: progressToast,
|
14710
|
+
variant: _variant === 'lote' ? 'determinate' : _variant,
|
14711
|
+
valueBuffer: valueBuffer,
|
14712
|
+
color: "primary",
|
14713
|
+
sx: {
|
14714
|
+
backgroundColor: SincoTheme.palette.primary[50],
|
14715
|
+
clipPath: 'polygon(5% 0, 100% 0, 95% 100%, 0 100%)',
|
14716
|
+
height: 10,
|
14717
|
+
width: 226,
|
14718
|
+
'.MuiLinearProgress-dashed': {
|
14719
|
+
top: _variant === 'buffer' ? 2.5 : 0
|
14720
|
+
},
|
14721
|
+
'.MuiLinearProgress-bar': {
|
14722
|
+
clipPath: 'polygon(5% 0, 100% 0, 95% 100%, 0 100%)'
|
14723
|
+
}
|
14724
|
+
}
|
14725
|
+
})), _porcent && ( /*#__PURE__*/React__default.createElement(Typography$1, {
|
14726
|
+
color: 'text.secondary',
|
14727
|
+
variant: "subtitle2"
|
14728
|
+
}, `${progressToast}%`)))));
|
14729
|
+
};
|
14730
|
+
|
14654
14731
|
var global$6 = global$i;
|
14655
14732
|
var classof$3 = classofRaw$2;
|
14656
14733
|
|
@@ -20166,4 +20243,4 @@ const useDynamicColor = url => {
|
|
20166
20243
|
};
|
20167
20244
|
};
|
20168
20245
|
|
20169
|
-
export { AdproSincoTheme, DrawerComponent as Drawer, DrawerComponent, DynamicColor, EmptyState, EmptyStateImageUrls, FooterAction, PageHeader, PageHeaderWraps, SincoTheme, ToastNotification, useDynamicColor };
|
20246
|
+
export { AdproSincoTheme, DrawerComponent as Drawer, DrawerComponent, DynamicColor, EmptyState, EmptyStateImageUrls, FooterAction, PageHeader, PageHeaderWraps, ProgressSinco, SincoTheme, ToastNotification, useDynamicColor };
|
package/package.json
CHANGED