plataforma-fundacao-componentes 2.21.6 → 2.21.7

package/dist/components/carouselTouchFrendly/CarouselTouchFrendly.d.ts

@@ -3,6 +3,7 @@ import './CarouselTouchFrendly.scss';
 interface CarouselTouchFrendlyProps {
     className?: string;
     slides?: React.ReactNode[];
+    timeout?: number;
 }
 declare function CarouselTouchFrendly(props: CarouselTouchFrendlyProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof CarouselTouchFrendly>;

package/dist/hooks/useControlledTimer/useControlledTimer.d.ts

@@ -0,0 +1,6 @@
+interface useControlledTimerProps {
+    timeout?: number;
+    callbackTrigger: () => void;
+}
+export default function useControlledTimer(props: useControlledTimerProps): (action: 'play' | 'pause' | 'restart' | 'stop') => void;
+export {};

package/dist/hooks/useControlledTimer/useControlledTimer.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import useControlledTimer from './useControlledTimer';
+declare const _default: {
+    title: string;
+    component: typeof useControlledTimer;
+};
+export default _default;
+export declare const FirstExample: () => JSX.Element;

package/dist/index.css

@@ -2769,12 +2769,14 @@ h5 {
   margin: 0;
   width: 100%;
   height: 20vw;
+  max-height: 320px;
   border-radius: 8px; }
   .component-banner.clickable {
     cursor: pointer; }
   @media screen and (max-width: 767.98px) {
     .component-banner {
       height: 80vw !important;
+      max-height: 80vw;
       flex-direction: column; }
       .component-banner .component-banner-side {
         width: 100% !important; }

package/dist/index.d.ts

@@ -81,6 +81,7 @@ import VideoModal from './components/videoModal/VideoModal';
 import VideoPlayer from './components/videoPlayer/VideoPlayer';
 import useCallbackedState from './hooks/useCallbackedState/useCallbackedState';
 import useCarouselBehaviour from './hooks/useCarouselBehaviour/useCarouselBehaviour';
+import useControlledTimer from './hooks/useControlledTimer/useControlledTimer';
 import useDraggableContainer from './hooks/useDraggableContainer/useDraggableContainer';
 import useDropOpened from './hooks/useDropOpened/useDropOpened';
 import useModalManager from './hooks/useModalManager/useModalManager';
@@ -103,4 +104,4 @@ export * from './libraries/RadioButtonTheme';
 export * from './libraries/SicrediLogoThemes';
 export * from './libraries/Toast';
 export * from './libraries/Tooltips';
-export { Accordion, AdvancedSemiHeader, AssembleiaItem, AssembleiaPauta, Aconteceu, AnimatedLink, Banner, BannerAssembleia, BannerPesquisaCpfCnpj, BigBlockButton, BlocoDeNotas, BreadCrumb, Button, ButtonFileUpload, BlocoMinhasAssembleias, BottomNavigation, Card, Carousel, CarouselPersona, CarouselTouchFrendly, Checkbox, Col, Collapse, Container, DatePicker, Doughnut, DoughnutSquare, DropdownItem, DropdownMenu, EditableVideoItem, ElementPaginator, Etapas, Etiqueta, FileLoader, FileUpload, FooterSicredi, FullHeightContainer, Header, HeaderSeparator, HeaderSearchField, IconButton, IconButtonWithLabel, Information, Input, InputArea, ItemDropdownDownload, InformativoAssembleiasComImagem, InformativoAssembleiasComVideo, Menu, MenuItem, Modal, ModalManager, ModulosTitle, MoneyByMonth, MoneyMonthLineChart, NotaEdit, Notification, PageSubTitle, PageTitle, Paginator, PreviaVideo, ProgressBar, RadioButton, Row, SearchBlocoDeNotas, Select, Switch, Table, TypedTable, TableFileNameAndAction, TableActions, TableWithOverflow, TextEditor, LeftCheckboxWithLabel, ActionsColumn, Toast, ToastManager, Tooltip, TooltipManager, TopLoader, VideoItem, VideoPlayer, VideoModal, useCallbackedState, useCarouselBehaviour, useDraggableContainer, useDropOpened, useModalManager, useProgressiveCount, useTimeElapsed, useToastManager, useValidatedState };
+export { Accordion, AdvancedSemiHeader, AssembleiaItem, AssembleiaPauta, Aconteceu, AnimatedLink, Banner, BannerAssembleia, BannerPesquisaCpfCnpj, BigBlockButton, BlocoDeNotas, BreadCrumb, Button, ButtonFileUpload, BlocoMinhasAssembleias, BottomNavigation, Card, Carousel, CarouselPersona, CarouselTouchFrendly, Checkbox, Col, Collapse, Container, DatePicker, Doughnut, DoughnutSquare, DropdownItem, DropdownMenu, EditableVideoItem, ElementPaginator, Etapas, Etiqueta, FileLoader, FileUpload, FooterSicredi, FullHeightContainer, Header, HeaderSeparator, HeaderSearchField, IconButton, IconButtonWithLabel, Information, Input, InputArea, ItemDropdownDownload, InformativoAssembleiasComImagem, InformativoAssembleiasComVideo, Menu, MenuItem, Modal, ModalManager, ModulosTitle, MoneyByMonth, MoneyMonthLineChart, NotaEdit, Notification, PageSubTitle, PageTitle, Paginator, PreviaVideo, ProgressBar, RadioButton, Row, SearchBlocoDeNotas, Select, Switch, Table, TypedTable, TableFileNameAndAction, TableActions, TableWithOverflow, TextEditor, LeftCheckboxWithLabel, ActionsColumn, Toast, ToastManager, Tooltip, TooltipManager, TopLoader, VideoItem, VideoPlayer, VideoModal, useCallbackedState, useCarouselBehaviour, useControlledTimer, useDraggableContainer, useDropOpened, useModalManager, useProgressiveCount, useTimeElapsed, useToastManager, useValidatedState };

package/dist/index.js

@@ -2270,6 +2270,72 @@ function CarouselPersona(props) {
 
 var CarouselPersona$1 = React.memo(CarouselPersona);
 
+function useControlledTimer(props) {
+  var timeoutRef = React.useRef(undefined);
+  var timeLeft = React.useRef(0);
+  var endDate = React.useRef(0);
+  var repeat = React.useCallback(function (timeout) {
+    if (timeout === void 0) {
+      timeout = props.timeout;
+    }
+
+    endDate.current = new Date().getTime() + timeout;
+    timeoutRef.current = setTimeout(function () {
+      props.callbackTrigger();
+      repeat(props.timeout);
+    }, timeout);
+  }, [props]);
+  var dispatchAction = React.useCallback(function (action) {
+    switch (action) {
+      case 'play':
+        if (timeoutRef.current) {
+          throw new Error('Timer já está em andamento');
+        }
+
+        repeat(timeLeft.current > 200 ? timeLeft.current : props.timeout);
+        timeLeft.current = 0;
+        break;
+
+      case 'pause':
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = undefined;
+        var now = new Date().getTime();
+
+        if (endDate.current && endDate.current > now) {
+          timeLeft.current = endDate.current - now;
+        }
+
+        break;
+
+      case 'restart':
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = undefined;
+        endDate.current = 0;
+        repeat(props.timeout);
+        break;
+
+      default:
+      case 'stop':
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = undefined;
+        endDate.current = 0;
+    }
+  }, [props.timeout, repeat]);
+  React.useLayoutEffect(function () {
+    if (props.timeout) {
+      dispatchAction('play');
+    }
+
+    return function () {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = undefined;
+      }
+    };
+  }, []);
+  return dispatchAction;
+}
+
 var rootClassName$I = 'component-carousel-touch-frendly';
 
 function CarouselTouchFrendly(props) {
@@ -2282,6 +2348,9 @@ function CarouselTouchFrendly(props) {
       atual = _useState2[0],
       setAtual = _useState2[1];
 
+  var atualRef = React.useRef(atual);
+  atualRef.current = atual;
+
   var _useCarouselBehaviour = useCarouselBehaviour({
     atual: atual,
     setAtual: setAtual,
@@ -2295,14 +2364,27 @@ function CarouselTouchFrendly(props) {
       CarouselBehaviour = _useCarouselBehaviour[0],
       handleChange = _useCarouselBehaviour[1];
 
+  var dispatchActionsToTimer = useControlledTimer({
+    timeout: props.timeout ? props.timeout : 0,
+    callbackTrigger: function callbackTrigger() {
+      handleChange(atualRef.current < props.slides.length - 1 ? atualRef.current + 1 : 0, false);
+    }
+  });
   return React__default.createElement("div", {
     id: id,
     className: getMergedClassNames([rootClassName$I, props.className])
   }, React__default.createElement("div", {
-    className: rootClassName$I + "-outside-content"
+    className: rootClassName$I + "-outside-content",
+    onMouseEnter: function onMouseEnter() {
+      dispatchActionsToTimer('pause');
+    },
+    onMouseLeave: function onMouseLeave() {
+      dispatchActionsToTimer('play');
+    }
   }, props.slides.length > 1 && React__default.createElement("div", {
     className: rootClassName$I + "-control prev",
     onClick: function onClick() {
+      dispatchActionsToTimer('stop');
       handleChange(atual > 0 ? atual - 1 : props.slides.length - 1, false);
     }
   }, React__default.createElement("div", {
@@ -2312,6 +2394,7 @@ function CarouselTouchFrendly(props) {
   })), props.slides.length > 1 && React__default.createElement("div", {
     className: rootClassName$I + "-control next",
     onClick: function onClick() {
+      dispatchActionsToTimer('stop');
       handleChange(atual < props.slides.length - 1 ? atual + 1 : 0, false);
     }
   }, React__default.createElement("div", {
@@ -2324,6 +2407,7 @@ function CarouselTouchFrendly(props) {
     return React__default.createElement("div", {
       key: index,
       onClick: function onClick() {
+        dispatchActionsToTimer('restart');
         handleChange(index, false);
       },
       className: getMergedClassNames([rootClassName$I + "-ball", index === atual ? 'atual' : ''])
@@ -11412,23 +11496,27 @@ function useToastManager(props) {
       arrayOfToast = _useState[0],
       setArrayOfToast = _useState[1];
 
+  var toastsRef = React.useRef(arrayOfToast);
+  toastsRef.current = arrayOfToast;
   var verticalPosition = (props === null || props === void 0 ? void 0 : props.verticalPosition) || 'top';
   var horizontalPosition = (props === null || props === void 0 ? void 0 : props.horizontalPosition) || 'right';
   var max = (props === null || props === void 0 ? void 0 : props.max) || undefined;
   var reverse = (props === null || props === void 0 ? void 0 : props.reverse) || false;
   var animateSize = (props === null || props === void 0 ? void 0 : props.animateSize) || false;
-  var closeById = React.useCallback(function (id) {
-    var arr = arrayOfToast.filter(function (a) {
+
+  var closeById = function closeById(id) {
+    var arr = toastsRef.current.filter(function (a) {
       return a.id !== id;
     });
     setArrayOfToast(arr);
-  }, [arrayOfToast]);
-  var showToast = React.useCallback(function (toast) {
+  };
+
+  var showToast = function showToast(toast) {
     var id = "toaster-" + count$1;
-    var arr = arrayOfToast.slice();
+    var arr = toastsRef.current.slice();
     var obj = {};
 
-    if (toast.prevent && arrayOfToast.some(function (t) {
+    if (toast.prevent && arr.some(function (t) {
       return t.label === toast.label;
     })) {
       return;
@@ -11438,12 +11526,13 @@ function useToastManager(props) {
       id: id
     }, toast);
 
-    if (!max || arrayOfToast.length < max) {
+    if (!max || arr.length < max) {
       arr.push(obj);
       setArrayOfToast(arr);
       count$1++;
     }
-  }, [max, arrayOfToast]);
+  };
+
   var clearToast = React.useCallback(function () {
     setArrayOfToast([]);
   }, []);
@@ -11856,6 +11945,7 @@ exports.VideoPlayer = VideoPlayer;
 exports.getStatusClassName = getStatusClassName;
 exports.useCallbackedState = useCallbackedState;
 exports.useCarouselBehaviour = useCarouselBehaviour;
+exports.useControlledTimer = useControlledTimer;
 exports.useDraggableContainer = useDraggableContainer;
 exports.useDropOpened = useDropOpened;
 exports.useModalManager = useModalManager;