siam-ui-utils 2.2.25 → 2.2.27

package/src/iconos/icon-button-svg.jsx

@@ -1,50 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { withTheme } from 'styled-components';
-import { Icon } from './styled-icon';
-
-const useSvgToReactEncoded = (svg) => {
-  const svgWrapperRef = useRef();
-  useEffect(() => {
-    svgWrapperRef.current.innerHTML = svg;
-  }, [svg]);
-
-  return svgWrapperRef;
-};
-
-const IconButtonSvg = (props) => {
-  const {
-    sublabel = '',
-    onClick = () => {
-      undefined;
-    },
-    onTouchStart = () => {
-      undefined;
-    },
-    svg,
-    svgOver,
-    height = '3rem',
-    width = '3rem',
-    title,
-  } = props || {};
-  const [svgActive, setSvgActive] = useState(svg);
-  const svgWrapperRef = useSvgToReactEncoded(svgActive);
-
-  return (
-    <Icon
-      title={title}
-      display={sublabel !== '' ? 'block' : 'none'}
-      onClick={onClick}
-      onTouchStart={onTouchStart}
-      onMouseOver={() => setSvgActive(svgOver || svg)}
-      onMouseOut={() => setSvgActive(svg)}
-      width={width}
-      height={height}
-    >
-      <div ref={svgWrapperRef} />
-      <label>{sublabel}</label>
-    </Icon>
-  );
-};
-IconButtonSvg.defaultProps = { theme: {} };
-const _t = withTheme(IconButtonSvg);
-export { _t as IconButtonSvg };

package/src/iconos/index.js

@@ -1,2 +0,0 @@
-export * from "./constants-svg";
-export * from "./icon-button-svg";

package/src/iconos/styled-icon.jsx

@@ -1,25 +0,0 @@
-import { styled } from 'styled-components';
-
- 
-const IconDiv = (props) => <div {...props} />;
-
-export const Icon = styled(IconDiv)`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  svg {
-    margin: 0.1rem;
-    margin-right: 0.1rem;
-    margin-top: 0.1rem;
-    justify-content: center;
-    color: red;
-    width: ${(props) => props.width || '3rem'};
-    height: ${(props) => props.height || props.width || '3rem'};
-    cursor: pointer;
-  }
-  label {
-    display: ${(props) => props.display || 'none'};
-  }
-`;
-

package/src/index.css

@@ -1,74 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 0.2;
-  font-weight: 400;
-
-  color-scheme: inherit; 
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 1.2em;
-  line-height: 1.1;
-}
-
-h2 {
-  font-size: 1.2em;
-  line-height: 1.1;
-}
-
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: grey;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

package/src/index.js

@@ -1,13 +0,0 @@
-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/main.jsx

@@ -1,7 +0,0 @@
-import { createRoot } from 'react-dom/client';
-import './assets/css/vendor/bootstrap.min.css';
-import './assets/css/vendor/bootstrap.rtl.only.min.css';
-import './assets/css/sass/themes/gogo.light.redruby.scss';
-import App from './App';
-
-createRoot(document.getElementById('root')).render(<App />);

package/src/select/constants.js

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

package/src/select/index.tsx

@@ -1,147 +0,0 @@
-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
-
-export 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}
-      />
-    </>
-  );
-};
-

package/src/test-resources.jsx

@@ -1,145 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,54 +0,0 @@
-.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;
-}

package/src/tomar-foto/index.jsx

@@ -1,69 +0,0 @@
-import { useState } from 'react';
-import { Row } from 'reactstrap';
-import { DropzoneUploader, Colxx } from '../';
-import { TAKE_PHOTO } from '../constants';
-import imgHacerFoto from '../assets/img/take-photo.png';
-
- 
-export const TomarFoto = ({
-  onFilesSelectedSelfie = () => {},
-  isMobile = false,
-}) => {
-  const [filesTotalSelectedSelfie, setTotalFilesSelectedSelfie] = useState(0);
-  const {
-    LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE,
-    MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE,
-    TAKE_PHOTO_MESSAGE,
-  } = TAKE_PHOTO;
-
-  const handleFilesSelectedSelfie = (files) => {
-    setTotalFilesSelectedSelfie(files.length);
-    onFilesSelectedSelfie(files);
-  };
-
-  return (
-    <>
-      <Row className="pt-2 ml-4">
-        <Colxx xxs="11" md="5">
-          {LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE}
-        </Colxx>
-      </Row>
-      <Row className="pt-2 ml-2">
-        <Colxx xxs="12" md="9">
-          {isMobile ? (
-            <>
-              <Colxx xxs="12" className="text-center">
-                {filesTotalSelectedSelfie === 0 && (
-                  <img
-                    style={{ width: '97%' }}
-                    alt="hacerFotoDNI"
-                    src={imgHacerFoto}
-                  />
-                )}
-                <DropzoneUploader
-                  className="pt-2 ml-2"
-                  maxFiles={1}
-                  onChangeFiles={handleFilesSelectedSelfie}
-                  totalFiles={filesTotalSelectedSelfie}
-                  accept="image/jpg,image/jpeg"
-                  capture="environment"
-                  nameFileLabel={TAKE_PHOTO_MESSAGE}
-                />
-              </Colxx>
-            </>
-          ) : (
-            <h2
-              className={'view-icon iconsminds-smartphone-4 ml-2 mr-2'}
-              style={{
-                color: 'red',
-                margin: '10px 10px 0px 10px',
-              }}
-            >
-              {MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE}
-            </h2>
-          )}
-        </Colxx>
-      </Row>
-    </>
-  );
-};

package/src/view-layout/button-editor.jsx

@@ -1,18 +0,0 @@
-import './styles.scss';
-
-const ButtonEditor = ({ activo, onClick }) => (
-  <button
-    className={`visualizador-editor-btn ${
-      activo
-        ? 'visualizador-editor-btn--activo'
-        : 'visualizador-editor-btn--inactivo'
-    }`}
-    onClick={onClick}
-  >
-    <span>
-      <i className="icon-eye simple-icon-eye" />
-    </span>
-  </button>
-);
-
-export default ButtonEditor;

package/src/view-layout/constants.js

@@ -1,7 +0,0 @@
-export const GRID_SIZES = {
-  sm: { cols: 18, rows: 18 },
-  md: { cols: 12, rows: 12 },
-  lg: { cols: 6, rows: 6 },
-};
-
-export const LOCALHOST = ['localhost', '127.0.0.1'];