test-crud/components/forms/AppTextField.jsx

es una prueba acerca de como publicar un package name

import { useEffect, useRef, useState } from 'react'
import { useFormikContext } from 'formik'
import { IconButton } from '@mui/material'
import GTranslateIcon from '@mui/icons-material/GTranslate'
import useApi from 'hooks/useApi'
import { traducirPalabra } from 'api/horasApi'
import Input from '../inputs/textField'
import AppTextFieldTraductor from './AppTextFieldTraductor'

function AppTextField({
  name,
  label,
  prefix = '',
  defaultValue = '',
  onBlur = null,
  upperCase = true,
  predefinido = '',
  onChange = (row) => {},
  customButton = null,
  isOnlyEditOrNew = false,
  ...rest
}) {
  const {
    data: dataTraducido,
    loading: cargandoTraducir,
    error: errorTraducir,
    request: traducir,
  } = useApi(traducirPalabra, null)

  const [value, setValue] = useState(defaultValue)
  const [newText1, setNewText1] = useState('')
  const [openDialog, setOpenDialog] = useState(false)
  const [idioma, setIdioma] = useState('ES')
  const [idiomaDestino, setIdiomaDestino] = useState('EN')

  const {
    setFieldValue,
    setFieldTouched,
    errors,
    touched,
    values,
    initialValues,
  } = useFormikContext()
  const [currentCaretPos, setCurrentCaretPos] = useState()

  const inputRef = useRef()

  useEffect(() => {
    if (values[name]) {
      //setValue(values[name]);
      //if (values) setFieldValue(name, values[name]);
    } else {
      setValue(prefix)
      setFieldValue(name, prefix)
    }
    inputRef.current.selectionStart = currentCaretPos
    inputRef.current.selectionEnd = currentCaretPos
  }, [prefix])

  useEffect(() => {
    if (initialValues) {
      setFieldValue(name, values[name])
      setValue(values[name])
    }

    if (defaultValue) {
      setFieldValue(name, defaultValue)
      setValue(defaultValue)
    }
  }, [initialValues, defaultValue])

  useEffect(() => {
    inputRef.current.selectionStart = currentCaretPos
    inputRef.current.selectionEnd = currentCaretPos
  }, [currentCaretPos])

  useEffect(() => {
    if (predefinido && predefinido != '') {
      setValue(predefinido)
      setFieldValue(name, predefinido)
    }
  }, [predefinido])

  useEffect(() => {
    if (dataTraducido !== null) {
      setNewText1(dataTraducido.translations[0].text.toUpperCase())
    } else {
      setNewText1('')
    }
  }, [dataTraducido])

  const handleChangeInput = (event) => {
    setValue(upperCase ? event.target.value.toUpperCase() : event.target.value)
    setFieldValue(
      name,
      upperCase ? event.target.value.toUpperCase() : event.target.value
    )

    onChange &&
      onChange(
        upperCase ? event.target.value.toUpperCase() : event.target.value
      )

    let newCaretPos = inputRef.current?.selectionStart
    setCurrentCaretPos(newCaretPos)

    const newText = upperCase
      ? event.target.value.toUpperCase()
      : event.target.value
    setValue(newText)
  }

  const handleBlurInput = () => {
    setFieldTouched(name)
    if (onBlur) onBlur(value)
  }

  const handleChangeIdioma = (event) => {
    setIdioma(event.target.value)
  }

  const handleChangeIdiomaDestino = (event) => {
    setIdiomaDestino(event.target.value)
  }

  const handleSwapValueIdioma = () => {
    setIdioma(idiomaDestino)
    setIdiomaDestino(idioma)
  }

  const handleTraslate = async () => {
    await traducir({
      text: [value],
      source_lang: 'ES',
      target_lang: 'EN',
    })
    setOpenDialog((prev) => !prev)
  }

  const handleClickTraslate = async () => {
    if (value.length > 1) {
      await traducir({
        text: [value],
        source_lang: idioma,
        target_lang: idiomaDestino,
      })
    }
  }

  const handleCheckTraslate = () => {
    setValue(newText1.toUpperCase())
    setFieldValue(name, newText1)
    setOpenDialog(false)
  }

  return (
    <>
      {isOnlyEditOrNew ? (
        <div>
          <Input
            value={value}
            label={label}
            onBlur={handleBlurInput}
            onChange={handleChangeInput}
            touched={touched[name]}
            error={touched[name] && errors[name] ? true : false}
            helperText={touched[name] && errors[name] ? errors[name] : ''}
            InputProps={{
              endAdornment: (
                <IconButton
                  aria-label="Traducir a ingles"
                  onClick={handleTraslate}
                  disabled={!value}
                  size="small"
                >
                  <GTranslateIcon />
                </IconButton>
              ),
            }}
            color={touched[name] && !errors[name] ? 'success' : ''}
            inputRef={inputRef}
            customButton={customButton}
            {...rest}
          />
        </div>
      ) : (
        <>
          <Input
            value={value}
            label={label}
            onBlur={handleBlurInput}
            onChange={handleChangeInput}
            touched={touched[name]}
            error={touched[name] && errors[name] ? true : false}
            helperText={touched[name] && errors[name] ? errors[name] : ''}
            rightIcon={
              touched[name] && !errors[name] && 'fa-solid fa-circle-check'
            }
            color={touched[name] && !errors[name] ? 'success' : ''}
            inputRef={inputRef}
            customButton={customButton}
            {...rest}
          />
        </>
      )}
      <AppTextFieldTraductor
        handleChangeInput={handleChangeInput}
        openDialog={openDialog}
        name={name}
        handleCheckTraslate={handleCheckTraslate}
        handleClickTraslate={handleClickTraslate}
        handleTraslate={handleTraslate}
        newText1={newText1}
        value={value}
        idioma={idioma}
        handleChangeIdioma={handleChangeIdioma}
        idiomaDestino={idiomaDestino}
        handleChangeIdiomaDestino={handleChangeIdiomaDestino}
        handleSwapValueIdioma={handleSwapValueIdioma}
      />
    </>
  )
}

export default AppTextField