@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, 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
- };