@sinco/react 1.0.15-rc.31 → 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,8 @@
|
|
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
|
+
import CloseIcon from '@mui/icons-material/Close';
|
5
6
|
|
6
7
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
7
8
|
|
@@ -2657,10 +2658,10 @@ handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
|
|
2657
2658
|
|
2658
2659
|
const borderStyles = {
|
2659
2660
|
left: {
|
2660
|
-
borderTopRightRadius:
|
2661
|
+
borderTopRightRadius: '4px'
|
2661
2662
|
},
|
2662
2663
|
right: {
|
2663
|
-
borderTopLeftRadius:
|
2664
|
+
borderTopLeftRadius: '4px'
|
2664
2665
|
}
|
2665
2666
|
};
|
2666
2667
|
const DrawerComponent = ({
|
@@ -2668,7 +2669,7 @@ const DrawerComponent = ({
|
|
2668
2669
|
children,
|
2669
2670
|
actions,
|
2670
2671
|
showActions,
|
2671
|
-
anchor: _anchor =
|
2672
|
+
anchor: _anchor = 'left',
|
2672
2673
|
width,
|
2673
2674
|
open,
|
2674
2675
|
onClose,
|
@@ -2684,11 +2685,11 @@ const DrawerComponent = ({
|
|
2684
2685
|
open: open,
|
2685
2686
|
onClose: onClose,
|
2686
2687
|
sx: {
|
2687
|
-
|
2688
|
-
backgroundColor:
|
2689
|
-
backdropFilter:
|
2688
|
+
'& .MuiBackdrop-root': {
|
2689
|
+
backgroundColor: '#F0f0f099 !important',
|
2690
|
+
backdropFilter: 'blur(4px)'
|
2690
2691
|
},
|
2691
|
-
|
2692
|
+
'& .MuiDrawer-paper': Object.assign({
|
2692
2693
|
width: width
|
2693
2694
|
}, paperSx)
|
2694
2695
|
}
|
@@ -2707,7 +2708,7 @@ const DrawerComponent = ({
|
|
2707
2708
|
}, title), /*#__PURE__*/React.createElement(IconButton, {
|
2708
2709
|
onClick: onClose,
|
2709
2710
|
size: "small"
|
2710
|
-
}, /*#__PURE__*/React.createElement(
|
2711
|
+
}, /*#__PURE__*/React.createElement(CloseIcon, {
|
2711
2712
|
fontSize: "small"
|
2712
2713
|
}))), /*#__PURE__*/React.createElement(Stack, {
|
2713
2714
|
py: 1.5,
|
@@ -2746,158 +2747,6 @@ const FooterActionComponent = ({
|
|
2746
2747
|
}), /*#__PURE__*/React.createElement(Box$1, null, labelChangeCounter), renderRightContent));
|
2747
2748
|
};
|
2748
2749
|
|
2749
|
-
const useProgress = timeProgress => {
|
2750
|
-
const [progress, setProgress] = useState(100);
|
2751
|
-
useEffect(() => {
|
2752
|
-
const interval = setInterval(() => {
|
2753
|
-
setProgress(prev => {
|
2754
|
-
if (prev <= 0) {
|
2755
|
-
clearInterval(interval);
|
2756
|
-
}
|
2757
|
-
return prev - 1;
|
2758
|
-
});
|
2759
|
-
}, timeProgress * 10);
|
2760
|
-
return () => {
|
2761
|
-
clearInterval(interval);
|
2762
|
-
};
|
2763
|
-
}, [timeProgress]);
|
2764
|
-
return {
|
2765
|
-
progressToast: progress
|
2766
|
-
};
|
2767
|
-
};
|
2768
|
-
|
2769
|
-
const ToastNotificationComponent = toast => {
|
2770
|
-
const [stateOptions, setStateOptions] = useState(true);
|
2771
|
-
const [stateToast, setStateToast] = useState(true);
|
2772
|
-
const timeProgress = toast.time || 10;
|
2773
|
-
const {
|
2774
|
-
progressToast
|
2775
|
-
} = useProgress(timeProgress);
|
2776
|
-
const toastColorConfig = toast.type || "info";
|
2777
|
-
const toastIconOption = {
|
2778
|
-
success: /*#__PURE__*/React.createElement(CheckCircleRounded, null),
|
2779
|
-
error: /*#__PURE__*/React.createElement(ErrorRounded, null),
|
2780
|
-
warning: /*#__PURE__*/React.createElement(WarningRounded, null),
|
2781
|
-
info: /*#__PURE__*/React.createElement(InfoRounded, null)
|
2782
|
-
};
|
2783
|
-
const ToastIconConfig = toastIconOption[toast.type || "info"];
|
2784
|
-
const closeToast = () => {
|
2785
|
-
setStateToast(false);
|
2786
|
-
};
|
2787
|
-
const toggleToastOptions = () => {
|
2788
|
-
setStateOptions(prevShowOptions => !prevShowOptions);
|
2789
|
-
};
|
2790
|
-
useEffect(() => {
|
2791
|
-
progressToast <= 0 && setStateToast(false);
|
2792
|
-
}, [progressToast]);
|
2793
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, stateToast && /*#__PURE__*/React.createElement(Stack, {
|
2794
|
-
position: "fixed",
|
2795
|
-
zIndex: 1400,
|
2796
|
-
right: 16,
|
2797
|
-
top: 16,
|
2798
|
-
width: 370,
|
2799
|
-
sx: {
|
2800
|
-
boxShadow: theme => theme.shadows[8]
|
2801
|
-
}
|
2802
|
-
}, /*#__PURE__*/React.createElement(Box$1, {
|
2803
|
-
padding: 1.5,
|
2804
|
-
gap: 1.5,
|
2805
|
-
display: "flex",
|
2806
|
-
alignItems: "center",
|
2807
|
-
sx: {
|
2808
|
-
"&.color-error": {
|
2809
|
-
backgroundColor: "#FEEBEE"
|
2810
|
-
},
|
2811
|
-
"&.color-info": {
|
2812
|
-
backgroundColor: "#E1F5FE"
|
2813
|
-
},
|
2814
|
-
"&.color-warning": {
|
2815
|
-
backgroundColor: "#FFF3E0"
|
2816
|
-
},
|
2817
|
-
"&.color-success": {
|
2818
|
-
backgroundColor: "#E8F5E9"
|
2819
|
-
}
|
2820
|
-
},
|
2821
|
-
className: `color-${toastColorConfig}`
|
2822
|
-
}, /*#__PURE__*/React.createElement(Stack, {
|
2823
|
-
p: 1,
|
2824
|
-
gap: 1,
|
2825
|
-
height: 20,
|
2826
|
-
borderRadius: 50,
|
2827
|
-
sx: {
|
2828
|
-
"&.ripple-error": {
|
2829
|
-
backgroundColor: "#D143431F"
|
2830
|
-
},
|
2831
|
-
"&.ripple-info": {
|
2832
|
-
backgroundColor: "#2D9FC51F"
|
2833
|
-
},
|
2834
|
-
"&.ripple-warning": {
|
2835
|
-
backgroundColor: "#FB85001F"
|
2836
|
-
},
|
2837
|
-
"&.ripple-success": {
|
2838
|
-
backgroundColor: "#8FC93A1F"
|
2839
|
-
}
|
2840
|
-
},
|
2841
|
-
className: `ripple-${toast.type || "info"}`
|
2842
|
-
}, /*#__PURE__*/React.createElement(Stack, {
|
2843
|
-
sx: {
|
2844
|
-
"&.icon-color.color-info": {
|
2845
|
-
color: theme => theme.palette.info.main
|
2846
|
-
},
|
2847
|
-
"&.icon-color.color-error": {
|
2848
|
-
color: theme => theme.palette.error.main
|
2849
|
-
},
|
2850
|
-
"&.icon-color.color-warning": {
|
2851
|
-
color: theme => theme.palette.warning.main
|
2852
|
-
},
|
2853
|
-
"&.icon-color.color-success": {
|
2854
|
-
color: theme => theme.palette.success.main
|
2855
|
-
}
|
2856
|
-
},
|
2857
|
-
className: `icon-color color-${toast.type || "info"}`
|
2858
|
-
}, ToastIconConfig)), /*#__PURE__*/React.createElement(Divider, {
|
2859
|
-
orientation: "vertical",
|
2860
|
-
flexItem: true
|
2861
|
-
}), /*#__PURE__*/React.createElement(Stack, {
|
2862
|
-
width: 285
|
2863
|
-
}, /*#__PURE__*/React.createElement(Stack, {
|
2864
|
-
justifyContent: "space-between",
|
2865
|
-
flexDirection: "row",
|
2866
|
-
alignItems: "center"
|
2867
|
-
}, /*#__PURE__*/React.createElement(Typography, {
|
2868
|
-
variant: "subtitle2",
|
2869
|
-
color: "text.primary"
|
2870
|
-
}, toast.title), /*#__PURE__*/React.createElement(IconButton, {
|
2871
|
-
size: "small",
|
2872
|
-
onClick: closeToast
|
2873
|
-
}, /*#__PURE__*/React.createElement(Close, {
|
2874
|
-
fontSize: "small"
|
2875
|
-
}))), /*#__PURE__*/React.createElement(Stack, {
|
2876
|
-
gap: 0.5
|
2877
|
-
}, /*#__PURE__*/React.createElement(Typography, {
|
2878
|
-
color: "text.primary",
|
2879
|
-
variant: "body2"
|
2880
|
-
}, toast.subtitle), !stateOptions && toast.dataOpt && toast.dataOpt.length > 0 && /*#__PURE__*/React.createElement(Stack, null, toast.dataOpt.map((element, i) => /*#__PURE__*/React.createElement(Typography, {
|
2881
|
-
variant: "caption",
|
2882
|
-
key: i
|
2883
|
-
}, "\u2022 ", element)))), /*#__PURE__*/React.createElement(Stack, {
|
2884
|
-
justifyContent: "flex-end",
|
2885
|
-
flexDirection: "row"
|
2886
|
-
}, toast.actions && /*#__PURE__*/React.createElement(Stack, {
|
2887
|
-
flexDirection: "row",
|
2888
|
-
gap: 1
|
2889
|
-
}, toast.actions), toast.seeMore && /*#__PURE__*/React.createElement(Button, {
|
2890
|
-
onClick: toggleToastOptions,
|
2891
|
-
size: "small",
|
2892
|
-
variant: "text",
|
2893
|
-
color: toastColorConfig
|
2894
|
-
}, stateOptions ? "Ver más" : "Ver menos", stateOptions ? /*#__PURE__*/React.createElement(KeyboardArrowDown, null) : /*#__PURE__*/React.createElement(KeyboardArrowUp, null))))), /*#__PURE__*/React.createElement(LinearProgress, {
|
2895
|
-
color: toastColorConfig,
|
2896
|
-
variant: "determinate",
|
2897
|
-
value: progressToast
|
2898
|
-
})));
|
2899
|
-
};
|
2900
|
-
|
2901
2750
|
function PageHeaderWrapper({
|
2902
2751
|
item,
|
2903
2752
|
color,
|
@@ -8453,4 +8302,4 @@ const useDynamicColor = url => {
|
|
8453
8302
|
};
|
8454
8303
|
};
|
8455
8304
|
|
8456
|
-
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,6 +1,6 @@
|
|
1
|
-
import { ReactNode } from
|
2
|
-
import { SxProps } from
|
3
|
-
export type DrawerPosition =
|
1
|
+
import { ReactNode } from 'react';
|
2
|
+
import { SxProps } from '@mui/material';
|
3
|
+
export type DrawerPosition = 'left' | 'right';
|
4
4
|
export interface DrawerComponentProperties {
|
5
5
|
title: string;
|
6
6
|
children: ReactNode;
|
@@ -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;
|