@sinco/react 1.0.15-rc.30 → 1.0.15-rc.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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;
|