@sinco/react 1.0.15-rc.31 → 1.0.15-rc.32

package/index.js

@@ -1,7 +1,8 @@
 import { createTheme } from '@mui/material/styles';
 import React, { useState, useEffect } from 'react';
-import { CheckCircleRounded, ErrorRounded, WarningRounded, InfoRounded, Close, KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material';
-import { Stack, Typography, Drawer, IconButton, AppBar, Toolbar, Box as Box$1, Divider, Button, LinearProgress, alpha } from '@mui/material';
+import { CheckCircleRounded, ErrorRounded, WarningRounded, InfoRounded } from '@mui/icons-material';
+import { Stack, Typography, Drawer, IconButton, AppBar, Toolbar, Box as Box$1, alpha } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -2657,10 +2658,10 @@ handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
 const borderStyles = {
   left: {
-    borderTopRightRadius: "4px"
+    borderTopRightRadius: '4px'
   },
   right: {
-    borderTopLeftRadius: "4px"
+    borderTopLeftRadius: '4px'
   }
 };
 const DrawerComponent = ({
@@ -2668,7 +2669,7 @@ const DrawerComponent = ({
   children,
   actions,
   showActions,
-  anchor: _anchor = "left",
+  anchor: _anchor = 'left',
   width,
   open,
   onClose,
@@ -2684,11 +2685,11 @@ const DrawerComponent = ({
     open: open,
     onClose: onClose,
     sx: {
-      "& .MuiBackdrop-root": {
-        backgroundColor: "#F0f0f099 !important",
-        backdropFilter: "blur(4px)"
+      '& .MuiBackdrop-root': {
+        backgroundColor: '#F0f0f099 !important',
+        backdropFilter: 'blur(4px)'
       },
-      "& .MuiDrawer-paper": Object.assign({
+      '& .MuiDrawer-paper': Object.assign({
         width: width
       }, paperSx)
     }
@@ -2707,7 +2708,7 @@ const DrawerComponent = ({
   }, title), /*#__PURE__*/React.createElement(IconButton, {
     onClick: onClose,
     size: "small"
-  }, /*#__PURE__*/React.createElement(Close, {
+  }, /*#__PURE__*/React.createElement(CloseIcon, {
     fontSize: "small"
   }))), /*#__PURE__*/React.createElement(Stack, {
     py: 1.5,
@@ -2746,158 +2747,6 @@ const FooterActionComponent = ({
   }), /*#__PURE__*/React.createElement(Box$1, null, labelChangeCounter), renderRightContent));
 };
 
-const useProgress = timeProgress => {
-  const [progress, setProgress] = useState(100);
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setProgress(prev => {
-        if (prev <= 0) {
-          clearInterval(interval);
-        }
-        return prev - 1;
-      });
-    }, timeProgress * 10);
-    return () => {
-      clearInterval(interval);
-    };
-  }, [timeProgress]);
-  return {
-    progressToast: progress
-  };
-};
-
-const ToastNotificationComponent = toast => {
-  const [stateOptions, setStateOptions] = useState(true);
-  const [stateToast, setStateToast] = useState(true);
-  const timeProgress = toast.time || 10;
-  const {
-    progressToast
-  } = useProgress(timeProgress);
-  const toastColorConfig = toast.type || "info";
-  const toastIconOption = {
-    success: /*#__PURE__*/React.createElement(CheckCircleRounded, null),
-    error: /*#__PURE__*/React.createElement(ErrorRounded, null),
-    warning: /*#__PURE__*/React.createElement(WarningRounded, null),
-    info: /*#__PURE__*/React.createElement(InfoRounded, null)
-  };
-  const ToastIconConfig = toastIconOption[toast.type || "info"];
-  const closeToast = () => {
-    setStateToast(false);
-  };
-  const toggleToastOptions = () => {
-    setStateOptions(prevShowOptions => !prevShowOptions);
-  };
-  useEffect(() => {
-    progressToast <= 0 && setStateToast(false);
-  }, [progressToast]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, stateToast && /*#__PURE__*/React.createElement(Stack, {
-    position: "fixed",
-    zIndex: 1400,
-    right: 16,
-    top: 16,
-    width: 370,
-    sx: {
-      boxShadow: theme => theme.shadows[8]
-    }
-  }, /*#__PURE__*/React.createElement(Box$1, {
-    padding: 1.5,
-    gap: 1.5,
-    display: "flex",
-    alignItems: "center",
-    sx: {
-      "&.color-error": {
-        backgroundColor: "#FEEBEE"
-      },
-      "&.color-info": {
-        backgroundColor: "#E1F5FE"
-      },
-      "&.color-warning": {
-        backgroundColor: "#FFF3E0"
-      },
-      "&.color-success": {
-        backgroundColor: "#E8F5E9"
-      }
-    },
-    className: `color-${toastColorConfig}`
-  }, /*#__PURE__*/React.createElement(Stack, {
-    p: 1,
-    gap: 1,
-    height: 20,
-    borderRadius: 50,
-    sx: {
-      "&.ripple-error": {
-        backgroundColor: "#D143431F"
-      },
-      "&.ripple-info": {
-        backgroundColor: "#2D9FC51F"
-      },
-      "&.ripple-warning": {
-        backgroundColor: "#FB85001F"
-      },
-      "&.ripple-success": {
-        backgroundColor: "#8FC93A1F"
-      }
-    },
-    className: `ripple-${toast.type || "info"}`
-  }, /*#__PURE__*/React.createElement(Stack, {
-    sx: {
-      "&.icon-color.color-info": {
-        color: theme => theme.palette.info.main
-      },
-      "&.icon-color.color-error": {
-        color: theme => theme.palette.error.main
-      },
-      "&.icon-color.color-warning": {
-        color: theme => theme.palette.warning.main
-      },
-      "&.icon-color.color-success": {
-        color: theme => theme.palette.success.main
-      }
-    },
-    className: `icon-color color-${toast.type || "info"}`
-  }, ToastIconConfig)), /*#__PURE__*/React.createElement(Divider, {
-    orientation: "vertical",
-    flexItem: true
-  }), /*#__PURE__*/React.createElement(Stack, {
-    width: 285
-  }, /*#__PURE__*/React.createElement(Stack, {
-    justifyContent: "space-between",
-    flexDirection: "row",
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "subtitle2",
-    color: "text.primary"
-  }, toast.title), /*#__PURE__*/React.createElement(IconButton, {
-    size: "small",
-    onClick: closeToast
-  }, /*#__PURE__*/React.createElement(Close, {
-    fontSize: "small"
-  }))), /*#__PURE__*/React.createElement(Stack, {
-    gap: 0.5
-  }, /*#__PURE__*/React.createElement(Typography, {
-    color: "text.primary",
-    variant: "body2"
-  }, toast.subtitle), !stateOptions && toast.dataOpt && toast.dataOpt.length > 0 && /*#__PURE__*/React.createElement(Stack, null, toast.dataOpt.map((element, i) => /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption",
-    key: i
-  }, "\u2022 ", element)))), /*#__PURE__*/React.createElement(Stack, {
-    justifyContent: "flex-end",
-    flexDirection: "row"
-  }, toast.actions && /*#__PURE__*/React.createElement(Stack, {
-    flexDirection: "row",
-    gap: 1
-  }, toast.actions), toast.seeMore && /*#__PURE__*/React.createElement(Button, {
-    onClick: toggleToastOptions,
-    size: "small",
-    variant: "text",
-    color: toastColorConfig
-  }, stateOptions ? "Ver más" : "Ver menos", stateOptions ? /*#__PURE__*/React.createElement(KeyboardArrowDown, null) : /*#__PURE__*/React.createElement(KeyboardArrowUp, null))))), /*#__PURE__*/React.createElement(LinearProgress, {
-    color: toastColorConfig,
-    variant: "determinate",
-    value: progressToast
-  })));
-};
-
 function PageHeaderWrapper({
   item,
   color,
@@ -8453,4 +8302,4 @@ const useDynamicColor = url => {
   };
 };
 
-export { AdproSincoTheme, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent, PageHeaderComponent, PageHeaderWrapper, SincoTheme, ToastNotificationComponent, useDynamicColor };
+export { AdproSincoTheme, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent, PageHeaderComponent, PageHeaderWrapper, SincoTheme, useDynamicColor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sinco/react",
-  "version": "1.0.15-rc.31",
+  "version": "1.0.15-rc.32",
   "description": "package for the configuration of mui react sinco",
   "private": false,
   "license": "MIT",

package/src/lib/Components/Drawer.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from "react";
-import { SxProps } from "@mui/material";
-export type DrawerPosition = "left" | "right";
+import { ReactNode } from 'react';
+import { SxProps } from '@mui/material';
+export type DrawerPosition = 'left' | 'right';
 export interface DrawerComponentProperties {
     title: string;
     children: ReactNode;

package/src/lib/Components/index.d.ts

@@ -1,5 +1,4 @@
-export * from "./EmptyState";
-export * from "./Drawer";
-export * from "./FooterAction";
-export * from "./ToastNotification";
-export * from "./PageHeader";
+export * from './EmptyState';
+export * from './Drawer';
+export * from './FooterAction';
+export * from './PageHeader';

package/src/lib/Components/ToastNotification.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-export type toastType = "success" | "error" | "warning" | "info";
-export interface ToastBaseProperties {
-    type?: toastType;
-    subtitle?: string;
-    title: string;
-    time?: number | any;
-    dataOpt?: string[];
-    actions?: React.ReactNode;
-    seeMore?: boolean;
-}
-export declare const ToastNotificationComponent: (toast: ToastBaseProperties) => JSX.Element;

package/src/lib/Hooks/useProgress.d.ts

@@ -1,3 +0,0 @@
-export declare const useProgress: (timeProgress: number) => {
-    progressToast: number;
-};