npm-pkg-hook 1.0.2 → 1.0.4

package/src/hooks/useFetchMoreInteractions/index.jsx

@@ -1,35 +1,38 @@
-import React, {
-    useState,
-    useEffect,
-    useRef
-} from 'react'
-
-export const useFetchMoreInteractions = ({ render, fetchMore = true, callback = () => {} }) => {
-    const loadingRef = useRef()
-
-    const useOnScreen = ref => {
-        const [isIntersecting, setIsIntersecting] = useState(false)
-
-        const observer = new IntersectionObserver(
-            ([entry]) => setIsIntersecting(entry.isIntersecting)
-        )
-
-        useEffect(() => {
-            if (ref.current) observer.observe(ref.current)
-            // Remove the observer as soon as the component is unmounted
-            return () => { observer.disconnect() }
-        }, [ref, observer])
-
-        return isIntersecting
-    }
-
-    const isVisible = useOnScreen(loadingRef)
-
-    useEffect(() => {
-        if (isVisible && fetchMore) callback()
-    }, [isVisible, callback, fetchMore])
-
-    return <div ref={loadingRef}>
-        {isVisible && fetchMore ? render || <div style={{ background: 'red' }} >Loading...{isVisible && 'lol'}</div> : <></>}
-    </div>
+import React, {
+    useEffect,
+    useRef, useState
+} from 'react'
+
+export const useFetchMoreInteractions = ({
+    render,
+    fetchMore = true,
+    callback = () => {}
+}) => {
+    const loadingRef = useRef()
+
+    const useOnScreen = ref => {
+        const [isIntersecting, setIsIntersecting] = useState(false)
+
+        const observer = new IntersectionObserver(
+            ([entry]) => setIsIntersecting(entry.isIntersecting)
+        )
+
+        useEffect(() => {
+            if (ref.current) observer.observe(ref.current)
+            // Remove the observer as soon as the component is unmounted
+            return () => { observer.disconnect() }
+        }, [ref, observer])
+
+        return isIntersecting
+    }
+
+    const isVisible = useOnScreen(loadingRef)
+
+    useEffect(() => {
+        if (isVisible && fetchMore) callback()
+    }, [isVisible, callback, fetchMore])
+
+    return <div ref={loadingRef}>
+        {isVisible && fetchMore ? render || <div style={{ background: 'red' }} >Loading...{isVisible && 'lol'}</div> : <></>}
+    </div>
 }

package/src/hooks/useFormTools/index.js

@@ -1,71 +1,84 @@
-import {
-  useCallback,
-  useEffect,
-  useState
-  } from 'react'
-import { validationSubmitHooks } from '../../utils'
-/**
- * @version 0.0.1
- * @description Hook con herramientas de validación y eventos de cambio
- * @return {Array} devuelve la función onChange a ejecutar y el estado de error de cada input
- */
-export const useFormTools = () => {
-  const [dataForm, setDataForm] = useState({})
-  const [errorForm, setErrorForm] = useState({})
-  const [errorSubmit, setErrorSubmit] = useState(false)
-  const [calledSubmit, setCalledSubmit] = useState(false)
-
-  // Handle Change
-  const handleChange = useCallback((e, error) => {
-    setDataForm({ ...dataForm, [e.target.name]: e.target.value })
-    setErrorForm({ ...errorForm, [e.target.name]: error })
-  }, [setDataForm, dataForm, errorForm, setErrorForm])
-
-  // Forzar datos desde una ventana externa
-  const handleForcedData = useCallback(data => {
-    setDataForm(data)
-  }, [setDataForm])
-
-  // Forzar datos de error desde una ventana externa
-  const setForcedError = useCallback(errors => {
-    setErrorForm(errors)
-  }, [setErrorForm])
-
-  // Handle submit, al enviar formulario
-  const handleSubmit = useCallback(({ event, action, msgSuccess, msgError, actionAfterSuccess }) => {
-    !!event && event.preventDefault()
-    setCalledSubmit(true)
-    let errSub = false
-
-    // Valida los errores locales
-    for (const x in errorForm) {
-      if (errorForm[x]) errSub = true
-    }
-
-    // if (errSub) return setErrorSubmit(errSub)
-
-    // Valida los errores desde el evento
-    const errores = validationSubmitHooks(event.target.elements)
-    setErrorForm(errores)
-    for (const x in errores) {
-      if (errores[x]) errSub = true
-    }
-
-    // Ejecuta la petición si es válido
-    if (!errSub && action) {
-      action().then(res => {
-        if (res) {
-          // setAlertBox({ message: msgSuccess || 'Operación exitosa', color: PColor })
-          !!actionAfterSuccess && actionAfterSuccess()
-        }
-
-      }).catch(e => {return console.log({ message: msgError || e?.message || 'Ha ocurrido un error', color: WColor })})
-    }
-
-    setErrorSubmit(errSub)
-  }, [errorForm, setErrorForm])
-
-  useEffect(() => {return setCalledSubmit(false)}, [calledSubmit])
-
-  return [handleChange, handleSubmit, handleForcedData, { dataForm, errorForm, errorSubmit, calledSubmit, setForcedError }]
+import {
+  useCallback,
+  useEffect,
+  useState
+} from 'react'
+import { validationSubmitHooks } from '../../utils'
+/**
+ * @version 0.0.1
+ * @description Hook con herramientas de validación y eventos de cambio
+ * @return {Array} devuelve la función onChange a ejecutar y el estado de error de cada input
+ */
+export const useFormTools = () => {
+  const [dataForm, setDataForm] = useState({})
+  const [errorForm, setErrorForm] = useState({})
+  const [errorSubmit, setErrorSubmit] = useState(false)
+  const [calledSubmit, setCalledSubmit] = useState(false)
+  // Handle Change
+  const handleChange = useCallback((e, error) => {
+    setDataForm({ ...dataForm, [e.target.name]: e.target.value })
+    setErrorForm({ ...errorForm, [e.target.name]: error })
+  }, [setDataForm, dataForm, errorForm, setErrorForm])
+
+  // Forzar datos desde una ventana externa
+  const handleForcedData = useCallback(data => {
+    setDataForm(data)
+  }, [setDataForm])
+
+  // Forzar datos de error desde una ventana externa
+  const setForcedError = useCallback(errors => {
+    setErrorForm(errors)
+  }, [setErrorForm])
+
+  // Handle submit, al enviar formulario
+  const listErrors = Object.values(errorForm)
+  const errors = listErrors.find((error) => {
+    return error ===true
+  })
+
+  const handleSubmit = useCallback(({ event, action, msgSuccess, msgError, actionAfterSuccess }) => {
+    !!event && event.preventDefault()
+    setCalledSubmit(true)
+    let errSub = false
+
+    // Valida los errores locales
+    for (const x in errorForm) {
+      if (errorForm[x]) errSub = true
+    }
+
+    if (errors) {
+      setErrorSubmit(true)
+    return setForcedError({ ...errorForm })
+  }
+
+    if (errSub) return setErrorSubmit(errSub)
+
+    // Valida los errores desde el evento
+    const errores = validationSubmitHooks(event.target.elements)
+    setErrorForm(errores)
+    console.log("🚀 ~ file: index.js ~ line 50 ~ handleSubmit ~ errores", errores)
+    for (const x in errores) {
+      if (errores[x]) errSub = true
+    }
+
+    // Ejecuta la petición si es válido
+    if (!errSub && action) {
+      action().then(res => {
+        if (res) {
+          // setAlertBox({ message: msgSuccess || 'Operación exitosa', color: PColor })
+          !!actionAfterSuccess && actionAfterSuccess()
+        }
+
+      }).catch(e => {return console.log({ message: msgError || e?.message || 'Ha ocurrido un error', color: WColor })})
+    }
+
+    setErrorSubmit(errSub)
+  }, [errorForm, setErrorForm])
+
+  useEffect(() => {return setCalledSubmit(false)}, [calledSubmit])
+  useEffect(() => {
+    return setCalledSubmit(false)},
+  [])
+
+  return [handleChange, handleSubmit, handleForcedData, { dataForm, errorForm, errorSubmit, calledSubmit, setForcedError }]
 }

package/src/hooks/useFormatDate/index.js

@@ -0,0 +1,34 @@
+export const useFormatDate = ({
+    date,
+    local = 'ES'
+}) => {
+    const dateToFormat = new Date(date ?? Date.now())
+    const fullDate = dateToFormat.toLocaleDateString(local, { year: 'numeric', month: '2-digit', day: '2-digit' })
+    const day = fullDate.split('/')[0]
+    const month = fullDate.split('/')[1]
+    const year = fullDate.split('/')[2]
+    const yearMonthDay = dateToFormat.toLocaleDateString('en-CA')
+    const numberDay = dateToFormat.getDay()
+    const shortDayName = dateToFormat.toLocaleDateString(local, { weekday: 'short' })
+    const longDayName = dateToFormat.toLocaleDateString(local, { weekday: 'long' })
+    const hourMinutes12 = dateToFormat.toLocaleTimeString('ES-CO', { hour: '2-digit', minute: '2-digit' })
+    const hourMinutes24 = dateToFormat.toLocaleTimeString('ES-CO', { hour: '2-digit', minute: '2-digit', hour12: false })
+    const handleHourPmAM = (hour) => {
+        const hourPmAm = new Date(`1/1/1999 ${hour}`).toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })
+        return hour ? hourPmAm : ''
+    }
+    return {
+    day,
+    fullDate,
+    hourMinutes12,
+    numberDay,
+    yearMonthDay,
+    hourMinutes24,
+    longDayName,
+    shortDayName,
+    month,
+    year,
+    handleHourPmAM,
+    }
+}
+

