@sinco/react 1.0.15-rc.30 → 1.0.15-rc.32
Sign up to get free protection for your applications and to get access to all the features.
package/index.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import { createTheme } from '@mui/material/styles';
|
2
2
|
import React, { useState, useEffect } from 'react';
|
3
|
-
import { CheckCircleRounded, ErrorRounded, WarningRounded, InfoRounded
|
4
|
-
import { Stack, Typography, Drawer, IconButton, AppBar, Toolbar, Box as Box$1,
|
3
|
+
import { CheckCircleRounded, ErrorRounded, WarningRounded, InfoRounded } from '@mui/icons-material';
|
4
|
+
import { Stack, Typography, Drawer, IconButton, AppBar, Toolbar, Box as Box$1, alpha } from '@mui/material';
|
5
5
|
import CloseIcon from '@mui/icons-material/Close';
|
6
6
|
|
7
7
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
@@ -2747,158 +2747,6 @@ const FooterActionComponent = ({
|
|
2747
2747
|
}), /*#__PURE__*/React.createElement(Box$1, null, labelChangeCounter), renderRightContent));
|
2748
2748
|
};
|
2749
2749
|
|
2750
|
-
const useProgress = timeProgress => {
|
2751
|
-
const [progress, setProgress] = useState(100);
|
2752
|
-
useEffect(() => {
|
2753
|
-
const interval = setInterval(() => {
|
2754
|
-
setProgress(prev => {
|
2755
|
-
if (prev <= 0) {
|
2756
|
-
clearInterval(interval);
|
2757
|
-
}
|
2758
|
-
return prev - 1;
|
2759
|
-
});
|
2760
|
-
}, timeProgress * 10);
|
2761
|
-
return () => {
|
2762
|
-
clearInterval(interval);
|
2763
|
-
};
|
2764
|
-
}, [timeProgress]);
|
2765
|
-
return {
|
2766
|
-
progressToast: progress
|
2767
|
-
};
|
2768
|
-
};
|
2769
|
-
|
2770
|
-
const ToastNotificationComponent = toast => {
|
2771
|
-
const [stateOptions, setStateOptions] = useState(true);
|
2772
|
-
const [stateToast, setStateToast] = useState(true);
|
2773
|
-
const timeProgress = toast.time || 10;
|
2774
|
-
const {
|
2775
|
-
progressToast
|
2776
|
-
} = useProgress(timeProgress);
|
2777
|
-
const toastColorConfig = toast.type || "info";
|
2778
|
-
const toastIconOption = {
|
2779
|
-
success: /*#__PURE__*/React.createElement(CheckCircleRounded, null),
|
2780
|
-
error: /*#__PURE__*/React.createElement(ErrorRounded, null),
|
2781
|
-
warning: /*#__PURE__*/React.createElement(WarningRounded, null),
|
2782
|
-
info: /*#__PURE__*/React.createElement(InfoRounded, null)
|
2783
|
-
};
|
2784
|
-
const ToastIconConfig = toastIconOption[toast.type || "info"];
|
2785
|
-
const closeToast = () => {
|
2786
|
-
setStateToast(false);
|
2787
|
-
};
|
2788
|
-
const toggleToastOptions = () => {
|
2789
|
-
setStateOptions(prevShowOptions => !prevShowOptions);
|
2790
|
-
};
|
2791
|
-
useEffect(() => {
|
2792
|
-
progressToast <= 0 && setStateToast(false);
|
2793
|
-
}, [progressToast]);
|
2794
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, stateToast && /*#__PURE__*/React.createElement(Stack, {
|
2795
|
-
position: "fixed",
|
2796
|
-
zIndex: 1400,
|
2797
|
-
right: 16,
|
2798
|
-
top: 16,
|
2799
|
-
width: 370,
|
2800
|
-
sx: {
|
2801
|
-
boxShadow: theme => theme.shadows[8]
|
2802
|
-
}
|
2803
|
-
}, /*#__PURE__*/React.createElement(Box$1, {
|
2804
|
-
padding: 1.5,
|
2805
|
-
gap: 1.5,
|
2806
|
-
display: "flex",
|
2807
|
-
alignItems: "center",
|
2808
|
-
sx: {
|
2809
|
-
"&.color-error": {
|
2810
|
-
backgroundColor: "#FEEBEE"
|
2811
|
-
},
|
2812
|
-
"&.color-info": {
|
2813
|
-
backgroundColor: "#E1F5FE"
|
2814
|
-
},
|
2815
|
-
"&.color-warning": {
|
2816
|
-
backgroundColor: "#FFF3E0"
|
2817
|
-
},
|
2818
|
-
"&.color-success": {
|
2819
|
-
backgroundColor: "#E8F5E9"
|
2820
|
-
}
|
2821
|
-
},
|
2822
|
-
className: `color-${toastColorConfig}`
|
2823
|
-
}, /*#__PURE__*/React.createElement(Stack, {
|
2824
|
-
p: 1,
|
2825
|
-
gap: 1,
|
2826
|
-
height: 20,
|
2827
|
-
borderRadius: 50,
|
2828
|
-
sx: {
|
2829
|
-
"&.ripple-error": {
|
2830
|
-
backgroundColor: "#D143431F"
|
2831
|
-
},
|
2832
|
-
"&.ripple-info": {
|
2833
|
-
backgroundColor: "#2D9FC51F"
|
2834
|
-
},
|
2835
|
-
"&.ripple-warning": {
|
2836
|
-
backgroundColor: "#FB85001F"
|
2837
|
-
},
|
2838
|
-
"&.ripple-success": {
|
2839
|
-
backgroundColor: "#8FC93A1F"
|
2840
|
-
}
|
2841
|
-
},
|
2842
|
-
className: `ripple-${toast.type || "info"}`
|
2843
|
-
}, /*#__PURE__*/React.createElement(Stack, {
|
2844
|
-
sx: {
|
2845
|
-
"&.icon-color.color-info": {
|
2846
|
-
color: theme => theme.palette.info.main
|
2847
|
-
},
|
2848
|
-
"&.icon-color.color-error": {
|
2849
|
-
color: theme => theme.palette.error.main
|
2850
|
-
},
|
2851
|
-
"&.icon-color.color-warning": {
|
2852
|
-
color: theme => theme.palette.warning.main
|
2853
|
-
},
|
2854
|
-
"&.icon-color.color-success": {
|
2855
|
-
color: theme => theme.palette.success.main
|
2856
|
-
}
|
2857
|
-
},
|
2858
|
-
className: `icon-color color-${toast.type || "info"}`
|
2859
|
-
}, ToastIconConfig)), /*#__PURE__*/React.createElement(Divider, {
|
2860
|
-
orientation: "vertical",
|
2861
|
-
flexItem: true
|
2862
|
-
}), /*#__PURE__*/React.createElement(Stack, {
|
2863
|
-
width: 285
|
2864
|
-
}, /*#__PURE__*/React.createElement(Stack, {
|
2865
|
-
justifyContent: "space-between",
|
2866
|
-
flexDirection: "row",
|
2867
|
-
alignItems: "center"
|
2868
|
-
}, /*#__PURE__*/React.createElement(Typography, {
|
2869
|
-
variant: "subtitle2",
|
2870
|
-
color: "text.primary"
|
2871
|
-
}, toast.title), /*#__PURE__*/React.createElement(IconButton, {
|
2872
|
-
size: "small",
|
2873
|
-
onClick: closeToast
|
2874
|
-
}, /*#__PURE__*/React.createElement(Close, {
|
2875
|
-
fontSize: "small"
|
2876
|
-
}))), /*#__PURE__*/React.createElement(Stack, {
|
2877
|
-
gap: 0.5
|
2878
|
-
}, /*#__PURE__*/React.createElement(Typography, {
|
2879
|
-
color: "text.primary",
|
2880
|
-
variant: "body2"
|
2881
|
-
}, toast.subtitle), !stateOptions && toast.dataOpt && toast.dataOpt.length > 0 && /*#__PURE__*/React.createElement(Stack, null, toast.dataOpt.map((element, i) => /*#__PURE__*/React.createElement(Typography, {
|
2882
|
-
variant: "caption",
|
2883
|
-
key: i
|
2884
|
-
}, "\u2022 ", element)))), /*#__PURE__*/React.createElement(Stack, {
|
2885
|
-
justifyContent: "flex-end",
|
2886
|
-
flexDirection: "row"
|
2887
|
-
}, toast.actions && /*#__PURE__*/React.createElement(Stack, {
|
2888
|
-
flexDirection: "row",
|
2889
|
-
gap: 1
|
2890
|
-
}, toast.actions), toast.seeMore && /*#__PURE__*/React.createElement(Button, {
|
2891
|
-
onClick: toggleToastOptions,
|
2892
|
-
size: "small",
|
2893
|
-
variant: "text",
|
2894
|
-
color: toastColorConfig
|
2895
|
-
}, stateOptions ? "Ver más" : "Ver menos", stateOptions ? /*#__PURE__*/React.createElement(KeyboardArrowDown, null) : /*#__PURE__*/React.createElement(KeyboardArrowUp, null))))), /*#__PURE__*/React.createElement(LinearProgress, {
|
2896
|
-
color: toastColorConfig,
|
2897
|
-
variant: "determinate",
|
2898
|
-
value: progressToast
|
2899
|
-
})));
|
2900
|
-
};
|
2901
|
-
|
2902
2750
|
function PageHeaderWrapper({
|
2903
2751
|
item,
|
2904
2752
|
color,
|
@@ -8454,4 +8302,4 @@ const useDynamicColor = url => {
|
|
8454
8302
|
};
|
8455
8303
|
};
|
8456
8304
|
|
8457
|
-
export { AdproSincoTheme, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent, PageHeaderComponent, PageHeaderWrapper, SincoTheme,
|
8305
|
+
export { AdproSincoTheme, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent, PageHeaderComponent, PageHeaderWrapper, SincoTheme, useDynamicColor };
|
package/package.json
CHANGED
@@ -1,5 +1,4 @@
|
|
1
|
-
export * from
|
2
|
-
export * from
|
3
|
-
export * from
|
4
|
-
export * from
|
5
|
-
export * from "./PageHeader";
|
1
|
+
export * from './EmptyState';
|
2
|
+
export * from './Drawer';
|
3
|
+
export * from './FooterAction';
|
4
|
+
export * from './PageHeader';
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
export type toastType = "success" | "error" | "warning" | "info";
|
3
|
-
export interface ToastBaseProperties {
|
4
|
-
type?: toastType;
|
5
|
-
subtitle?: string;
|
6
|
-
title: string;
|
7
|
-
time?: number | any;
|
8
|
-
dataOpt?: string[];
|
9
|
-
actions?: React.ReactNode;
|
10
|
-
seeMore?: boolean;
|
11
|
-
}
|
12
|
-
export declare const ToastNotificationComponent: (toast: ToastBaseProperties) => JSX.Element;
|