test-crud/components/forms/AppSearchInput.jsx

es una prueba acerca de como publicar un package name

import React, { useState, useEffect } from 'react'
import { useFormikContext } from 'formik'
import SearchInput from '../inputs/searchInput'

function AppSearchInput({
  name,
  label,
  valueProperty = 'id',
  labelProperty,
  asyncData,
  asyncParameters,
  onSelect,
  onClose,
  endAdornment = null,
  defaultValue = null,
  setValue = null || '', // (string) Selecciona el valor del select, no solo cuando se inicializa el componente.
  size = 'normal',
  variant = 'outlined',
  autoSelect = true,
  onClickTxtField = null,
  ...rest
}) {
  const [open, setOpen] = useState(false)
  const [options, setOptions] = useState([])
  const [inputValue, setInputValue] = useState('')
  const loading = open && options.length === 0

  const {
    setFieldValue,
    setFieldTouched,
    errors,
    touched,
    values,
    initialValues,
  } = useFormikContext()

  useEffect(() => {
    let active = true
    if (!loading) return undefined

    if (asyncData) {
      asyncData(asyncParameters).then((res) => {
        if (res.data) {
          if (active) setOptions(res.data)
        }
      })
    }

    return () => {
      active = false
    }
  }, [loading])

  useEffect(() => {
    if (!open) {
      setOptions([])
    }
  }, [open])

  useEffect(() => {
    setFieldValue(name, values[name], false)
    if (asyncData) {
      asyncData(asyncParameters).then((res) => {
        if (res.data) {
          setOptions(res.data)
          const newItem = res.data.find(
            (item) => item?.[valueProperty] === values[name]
          )

          if (newItem) {
            setInputValue(newItem[labelProperty])
            setFieldValue(name, newItem[valueProperty])
            onSelect && onSelect(newItem)
          }
        }
      })
    } else {
      if (Object.keys(initialValues).length > 0) {
        if (rest.options && rest.options.length > 0) {
          const newItem = rest.options.filter(
            (item) => item?.[valueProperty] === values[name]
          )
          if (newItem.length > 0) {
            setInputValue(newItem[0][labelProperty])
            setFieldValue(name, newItem[0][valueProperty])
            onSelect && onSelect(newItem[0])
          }
        }
      }
    }
  }, [initialValues])

  useEffect(() => {
    if (values) {
      // setFieldValue(name, '')
      // setInputValue('')

      if (onSelect) onSelect()

      if (asyncData) {
        asyncData(asyncParameters).then((res) => {
          if (res.data) {
            setOptions(res.data)
            const newItem = res.data.find(
              (item) => item?.[valueProperty] === values[name]
            )
            if (newItem && !setValue) {
              setInputValue(newItem[labelProperty].toString())
              setFieldValue(name, newItem[valueProperty])
              onSelect && onSelect(newItem)
            }

            if ((res.data.length === 1) & autoSelect) {
              const singleItem = res.data[0]
              setFieldValue(name, singleItem[valueProperty])
              setInputValue(singleItem[labelProperty])
              onSelect && onSelect(singleItem)
            }

            if (defaultValue || setValue) {
              const defaultItem = res.data.find(
                (item) =>
                  item?.[valueProperty] === defaultValue ||
                  item?.[valueProperty] === setValue
              )

              if (defaultItem) {
                setInputValue(defaultItem[labelProperty].toString())
                setFieldValue(name, defaultItem[valueProperty])

                onSelect && onSelect(defaultItem)
              }
            }
          }
        })
      } else {
        if (setValue) {
          if (rest.options && rest.options.length > 0) {
            const newItem = rest.options.filter(
              (item) =>
                item?.[valueProperty] === values[name] ||
                item?.[valueProperty] === setValue
            )
            if (newItem.length > 0) {
              setInputValue(newItem[0][labelProperty])
              setFieldValue(name, newItem[0][valueProperty])
              onSelect && onSelect(newItem[0])
            }
          }
        }
      }
      if (!values[name]) setFieldValue(name, '')
      if (!values[name]) setInputValue('')
    }
  }, [asyncParameters, setValue])

  useEffect(() => {
    if (values[name]) {
      if (options?.length === 0) return
      const newItem = options.find(
        (item) => item?.[valueProperty] === values[name]
      )
      if (newItem) {
        setInputValue(newItem[labelProperty])
        setFieldValue(name, newItem[valueProperty])
        onSelect && onSelect(newItem)
      } else {
        setInputValue('')
        // setFieldValue(name, '')
        // onSelect && onSelect()
      }
    }
  }, [values[name]])

  useEffect(() => {
    if (rest.options && rest.options.length > 0) {
      setOptions(rest.options)
    }
  }, [rest.options])

  const handleSelect = (item) => {
    if (!item) {
      setInputValue('')
      setFieldValue(name, '')
      onSelect && onSelect(item)
      return
    }

    setFieldValue(name, item[valueProperty])
    onSelect && onSelect(item)
  }

  return (
    <div>
      <SearchInput
        name={name}
        label={label}
        value={values && values[name]}
        inputValue={inputValue}
        options={options}
        getOptionLabel={(option) => option?.[labelProperty] || ''}
        isOptionEqualToValue={(option, value) =>
          option?.[valueProperty] === value ||
          option?.[valueProperty] === value[valueProperty]
        }
        open={open}
        onOpen={() => setOpen(true)}
        onClose={() => setOpen(false)}
        loading={loading}
        onBlur={(event) => {
          setFieldTouched(name)
          // setInputValue(event.target.value)
        }}
        onChange={(event, newValue) => handleSelect(newValue)}
        onInputChange={(event, newValue) => {
          if (event) {
            if (newValue.length < 1) {
              setFieldValue(name, '')
            }
            setInputValue(newValue.toString())
          }
        }}
        touched={touched[name]}
        errorMessage={errors[name]}
        endAdornment={endAdornment}
        size={size}
        variant={variant}
        onClickTxtField={onClickTxtField}
        {...rest}
      />
    </div>
  )
}

export default AppSearchInput