package/src/hooks/useFullScreenMode/index.js

@@ -1,66 +1,66 @@
-import React, { useState, useRef, useEffect } from 'react'
-import styled from 'styled-components'
-
-const useFullscreenMode = () => {
-  const [isFullscreen, setFullscreen] = useState(false)
-  const elementRef = useRef()
-
-  useEffect(() => {
-    const changeHandler = () => {return setFullscreen(mode => {return !mode})}
-
-    document.addEventListener('fullscreenchange', changeHandler, false)
-    document.addEventListener('mozfullscreenchange', changeHandler, false)
-    document.addEventListener('MSFullScreenChange', changeHandler, false)
-    document.addEventListener(
-      'webkitfullscreenchange',
-      changeHandler,
-      false
-    )
-
-    return () => {
-      document.removeEventListener('fullscreenchange', changeHandler)
-      document.removeEventListener('mozfullscreenchange', changeHandler)
-      document.removeEventListener('MSFullScreenChange', changeHandler)
-      document.removeEventListener(
-        'webkitfullscreenchange',
-        changeHandler
-      )
-    }
-  }, [])
-
-  const goFullscreen = () => {
-    if (elementRef.current.requestFullscreen) {
-      elementRef.current.requestFullscreen()
-    } else if (elementRef.current.mozRequestFullscreen) {
-      //Firefox
-      elementRef.current.mozRequestFullscreen()
-    } else if (elementRef.current.webkitRequestFullscreen) {
-      //Chrome, safari, opera
-      elementRef.current.webkitRequestFullscreen()
-    } else if (elementRef.current.msRequestFullscreen) {
-      //IE, edge
-      elementRef.current.msRequestFullscreen()
-    }
-  }
-
-  const exitFullScreen = () => {
-    if (document.exitFullscreen) {
-      document.exitFullscreen()
-    } else if (document.mozCancelFullScreen) {
-      document.mozCancelFullScreen()
-    } else if (document.webkitExitFullscreen) {
-      document.webkitExitFullscreen()
-    } else if (document.msExitFullscreen) {
-      document.msExitFullscreen()
-    }
-  }
-
-  const ToggleIcon = (
-    <Button onDoubleClick={() => {return (!isFullscreen ? goFullscreen() : exitFullScreen())}}>{!isFullscreen ? 'FullScreen' : 'Normal'}</Button>
-  )
-  return [elementRef, ToggleIcon] //Icon, ref
-}
-const Button = styled.button`
-
-`
+import React, { useState, useRef, useEffect } from 'react'
+import styled from 'styled-components'
+
+const useFullscreenMode = () => {
+  const [isFullscreen, setFullscreen] = useState(false)
+  const elementRef = useRef()
+
+  useEffect(() => {
+    const changeHandler = () => {return setFullscreen(mode => {return !mode})}
+
+    document.addEventListener('fullscreenchange', changeHandler, false)
+    document.addEventListener('mozfullscreenchange', changeHandler, false)
+    document.addEventListener('MSFullScreenChange', changeHandler, false)
+    document.addEventListener(
+      'webkitfullscreenchange',
+      changeHandler,
+      false
+    )
+
+    return () => {
+      document.removeEventListener('fullscreenchange', changeHandler)
+      document.removeEventListener('mozfullscreenchange', changeHandler)
+      document.removeEventListener('MSFullScreenChange', changeHandler)
+      document.removeEventListener(
+        'webkitfullscreenchange',
+        changeHandler
+      )
+    }
+  }, [])
+
+  const goFullscreen = () => {
+    if (elementRef.current.requestFullscreen) {
+      elementRef.current.requestFullscreen()
+    } else if (elementRef.current.mozRequestFullscreen) {
+      //Firefox
+      elementRef.current.mozRequestFullscreen()
+    } else if (elementRef.current.webkitRequestFullscreen) {
+      //Chrome, safari, opera
+      elementRef.current.webkitRequestFullscreen()
+    } else if (elementRef.current.msRequestFullscreen) {
+      //IE, edge
+      elementRef.current.msRequestFullscreen()
+    }
+  }
+
+  const exitFullScreen = () => {
+    if (document.exitFullscreen) {
+      document.exitFullscreen()
+    } else if (document.mozCancelFullScreen) {
+      document.mozCancelFullScreen()
+    } else if (document.webkitExitFullscreen) {
+      document.webkitExitFullscreen()
+    } else if (document.msExitFullscreen) {
+      document.msExitFullscreen()
+    }
+  }
+
+  const ToggleIcon = (
+    <Button onDoubleClick={() => {return (!isFullscreen ? goFullscreen() : exitFullScreen())}}>{!isFullscreen ? 'FullScreen' : 'Normal'}</Button>
+  )
+  return [elementRef, ToggleIcon] //Icon, ref
+}
+const Button = styled.button`
+
+`
 export default useFullscreenMode

