@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, Close, KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material';
4
- import { Stack, Typography, Drawer, IconButton, AppBar, Toolbar, Box as Box$1, Divider, Button, LinearProgress, alpha } from '@mui/material';
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, ToastNotificationComponent, useDynamicColor };
8305
+ export { AdproSincoTheme, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent, PageHeaderComponent, PageHeaderWrapper, SincoTheme, useDynamicColor };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sinco/react",
3
- "version": "1.0.15-rc.30",
3
+ "version": "1.0.15-rc.32",
4
4
  "description": "package for the configuration of mui react sinco",
5
5
  "private": false,
6
6
  "license": "MIT",
@@ -1,5 +1,4 @@
1
- export * from "./EmptyState";
2
- export * from "./Drawer";
3
- export * from "./FooterAction";
4
- export * from "./ToastNotification";
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;
@@ -1,3 +0,0 @@
1
- export declare const useProgress: (timeProgress: number) => {
2
- progressToast: number;
3
- };