siam-ui-utils 2.2.19 → 2.2.20

package/index.d.ts

@@ -88,4 +88,7 @@ declare module 'siam-ui-utils' {
 
   //VIEW LAYOUT
   export function ViewLayout(props);
+
+  //TIMER
+  export function Timer(props);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "siam-ui-utils",
-  "version": "2.2.19",
+  "version": "2.2.20",
   "keywords": [
     "ampf-react",
     "ampf-utils",

package/src/App.jsx

@@ -13,6 +13,7 @@ import './assets/css/vendor/bootstrap.min.css';
 import { WhereByRoom } from './where-by-room';
 import { ViewLayout } from './view-layout';
 import { CopyLink } from './copy-link';
+import { Timer } from './timer';
 
 const slots = [
   {
@@ -141,6 +142,16 @@ const App = () => {
             <ViewLayout slots={slots} />
           </AccordionBody>
         </AccordionItem>
+        <AccordionItem>
+          <AccordionHeader targetId="8">Timer</AccordionHeader>
+          <AccordionBody accordionId="8">
+            <Timer
+              initialMinutes={2}
+              active={true}
+              style={{ color: 'green' }}
+            />
+          </AccordionBody>
+        </AccordionItem>
       </Accordion>
     </div>
   );

package/src/{archivos-adjuntos → dropzone-uploader}/index.jsx

@@ -1,6 +1,5 @@
 import { getDroppedOrSelectedFiles } from 'html5-file-selector';
 import { useEffect, useState } from 'react';
-import '../dropzone/styles.css';
 import Dropzone from '../dropzone/Dropzone';
 import '../dropzone/styles.css';
 import { IconButtonSvg, pdfImage } from '../iconos';
@@ -88,7 +87,7 @@ export const DropzoneUploader = ({
         <p>{(meta.size / 1024).toFixed(2)} .Kb</p>
         <button
           onClick={remove}
-          className="dropzone-upload-delete-btn simple-icon-trash"
+          className="dropzone-upload-delete-btn icon-trash"
         ></button>
       </div>
     );

package/src/index.js

@@ -1,5 +1,5 @@
-export * from './archivos-adjuntos';
-export * from './archivos-adjuntos/dropzone-uploader-dni-digital';
+export * from './dropzone-uploader';
+export * from './dropzone-uploader/dropzone-uploader-dni-digital';
 export * from './bridges';
 export * from './CustomBootstrap';
 export * from './custom-input';
@@ -9,3 +9,4 @@ export * as IntlMessages from './IntlMessages';
 export * from './where-by-room';
 export * from './copy-link';
 export * from './view-layout';
+export * from './timer';

package/src/timer/index.jsx

@@ -0,0 +1,62 @@
+import { useEffect, useState, useRef } from 'react';
+import './styles.scss';
+
+export const formatTiempo = (ms) => {
+  if (ms == null) return '--:--';
+  const absMs = Math.abs(ms);
+  const totalSec = Math.floor(absMs / 1000);
+  const min = Math.floor(totalSec / 60);
+  const sec = totalSec % 60;
+  const formatted = `${min.toString().padStart(2, '0')}:${sec
+    .toString()
+    .padStart(2, '0')}`;
+  return ms < 0 ? `-${formatted}` : formatted;
+};
+
+const getTimerColorClass = (ms, maxTime) => {
+  if (!maxTime) return '';
+  const percent = ms / maxTime;
+  if (percent > 0.33) return 'timer-green';
+  if (percent > 0.15) return 'timer-yellow';
+  if (percent > 0) return 'timer-red';
+  if (ms === 0) return 'timer-out';
+  if (ms < 0) return 'timer-over';
+  return '';
+};
+
+const Timer = ({
+  initialMinutes = 0,
+  icon = true,
+  className = '',
+  active = true,
+  style = {},
+}) => {
+  const initialMs = initialMinutes * 60 * 1000;
+  const [ms, setMs] = useState(initialMs);
+  const intervalRef = useRef();
+
+  useEffect(() => {
+    if (!active) return;
+    intervalRef.current = setInterval(() => {
+      setMs((prev) => prev - 1000);
+    }, 1000);
+    return () => clearInterval(intervalRef.current);
+  }, [active]);
+
+  useEffect(() => {
+    setMs(initialMs);
+  }, [initialMs]);
+
+  const timerColorClass = getTimerColorClass(ms, initialMs);
+
+  return (
+    <span
+      className={`av-video-timer timer ${timerColorClass} ${className}`}
+      style={style}
+    >
+      {icon && <i className="icon-clock timer" />}
+      {formatTiempo(ms)}
+    </span>
+  );
+};
+export { Timer };

package/src/timer/styles.scss

@@ -0,0 +1,54 @@
+.av-video-timer {
+  color: inherit;
+  margin: 0 12px;
+  flex: 1;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  font-weight: bold;
+  align-items: center;
+  font-size: 1.3em;
+  width: 100%;
+  margin: 8px 0;
+}
+.timer {
+  font-size: clamp(5px, 2vw, 20px);
+  margin-right: 4px;
+}
+.timer-green {
+  color: #28a745;
+}
+.timer-yellow {
+  color: #ffc107;
+}
+.timer-red {
+  color: #bd0300;
+}
+
+@keyframes vibrate {
+  0% {
+    transform: translateX(0);
+  }
+  20% {
+    transform: translateX(-3px);
+  }
+  40% {
+    transform: translateX(3px);
+  }
+  60% {
+    transform: translateX(-3px);
+  }
+  80% {
+    transform: translateX(3px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+.timer-out {
+  color: #000000;
+  animation: vibrate 0.3s linear infinite;
+}
+.timer-over {
+  color: #c00805;
+}