package/src/hooks/useHover/index.js

@@ -1,29 +1,29 @@
-import { useRef, useState, useEffect } from 'react'
-
-export default function useHover() {
-  const [value, setValue] = useState(false)
-
-  const ref = useRef(null)
-
-  const handleMouseOver = () => {return setValue(true)}
-  const handleMouseOut = () => {return setValue(false)}
-
-  useEffect(
-    () => {
-      const node = ref.current
-      if (node) {
-        node.addEventListener('mouseover', handleMouseOver)
-        node.addEventListener('mouseout', handleMouseOut)
-
-        return () => {
-          node.removeEventListener('mouseover', handleMouseOver)
-          node.removeEventListener('mouseout', handleMouseOut)
-        }
-      }
-      return {}
-    },
-    [] // Recall only if ref changes
-  )
-
-  return [ref, value]
+import { useRef, useState, useEffect } from 'react'
+
+export default function useHover() {
+  const [value, setValue] = useState(false)
+
+  const ref = useRef(null)
+
+  const handleMouseOver = () => {return setValue(true)}
+  const handleMouseOut = () => {return setValue(false)}
+
+  useEffect(
+    () => {
+      const node = ref.current
+      if (node) {
+        node.addEventListener('mouseover', handleMouseOver)
+        node.addEventListener('mouseout', handleMouseOut)
+
+        return () => {
+          node.removeEventListener('mouseover', handleMouseOver)
+          node.removeEventListener('mouseout', handleMouseOut)
+        }
+      }
+      return {}
+    },
+    [] // Recall only if ref changes
+  )
+
+  return [ref, value]
 }

package/src/hooks/useImageOptimization/index.js

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+// use it
+// const imageUrl = 'https://example.com/image.jpg';
+// const optimizedUrl = useImageOptimization(imageUrl);
+
+export function useImageOptimization(imageUrl) {
+  const [optimizedUrl, setOptimizedUrl] = useState(null);
+
+  useEffect(() => {
+    const image = new Image();
+    image.src = imageUrl;
+
+    image.onload = () => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+
+      canvas.width = image.width;
+      canvas.height = image.height;
+
+      ctx.drawImage(image, 0, 0, image.width, image.height);
+
+      const optimizedUrl = canvas.toDataURL('image/jpeg', 0.8);
+      setOptimizedUrl(optimizedUrl);
+    };
+  }, [imageUrl]);
+
+  return optimizedUrl;
+}

