siam-ui-utils 2.2.19 → 2.2.21

package/index.d.ts

@@ -9,6 +9,9 @@ declare module 'siam-ui-utils' {
   //CUSTOMSELECTINPUT
   export function CustomSelectInput(props);
 
+  //CUSTOMSELECT
+  export function CustomSelect(props);
+
   //CUSTOMINPUTCHECKBOX
   export function CustomInputCheckbox(props);
 
@@ -88,4 +91,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.21",
   "keywords": [
     "ampf-react",
     "ampf-utils",
@@ -35,6 +35,7 @@
     "react-router-dom": "^6.26.2",
     "react-select": "^5.8.0",
     "reactstrap": "^9.2.2",
+    "react-tagsinput": "^3.20.3",
     "siam-utils": "^1.1.4",
     "source-map-loader": "^5.0.0",
     "styled-components": "^6.1.12",

package/src/App.jsx

@@ -5,30 +5,37 @@ import {
   AccordionHeader,
   AccordionItem,
 } from 'reactstrap';
-import { TomarFoto, DropzoneUploader, DropzoneUploaderDniDigital } from './';
-import { CustomInputRadio, CustomInputCheckbox } from './custom-input';
-import './index.css';
+import {
+  CopyLinkView,
+  CustomInputsView,
+  CustomSelectView,
+  DropzoneUploaderDniDigitalView,
+  DropzoneUploaderFirmaDigitalView,
+  DropzoneUploaderView,
+  TimerView,
+  VideoCallView,
+  ViewLayoutView,
+} from './test-resources';
 import './App.css';
 import './assets/css/vendor/bootstrap.min.css';
-import { WhereByRoom } from './where-by-room';
-import { ViewLayout } from './view-layout';
-import { CopyLink } from './copy-link';
+import './index.css';
 
-const slots = [
+const views = [
+  { title: 'CopyLink', component: <CopyLinkView /> },
+  { title: 'CustomInputs', component: <CustomInputsView /> },
+  { title: 'CustomSelect', component: <CustomSelectView /> },
+  {
+    title: 'DropzoneDniDigital',
+    component: <DropzoneUploaderDniDigitalView />,
+  },
   {
-    slot: 1,
-    x: 3,
-    y: 3,
-    w: 2,
-    h: 2,
-    legend: 'Prueba',
-    direction: 'column',
-    contentSize: 'medium',
-    align: 'stretch',
-    justify: 'flex-start',
-    component: null,
-    showBorder: true,
+    title: 'DropZoneFirmaDigital',
+    component: <DropzoneUploaderFirmaDigitalView />,
   },
+  { title: 'DropzoneUploader', component: <DropzoneUploaderView /> },
+  { title: 'Timer', component: <TimerView /> },
+  { title: 'VideoCall', component: <VideoCallView /> },
+  { title: 'ViewLayoutGenerico', component: <ViewLayoutView /> },
 ];
 
 const App = () => {
@@ -41,108 +48,18 @@ const App = () => {
     }
   };
 
-  const handleChecked = (item, isSelected) => {
-    console.log('Item checked:', item, 'Selected:', isSelected);
-  };
-
-  const handleChangeRadio = (ID) => {
-    console.log('ID :', ID);
-  };
-
   return (
-    <div>
-      <Accordion open={open} toggle={toggle}>
-        <AccordionItem>
-          <AccordionHeader targetId="1">Tomar Foto</AccordionHeader>
-          <AccordionBody accordionId="1">
-            <TomarFoto isMobile={true} />
-            <DropzoneUploader
-              totalFiles={4}
-              onChangeFiles={() => alert('onChange')}
-              maxFiles={3}
-              nameFileLabel="file"
-            />
-          </AccordionBody>
-        </AccordionItem>
-        <AccordionItem>
-          <AccordionHeader targetId="2">
-            DropzoneUploader Firma Digital
-          </AccordionHeader>
-          <AccordionBody accordionId="2">
-            <DropzoneUploader
-              totalFiles={0}
-              onChangeFiles={() => {
-                console.log('onChange');
-              }}
-              maxFiles={7}
-              nameFileLabel="Subir archivos"
-              capture="environment"
-              onFilesSelectedSelfie
-            />
-          </AccordionBody>
-        </AccordionItem>
-        <AccordionItem>
-          <AccordionHeader targetId="3">
-            DropzoneUploader DNI Digital
-          </AccordionHeader>
-          <AccordionBody accordionId="3">
-            <DropzoneUploaderDniDigital
-              totalFiles={0}
-              maxFiles={2}
-              onChangeFiles={() => {
-                console.log('onChange');
-              }}
-              classNames="custom-dropzone-uploader-dni-digital"
-            />
-          </AccordionBody>
-        </AccordionItem>
-        <AccordionItem>
-          <AccordionHeader targetId="4">Video Call Room</AccordionHeader>
-          <AccordionBody accordionId="4">
-            <WhereByRoom
-              src="https://whereby.com/test-ampf-room"
-              title="Videollamada de ejemplo"
-            />
-          </AccordionBody>
-        </AccordionItem>
-        <AccordionItem>
-          <AccordionHeader targetId="5">Custom Inputs</AccordionHeader>
-          <AccordionBody accordionId="5">
-            <CustomInputCheckbox
-              className="itemCheck m-0"
-              id={1}
-              onChange={(e) => handleChecked(1, e.target.checked)}
-              label={<span className="custom-checkbox">Checkbox 1</span>}
-            />
-            <CustomInputRadio
-              name="radioTest"
-              label="1"
-              id="1"
-              defaultChecked={true}
-              onChange={handleChangeRadio}
-            />
-            <CustomInputRadio
-              name="radioTest"
-              label="2"
-              id="2"
-              onChange={handleChangeRadio}
-            />
-          </AccordionBody>
-        </AccordionItem>
-        <AccordionItem>
-          <AccordionHeader targetId="6">Copy-Link</AccordionHeader>
-          <AccordionBody accordionId="6">
-            <CopyLink link="https://linkdepruebaparaelcopylink.com" />
-          </AccordionBody>
-        </AccordionItem>
-        <AccordionItem>
-          <AccordionHeader targetId="7">Reusable ViewLayout</AccordionHeader>
-          <AccordionBody accordionId="7">
-            <ViewLayout slots={slots} />
-          </AccordionBody>
-        </AccordionItem>
-      </Accordion>
-    </div>
+    <Accordion open={open} toggle={toggle}>
+      {views.map((view, index) => {
+        const { title, component: vista } = view;
+        return (
+          <AccordionItem key={index}>
+            <AccordionHeader targetId={`${index + 1}`}>{title}</AccordionHeader>
+            <AccordionBody accordionId={`${index + 1}`}>{vista}</AccordionBody>
+          </AccordionItem>
+        );
+      })}
+    </Accordion>
   );
 };
 

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,11 +1,13 @@
-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';
+export * from './select';
 export * from './CustomSelectInput';
 export * from './tomar-foto';
 export * as IntlMessages from './IntlMessages';
 export * from './where-by-room';
 export * from './copy-link';
 export * from './view-layout';
+export * from './timer';

package/src/select/constants.js

@@ -0,0 +1,4 @@
+export const LABELS = {
+  SIN_DATOS: "SIN DATOS",
+  SELECCIONE: "SELECCIONE...",
+};

package/src/select/index.tsx

@@ -0,0 +1,147 @@
+import React, { useEffect, useState } from 'react';
+import Select from 'react-select';
+import { Label } from 'reactstrap';
+import CustomSelectInput from '../CustomSelectInput';
+import { LABELS } from './constants';
+import 'react-tagsinput/react-tagsinput.css';
+
+interface ICustomStylesOption {
+  fieldMatch: string;
+  valueMatch: any;
+}
+interface IOption {
+  label: string;
+  value: any;
+  fields?: any;
+}
+interface IOption {
+  label: string;
+  value: any;
+  fields?: any;
+}
+interface Props {
+  label: string;
+  tabIndex: number;
+  options: [IOption];
+  onChange: any;
+  selectedValue: any;
+  firstElement?: IOption; // no ingresar null como VALUE del elemento, setear '' ya que lo toma como que no se selecciono nada
+  newItem?: IOption;
+  placeholder?: string;
+  disabled?: boolean;
+  customStylesOption?: ICustomStylesOption;
+}
+
+const {SIN_DATOS, SELECCIONE}=LABELS
+
+const CustomSelect: React.FC<Props> = (props: Props) => {
+  const [firstElement] = useState(props.firstElement);
+  const [newItem] = useState(props.newItem);
+  const [selectedIoption, setIoption] = useState({});
+  const [customStylesOption] = useState(props.customStylesOption);
+  const [customStyles, setCustomStyles] = useState({});
+
+  // agrega items
+  useEffect(() => {
+    if (newItem) {
+      props.options.push(newItem);
+    }
+  }, [newItem, props.options]);
+
+  // Seleccion del 1er item.
+  useEffect(() => {
+    const { options = [] } = props;
+    if (firstElement && Number(options?.length) > 1) {
+      const propIOption = options.filter((item) => item === firstElement);
+
+      if (propIOption?.length === 0) {
+        props.options.unshift(firstElement);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [firstElement, props.options]);
+
+  // selecciona un valor seteado dentro de la coleccion
+  useEffect(() => {
+    const { selectedValue } = props;
+    const errorProp = { value: null };
+
+    if (
+      selectedValue ||
+      (firstElement && firstElement.value === selectedValue)
+    ) {
+      const propIOption = props.options.filter(({ value }) => {
+        return JSON.stringify(value) === JSON.stringify(selectedValue);
+      });
+
+      if (propIOption[0]) {
+        setIoption(propIOption[0]);
+        if (!Object.getOwnPropertyDescriptor(selectedIoption, 'label')) {
+          props.onChange(propIOption[0]);
+        }
+      } else {
+        setIoption(errorProp);
+        props.onChange(errorProp);
+      }
+    } else if (props.options.length > 0) {
+      setIoption(errorProp);
+      props.onChange(errorProp);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.selectedValue, props.options, firstElement]);
+
+  useEffect(() => {
+    if (customStylesOption) {
+      const stylesOption = {
+        option: (base: any, { data }: any) => {
+          return {
+            ...base,
+            color:
+              data.fields &&
+              data.fields[customStylesOption.fieldMatch] ===
+                customStylesOption.valueMatch
+                ? 'blue !important'
+                : '',
+            fontWeight:
+              data.fields &&
+              data.fields[customStylesOption.fieldMatch] ===
+                customStylesOption.valueMatch
+                ? 'bold'
+                : '',
+          };
+        },
+      };
+      setCustomStyles(stylesOption);
+    }
+  }, [customStylesOption]);
+
+  return (
+    <>
+      {props.label && props.label !== '' && (
+        <Label className="mb-0">{props.label}:</Label>
+      )}
+      <Select
+        {...props}
+        components={{ Input: CustomSelectInput }}
+        className="react-select"
+        classNamePrefix="react-select"
+        name="form-field-name"
+        value={
+          Object.getOwnPropertyDescriptor(selectedIoption, 'label')
+            ? selectedIoption
+            : ''
+        }
+        onChange={props.onChange}
+        options={props.options}
+        placeholder={
+          Number(props.options.length) === 0
+            ? SIN_DATOS
+            : props.placeholder || SELECCIONE
+        }
+        isDisabled={props.disabled}
+        styles={customStyles}
+      />
+    </>
+  );
+};
+export default CustomSelect;

package/src/test-resources.jsx

@@ -0,0 +1,145 @@
+import { DropzoneUploader, DropzoneUploaderDniDigital, TomarFoto } from '.';
+import { CopyLink } from './copy-link';
+import { CustomInputCheckbox, CustomInputRadio } from './custom-input';
+import CustomSelect from './select';
+import { Timer } from './timer';
+import { ViewLayout } from './view-layout';
+import { WhereByRoom } from './where-by-room';
+import './assets/css/vendor/bootstrap.min.css';
+import './index.css';
+import './App.css';
+import { useState } from 'react';
+
+const slots = [
+  {
+    slot: 1,
+    x: 3,
+    y: 3,
+    w: 2,
+    h: 2,
+    legend: 'Prueba',
+    direction: 'column',
+    contentSize: 'medium',
+    align: 'stretch',
+    justify: 'flex-start',
+    component: null,
+    showBorder: true,
+  },
+];
+
+export const DropzoneUploaderView = () => (
+  <>
+    <TomarFoto isMobile={true} />
+    <DropzoneUploader
+      totalFiles={4}
+      onChangeFiles={() => alert('onChange')}
+      maxFiles={3}
+      nameFileLabel="file"
+    />
+  </>
+);
+
+export const DropzoneUploaderFirmaDigitalView = () => (
+  <DropzoneUploader
+    totalFiles={0}
+    onChangeFiles={() => {
+      console.log('onChange');
+    }}
+    maxFiles={7}
+    nameFileLabel="Subir archivos"
+    capture="environment"
+    onFilesSelectedSelfie
+  />
+);
+
+export const DropzoneUploaderDniDigitalView = () => (
+  <DropzoneUploaderDniDigital
+    totalFiles={0}
+    onChangeFiles={() => {
+      console.log('onChange');
+    }}
+    maxFiles={7}
+    nameFileLabel="Subir archivos"
+    capture="environment"
+    onFilesSelectedSelfie
+  />
+);
+
+export const VideoCallView = () => (
+  <WhereByRoom
+    src="https://whereby.com/test-ampf-room"
+    title="Videollamada de ejemplo"
+  />
+);
+
+export const CustomInputsView = () => {
+  const handleChecked = (item, isSelected) => {
+    console.log('Item checked:', item, 'Selected:', isSelected);
+  };
+
+  const handleChangeRadio = (ID) => {
+    console.log('ID :', ID);
+  };
+  return (
+    <>
+      <CustomInputCheckbox
+        className="itemCheck m-0"
+        id={1}
+        onChange={(e) => handleChecked(1, e.target.checked)}
+        label={<span className="custom-checkbox">Checkbox 1</span>}
+      />
+      <CustomInputRadio
+        name="radioTest"
+        label="1"
+        id="1"
+        defaultChecked={true}
+        onChange={handleChangeRadio}
+      />
+      <CustomInputRadio
+        name="radioTest"
+        label="2"
+        id="2"
+        onChange={handleChangeRadio}
+      />
+    </>
+  );
+};
+
+export const CopyLinkView = () => (
+  <CopyLink link="https://linkdepruebaparaelcopylink.com" />
+);
+
+export const ViewLayoutView = () => <ViewLayout slots={slots} />;
+
+export const TimerView = () => (
+  <Timer initialMinutes={2} active={true} style={{ color: 'green' }} />
+);
+
+export const CustomSelectView = () => {
+  const motivosBaja = [
+    {
+      label: 'MAL SERVICIO',
+      value: 'MSR',
+    },
+    {
+      label: 'AUMENTO DE CUOTA',
+      value: 'ADC',
+    },
+  ];
+  const [motivoBajaSelected, setMotivoBajaSelected] = useState({});
+
+  const handleMotivoSelected = (e) => {
+    setMotivoBajaSelected(e.value);
+  };
+
+  return (
+    <CustomSelect
+      tabIndex={0}
+      options={motivosBaja}
+      label="Seleccione una opción"
+      onChange={handleMotivoSelected}
+      placeholder="Seleccione..."
+      selectedValue={motivoBajaSelected}
+    />
+  );
+};

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;
+}