package/src/hooks/useImageWeight/index.js

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+
+export function useImageWeight(imageUrl) {
+  const [weight, setWeight] = useState(null);
+
+  useEffect(() => {
+    const image = new Image();
+    image.src = imageUrl;
+
+    image.onload = () => {
+      const xhr = new XMLHttpRequest();
+      xhr.open('HEAD', imageUrl, true);
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+          const contentLength = xhr.getResponseHeader('Content-Length');
+          setWeight(contentLength);
+        }
+      };
+      xhr.send();
+    };
+  }, [imageUrl]);
+
+  return weight;
+}
+
+// I use 
+// function MyComponent() {
+//     const imageUrl = 'https://example.com/image.jpg';
+//     const weight = useImageWeight(imageUrl);
+  
+//     return (
+//       <div>
+//         <img src={imageUrl} alt="My Image" />
+//         {weight ? `Peso de imagen: ${weight} bytes` : 'Cargando...'}
+//       </div>
+//     );
+//   }
+  
+// const weightInMB = weight / (1024 * 1024);
+
+// function MyComponent() {
+//     const imageUrl = 'https://example.com/image.jpg';
+//     const weight = useImageWeight(imageUrl);
+  
+//     return (
+//       <div>
+//         <img src={imageUrl} alt="My Image" />
+//         {weight ? `Peso de imagen: ${(weight / (1024 * 1024)).toFixed(2)} MB` : 'Cargando...'}
+//       </div>
+//     );
+//   }
+